Data about the different quarters of Cologne, Germany

100%

Data about the different quarters of Cologne, Germany

✓ Published0🌍 Public

Last edited Mar 23, 2015

Created on Mar 23, 2015

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.

AI-generated description

Similar vizzes

Loading thumbnail…

Data for Public aid in cologne city quarters

This visualization shows the long-term trend of public aid recipients in Cologne, comparing categories such as total persons in need, single parents, and couples with children from 2005 to 2012. It uses a small-multiple line chart layout, with each facet representing a different household type. The data is read from CSV files and reshaped via JavaScript, then plotted using D3.js’s `d3.line` and `d3.points` APIs. The y-axis scale is shared across facets to enable direct comparison, while the x-axis encodes the year. The source data comes from an open gist.

PP3nny

77% match

Loading thumbnail…

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.

PP3nny

76% match

Loading thumbnail…

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.

PP3nny

73% match

Loading thumbnail…

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.

PP3nny

68% match

Loading thumbnail…

My first barchart

The bar chart presents voter turnout percentages per Cologne district, with horizontal bars sorted in descending order. The visualization uses a simple SVG barchart created with the d3 v3 library. The code loads a CSV file named "veedel_data.csv" and sorts the data by the `wahlbeteiligung` field using `d3.descending`. Each bar's length maps to the turnout value, and hovering over a bar reveals a tooltip showing the district name and turnout percentage.

PP3nny

68% match

Loading thumbnail…

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.

PP3nny

68% match

Loading thumbnail…

Gist cb853c154b8bb2343561

This visualization maps Barcelona’s neighborhood demographics across multiple years, contrasting population age brackets with a family income index (where the city average equals 100). It renders each district as a choropleth, using color intensity to represent income disparities, and likely employs discrete legends for each year. The code uses D3.js for geospatial paths and data binding, with an interactive year selector to toggle between 2008 and 2009 datasets. The data originates from a CSV file, parsed and joined to the geographic boundaries for display.

QQbelil

67% match

Loading thumbnail…

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.

PP3nny

67% match