Old school D3 from simpler times

All examples By author By category About

curran

Full window Github gist

[unlisted] Inline Data Example

An example created in response to this question on the D3 mailing list.

Built with blockbuilder.org

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
  </style>
</head>

<body>
  <script>
    var width = 960,
        height = 500,
        svg = d3.select("body").append("svg")
          .attr("width", width)
          .attr("height", height);

var arrData = [
      {date: "24-Apr-17", close: 198},
      {date: "24-Apr-15", close: 500},
      {date: "24-Apr-16", close: 198},
      {date: "24-Apr-13", close: 198}  
    ];

var parseTime = d3.timeParse("%d-%b-%y");

var data = arrData
      .map(function (d){
        return {
          date: parseTime(d.date),
          close: d.close
        };
      })
      .sort(function (a, b){
        return d3.ascending(a.date, b.date);
      });
    
    var valueX = function (d){ return d.date; };
    var valueY = function (d){ return d.close; };
    
    var scaleX = d3.scaleLinear()
      .domain(d3.extent(data, valueX))
      .range([0, width]);
    
    var scaleY = d3.scaleLinear()
      .domain(d3.extent(data, valueY))
      .range([height, 0]);
    
    var line = d3.line()
      .x(function(d) { return scaleX(valueX(d)); })
      .y(function(d) { return scaleY(valueY(d)); });
    
    svg.append("path")
        .attr("d", line(data))
        .attr("stroke", "black")
        .attr("fill", "none");
    
    console.log(data);

</script>
</body>

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