D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
CindyJonesHulfachor
Full window
Github gist
HPV vaccinations of males 13 to 17 years old. Males with recommended three doses, shown by states that recommend vaccination.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Setting Attribute Values from Data</title> <script type="text/javascript" src="../d3.v3.js"></script> <style type="text/css"> body { background-color: #ddddff; } svg { background-color: white; } </style> </head> <body> <script type="text/javascript"> var svg = d3.select("body") .append("svg") .attr("width", 400) .attr("height", 600); d3.csv("hpvvaccinations.csv", function(data) { data.sort(function(a, b) { //return d3.descending(a.male3doses, b.male3doses); return d3.descending(+a.male3doses, +b.male3doses); //to fix sorting }); var rects = svg.selectAll("rect") .data(data) .enter() .append("rect"); rects.attr("x", 0) .attr("y", function(d, i) { return i * 10; }) .attr("width", function(d) { return d.male3doses * 8; }) .attr("height", 8); }); </script> </body> </html>