Jens Grochtdreis

@jensgro·10 public vizzes

Sized Points on a Map

This example displays a world map with cities sized by population, using a sqrt scale to encode values up to 15 pixels in radius. The map is rendered in SVG with d3.geoPath, d3.geoNaturalEarth1 for projection, and graticules for reference. City data comes from the Simplemaps World Cities Database, while country boundaries use World Atlas TopoJSON. React manages the component state and lifecycle, fetching both datasets via d3.csv and d3.json before rendering.

May 6, 2020

Loading thumbnail…

Choropleth map

This choropleth map colors world countries by economy type using a spectral color scale. The map is rendered with SVG, using `d3.geoPath` with the Natural Earth projection, and supports zooming via `d3.zoom`. A legend with color swatches allows users to click a category, which highlights matching countries while dimming others. Data is loaded from the world-atlas TopoJSON and TSV files.

May 6, 2020

Loading thumbnail…

Tab.1(3)- Items of general project funding in 2018 (by nature of institutions)

A stacked bar chart breaks down 2018 sales for Consumer, Corporate, and Home Office segments, with each bar segmented by product sub-category and tooltips revealing exact item counts. The visualization uses D3.js libraries including `d3.layout.stack` for the stacked layout, `d3.svg.axis` for axes, and `d3.legend.color` for the interactive legend that highlights sub-category layers on hover. Animation is achieved through D3's SVG rendering, and the data comes from the provided CSV file.

May 6, 2020

Loading thumbnail…

Untitled

This example shows the distribution of two variables as overlapping histograms, with semi-transparent bars in teal and dark purple to reveal how their ranges compare. The visualization is built with D3.js v4 and rendered as SVG, using `d3.histogram()` to bin the data and `d3.scaleLinear()` for the axes. The code loads a CSV file, filters it by a `type` column, and draws both series on a shared x-axis while scaling the y-axis to the maximum bin count. A handmade legend identifies the two variables.

May 6, 2020

Loading thumbnail…

Workshop Results

Four small-multiple bar charts compare population outcomes across four driving automation modes—Default, Workshop, Shared, and Autonomous—for ten countries. A dropdown menu switches the comparison between pairs of phases. The stacked bars are rendered as SVG rectangles, animated via `transition().duration()`, with axes built using `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` from D3 v5. Data comes from World Population Prospects 2017, loaded from a remote JSON endpoint.

Apr 19, 2020

Loading thumbnail…

Untitled

This interactive stacked bar chart displays state-level data across two years. A dropdown menu selects the year, and the visualization animates the transition between the 2017 and 2018 views. The chart uses a categorical color scale to distinguish three data ranges. The code leverages D3 v5 APIs including `d3.csv`, `d3.scaleBand`, `d3.scaleLinear`, and `d3.stack`. Built with SVG elements, the bars and their total value labels are rendered directly, with a 750ms transition on year change.

Apr 19, 2020

Loading thumbnail…

Untitled

A stacked bar chart displays earthquake counts by magnitude range for individual U.S. states across two years. A dropdown menu lets viewers switch between 2017 and 2018, triggering a smooth 750-millisecond transition that updates bar heights, positions, and axis scales. The visualization uses D3 v5 with SVG rendering, employing d3.stack, d3.scaleBand, d3.scaleLinear, and d3.scaleOrdinal to map the year, state, and three magnitude categories from a CSV file. Total counts appear as text labels above each bar.

Apr 19, 2020

Loading thumbnail…

Making a Bar Chart

This example visualizes population data for ten countries as a bar chart, with counts adjusted by a factor of one thousand. Built with D3 v5, it uses `select`, `csv`, `scaleLinear`, `scaleBand`, `max`, `axisBottom`, `axisLeft`, and `format` to render SVG elements. The chart draws steelblue bars and labels each with its population value, while comments indicate optional axes and gridlines that are currently disabled.

Apr 19, 2020

Loading thumbnail…

Making a Bar Chart

This example demonstrates how to build a horizontal bar chart from scratch using D3 v5 in a React framework. The visualization displays population data for ten countries, with bars rendered as SVG rectangles scaled linearly by population and positioned using a band scale for country names. The code explicitly uses D3’s `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` functions, reading data from a CSV file. Axes are appended to a grouped SVG element, and bar heights are determined by the band scale’s bandwidth.

Apr 19, 2020

Loading thumbnail…

Interactive pie and bar

This interactive dashboard combines a bar chart and pie chart to explore categorical frequency data across several US states. The bar chart displays total counts for each state, with hovering over a bar updating the pie chart and legend to show the breakdown by subcategory (CAM, CSIS, GAV) using animated transitions. Built with React and D3 v3, it uses SVG elements, ordinal and linear scales, and d3.svg.axis to render the visualizations, with mouseover and mouseout handlers driving the dynamic updates.

Apr 19, 2020