d3js-based horizontal bar graphs for an upcoming article on the connect-fonts library.
Runnable example lives at http://bl.ocks.org/6a68/5166525, underlying gist lives at https://gist.github.com/6a68/5166525.
I based this code on a tutorial. For links to that tutorial, and code as presented in original article, see the parent gist, https://gist.github.com/6a68/5165005, or its corresponding runnable example at http://bl.ocks.org/6a68/5165005.
| <!doctype html> | |
| <html> | |
| <head><title>examples from http://hdnrnzk.me/2012/07/04/creating-a-bar-graph-using-d3js</title> | |
| <style> | |
| .chart { | |
| background: #b0e0f8; | |
| margin: 5px; | |
| } | |
| .chart rect { | |
| stroke: white; | |
| fill: steelblue; | |
| } | |
| .chart text { | |
| fill: white; | |
| } | |
| .chart text.name { | |
| fill: #000; | |
| } | |
| .chart line { | |
| stroke: #c1c1c1; | |
| } | |
| .chart .rule { | |
| fill: #000; | |
| } | |
| /* removed the while stroke as we don't need it anymore */ | |
| #step-5 .chart rect { | |
| stroke: none; | |
| } | |
| /* a bit of hovering effect for each bar */ | |
| #step-5 .chart rect:hover { | |
| fill: #64707D; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <h3>OpenSans-regular font, eot format, KB uncompressed:</h3> | |
| <div id="step-5"></div> | |
| <h3>Same files, gzipped:</h3> | |
| <div id="step-6"></div> | |
| <script src="http://d3js.org/d3.v3.min.js"></script> | |
| <script src="http://code.jquery.com/jquery.min.js"></script> | |
| <script> | |
| jQuery(function($) { | |
| var names = ['John', 'Tim', 'Sam', 'Greg', 'Charles'], | |
| hotdogs = [8, 4, 9, 12, 11], | |
| chart, | |
| width = 400, | |
| bar_height = 20, | |
| height = bar_height * names.length; | |
| /* step 1 */ | |
| chart = d3.select($("#step-1")[0]) | |
| .append('svg') | |
| .attr('class', 'chart') | |
| .attr('width', width) | |
| .attr('height', height); | |
| /* step 2 */ | |
| var x, y; | |
| chart = d3.select($("#step-2")[0]) | |
| .append('svg') | |
| .attr('class', 'chart') | |
| .attr('width', width) | |
| .attr('height', height); | |
| x = d3.scale.linear() | |
| .domain([0, d3.max(hotdogs)]) | |
| .range([0, width]); | |
| y = d3.scale.ordinal() | |
| .domain(hotdogs) | |
| .rangeBands([0, height]); | |
| chart.selectAll("rect") | |
| .data(hotdogs) | |
| .enter().append("rect") | |
| .attr("x", 0) | |
| .attr("y", y) | |
| .attr("width", x) | |
| .attr("height", bar_height); | |
| /* step 3 */ | |
| chart = d3.select($("#step-3")[0]) | |
| .append('svg') | |
| .attr('class', 'chart') | |
| .attr('width', width) | |
| .attr('height', height); | |
| chart.selectAll("rect") | |
| .data(hotdogs) | |
| .enter().append("rect") | |
| .attr("x", 0) | |
| .attr("y", y) | |
| .attr("width", x) | |
| .attr("height", y.rangeBand()); | |
| chart.selectAll("text") | |
| .data(hotdogs) | |
| .enter().append("text") | |
| .attr("x", x) | |
| .attr("y", function(d){ return y(d) + y.rangeBand()/2; } ) | |
| .attr("dx", -5) | |
| .attr("dy", ".36em") | |
| .attr("text-anchor", "end") | |
| .text(String); | |
| /* step 4 */ | |
| var left_width = 100; | |
| chart = d3.select($("#step-4")[0]) | |
| .append('svg') | |
| .attr('class', 'chart') | |
| .attr('width', left_width + width) | |
| .attr('height', height); | |
| chart.selectAll("rect") | |
| .data(hotdogs) | |
| .enter().append("rect") | |
| .attr("x", left_width) | |
| .attr("y", y) | |
| .attr("width", x) | |
| .attr("height", y.rangeBand()); | |
| chart.selectAll("text.score") | |
| .data(hotdogs) | |
| .enter().append("text") | |
| .attr("x", function(d) { return x(d) + left_width; }) | |
| .attr("y", function(d){ return y(d) + y.rangeBand()/2; } ) | |
| .attr("dx", -5) | |
| .attr("dy", ".36em") | |
| .attr("text-anchor", "end") | |
| .attr('class', 'score') | |
| .text(String); | |
| chart.selectAll("text.name") | |
| .data(names) | |
| .enter().append("text") | |
| .attr("x", left_width / 2) | |
| .attr("y", function(d){ return y(d) + y.rangeBand()/2; } ) | |
| .attr("dy", ".36em") | |
| .attr("text-anchor", "middle") | |
| .attr('class', 'name') | |
| .text(String); | |
| /* step 5 */ | |
| // container: css selector for chart container | |
| // valueMax: the max scale value, used so we can compare different sizes apples-to-apples | |
| function renderChart(values, labels, container, valueMax) { | |
| var gap = 2, max = valueMax || d3.max(values); | |
| x = d3.scale.linear() | |
| .domain([0, max ]) | |
| .range([0, width]); | |
| // redefine y for adjusting the gap | |
| y = d3.scale.ordinal() | |
| .domain(values) | |
| .rangeBands([0, (bar_height + 2 * gap) * labels.length]); | |
| chart = d3.select($(container)[0]) | |
| .append('svg') | |
| .attr('class', 'chart') | |
| .attr('width', left_width + width + 40) | |
| .attr('height', (bar_height + gap * 2) * labels.length + 30) | |
| .append("g") | |
| .attr("transform", "translate(10, 20)"); | |
| chart.selectAll("rect") | |
| .data(values) | |
| .enter().append("rect") | |
| .attr("x", left_width) | |
| .attr("y", function(d) { return y(d) + gap; }) | |
| .attr("width", x) | |
| .attr("height", bar_height); | |
| chart.selectAll("text.score") | |
| .data(values) | |
| .enter().append("text") | |
| .attr("x", function(d) { return x(d) + left_width; }) | |
| .attr("y", function(d, i){ return y(d) + y.rangeBand()/2; } ) | |
| .attr("dx", -5) | |
| .attr("dy", ".36em") | |
| .attr("text-anchor", "end") | |
| .attr('class', 'score') | |
| .text(String); | |
| chart.selectAll("text.name") | |
| .data(labels) | |
| .enter().append("text") | |
| .attr("x", left_width / 2) | |
| .attr("y", function(d, i){ return y(d) + y.rangeBand()/2; } ) | |
| .attr("dy", ".36em") | |
| .attr("text-anchor", "middle") | |
| .attr('class', 'name') | |
| .text(String); | |
| } | |
| // we'll use the same locales for all charts. | |
| var locales = ['Default', 'Cyrillic', 'Latin', 'de', 'en', 'fr']; | |
| renderChart([104, 59, 29, 22, 20, 24], locales, '#step-5', 105); | |
| // how about the gzipped values? | |
| renderChart([63, 36, 19, 14, 13, 15], locales, '#step-6', 105); | |
| }(jQuery)); | |
| </script> |
