Insta Cologne

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.

76% 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.

71% match

fernwaerme2

This example visualizes the heat supply network of Hamburg’s districts using a custom SVG map. The choropleth colors encode district-level data from the GeoJSON file `bezirke_ohne_neuwerk.json`, which is projected and rendered with D3 v4. The map highlights the seven districts (Bezirke) of Hamburg, excluding Neuwerk, using a color scale to represent the district attribute values. The visualization is built with Blockbuilder.org and relies on D3’s geographic projection and SVG path generation to draw the district boundaries, with tooltips or legends implied to support reading the quantitative variation.

AAnniWis

64% match

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.

64% match

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.

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.

Greggpollack Last night in Berlin

This visualization maps Greggpollack’s notes on Berlin nightlife and dining, showing each recommendation as a labeled point on a geographic backdrop. It uses d3.forceSimulation to position the text labels and d3.geoPath to render the city streets, with the underlying map data drawn from a public GeoJSON source. The code reads the gistfile1.md content directly, parsing the markdown for venue names and links, then assigns each entry a color-coded marker by category—food, clubs, or jazz. Hovering highlights the associated label, while a tooltip displays the original URL. The layout intentionally scatters points to avoid overlap, mimicking the casual, list-based structure of the source file.

DDylanFM

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.