D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
hydrosquall
Full window
Github gist
ct_portfolio axis labeled
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Budget for Connecticut State IT Projects</title> <script type="text/javascript" src="https://d3js.org/d3.v3.js"></script> <style type="text/css"> body { background-color: white; font-family: Helvetica, Arial, sans-serif; } h1 { font-size: 24px; margin: 0; } p { font-size: 14px; margin: 10px 0 0 0; } svg { background-color: white; } rect:hover { fill: orange; } .axis path, .axis line { fill: none; stroke: black; shape-rendering: crispEdges; } .axis text { font-family: sans-serif; font-size: 11px; } .y.axis path, .y.axis line { opacity: 0; } </style> </head> <body> <h1>Budget for Connecticut State IT Projects</h1> <p>Information Technology projects reported to the Office of Policy and Management Source: <a href="https://data.ct.gov/Government/Information-Technology-Project-Portfolio/i7h5-rx65">Connecticut State Government</a>, 2015</p> <script type="text/javascript"> var w = 1300; var h = 1500; var padding = [ 20, 10, 30, 380 ]; //Top, right, bottom, left var flatColors = { green : "#2ECC71", yellow : "#F5D76E", red : "#e74c3c" }; // logscale if needed var widthScale = d3.scale.linear() .range([0, w - padding[1] - padding[3] ]); var heightScale = d3.scale.ordinal() .rangeRoundBands([ 0, h - padding[2] ] , 0.1); var xAxis = d3.svg.axis() .scale(widthScale) .orient("bottom"); var yAxis = d3.svg.axis() .scale(heightScale) .orient("left"); var body = d3.select("body"); var svg = body.append("svg") .attr("width", w) .attr("height", h); var colorCode = function(d) { switch(d.Level) { case "1": return flatColors.red; case "2": return flatColors.yellow; case "3": return flatColors.green; default: return "black"; } }; //Load in contents of CSV file d3.csv("ctitportfolio.csv", function(data) { // For some reason not working, maybe they are treated as strings? data.sort( function(a,b) { return d3.ascending(+a.TotalBudget, +b.TotalBudget); }); widthScale.domain([0, d3.max(data, function(d) { return +d.TotalBudget; }) ]); // Assign labels - Numerical Labels // heightScale.domain(d3.range(data.length)); heightScale.domain(data.map(function(d) {return d.ProjectName; } )); var rects = d3.select("svg").selectAll('rect') .data(data) .enter() .append('rect'); rects.attr("x", padding[3] ) .attr("y", function(d, i) { return heightScale(d.ProjectName); }) // in future, use .attr("class","somethingSpecial") // Color code for what degree of priority that project is. .style("fill", colorCode) .attr("height", heightScale.rangeBand() ) .attr("width", function(d) { return widthScale(d.TotalBudget); }) .append("title") .text(function(d) { return d.ProjectName + " : costs " + d.TotalBudget; }); svg.append("g") .attr("class", "x axis") .attr("transform", "translate(" + padding[3] + "," + (h - padding[2]) + ")") .call(xAxis); svg.append("g") .attr("class", "y axis") .attr("transform", "translate(" + (padding[3] - 5) + ",0)") .call(yAxis); }); </script> </body> </html>
Modified
http://d3js.org/d3.v3.js
to a secure url
https://d3js.org/d3.v3.js