Old school D3 from simpler times

All examples By author By category About

ccronin51

Full window Github gist

fresh block2

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>
/* Everything in style is CSS     */
    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;
    }
  </style>
</head>

<body>
  <script> 
//     Everything below here is java 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, 
// 960 is the total width and then making your axis window
        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]);
//     starting at height, then go to 0
    var xaxis = d3.svg.axis()
                  .scale(xscale)
//     linking axis to scale
                  .orient("bottom")
                  .ticks(5)
                  .tickFormat(d3.time.format("%Y-%b"));
    var yaxis = d3.svg.axis()
                  .scale(yscale)
                  .orient("left");
  
    d3.tsv("jobs.tsv", function(err, data) {
      if (err) throw err;
// "data" is just a convention
      
      // + 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; })]);
      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")
//       path is how svg draws its lines
      		.attr("class", "line")
      		.attr("d", line);
      
      svg.append("g")
      	 .attr("class", "axis")
         .attr("transform", "translate(" + [0, height] + ")")
         .call(xaxis);
      
      svg.append("g")
      		.attr("class", "axis")
          .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": 3
      });
    });
  </script>
</body>

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