Old school D3 from simpler times

All examples By author By category About

ccronin51

Full window Github gist

Unemployment

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;
    }
    .tooltip {
    background-color: #f7f7f7;
    padding: 3px 12px;
    font-family: sans-serif;
    border: 1px solid #bbbbbb;
    box-shadow: 1px 1px 4px #bbbbbb;
  }
    .tooltip_title {
    font-weight: bold;
    font-size: 14px;
    margin: 5px 0;
    max-width: 300px;
    word-wrap: normal;
  }
    
    .tooltip_body {
    font-weight: normal;
    margin: 5px 0;
    }
    .tooltip_img {
    max-width: 240px;
  }
    #info {
      position: absolute;
      right: 0;
      top: 400px;
      height: 100px;
      border: 1px solid black;
      min-width: 100px;
      max-height: 50px;
  </style>
</head>

<body>
  <div id="info"></div>
  <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")
                  .tickFormat(d3.time.format("%Y"));
    
    var yaxis = d3.svg.axis()
                  .scale(yscale)
                  .orient("left");
    
    var tooltip = d3.select("body")
    .append("div")
    .attr("class", "tooltip")
    .style("position", "absolute")
    .style("z-index", "10")
    .style("visibility", "hidden");
  
    d3.csv("unemployment_data.csv", function(err, data) {
      if (err) throw err;
// "data" is just a convention
      
      // + Convert string to numbers
      data.forEach(function(d) {
        d.date = new Date(d.month_year);
        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": 5
      })
      .style("opacity", 0)
      .on("mouseover", function(d) {
       d3.select("#info")
        	.append("pre").text(d.date.getFullYear());
       d3.select("#info")
        	.append("pre").text(d.unemployment_rate)
       return tooltip.style("visibility", "visible");
      })
      .on("mouseout", function(d) {
       	d3.select("#info").selectAll("*").remove();
      });
     })
     .on("mousemove", function() {
       return tooltip.style("top", (d3.event.pageY-52) + "px").style("left", (d3.event.pageX+18) + "px");
     })
     .on("mouseout", function() {
       return tooltip.style("visibility", "hidden");
     });

</script>
</body>

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