LeoBergqvist

@LeoBergqvist·8 public vizzes

Treemap from bl.ocks.org

This interactive treemap visualizes a hierarchical dataset representing two academic semesters, with courses nested within periods. The treemap uses animated rectangles whose sizes reflect either the sum of course credits or the count of courses within each category, toggleable via radio buttons. Built with D3 v4’s `d3.treemap` and `d3.hierarchy`, the SVG rendering includes labels with clipping paths and color-coded tiles. Data loads from `flare.json`, and transitions animate layout changes via the `transition()` method.

Mar 1, 2020

Loading thumbnail…

A horrible horrible attempt at d3

This example displays a basic world map rendered as SVG paths using the Natural Earth projection, with countries filled in light green and a blue sphere background. It implements zoom and pan interactions through d3.zoom, applying transforms to a group element. The code loads geographic data from the world-atlas TopoJSON package and country names from a corresponding TSV file, using d3.geoPath and topojson.feature to generate the map. A hover effect changes country fill to white, shown via CSS classes.

Feb 23, 2020

Loading thumbnail…

Cheap Tricks for Interaction

This example shows a world map with countries colored light green and a blue sphere background. Hovering over a country turns it red, and users can pan and zoom the entire map using the mouse wheel or drag gestures. The visualization uses D3 v5 with a natural Earth projection via `d3.geoNaturalEarth1` and renders the map as SVG paths generated with `d3.geoPath`. Country boundaries come from TopoJSON world-atlas data, while country names are loaded from a TSV file and attached as SVG `<title>` tooltips. Zoom and pan behavior is implemented through the `d3.zoom` API.

Feb 23, 2020

Loading thumbnail…

Cheaper Tricks for Interaction

This interactive map displays world countries using a natural Earth projection, with hover highlighting and zooming enabled through d3.zoom. The visualization renders geographic features as SVG paths using d3.geoPath, projecting TopoJSON data from the world-atlas package. Country names are joined from TSV data using ISO numeric codes, and tooltips appear via SVG title elements on hover. The map supports pan and zoom transformations triggered by mouse events, with the sphere background and country shapes filled in contrasting colors.

Feb 22, 2020

Loading thumbnail…

Cheap Tricks for Interaction

This interactive map shades countries by economic classification using a categorical color scale, with a clickable legend that filters the visible categories. The visualization uses d3.zoom for panning and zooming, d3.geoNaturalEarth1 with d3.geoPath for geographic projection, and SVG paths with title tooltips for hover details. Data comes from the world-atlas TopoJSON dataset joined with TSV metadata via d3.tsv and topojson.feature. The colorLegend module builds a custom SVG legend with circles and text, while CSS hover effects highlight individual countries.

Feb 21, 2020

Loading thumbnail…

Cheap Tricks for Interaction

A world map colored by economy type uses D3 v5's geoNaturalEarth1 projection and d3.geoPath to render country boundaries from TopoJSON data. Hovering highlights countries in red via CSS, while a reusable colorLegend function displays a clickable legend with colored circles. The map supports pan and zoom through d3.zoom, with the visualization powered by SVG rendering and a sequential spectral color scale.

Feb 21, 2020

Loading thumbnail…

Cheap Tricks for Interaction

This interactive map uses a natural Earth projection with D3’s `geoPath` and `geoNaturalEarth1` to color countries by economic classification, employing a spectral `scaleOrdinal` and a custom color legend with circles and text. Zooming is enabled via `d3.zoom`, while hovering highlights countries in red through CSS. World map geometry comes from TopoJSON’s `world-atlas`, enriched with metadata from a TSV file. The example demonstrates simple, reusable interaction patterns—tooltips via SVG `<title>` elements and a hover effect—without complex brushing or transitions.

Feb 21, 2020

Loading thumbnail…

Shapes and Colors with SVG and CSS

This example demonstrates how SVG shapes and CSS styling can be combined to create structured graphics. It shows circles, rectangles, lines, and paths arranged within a scalable group, using both inline presentation attributes and external stylesheet rules. The `styles.css` file applies stroke styles to line and path elements via class selectors, while inline `fill` and `stroke` attributes directly control individual shapes. SVG transform groups are used for positioning and scaling, enabling a layered composition. The rendering remains purely vector-based, relying on the SVG specification and CSS cascade without JavaScript libraries.

Feb 21, 2020