D3 Examples - income vs country

xxxxxxxxxx
 
<!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>
    