Skip to content

Instantly share code, notes, and snippets.

@pjsier pjsier/.block

Last active Nov 13, 2017
Embed
What would you like to do?
Bar Chart
license: mit
<!DOCTYPE html>
<html>
<head>
<title>Simple Bar Chart</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta charset='utf-8' />
<script src="https://d3js.org/d3.v4.min.js"></script>
<style>
body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
#chart {
max-width: 600px;
max-height: 400px;
}
</style>
</head>
<body>
<div id="chart"></div>
<script src="script.js"></script>
<script>
var bars = barChart();
var data = [
{ label: "age_lt_5", value: "2888" },
{ label: "age_5_9", value: "1852" },
{ label: "age_10_14", value: "1595" },
{ label: "age_15_17", value: "1030" },
{ label: "age_18_19", value: "741" },
{ label: "age_20_24", value: "4497" },
{ label: "age_25_29", value: "7871" },
{ label: "age_30_34", value: "7090" },
{ label: "age_35_39", value: "5313" },
{ label: "age_40_44", value: "4527" },
{ label: "age_45_49", value: "3968" },
{ label: "age_50_54", value: "3668" },
{ label: "age_55_59", value: "3093" },
{ label: "age_60_64", value: "2390" },
{ label: "age_65_69", value: "1659" },
{ label: "age_70_74", value: "1347" },
{ label: "age_75_79", value: "1037" },
{ label: "age_80_84", value: "844" },
{ label: "age_gte_85", value: "952" }
];
function resize() {
if (d3.select("#chart svg").empty()) {
return;
}
bars.width(+d3.select("#chart").style("width").replace(/(px)/g, ""))
.height(+d3.select("#chart").style("height").replace(/(px)/g, ""));
d3.select("#chart").call(bars);
}
document.addEventListener("DOMContentLoaded", function () {
d3.select("#chart").datum(data).call(bars);
d3.select(window).on('resize', resize);
resize();
});
</script>
</body>
</html>
function barChart() {
var margin = {top: 10, right: 10, bottom: 60, left: 40},
width = 350,
height = 350,
labelValue = function(d) {
return d.label.substr(4)
.replace(/(lt_)/g, "<")
.replace(/(gte_)/g, ">=")
.replace(/_/g, "-");
},
dataValue = function(d) { return +d.value; },
bandPadding = 0.1,
color = "#b2ebf2";
function chart(selection) {
selection.each(function(data) {
data = data.map(function(d, i) {
return { label: labelValue(d), value: dataValue(d) };
});
var x = d3.scaleBand().rangeRound([0, height-margin.top-margin.bottom]).padding(bandPadding),
y = d3.scaleLinear().rangeRound([0, width-margin.left-margin.right]);
x.domain(data.map(function(d) { return d.label; }));
y.domain([0, d3.max(data, dataValue)]);
var svg = d3.select(this).selectAll("svg").data([data]);
var gEnter = svg.enter().append("svg").append("g");
gEnter.append("g").attr("class", "axis x");
gEnter.append("g").attr("class", "axis y").append("text");
gEnter.selectAll(".bar").data(data).enter().append("rect").attr("class", "bar");
var svg = selection.select("svg");
svg.attr('width', width).attr('height', height);
var g = svg.select("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
g.select("g.axis.x")
.call(d3.axisLeft(x));
g.select("g.axis.y")
.attr("class", "axis y")
.attr("transform", "translate(0," + (height - margin.bottom - margin.top) + ")")
.call(d3.axisBottom(y).ticks(5));
g.select("g.axis.y text")
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("dy", "0.71em")
.attr("text-anchor", "end")
.text("Population");
g.selectAll("rect.bar")
.data(data)
.attr("x", "1")
.attr("y", function(d) { return x(d.label); })
.attr("fill", color)
.attr("height", x.bandwidth())
.transition()
.duration(750)
.attr("width", function(d) { return y(dataValue(d)); });
});
}
chart.margin = function(_) {
if (!arguments.length) return margin;
margin = _;
return chart;
};
chart.width = function(_) {
if (!arguments.length) return width;
width = _;
return chart;
};
chart.height = function(_) {
if (!arguments.length) return height;
height = _;
return chart;
};
chart.labelValue = function(_) {
if (!arguments.length) return labelValue;
labelValue = _;
return chart;
};
chart.dataValue = function(_) {
if (!arguments.length) return dataValue;
dataValue = _;
return chart;
};
chart.colorOptions = function(_) {
if (!arguments.length) return colorOptions;
colorOptions = _;
return chart;
};
return chart;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.