JSFiddle - React, Tailwind, and code Playground

by flek

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/7.0.1/d3.min.js"></script>
<div id = "container"></div>

CSS

#container {
  width: 500px;
  height: 250px;
}

path {
  fill: none;
  stroke: steelblue;
  stroke-width: 2;
}

text {
  font-size: 12px;
  font-family: arial;
}

.domain, .tick line {
  stroke: gray;
  stroke-width: 1;
}

JavaScript

var svg_width = 500,
    svg_height = 250,
    margin = {left:50, right: 20, top:30, bottom:30},
    g_width = svg_width - margin.left - margin.right,
    g_height = svg_height - margin.top - margin.bottom

var data = [0.1, 30, 100, 300, 600, 1212]


var scale_x = d3.scaleLinear().domain([0, data.length-1]).range([0, g_width]),
    scale_y = d3.scaleLog().base( 10 ).domain([0.1, d3.max(data)]).range([g_height, 0])

var svg = d3.select("#container")
.append("svg:svg")
.attr("width", svg_width)
.attr("height", svg_height)

var g = svg.append("svg:g")
.attr("width", g_width)
.attr("height", g_height)
.attr("transform", "translate(" + margin.left + "," + margin.top + ")")

var area = d3.area()
.x(function(d,i) { return scale_x(i); })
.y0(g_height)
.y1(function(d) { return scale_y(d); })
.curve(d3.curveCardinal)

g.append("svg:path")
.attr("d", area(data))
.style("fill", "steelblue");

var x_axis = d3.axisBottom(scale_x).ticks(5);
var y_axis = d3.axisLeft(scale_y).tickArguments([5,".0s"]);

g.append("svg:g")
.call(x_axis)
.attr("transform", "translate(0," + g_height + ")")

g.append("svg:g")
.call(y_axis)
.append("text")
.text("Price($)")
.attr("transform", "rotate(-90)")
.attr("text-anchor", "end")
.attr("dy", "1em")
.attr("fill", "black")