D3 Examples

xxxxxxxxxx
 
<!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;background-color: #111; }
  </style>
</head>
<body>
​
  <script>
        const data = [];
    const now = (new Date()).valueOf();
    for (let i = 0; i < 100; i++) {
      data.push({
        date: new Date(now + i * 1000*60*60*24),
        value: Math.random() * 100
      })
    }
​
    const xScale = d3.scaleTime()
        .range([0, 960])
        .domain(d3.extent(data, d => d.date));
​
    const yScale = d3.scaleLinear()
        .range([500, 0])
        .domain(d3.extent(data, d => d.value));
    
    const line = d3.line()
        .x(d => xScale(d.date))
        .y(d => yScale(d.value))
        .curve(d3.curveCatmullRom);
​
    const svg = d3
        .select("body")
        .append("svg")
      .attr("width", 960)
      .attr("height", 500)
        .append('path')
        .attr('stroke', 'hotpink')
        .attr('stroke-width', 1.8)
        .attr('fill', 'none')
        .attr('d', line(data));
​
  </script>
</body>
​
    