Old school D3 from simpler times

All examples By author By category About

hdickie

Full window Github gist

first

Built with blockbuilder.org

<!DOCTYPE html>
<meta charset="utf-8">
<style>

.axis--x path {
  display: black;
}

.line {
  fill: none;
  stroke: grey;
  stroke-width: 1.5px;
}
  
  .tick line{
    opacity: 0.2;
  }

</style>
<svg width="960" height="500"></svg>

<script src="//d3js.org/d3.v4.min.js"></script>
<script>
  var svg = d3.select("svg"),
    margin = {top: 20, right: 80, bottom: 30, left: 60},
    width = svg.attr("width") - margin.left - margin.right,
    height = svg.attr("height") - margin.top - margin.bottom,
    g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");
  
  var x = d3.scaleTime().range([0,width]),
      y = d3.scaleLinear().range([height,0]);
  
  function make_x_gridlines() {		
    return d3.axisBottom(x)
        .ticks(5)
}
  
  var line = d3.line()
    .curve(d3.curveBasis)
    .x(function(d) { return x(d.minute); })
    .y(function(d) { return y(d.numRecords); });
  
    d3.csv("hw1_3_data.csv", function(error, data) {
  	if (error) throw error;
      
    data.forEach(function(d) {
      d.minute = +d.minute;
      d.numRecords = +d.numRecords;
    })
    
    x.domain([0,59]);
      
    y.domain([0,3702]);
      
    g.append("g")
      .attr("class", "axis axis--x")
      .attr("transform", "translate(0," + height + ")")
      .call(d3.axisBottom(x));  
      
    g.append("g")
      .attr("class", "axis axis--y")
      .call(d3.axisLeft(y))
    
    svg.append("text")
      .attr("transform", "translate(3,290) rotate(-90)")
      .attr("y", 0)
      .attr("dy", "0.71em")
      .attr("fill", "#000")
      .text("Number of Records");
      
    svg.append("text")
    	.attr("transform", "translate(450,20)")
    	.text("Time")

g.append("path")
    	.attr("class","line")
      .attr("d", function(d) { return line(data); })
    
  });
</script>

https://d3js.org/d3.v4.min.js