Arbeitslosenquoten seit 1984

Die Visualisierung zeigt die Verteilung der Arbeitslosenquoten in deutschen Städten von Januar 1984 bis Dezember 2004. Zum Vergleich die Arbeitslosenquoten ab 2005.

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, 41])
    .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); })
      .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