[76] | 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 | } |
---|