Skip to main content
Log in
F

Florian Breitwieser

@fbreitwieser·4 public vizzes

Loading thumbnail…

Choropleth Map with Interactive Filtering

This choropleth map displays global economic classifications per country, with a natural Earth projection and color-coded fill based on categorical data. Users interactively filter the map by clicking color legend items, which dims all non-selected countries and reduces the sphere’s opacity. The visualization uses D3 v5 APIs including `d3.geoPath`, `d3.geoNaturalEarth1`, `d3.scaleOrdinal`, and `d3.zoom`, with topojson loading world-atlas data. Hovering a country reveals its name and value via a tooltip, while the legend highlights the active selection.

May 9, 2019
Loading thumbnail…

Choropleth Map with Interactive Filtering

This choropleth map displays global economic classifications per country, with a natural Earth projection and color-coded fill based on categorical data. Users interactively filter the map by clicking color legend items, which dims all non-selected countries and reduces the sphere’s opacity. The visualization uses D3 v5 APIs including `d3.geoPath`, `d3.geoNaturalEarth1`, `d3.scaleOrdinal`, and `d3.zoom`, with topojson loading world-atlas data. Hovering a country reveals its name and value via a tooltip, while the legend highlights the active selection.

May 9, 2019
Loading thumbnail…

Choropleth Map

A world choropleth map colors each country by its economy category using an ordinal color scale. The visualization uses d3 geoNaturalEarth1 projection with d3.geoPath to render countries from TopoJSON data, enriched with world-atlas TSV metadata. A custom color legend component displays the categories, and d3.zoom enables interactive panning and zooming. Country outlines appear in black, with hover effects highlighting individual nations in red.

May 9, 2019
Loading thumbnail…

Untitled

This example shows a brushable line chart for exploring genomic coverage data, plotting the percentage of covered positions along a chromosome. The main focus panel displays multiple colored lines, while a smaller context panel below provides a zoomed-out overview. Using D3.js v5, the visualization employs `d3.brushX` to allow brushing on the context chart, which updates the x-axis domain of the focus panel via a brush event handler. Data is loaded from a CSV file with `d3.csv`, and lines are rendered as SVG paths using `d3.line` with scales from `d3.scaleLinear`.

Nov 29, 2018