A simple SVG bar chart. Part of the tutorial series Let’s Make a Bar Chart.
forked from mbostock's block: Bar Chart IIIc
license: gpl-3.0 |
A simple SVG bar chart. Part of the tutorial series Let’s Make a Bar Chart.
forked from mbostock's block: Bar Chart IIIc
name | value | |
---|---|---|
A | .08167 | |
B | .01492 | |
C | .02782 | |
D | .04253 | |
E | .12702 | |
F | .02288 | |
G | .02015 | |
H | .06094 | |
I | .06966 | |
J | .00153 | |
K | .00772 | |
L | .04025 | |
M | .02406 | |
N | .06749 | |
O | .07507 | |
P | .01929 | |
Q | .00095 | |
R | .05987 | |
S | .06327 | |
T | .09056 | |
U | .02758 | |
V | .00978 | |
W | .02360 | |
X | .00150 | |
Y | .01974 | |
Z | .00074 |
<!DOCTYPE html> | |
<meta charset="utf-8"> | |
<style> | |
.bar { | |
fill: steelblue; | |
} | |
.axis text { | |
font: 10px sans-serif; | |
} | |
.axis path, | |
.axis line { | |
fill: none; | |
stroke: #000; | |
shape-rendering: crispEdges; | |
} | |
.x.axis path { | |
display: none; | |
} | |
</style> | |
<svg class="chart"></svg> | |
<script src="https://d3js.org/d3.v5.min.js"></script> | |
<script> | |
var margin = {top: 20, right: 30, bottom: 30, left: 40}, | |
width = 960 - margin.left - margin.right, | |
height = 500 - margin.top - margin.bottom; | |
var x = d3.scaleBand() | |
.rangeRound([0, width], .1); | |
var y = d3.scaleLinear() | |
.range([height, 0]); | |
var xAxis = d3.axisBottom().scale(y); | |
var yAxis = d3.axisLeft().scale(x); | |
var chart = d3.select(".chart") | |
.attr("width", width + margin.left + margin.right) | |
.attr("height", height + margin.top + margin.bottom) | |
.append("g") | |
.attr("transform", "translate(" + margin.left + "," + margin.top + ")"); | |
d3.tsv("data.tsv", type).then(function(data) { | |
console.log(data) | |
x.domain(data.map(function(d) { return d.name; })); | |
y.domain([0, d3.max(data, function(d) { return d.value; })]); | |
chart.append("g") | |
.attr("class", "x axis") | |
.attr("transform", "translate(0," + height + ")") | |
.call(xAxis); | |
chart.append("g") | |
.attr("class", "y axis") | |
.call(yAxis); | |
chart.selectAll(".bar") | |
.data(data) | |
.enter().append("rect") | |
.attr("class", "bar") | |
.attr("x", function(d) { return x(d.name); }) | |
.attr("y", function(d) { return y(d.value); }) | |
.attr("height", function(d) { return height - y(d.value); }) | |
.attr("width", x.bandwidth()); | |
}).catch(console.error); | |
function type(d) { | |
d.value = +d.value; // coerce to number | |
return d; | |
} | |
</script> |