Classic D3 Examples
Old school D3 from simpler times
jk6653284
Full window
Github gist
fresh block
Built with
blockbuilder.org
<!DOCTYPE html> <head> <meta charset="utf-8"> <script src="https://d3js.org/d3.v4.min.js"></script> <style> body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; } </style> </head> <body> <script> // margin of SVG var margin = {top: 50, right: 50, bottom: 50, left:50}; // width/height of div var width = 600 - margin.left - margin.right; var height = 600 - margin.top - margin.bottom; // create svg and append to bchart div 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 + ")"); // set ranges var x = d3.scaleBand() .range([0,width]); var y = d3.scaleLinear() .range([height,0]); // get data d3.csv("https://gist.githubusercontent.com/jk6653284/4c950c3ad690ba403bd0b6f6e21c68b4/raw/f8c68bbd85e0a8060c17716ad8865108917dd854/gdp_data.csv", function(error, data) { if (error) throw error; //console.log(data) // format data data.forEach(function(d) { d.Agricolture = +d.Agricolture; d.Industry = +d.Industry; d.Services = +d.Services; }); // scale range of data in the domains x.domain(data.map(function(d) { return d.Country;})); y.domain([0, d3.max(data, function(d) { return d.Agricolture;})]); svg.selectAll(".bar") .data(data) .enter().append("rect") .attr("class", "bar") .attr("x", function(d) { return x(d.Country); }) .attr("width", x.bandwidth()) .attr("y", function(d) { return y(d.Agricolture); }) .attr("height", function(d) { return height - y(d.Agricolture); }); // add x axis and y axis 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", 0 - (margin.top / 2)) .attr("text-anchor", "middle") .style("font-size", "16px") .style("text-decoration", "underline") .text("Agriculture GDP by country"); </script> </body>
https://d3js.org/d3.v4.min.js