JSFiddle - React, Tailwind, and code Playground

by Maria Karanasou

HTML

<script src="https://d3js.org/d3.v4.min.js"></script>
<div class="chart"></div>

CSS

body {
	background-color: #F1F3F3;
}
  
text {
    font-family: 'Open Sans', sans-serif;
    font-size: 10px;
    font-weight: 900;
    pointer-events: none;
}

circle {
    cursor: pointer;
    fill-opacity: 0.9;
}

.axis path,
.axis line {
    fill: none;
    stroke: #000;
    shape-rendering: crispEdges;
}

.x.axis path,
.x.axis line {
    display: none;
}

.y.axis path,
.y.axis line {
    display: none;
}

JavaScript

// source: http://bl.ocks.org/alandunning/51c76ec99c3ffee2fde6923ac14a4dd4

var margin = { top: 10, right: 20, bottom: 20, left: 40 };
var width = 400 - margin.left - margin.right;
var height = 600 - margin.top - margin.bottom;
var clickToggle = false;
var color = d3.scaleOrdinal(["#FA8334", "#AFFC41", "#19647E", "#7FDDDD", "#949396", "#DCF763", "#00C6D0", "#C1C1C1", "#666666", "#FDCDAE"]);
var radius = d3.scaleLinear()
              .domain([0, 280])
              .range([15, 23]);
var datastr = '[{"Deal Type":"2016","Early Stage VC":"18.1","Later Stage VC":"16.8","Growth/Expansion":"287.3","Seed":"1.5","Recapitalization":"0","Acquisition Financing":"155.2","Grants":"0.19","Corporate":"0","Angel":"2.8","Pre/Accelerator/Incubator":"0.24"},{"Deal Type":"2015","Early Stage VC":"22.9","Later Stage VC":"3.6","Growth/Expansion":"192","Seed":"3.6","Recapitalization":"0","Acquisition Financing":"6.3","Grants":"0","Corporate":"0","Angel":"10.4","Pre/Accelerator/Incubator":"0.31"},{"Deal Type":"2014","Early Stage VC":"10","Later Stage VC":"14.9","Growth/Expansion":"135.4","Seed":"2.8","Recapitalization":"0","Acquisition Financing":"0","Grants":"0.32","Corporate":"1.5","Angel":"4.2","Pre/Accelerator/Incubator":"0.44"},{"Deal Type":"2013","Early Stage VC":"15.2","Later Stage VC":"2.8","Growth/Expansion":"2.7","Seed":"1.7","Recapitalization":"0","Acquisition Financing":"0","Grants":"0.03","Corporate":"0.5","Angel":"0.63","Pre/Accelerator/Incubator":"0.21"},{"Deal Type":"2012","Early Stage VC":"11","Later Stage VC":"17.9","Growth/Expansion":"3","Seed":"0.97","Recapitalization":"0","Acquisition Financing":"0","Grants":"0.1","Corporate":"0","Angel":"1.5","Pre/Accelerator/Incubator":"0.42"},{"Deal Type":"2011","Early Stage VC":"5.8","Later Stage VC":"0","Growth/Expansion":"10.8","Seed":"0.3","Recapitalization":"0","Acquisition Financing":"0","Grants":"2","Corporate":"0.2","Angel":"0","Pre/Accelerator/Incubator":"0.02"},{"Deal Type":"2010","Early Stage VC":"5","Later Stage...