JSFiddle - React, Tailwind, and code Playground

by Maria Karanasou

HTML

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

JavaScript

theData = [
	{"ball": "ball number 1", "ball data": {"final time": 5000, "additional info": "none"}},
	{"ball": "ball number 2", "ball data": {"final time": 3000, "additional info": "none"}},
	{"ball": "ball number 3", "ball data": {"final time": 6000, "additional info": "none"}},
	{"ball": "ball number 4", "ball data": {"final time": 19000, "additional info": "none"}},
	{"ball": "ball number 5", "ball data": {"final time": 1300, "additional info": "none"}},
	{"ball": "ball number 6", "ball data": {"final time": 4400, "additional info": "none"}},
	{"ball": "ball number 7", "ball data": {"final time": 7600, "additional info": "none"}},
	{"ball": "ball number 8", "ball data": {"final time": 22000, "additional info": "none"}},
	{"ball": "ball number 9", "ball data": {"final time": 5800, "additional info": "none"}}
]

d3charting(theData)


function d3charting(myData) {
console.log(myData);

	var w = 800;
	var h = 500;


	// variables and setting up the svg element
	var margin = {top: 120, right: 20, bottom: 100, left: 100},
		width = w - margin.left - margin.right,
		height = h - margin.top - margin.bottom;
	

	var x = d3.scaleBand() 
  			.rangeRound([0, width])
    		//.paddingInner(0.05);
				//.range([theData.length, width]);

	var y = d3.scaleLinear()
			.range([height, 0]);



	d3.select("#d3_canvas_1").selectAll("svg").remove(); //removes the previous canvas so that there isn't a new one every time the data is updated
	var myChart = d3.select("#d3_canvas_1")
			.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 + ")"); 
			
			
	//appends the axis to what doesn't exist yet
	
	
	var xAxis = d3.axisBottom()
		.scale(x);

	var yAxis = d3.axisLeft()
		.scale(y);

		
	// the domain
	x.domain(myData.map(function (d)  // NOTE THAT IF WHAT COMES IN IS AN OBJECT THEN YOU CAN'T USE "MAP" AS OBJECTS DON'T HAVE...