JSFiddle - React, Tailwind, and code Playground

by Sushant Ghorpade

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.11.0/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://d3js.org/d3.v3.min.js"></script>
<body>
<div class="container">
  <h2>Basic Shape Using D3.js</h2>
  <ul class="shape-list">
    <li>
      <p>Circle</p>
      <div id="circle"></div>
    </li>
    <li>
      <p>Triangle</p>
      <div id="triangle">
			<svg>
						<polygon points="01,100 50,01 100,100" />
		</svg>
      </div>
    </li>
    <li>
      <p>Rectangle</p>
      <div id="rect"></div>
    </li>
  </ul>
	<ul id="barchart">
	</ul>
	</ul>
</div>
</body>

SCSS

.shape-list {
  li{
    display:inline-block;
		margin:0 20px;
		div {
			svg {
				width:100px
			}
		}
  }
}

JavaScript

var circle = d3.select("#circle")
							.append("svg").append("circle")
							.attr("cx", 50)
							.attr("cy", 50)
							.attr("r", 50)
							.attr("fill", "#233445");

var rect = d3.select("#rect")
							.append("svg").append("rect")
							.attr("width", 100)
							.attr ("height", 100)
              .attr("cx", 50)
							.attr("cy", 50)							
							.attr("fill", "#233445");
							
var trang = d3.select("#triangle polygon")
							.attr("fill", "#233445");
							
//Barchart using D3.js
var margin = {top: 30, right: 120, bottom: 0, left: 120},
    width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;

var x = d3.scale.linear()
    .range([0, width]);

var barHeight = 20;

var color = d3.scale.ordinal()
    .range(["steelblue", "#ccc"]);

var duration = 750,
    delay = 25;

var partition = d3.layout.partition()
    .value(function(d) { return d.size; });

var xAxis = d3.svg.axis()
    .scale(x)
    .orient("top");

var svg = d3.select("#barchart").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
  .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

svg.append("rect")
    .attr("class", "background")
    .attr("width", width)
    .attr("height", height)
    .on("click", up);

svg.append("g")
    .attr("class", "x axis");

svg.append("g")
    .attr("class", "y axis")
  .append("line")
    .attr("y1", "100%");

d3.json("https://api.myjson.com/bins/h7vvf", function(error, root) {
  if (error) throw error;

  partition.nodes(root);
  x.domain([0, root.value]).nice();
  down(root, 0);
});

function down(d, i) {
  if (!d.children || this.__transition__) return;
  var end = duration + d.children.length * delay;

  // Mark any currently-displayed bars as exiting.
  var exit = svg.selectAll(".enter")
      .attr("class", "exit");

  // Entering nodes immediately obscure the clicked-on bar, so hide it.
 ...