xxxxxxxxxx<meta charset="utf-8"><!-- used this for reference: https://bl.ocks.org/Jverma/076377dd0125b1a508621441752735fc --> <body> <!-- load the d3.js library --> <script src="https://d3js.org/d3.v4.min.js"></script><svg width="960" height="500"></svg><!-- bar chart code --><script>// set the dimensions and margins of the graphvar svg = d3.select("svg"), margin = {top: 20, right: 20, bottom: 30, left: 50}, width = +svg.attr("width") - margin.left - margin.right, height = +svg.attr("height") - margin.top - margin.bottom, g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");// set the rangesvar xscale = d3.scaleLinear() .range([0, width]);var yscale = d3.scaleLog() .range([height, 0]); // axes creations var xAxis = d3.axisBottom() .scale(xscale); var yAxis = d3.axisLeft() .scale(yscale).tickFormat(d3.format(".1f"));var svg = d3.select("body").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 + ")");// scale the colorvar color = d3.scaleOrdinal(d3.schemeCategory20);// get the datad3.csv("billionaires.csv", function(error, dataset) { if (error) throw error; // format the data dataset.forEach(function(d) { d.age = +d.age; d[ 'worth in billions' ] = +d[ 'worth in billions' ]; });//close dataset.forEach(datapoint) xscale.domain(d3.extent(dataset, function(d) { return d.age; })).nice(); yscale.domain(d3.extent(dataset, function(d) { return d['worth in billions']; })).nice(); //translate x-axis to (0,height) and it's alread defined to be a bottom axis. svg.append('g') .attr('transform', 'translate(0,' + height + ')') .attr('class', 'x axis') .call(xAxis) .append("text") .attr("fill", "#000") .attr("y", 20) .attr("x", width/2) .attr("dy", "0.71em") .attr("text-anchor", "end") .text("Billionaire's Age"); // y-axis is translated to (0,0) svg.append('g') .attr('transform', 'translate(0,0)') .attr('class', 'y axis') .call(yAxis) .append("text") .attr("fill", "#000") .attr("transform", "rotate(-90)") .attr("y", -40) .attr("x", -(height/2) + 10) .attr("dy", "0.71em") .attr("text-anchor", "end") .text("Worth in Billions"); var bubble = svg.selectAll('.bubble') .data(dataset) .enter().append('circle') .attr('class', 'bubble') .attr('cx', function(d){ return xscale(d.age); }) .attr('cy', function(d){ return yscale(d['worth in billions']); }) .attr('r', 5) .style('fill', function(d){return color(d['region']);}) .style('stroke','black') .style('opacity',0.8) .style('stroke-width',1); //LEGEND var legend = svg.selectAll('legend') .data(color.domain()) .enter().append('g') .attr('class', 'legend') .attr('transform', function(d,i){ return 'translate(0,' + i * 20 + ')'; }); legend.append('rect') .attr('x', width) .attr('width', 18) .attr('height', 18) .style('fill', color); // add text to the legend elements. legend.append('text') .attr('x', width - 6) .attr('y', 9) .attr('dy', '.35em') .style('text-anchor', 'end') .text(function(d){ return d; }); svg.append("text") .attr("x", (width / 2)) .attr("y", margin.top + 5) .attr("text-anchor", "middle") .style("font-size", "30px") .style("text-decoration", "underline") .text("Age vs Worth, Colored by Region"); });//close reading d3.csv reader</script><!-- </script> --></body> https://d3js.org/d3.v4.min.js