Skip to main content
Log in
C

ChrisHeinirch

@ChrisHeinirch·11 public vizzes

Loading thumbnail…

Karte Berlin

This example shows a map of Berlin’s districts, rendered as outlined polygons on a blank SVG canvas. The visualization uses the `geoConicEqualArea` projection and `geoPath` from D3 to convert GeoJSON features into SVG paths. Data is loaded asynchronously via `d3.json` from a GitHub-hosted GeoJSON file provided by Funke Interaktiv. The React component structure manages state and renders the map, with styling applied through CSS to define stroke and fill for the district boundaries.

Jul 6, 2022
Loading thumbnail…

Prototyp

This dashboard prototype demonstrates the integration of four distinct visualizations: a bar chart depicting Berlin district populations from 2005 to 2020, a line chart of cumulative COVID-19 cases with a brushable timeline for filtering, and two scatter plots exploring demographic data (LOR codes and population attributes) and COVID-19 statistics by age group. Built with React and D3 v6, the interactive visualizations feature dropdown menus for attribute selection, color legends with hover filtering, and data loaded from CSV files via `d3.csv`. Each chart component—axes, marks, and legends—is modularized within the React framework, rendered as SVG elements.

Jun 24, 2022
Loading thumbnail…

Brush Fork of Liniendiagramm gemeldete Covid-Faelle Berlin

This visualization shows the daily cumulative number of reported COVID-19 cases in Berlin between January and November 2021 as a line chart, with an interactive histogram below that allows users to brush over a time range to filter the main chart's data. The upper chart displays the cases with data points and a smooth line, while the lower histogram represents the same data as vertical bars. Built with React and D3 v5, the code uses `scaleTime`, `scaleLinear`, `brushX`, and `select` from D3 to implement the brushing interaction, and loads data from a CSV file. The SVG rendering is handled through React components for axes and marks.

Jan 17, 2022
Loading thumbnail…

Histogramm gemeldete Covid-Faelle Berlin

This interactive histogram visualizes reported COVID-19 cases in Berlin from January 1 to November 9, 2021, using public data from Berlin’s open data portal. It shows the cumulative number of cases per day, with the x-axis representing dates and the y-axis showing reported case counts. The chart is built with React and D3 v5, using `scaleTime` and `scaleLinear` for axes, and renders individual bars as SVG rectangles. The code reads the dataset via D3’s `csv` function and customizes axes and marks with helper components.

Jan 16, 2022
Loading thumbnail…

Interactive Streudiagramm Einwohner Berlin nach LOR und Altersgruppen mit Menu

This interactive scatterplot visualizes population data for Berlin’s LOR planning areas, showing residents by age group. A dropdown menu allows selection of any age cohort or total population for the x-axis, while the y-axis displays LOR codes. A color legend, using `scaleOrdinal`, encodes Berlin districts, with hover highlighting filtering the displayed circles. Built with React and D3 v5, the SVG chart uses `scaleLinear` for axes and `csv` for data loading from a gist.

Jan 13, 2022
Loading thumbnail…

SystemschichtenUndUebung

Three stacked rectangular layers in red, teal, and green represent system layers (UI, code, and data) in an abstract static diagram. Each layer uses an SVG `rect` with a fill-opacity of 0.4, a CSS `rotate3d` transform, and a colored drop-shadow filter to create a pseudo-3D stacked appearance. The visualization is rendered with React and D3 v6 inside a reusable `VizContainer` that follows the margin convention and displays the chart frame. No dynamic interaction or data binding occurs; the example focuses solely on styling layered geometric shapes.

Jan 4, 2022
Loading thumbnail…

Balkendiagramm Einwohner Bezirke Berlin

This interactive bar chart displays the population of Berlin's districts for the year 2020. Built with React and D3 v5, it uses `d3.scaleBand` for the categorical y-axis and `d3.scaleLinear` for the quantitative x-axis, rendering data as SVG rectangles. The chart includes axes with formatted tick labels and a tooltip showing the exact population value. Data is loaded from a CSV file via `d3.csv`, based on statistics from Stadtentwicklung Berlin.

Dec 30, 2021
Loading thumbnail…

Designed Streudiagramm Einwohner Berlin nach LOR und Altersgruppen mit Menu

This scatterplot visualizes Berlin's population data across LOR planning areas, with each point representing a district's demographic profile. Users can dynamically select which age group or population metric to plot on the X and Y axes via dropdown menus. The visualization leverages React for interactive state management, D3 v5 for scales and CSV data loading, and SVG rendering for the plotted points. A color legend encodes Berlin's districts, while tooltips reveal exact values for each data point. The data comes from official Berlin statistics on residents by LOR planning area as of December 31, 2020.

Dec 10, 2021
Loading thumbnail…

Liniendiagramm gemeldete Covid-Faelle Berlin

The chart displays cumulative reported COVID-19 cases across Berlin’s districts from January 1 to November 9, 2021, using a line with circular markers. It is rendered as SVG via React components, with scales from d3.scaleTime and d3.scaleLinear, and axes built with custom tick components. The line path and circles are generated using d3.line and d3.curveNatural, while hover tooltips use native SVG `<title>` elements. Data is loaded asynchronously from a CSV via d3.csv, and the visualization is based on public Berlin open data.

Dec 10, 2021
Loading thumbnail…

Balkendiagramm Einwohner Bezirke Berlin mit Menu

This bar chart displays the population of Berlin's districts for the years 2005, 2010, 2015, and 2020, using a React-based menu to switch between these temporal datasets. The visualization renders as SVG, using D3's `scaleBand` for the categorical y-axis (districts) and `scaleLinear` for the numerical x-axis (population). D3's `csv` function loads the data from a GitHub gist. The chart encodes values with horizontal bars, colored in a uniform tone, with axis ticks and labels formatted in a custom style, while a dropdown menu (via `react-dropdown`) controls the year selection.

Dec 9, 2021
Loading thumbnail…

Streudiagramm Covidfälle Altersgruppe

A scatterplot visualizes cumulative COVID-19 case counts, daily case differences, and cumulative incidences across age groups. Users select the x- and y-axis metrics through dropdown menus, with points colored by age group via a legend. The React app loads CSV data from a GitHub gist, using d3.scaleLinear and scaleOrdinal for axes and color mapping, rendered as SVG circles with tooltips showing exact values.

Dec 8, 2021