JSFiddle - React, Tailwind, and code Playground

by CoolBlue

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<svg></svg>

JavaScript

var w = 300, h = 300,
    x = d3.scale.linear()
		.range([0,w])
		.domain([0,3])
    axis = d3.svg.axis().scale(x).orient("bottom"),

	g = d3.select("svg").append("g")
    .attr({
        fill: "red",
        x: 10,
        y: 10,
        height: 100,
        width: 100
    })
	.call(trans, 1000)
	.call(axis)
//	.call(col, "green");
g.append("rect").attr({
        x: 10,
        y: 10,
        height: 100,
        width: 100
    })


function trans(selection, t){
    selection.transition().duration(t);
}
function col(selection, c){
    selection.attr({fill: c})
}