1 | var w = 960, |
---|
2 | h = 50, |
---|
3 | m = [5, 40, 20, 120]; // top right bottom left |
---|
4 | |
---|
5 | var chart = d3.chart.bullet() |
---|
6 | .width(w - m[1] - m[3]) |
---|
7 | .height(h - m[0] - m[2]); |
---|
8 | |
---|
9 | d3.json("bullets.json", function(data) { |
---|
10 | |
---|
11 | var vis = d3.select("#chart").selectAll("svg") |
---|
12 | .data(data) |
---|
13 | .enter().append("svg:svg") |
---|
14 | .attr("class", "bullet") |
---|
15 | .attr("width", w) |
---|
16 | .attr("height", h) |
---|
17 | .append("svg:g") |
---|
18 | .attr("transform", "translate(" + m[3] + "," + m[0] + ")") |
---|
19 | .call(chart); |
---|
20 | |
---|
21 | var title = vis.append("svg:g") |
---|
22 | .attr("text-anchor", "end") |
---|
23 | .attr("transform", "translate(-6," + (h - m[0] - m[2]) / 2 + ")"); |
---|
24 | |
---|
25 | title.append("svg:text") |
---|
26 | .attr("class", "title") |
---|
27 | .text(function(d) { return d.title; }); |
---|
28 | |
---|
29 | title.append("svg:text") |
---|
30 | .attr("class", "subtitle") |
---|
31 | .attr("dy", "1em") |
---|
32 | .text(function(d) { return d.subtitle; }); |
---|
33 | |
---|
34 | chart.duration(1000); |
---|
35 | window.transition = function() { |
---|
36 | vis.map(randomize).call(chart); |
---|
37 | }; |
---|
38 | }); |
---|
39 | |
---|
40 | function randomize(d) { |
---|
41 | if (!d.randomizer) d.randomizer = randomizer(d); |
---|
42 | d.ranges = d.ranges.map(d.randomizer); |
---|
43 | d.markers = d.markers.map(d.randomizer); |
---|
44 | d.measures = d.measures.map(d.randomizer); |
---|
45 | return d; |
---|
46 | } |
---|
47 | |
---|
48 | function randomizer(d) { |
---|
49 | var k = d3.max(d.ranges) * .2; |
---|
50 | return function(d) { |
---|
51 | return Math.max(0, d + k * (Math.random() - .5)); |
---|
52 | }; |
---|
53 | } |
---|