public
Last active

[dd3] d3.js selection tutorial

  • Download Gist
bar.js
JavaScript
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101
//Simple d3.js barchart example to illustrate d3 selections
 
//other good related tutorials
//http://www.recursion.org/d3-for-mere-mortals/
//http://mbostock.github.com/d3/tutorial/bar-1.html
 
 
var w = 300
var h = 300
 
 
function bars(data)
{
 
max = d3.max(data)
 
//nice breakdown of d3 scales
//http://www.jeromecukier.net/blog/2011/08/11/d3-scales-and-color/
x = d3.scale.linear()
.domain([0, max])
.range([0, w])
 
y = d3.scale.ordinal()
.domain(d3.range(data.length))
.rangeBands([0, h], .2)
 
 
var vis = d3.select("#barchart")
//a good written tutorial of d3 selections coming from protovis
//http://www.jeromecukier.net/blog/2011/08/09/d3-adding-stuff-and-oh-understanding-selections/
var bars = vis.selectAll("rect.bar")
.data(data)
 
//update
bars
.attr("fill", "#0a0")
.attr("stroke", "#050")
 
//enter
bars.enter()
.append("svg:rect")
.attr("class", "bar")
.attr("fill", "#800")
.attr("stroke", "#800")
 
 
//exit
bars.exit()
.remove()
 
 
//apply to everything (enter and update)
bars
.attr("stroke-width", 4)
.attr("width", x)
.attr("height", y.rangeBand())
.attr("transform", function(d,i) {
return "translate(" + [0, y(i)] + ")"
})
 
}
 
 
function init()
{
 
//setup the svg
var svg = d3.select("#svg")
.attr("width", w+100)
.attr("height", h+100)
svg.append("svg:rect")
.attr("width", "100%")
.attr("height", "100%")
.attr("stroke", "#000")
.attr("fill", "none")
 
svg.append("svg:g")
.attr("id", "barchart")
.attr("transform", "translate(50,50)")
 
//setup our ui
d3.select("#data1")
.on("click", function(d,i) {
bars(data1)
})
d3.select("#data2")
.on("click", function(d,i) {
bars(data2)
})
d3.select("#random")
.on("click", function(d,i) {
num = document.getElementById("num").value
bars(random(num))
})
 
 
//make the bars
bars(data1)
}
data.json
JSON
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27
var data1 = [
5,
20,
55,
60,
89
]
 
var data2 = [
35,
80,
35,
90,
19,
39,
99
]
 
function random(n)
{
val = []
for(i = 0; i < n; i++)
{
val.push(Math.random() * 100)
}
return val
}
index.html
HTML
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41
<!DOCTYPE html>
<html>
<head>
<title>Bar Example</title>
<script type="text/javascript" src="http://mbostock.github.com/d3/d3.js"></script>
<script type="text/javascript" src="data.json"></script>
<script type="text/javascript" src="bar.js"></script>
 
<style type="text/css">
#demo {
float: left;
}
#vimeo {
padding: 30px;
float: left;
}
</style>
</head>
<body>
 
<div id="demo">
<div id="buttons">
<button id="data1">Set Data to data 1</button>
<button id="data2">Set Data to data 2</button>
<br>
<button id="random">Make Random Data</button>
<input id="num" value=10></input>
</div>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="svg"></svg>
</div>
 
<script type="text/javascript">
init();
</script>
 
<div id="vimeo">
<iframe src="http://player.vimeo.com/video/33097206?title=0&amp;byline=0&amp;portrait=0" width="500" height="313" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe><p><a href="http://vimeo.com/33097206">[dd3] Selections in d3.js with a simple bar chart</a> from <a href="http://vimeo.com/user4640702">Ian Johnson</a> on <a href="http://vimeo.com">Vimeo</a>.</p>
</div>
 
</body>
</html>

Please sign in to comment on this gist.

Something went wrong with that request. Please try again.