Data for Public aid in cologne city quarters

Data about the different quarters of Cologne, Germany

This visualization presents a multi-faceted demographic profile of Cologne’s 86 districts using a CSV from a public gist, with each row representing a district. It shows how metrics like population density, age distribution, and migration background vary across the city through an interactive scatter plot, where each point is a district colored by its borough. Built with D3’s `forceSimulation` for layout and `geoPath`-based Voronoi tessellation for district shapes, the tooltip dumps all raw column values on hover. The data source is the city’s open statistics portal, loaded directly into the page for filtering.

77% match

Line Chart with Multiple Lines

This example shows how the number of ALG II benefit recipients in Cologne changed from 2005 to 2012 across nine different demographic categories, such as single-parent households or foreign nationals. Each category is rendered as a separate line, using `d3.svg.line` with interpolated smoothing and a category-10 color scale. The data is parsed from a CSV file and nested by category with `d3.nest`, while time is handled via `d3.time.scale`. Axes are drawn with `d3.svg.axis`, and the SVG rendering uses `d3.select` to append paths and labels.

71% match

Scatterplot Kölner Wahlbeteiligung vs Arbeitslosenquote

This visualization shows the relationship between voter turnout and unemployment rates across Cologne’s districts, with each circle representing a district. It uses D3 v3 to draw an SVG scatterplot, sorting data by turnout and animating the points from left to right using `transition().duration()` and staggered delays. The x-axis displays unemployment percentage, the y-axis shows turnout percentage, and hovering highlights circles. Data comes from the Offene Daten Köln portal for the 2014 municipal election, loaded via `d3.csv` from an external file.

69% match

Cleaning Up

This visualization shows voter turnout percentages across Cologne’s distinct neighborhoods, or *Veedel*, as horizontal bars sorted in descending order. Using D3 v3, it employs an ordinal scale with `rangeRoundBands` for the y-axis and linear scales for the x-axis, rendering SVG rectangles and dual top/bottom axes via `d3.svg.axis`. The data, sourced from Offene Daten Köln’s 2014 local election records, is loaded from a CSV, with hover effects and tooltips revealing exact percentages.

67% match

Insta Cologne

This visualization shows Instagram photos for Cologne’s districts (Veedel) on an interactive SVG map, with a choropleth coloring indicating cars per household. Clicking a district triggers the Instafeed API to load recent tagged photos. The map uses `d3.geo.mercator` projection and `d3.geo.path` for rendering, reading district boundaries from `/cologne.json` and statistical data from `/Stadtteildaten.csv`. A legend displays minimum, maximum, and average values using `d3.scale.linear` for color encoding.

My first barchart

This is a simple horizontal bar chart built with D3.js (v3) that visualizes voter turnout across Cologne city districts, sorted in descending order by the `wahlbeteiligung` value. The chart uses SVG rectangles, with each bar’s width proportional to the turnout percentage and its vertical position spaced by index. The code loads data from a CSV file using `d3.csv` and appends tooltips via the SVG `title` element to display each district’s name and turnout. The visualization primarily demonstrates basic data binding, sorting, and attribute manipulation with D3’s selection methods.

My first barchart

This bar chart displays voter turnout percentages across Cologne districts, sorted in descending order with district names and turnout values shown as tooltips on hover. Rendered as SVG rectangles, each bar’s width maps directly to the `wahlbeteiligung` CSV field. The code uses D3 v3’s `d3.csv` for data loading, `d3.descending` for sorting, and standard SVG selections (`selectAll`, `data`, `enter`) to bind data and append `title` elements for interactivity.

Gist 6167722

This example visualizes the financial crisis aid amounts used by EU member states from 2008 to 2011, breaking down total aid into categories like recapitalisation, guarantees, asset relief, and liquidity measures. It uses a treemap layout with `d3.layout.treemap` and `d3.scale.ordinal` for color encoding, displaying each country’s aid value as a percentage of its 2011 GDP. The chart is rendered using `d3.svg` and `d3.text` to load the CSV data from a gist, with labels showing country names and aid amounts in billions of euros.

EEleonore9