Built with blockbuilder.org
Working through the book Getting Started with D3
xxxxxxxxxx
<head>
<meta charset="utf-8">
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<style>
body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
svg { width:100%; height: 100% }
div.chart{
font-family:sans-serif;
font-size:0.7em;
}
div.bar {
background-color:DarkRed;
color:white;
height:3em;
line-height:3em;
padding-right:1em;
margin-bottom:2px;
text-align:right;
margin-left:22em;
}
div.label {
height:3em;
line-height:3em;
padding-right:1em;
margin-bottom:2px;
float:left;
width:20em;
text-align:right;
}
</style>
</head>
<body>
<h1>Mean Daily Plaza Traffic</h1>
<script>
d3.json("plaza_traffic.json", draw);
function draw(data) {
d3.select("body")
.append("div")
.attr("class", "chart")
.selectAll("div.line")
.data(data.cash)
.enter()
.append("div")
.attr("class","line");
d3.selectAll("div.line")
.append("div")
.attr("class","label")
.text(function(d){return d.name});
d3.selectAll("div.line")
.append("div")
.attr("class","bar")
.style("width", function(d){return d.count/100 + "px"})
.text(function(d){return Math.round(d.count)});
}
</script>
</body>
https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js