Old school D3 from simpler times

All examples By author By category About

sampathweb

Full window Github gist

Median Income from 2009 to 2012

Built with blockbuilder.org

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
    svg { 
      border:1px solid #f0f;
    }
    .axis line,
    .axis path {
      fill: none;
      stroke: #000;
      shape-rendering: crispEdges;
    }
    
    .line {
      fill: none;
      stroke: steelblue;
      stroke-width: 2px;
    }
    .bars {
      stroke: #000;
      stroke-width: 4;
    }
    .good {
      stroke: #00f;
    }
    .bad {
      stroke: #f00;
    }
  </style>
</head>

<body>
  <script>
    // Feel free to change or delete any of the code you see!
    var margin = {top: 20, right: 20, bottom: 30, left: 50},
        width = 960 - margin.left - margin.right,
        height = 500 - margin.top - margin.bottom;

var svg = d3.select("body").append("svg")
    							.attr({
                    width: width + margin.left + margin.right,
                    height: height + margin.top + margin.bottom
                  })
    						.append("g")
    						.attr("transform", "translate(" + [margin.left, margin.top] + ")");
    var xscale = d3.time.scale()
    								.range([0, width]);
    var yscale = d3.scale.linear()
    								.range([height, 0]);
    
    var yscaleJobChange = d3.scale.linear()
    											.range([height, 0]);
    
    var xaxis = d3.svg.axis()
    							.scale(xscale)
    							.orient("bottom")
    							.ticks(5)
    							.tickFormat(d3.time.format("%Y-%b"));
    
    var yaxis = d3.svg.axis()
    							.scale(yscale)
    							.orient("right");
    
    var yaxisJobChange = d3.svg.axis()
                        .scale(yscaleJobChange)
                        .orient("left");
  
    d3.tsv("jobs.tsv", function(err, data) {
      if (err) throw err;
      
      // Convert string to numbers
      data.forEach(function(d) {
        d.jobs_change = +d.jobs_change;
        d.date = new Date(d.month_year);
        d.private_job_change = +d.private_job_change;
        d.unemployment_rate = +d.unemployment_rate;
      });
      
      console.log(data);
			xscale.domain(d3.extent(data, function(d) { return d.date; }));
      yscale.domain([0, d3.max(data, function(d) { return d.unemployment_rate; })]);
      yscaleJobChange.domain(d3.extent(data, function(d) { return d.jobs_change; }));
      var line = d3.svg.line()
      						.x(function(d) { return xscale(d.date); })
      						.y(function(d) { return yscale(d.unemployment_rate);});
            
      svg.selectAll("path.line")
      	.data([data])
      	.enter()
      		.append("path")
      		.attr("class", "line")
      		.attr("d", line);
      
      svg.append("g")
      		.attr("class", "x axis")
      		.attr("transform", "translate(" + [0, height] + ")")
      		.call(xaxis);
      
      svg.append("g")
      		.attr("class", "y axis")
      		.call(yaxisJobChange);
      
      svg.append("g")
      		.attr("class", "y axis")
      		.attr("transform", "translate(" + [width, 0] + ")")
      		.call(yaxis);
      
      svg.selectAll("circle.rate")
      	.data(data)
      	.enter()
      		.append("circle")
      		.attr({
        		"class": "rate",
        		"cx": function(d) { return xscale(d.date); },
        		"cy": function(d) { return yscale(d.unemployment_rate); },
        		"r": 2
      });
      
      svg.selectAll("line.bars")
      	.data(data)
      	.enter()
      		.append("line")
      		.attr({
        		"class": function(d) { 
              	return yscaleJobChange(d.jobs_change) < yscaleJobChange(0) ? "bars good" : "bars bad";
            },
        		"x1": function(d) { return xscale(d.date); },
        		"y1": yscaleJobChange(0),
        		"x2": function(d) { return xscale(d.date); },
        		"y2": function(d) { return yscaleJobChange(d.jobs_change)}
      })
      
    });
  </script>
</body>

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js