d3.csv("https://gist.githubusercontent.com/MamathaReddygari/2189628e89ad072cef0d2b3363cc29d8/raw/70a81fd65837cd7997a4d7188db23bd4d1dcec4e/cricket_captains.csv").then(function(data) { var width = 600, height = 400; // Create SVG container var svg = d3.select("body").append("svg") .attr("width", width) .attr("height", height); // Set up scales var x = d3.scaleBand().domain(data.map(d => d.Player)).range([0, width]).padding(0.1); var y = d3.scaleLinear().domain([0, d3.max(data, d => +d["Matches Captained"])]).nice().range([height, 0]); // Create bars svg.selectAll(".bar") .data(data) .enter().append("rect") .attr("class", "bar") .attr("x", d => x(d.Player)) .attr("y", d => y(d["Matches Captained"])) .attr("width", x.bandwidth()) .attr("height", d => height - y(d["Matches Captained"])) .style("fill", "steelblue"); // Add axes svg.append("g") .attr("transform", "translate(0," + height + ")") .call(d3.axisBottom(x)); svg.append("g") .call(d3.axisLeft(y)); // Add title svg.append("text") .attr("x", width / 2) .attr("y", 20) .style("text-anchor", "middle") .text("Bar Chart of Matches Captained by Cricket Players"); });