Arbeitslosigkeit in Deutschland

Die Visualisierung zeigt die Verteilung der Arbeitslosenquoten für die deutschen Landkreise und kreisfreien Städte von Januar 2005 bis Januar 2013. Die Farbe repräsentiert die Anzahl der Landkreise und Städte, deren Arbeitslosenquoten im entsprechenden Bereich lagen.

Siehe auch gefiltert nach Landkreisen und Städten.

Nach einer Idee von Mike Bostock.

<!DOCTYPE html>
<meta charset="utf-8">
<style>

svg {
  font: 10px sans-serif;
}

.axis path,
.axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}

</style>
<body>
<script src="https://d3js.org/d3.v3.min.js"></script>
<script>

var margin = {top: 20, right: 20, bottom: 30, left: 40},
    width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;

var x = d3.time.scale()
    .rangeRound([0, width]);

var y = d3.scale.linear()
    .domain([0, .35])
    .rangeRound([height, 0]);

var z = d3.scale.linear()
    .domain([0, 44])
    .range(["white", "purple"])
    .interpolate(d3.interpolateLab);

var xAxis = d3.svg.axis()
    .scale(x)
    .orient("bottom");

var yAxis = d3.svg.axis()
    .scale(y)
    .orient("left")
    .tickFormat(d3.format("%"));

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 + ")");

d3.json("unemployment.json", function(error, data) {
  var parseDate = d3.time.format("%Y-%m").parse;

x.domain(d3.extent(data, function(d) { return d.key = parseDate(d.key); }));

var date = svg.selectAll(".date")
      .data(data)
    .enter().append("g")
      .attr("class", "date")
      .attr("transform", function(d) { return "translate(" + x(d.key) + ",0)"; });

date.selectAll(".bin")
      .data(function(d) { return d.values; })
    .enter().append("rect")
      .attr("class", "bin")
      .attr("y", function(d) { return y(d.x + d.dx); })
      .attr("height", function(d) { return y(d.x) - y(d.x + d.dx); })
      .attr("title", function(d) { return d.y; })
      .style("fill", function(d) { return z(d.y); });

date.each(function(d) {
    d3.select(this).selectAll(".bin")
        .attr("width", x(d3.time.month.offset(d.key, 1)) - x(d.key));
  });

svg.append("g")
      .attr("class", "x axis")
      .attr("transform", "translate(0," + height + ")")
      .call(xAxis);

svg.append("g")
      .attr("class", "y axis")
      .call(yAxis);
});

</script>

Modified http://d3js.org/d3.v3.min.js to a secure url

https://d3js.org/d3.v3.min.js