Skip to content

Instantly share code, notes, and snippets.

@brickgao

brickgao/gist:6270713

Last active December 21, 2015 07:19
Show Gist options
  • Save brickgao/6270713 to your computer and use it in GitHub Desktop.
Save brickgao/6270713 to your computer and use it in GitHub Desktop.
Download ZIP
D3.js Learning
Raw
gistfile1.html
<!--A bar Chart Part1-sample1-->
<!DOCTYPE html>
<html>
<head>
<title>A bar Chart Part 1</title>
<style type="text/css">
body {
height: 100%;
}
.chart div {
font: 10px sans-serif;
background-color: steelblue;
text-align: right;
padding: 3px;
margin: 1px;
color: white;
}
</style>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
</head>
<body>
</body>
<script type="text/javascript">
var data = [4, 8, 15, 16, 23, 42];
var chart = d3.select("body").append("div")
.attr("class", "chart");
chart.selectAll("div")
.data(data)
.enter().append("div")
.style("width", function(d){ return d * 10 + "px"; })
.text(function(d) { return d; });
</script>
</html>
Raw
gistfile2.html
<!--A bar Chart Part1-sample2-->
<!DOCTYPE html>
<html>
<head>
<title>A bar Chart Part 1</title>
<style type="text/css">
body {
height: 100%;
}
.chart div {
font: 10px sans-serif;
background-color: steelblue;
text-align: right;
padding: 3px;
margin: 1px;
color: white;
}
</style>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
</head>
<body>
</body>
<script type="text/javascript">
var data = [4, 8, 15, 16, 23, 42];
var chart = d3.select("body").append("div")
.attr("class", "chart");
var x = d3.scale.linear()
.domain([0, d3.max(data)])
.range(["0px", "600px"]);
chart.selectAll("div")
.data(data)
.enter().append("div")
.style("width", x)
.text(String);
</script>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment