D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
kmix27
Full window
Github gist
income vs country
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; } .bar { fill : steelblue; } .bar:hover { fill : orangered; } div.tooltip { position: absolute; padding: 3px 9px 6px 9px; border-radius: 2px; text-align: center; font: 12.36px sans-serif; background: goldenrod; border-radius:8px; text-align: center; } </style> </head> <body> <script> d3.json( "nations.json", function(error, json){ if (error) throw error; var data = json var svg = d3.select("body").append("svg") .attr("width", 960) .attr("height", 500) ; var width = +svg.attr("width"), height = +svg.attr("height"), margin = {top: 50, bottom: 100, left: 50, right: 30} ; var xExtent = d3.extent(data, function (d) {return d["name"]}) ; var xScale = d3.scalePoint() .domain(data.map(function(d){return d.name})) .range([margin.left, width - margin.right]) // starts at the left margin, finish to the left of the beginning of r margin ; var yMax = d3.max(data, function (d) {return d["income"]}) ; var yScale = d3.scaleLinear() .domain([0,yMax]) .range([height - margin.bottom, margin.top]) //start above the bottom margin, finish at margin top ; var heightScale = d3.scaleLinear() .domain([0, yMax]) .range([0, height - margin.top - margin.bottom]) //begin at 0 (origin top) finish at the top of bottom margin ; var div = d3.select("body").append("div") .attr("class", "tooltip") .style("opacity", 0) ; svg.selectAll(".bar") .data(data) .enter().append("rect") .attr('class','bar') .attr('width',4.5) .attr("height", function(d) {return heightScale(d['income']); }) .attr("x", function(d) {return xScale(d.name)}) .attr("y", function(d) {return yScale(d.income)}) .on("mouseover", function (d) { div.transition() .duration(400) .style("opacity", .9); div .html(d["name"] + "<br/>" +"Annual income: $"+d['income']) .style("left", (d3.event.pageX + 5) + "px") .style("top", (d3.event.pageY - 28) + "px") ; }) // .on("mousemove", function(d){ // div // .html(d["name"] + "<br/>" // + "Annual income per capita: " + d['income']) // .style("display", "inline-block") // .style("left", (d3.event.pageX + 5) + "px") // .style("top", (d3.event.pageY - 28) + "px") // // .style("display", "inline-block") // ; // }) .on("mouseout", function(d) { div.transition() .duration(400) .style("opacity",0); }) ; var xAxis = d3.axisBottom() .scale(xScale) ; var yAxis = d3.axisLeft() .scale(yScale) ; svg.append("g") .attr("fill", "black") .attr("transform", "translate(" + [0, height - margin.bottom] + ")") .call(xAxis) .selectAll("text") .attr("y", 0) .attr("x", 9) .attr("dy", ".35em") .attr("transform", "rotate(75)") .style("text-anchor", "start") .attr("font-size",4.5) ; svg.append("g") .attr("fill", "black") .attr("transform", "translate(" + [margin.left, 0 ] + ")") .call(yAxis) .append("text") .attr("class", "axis-title") .attr("transform", "rotate(-90)") .attr("y", 6) .attr("x", -95) .attr("dy", "0.71em") .attr("text-anchor", "middle") .text("Income per capita") .style("fill","black") ; }) ; </script>
https://d3js.org/d3.v4.min.js