xxxxxxxxxx<meta charset="utf-8"><!-- used this as starting point: https://blockbuilder.org/elt12njo/76b484f5187c7ecfc83070dd81897327--> <body> <!-- load the d3.js library --> <script src="https://d3js.org/d3.v4.min.js"></script><!-- bar chart code --><script>// set the dimensions and margins of the graphvar margin = {top: 20, right: 20, bottom: 110, left: 100}, width = 7000 - margin.left - margin.right, height = 7000 - margin.top - margin.bottom;// set the rangesvar xscale = d3.scaleBand() .range([0, width]) .padding(.1);var yscale = d3.scaleLinear() .range([height, 0]); // append the svg object to the body of the page// append a 'group' element to 'svg'// moves the 'group' element to the top left marginvar 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 + ")");// get the data//change to billionaires.csv for full set of datad3.csv("billionaires.csv", function(error, dataset) { if (error) throw error; // format the data dataset.forEach(function(d) { d.name = d.name; d[ 'worth in billions' ] = +d[ 'worth in billions' ]; }); // Scale the range of the data in the ; 2614 = number of records xscale.domain(dataset.map(function(d) {return d.name;})); yscale.domain([0, d3.max(dataset, function(d) { return d[ 'worth in billions' ]; })]); // append the rectangles for the bar chart svg.selectAll(".bar") .data(dataset) .enter().append("rect") .attr("class", "bar") .attr("x", function(d) { return xscale(d.name) }) .attr("width", width / dataset.length ) //+5 for padding .attr("y", function(d) { return yscale(d[ 'worth in billions' ]); }) .attr("height", function(d) { return height - yscale(d[ 'worth in billions' ]); }); // add the x Axis svg.append("g") .attr("transform", "translate(0," + height + ")") .call(d3.axisBottom(xscale)) .selectAll("text") .style("text-anchor", "end") .attr("dx", ".8em") .style("font-size", "10px") .attr("dy", ".75em") .attr("transform", "rotate(-35)"); //label x axis, moving it 'down' to make it visible svg.append("text") .attr("transform", "translate(" + (width/2) + " ," + (height + margin.top *4) + ")") .style("text-anchor", "middle") .style("font-size", "30px") .text("NAME OF BILLIONAIRE"); // add the y Axis svg.append("g") .call(d3.axisLeft(yscale)) .selectAll("text") .style("font-size", 50) //label y axis, moving it 'left' to make it visible // text label for the y axis svg.append("text") .attr("transform", "rotate(-90)") .attr("y", 0 - margin.left) .attr("x",0 - (height / 2)) .attr("dy", "1em") .style("text-anchor", "middle") .style("font-size", "30px") .attr("transform", "rotate(-90)") .text("Worth in billions"); //show every 3rd tick mark, to clean up x-axis if the dataset is huge var ticks = d3.selectAll(".tick text"); ticks.attr("class", function(d,i){ if(dataset.length > 100) { if(i%3 != 0) d3.select(this).remove(); } }); }); </script></script></body> https://d3js.org/d3.v4.min.js