var svg = d3.select("svg"),

    margin = {top: 40, right: 40, bottom: 40, left: 10},

    width = svg.attr("width") - margin.left - margin.right,

    height = svg.attr("height") - margin.top - margin.bottom;

​

var formatValue = d3.format(",d");

​

var x = d3.scaleLinear()

    .rangeRound([0, width]);

​

var g = svg.append("g")

    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

​

d3.csv("https://raw.githubusercontent.com/voltdatalab/graficos/gh-pages/dados/desempregomundo.csv", type, function(error, data) {

  if (error) throw error;

​

  x.domain(d3.extent(data, function(d) { return d.value; }));

​

  var simulation = d3.forceSimulation(data)

      .force("x", d3.forceX(function(d) { return x(d.value); }).strength(1))

      .force("y", d3.forceY(height / 2))

      .force("collide", d3.forceCollide(5))

      .stop();

​

  for (var i = 0; i < 120; ++i) simulation.tick();

​

  g.append("g")

      .attr("class", "axis axis--x")

      .attr("transform", "translate(0," + height + ")")

      .call(d3.axisBottom(x).ticks(5, ".0f"));

  svg.append("text")

    .attr("class", "x label")

    .attr("text-anchor", "end")

    .attr("x", 195)

    .attr("y", 183)

    .text("%");

​

  var cell = g.append("g")

      .attr("class", "cells")

    .selectAll("g").data(d3.voronoi()

        .extent([[-margin.left, -margin.top], [width + margin.right, height + margin.top]])

        .x(function(d) { return d.x; })

        .y(function(d) { return d.y; })

      .polygons(data)).enter().append("g");

​

  cell.append("circle")

      .attr("r", 5)

      .attr("cx", function(d) { return d.data.x; })

      .attr("cy", function(d) { return d.data.y; })

      .attr("fill",function(d) { if(d.data.id === "Djibouti")return "red"; })

      ;

​

  cell.append("path")

      .attr("d", function(d) { return "M" + d.join("L") + "Z"; });

​

  cell.append("title")

      .text(function(d) { return d.data.id + "\n" + d.data.value + "%"; });

});

​

​

​

function type(d) {

  if (!d.value) return;

  d.value = +d.value;

  return d;

}

​

​