JSFiddle - React, Tailwind, and code Playground

by yonet3d

HTML

<svg></svg>

CSS

.axis {
  fill: none;
  stroke: #666;
  stroke-width: 1.5px;
  
}

JavaScript

var width = window.innerWidth / 2;

var data = [3, 7, 21, 31, 35, 42];

var color = d3.scale.category10();

var x = d3.scale.linear()
    .domain([0, d3.max(data)])//min and max of data that you want to show
    .range([0, width]);//representation of it. 

var xAxis = d3.svg.axis()
    .scale(x)
    .orient('bottom')
    .tickValues(data);
    

var svg = d3.select("svg");
var circles = svg.selectAll("circle")
    .data(data)
    .enter().append("circle")
    .attr({
        'cx':function(d, i) { return x(d);},
        'cy': '20',
        'r': function(d) {return d / 2 ;},
        'fill': function(d, i) {return color(i) ;}
    });

svg.append('g')
    .attr("transform", "translate(10,60)")
    .attr("class", "axis")
    .call(xAxis);