JSFiddle - React, Tailwind, and code Playground

by Robin Edwards

HTML

<script src="http://d3.geotheory.co.uk/d3-transform.js"></script>

CSS

svg {
    background-color: #ccc;
}

JavaScript

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

//Draw the Rectangle
var rect = svg.append("rect")
	.attr("x", 0).attr("y", 0)
	.attr("width", 50).attr("height", 100)
	.style("fill", "purple");

var rotate = d3.svg.transform().rotate(-45);
var translate = d3.svg.transform().translate(200, 100);

rect.attr('transform', rotate);

//var rect2 = rect.attr('transform', rotate);
//rect2.attr('transform', translate);