A simple bar chart build using data from an external JSON file.
forked from Jverma's block: Bar chart from external JSON file
license: mit |
A simple bar chart build using data from an external JSON file.
forked from Jverma's block: Bar chart from external JSON file
[ | |
{ | |
"Letter": "A", | |
"Freq": 20 | |
}, | |
{ | |
"Letter" : "B", | |
"Freq": 12 | |
}, | |
{ | |
"Letter" : "C", | |
"Freq": 47 | |
}, | |
{ | |
"Letter" : "D", | |
"Freq": 34 | |
}, | |
{ | |
"Letter" : "E", | |
"Freq" : 54 | |
}, | |
{ | |
"Letter" : "F", | |
"Freq" : 21 | |
}, | |
{ | |
"Letter" : "G", | |
"Freq" : 57 | |
}, | |
{ | |
"Letter" : "H", | |
"Freq" : 31 | |
}, | |
{ | |
"Letter" : "I", | |
"Freq" : 17 | |
}, | |
{ | |
"Letter" : "J", | |
"Freq" : 5 | |
}, | |
{ | |
"Letter" : "K", | |
"Freq" : 23 | |
}, | |
{ | |
"Letter" : "L", | |
"Freq" : 39 | |
}, | |
{ | |
"Letter" : "M", | |
"Freq" : 29 | |
}, | |
{ | |
"Letter" : "N", | |
"Freq" : 33 | |
}, | |
{ | |
"Letter" : "O", | |
"Freq" : 18 | |
}, | |
{ | |
"Letter" : "P", | |
"Freq" : 35 | |
}, | |
{ | |
"Letter" : "Q", | |
"Freq" : 11 | |
}, | |
{ | |
"Letter" : "R", | |
"Freq" : 45 | |
}, | |
{ | |
"Letter" : "S", | |
"Freq" : 43 | |
}, | |
{ | |
"Letter" : "T", | |
"Freq" : 28 | |
}, | |
{ | |
"Letter" : "U", | |
"Freq" : 26 | |
}, | |
{ | |
"Letter" : "V", | |
"Freq" : 30 | |
}, | |
{ | |
"Letter" : "X", | |
"Freq" : 5 | |
}, | |
{ | |
"Letter" : "Y", | |
"Freq" : 4 | |
}, | |
{ | |
"Letter" : "Z", | |
"Freq" : 2 | |
} | |
] |
<!DOCTYPE html> | |
<meta charset="utf-8"> | |
<title>Streamgraph</title> | |
<style> | |
body { | |
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; | |
margin: auto; | |
position: relative; | |
width: 960px; | |
} | |
button { | |
position: absolute; | |
right: 10px; | |
top: 10px; | |
} | |
</style> | |
<button onclick="transition()">Update</button> | |
<script src="//d3js.org/d3.v3.min.js"></script> | |
<script> | |
var n = 10, // number of layers | |
m = 200, // number of samples per layer | |
stack = d3.layout.stack().offset("wiggle"), | |
layers0 = stack(d3.range(n).map(function() { return bumpLayer(m); })), | |
layers1 = stack(d3.range(n).map(function() { return bumpLayer(m); })); | |
var width = 960, | |
height = 500; | |
var x = d3.scale.linear() | |
.domain([0, m - 1]) | |
.range([0, width]); | |
var y = d3.scale.linear() | |
.domain([0, d3.max(layers0.concat(layers1), function(layer) { return d3.max(layer, function(d) { return d.y0 + d.y; }); })]) | |
.range([height, 0]); | |
var color = d3.scale.linear() | |
.range(["#aad", "#556"]); | |
var area = d3.svg.area() | |
.x(function(d) { return x(d.x); }) | |
.y0(function(d) { return y(d.y0); }) | |
.y1(function(d) { return y(d.y0 + d.y); }); | |
var svg = d3.select("body").append("svg") | |
.attr("width", width) | |
.attr("height", height); | |
svg.selectAll("path") | |
.data(layers0) | |
.enter().append("path") | |
.attr("d", area) | |
.style("fill", function() { return color(Math.random()); }); | |
function transition() { | |
d3.selectAll("path") | |
.data(function() { | |
var d = layers1; | |
layers1 = layers0; | |
return layers0 = d; | |
}) | |
.transition() | |
.duration(2500) | |
.attr("d", area); | |
} | |
// Inspired by Lee Byron's test data generator. | |
function bumpLayer(n) { | |
function bump(a) { | |
var x = 1 / (.1 + Math.random()), | |
y = 2 * Math.random() - .5, | |
z = 10 / (.1 + Math.random()); | |
for (var i = 0; i < n; i++) { | |
var w = (i / n - y) * z; | |
a[i] += x * Math.exp(-w * w); | |
} | |
} | |
var a = [], i; | |
for (i = 0; i < n; ++i) a[i] = 0; | |
for (i = 0; i < 5; ++i) bump(a); | |
return a.map(function(d, i) { return {x: i, y: Math.max(0, d)}; }); | |
} | |
</script> |