JSFiddle - React, Tailwind, and code Playground

HTML

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

CSS

.axis path,
.axis line {
	fill: none;
	stroke: black;
}

JavaScript

var data = [5, 10, 100], dim = 350, padding = 40;

var xScale = d3.scale.linear().domain([1, 100]).range([padding,dim-padding]),
    yScale = d3.scale.linear().domain([1, 100]).range([dim-padding,padding]);

var xAxis = d3.svg.axis().scale(xScale).orient("bottom"),
    yAxis = d3.svg.axis().scale(yScale).orient("left")
                .tickFormat(d3.format(".2d"));

var svg = d3.select("body").append("svg").attr("width", dim).attr("height", dim);

svg.selectAll("circle").data(data).enter()
    .append("circle")
    .attr("cx", function(d) { return xScale(d); })
    .attr("cy", function(d) { return yScale(d); })
    .attr("r", 5);

svg.append("g").attr("class", "axis x")
	.attr("transform", "translate(0," + (dim - padding) + ")")
	.call(xAxis);
svg.append("g").attr("class", "axis y")
	.attr("transform", "translate(" + padding + ",0)")
	.call(yAxis);

// change to log scale...

yScale = d3.scale.log().domain([1, 100]).range([dim-padding,padding]);

svg.selectAll("circle").data(data)
    .transition().delay(1000).duration(1000)
    .attr("cx", function(d) { return xScale(d); })
    .attr("cy", function(d) { return yScale(d); });

svg.selectAll(".y")
    .transition().delay(1000).duration(1000)
    .call(yAxis.scale(yScale));