JSFiddle - React, Tailwind, and code Playground

by Shashank D

HTML

<script src="https://d3js.org/d3.v3.min.js"></script>

<svg>
  <path></path>
</svg>

JavaScript

const C = 1;
const xScale = d3.scale.linear()
    .domain([0, 100])
    .range([0, 1000]); // pixels

const yScale = d3.scale.linear()
    .domain([0, 100])
    .range([0, 1000]);

const line = d3.svg.line()
               .x(d => xScale(d))
               .y(d => yScale(Math.log(C) + Math.log(d)));

const values = [10, 50, 100];

d3.selectAll("path")
  .datum(values)
  .attr("fill", "none")
  .attr("stroke", "steelblue")
  .attr("d", line);