D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
cwcromwell
Full window
Github gist
West Oakland census bar chart
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>West Oakland population data</title> <meta name="description" content="A breakdown of the neighborhood's population by race and ethnicity."> <link rel="stylesheet" href="wocensus.css"> <script src="https://d3js.org/d3.v3.min.js"></script> </head> <body> <script> var dataset= [12578, 4886, 3236, 2541, 1495]; var w=960; var h=500; var barPadding = 1; var svg = d3.select("body") .append("svg") .attr("width", w) .attr("height", h); svg.selectAll("rect") .data(dataset) .enter() .append("rect") .attr("y", function(d, i) { return i * (h/dataset.length) // return i * 21; }) .attr ("x", function(d) { //width minus data value (moved) }) .attr("height", h/dataset.length - barPadding) .attr("width", function(d) { // return d return d/48 }) .attr("fill", "navy"); svg.selectAll("text") .data(dataset) .enter() .append("text") .text(function(d) { return d; }) .attr("y", function(d, i) { return (i * (h/dataset.length)) + 95; }) .attr("font-family", "sans-serif") .attr("font-size", "11px") .attr("fill", "white"); </script> <P>The bar graph shows West Oakland population by race. In order of size, the bars represent these groups: African-American, white, Asian, other, and two or more races.</P> </body> </html>
Modified
http://d3js.org/d3.v3.min.js
to a secure url
https://d3js.org/d3.v3.min.js