machetenwueter

@machetenwueter·11 public vizzes

Geodata 1. Lesson

This example renders a world map using the Natural Earth projection, displaying country boundaries as filled landmasses, graticules, and a sphere outline. It highlights internal country borders with a distinct stroke color. The visualization loads geographic data from the World Atlas TopoJSON source and processes it with `topojson` features and meshes. The map is drawn using D3’s `geoNaturalEarth1`, `geoPath`, and `geoGraticule` functions, with SVG paths generated within a React component.

Aug 10, 2021

Loading thumbnail…

Globe 1. Try

This interactive globe displays cities with populations over 100,000 as steel-blue circles, with size scaled by population. Users can drag to rotate the orthographic projection and scroll to zoom, with tooltips showing city names and populations on hover. Using d3.geoOrthographic, d3.geoPath, and d3.drag, it renders low-resolution world boundaries while moving and higher-resolution 50m shapes when still. City data comes from a CSV of Geonames cities, loaded via d3.csv, with geographic shapes from TopoJSON World Atlas.

Aug 9, 2021

Loading thumbnail…

React 1. Try

A React application renders an interactive SVG circle that follows the mouse cursor across a 960x500 canvas. The circle changes color between blue and red on click, and expands by 20 pixels when hovered over. Using React's `useState` and `useCallback` hooks, the component updates the circle's position, fill, and radius based on mouse events. The visualization demonstrates React's declarative rendering with SVG, loading React 16.9.0 from a CDN and drawing the circle via JSX within an `<svg>` element.

Aug 7, 2021

Loading thumbnail…

Religion Barchart

A stacked bar chart displays the estimated 2010 religious composition of the 20 most populous countries, using data from the Pew Research Global Religious Landscape. Bars are sorted by total population, with each segment representing a religion's share. Hovering over a bar shows a tooltip with the exact population count for that religion and country. The chart uses D3.js with d3.layout.stack for stacking, d3.legend for the interactive color legend, and d3.tip for tooltips. Highlighting a religion in the legend dims all other bars, focusing attention on the selected group.

Jul 29, 2021

Loading thumbnail…

Barchart

This example shows an interactive bar chart with multiple data series that can be toggled between grouped and stacked layouts via radio-button style controls. Additional buttons allow users to show or hide individual series. The visualization uses D3 v6 with SVG rendering and animated transitions, employing `d3.stack` to compute stacked values and `d3.scaleBand` and `d3.scaleLinear` for positioning. Data is generated procedurally using smooth random bumps, and mouseover interactions display tooltips with precise values.

Dec 3, 2020

Loading thumbnail…

Test

Random letters from a shuffled alphabet are bound as keyed data to SVG groups, with each letter’s nested text element updating position and color through a sequence of `d3.transition` calls. The `join` method handles enter, update, and exit selections, moving new letters from green at the top to black in place, and fading exiting letters downward in brown before removal. Triggered by a button click, the animation demonstrates D3 v6’s data-join lifecycle with `selection.data`, key functions, and transition chaining.

Nov 21, 2020

Loading thumbnail…

Fruitbowl_dyn

A dynamic fruit bowl visualization tracks a small dataset of apples and lemons as it changes over time. The example uses D3 v5 with a custom `fruitBowl` component and SVG animation, leveraging `transition` and `merge` operations for smooth updates. Fruits are represented as colored circles with a scaleOrdinal color mapping, and each state change—adding, removing, or replacing fruit—triggers animated transitions in position, radius, and text opacity. The underlying data is generated programmatically in `index.js` using `range` and `Math.random`.

Nov 19, 2020

Loading thumbnail…

Lesson 3

This interactive chart visualizes the purchase quantities of various grocery items across different years. Users can filter the data by year, month, or week using dropdown menus and navigation buttons, while radio buttons control the zoom level (yearly, monthly, weekly, or daily). The visualization is rendered as a stacked multi-bar chart using the NVD3 library with D3 v3, displaying SVG elements with smooth transitions. The data is loaded from a local JSON file containing product names and their corresponding values for each time period.

Nov 16, 2020

Loading thumbnail…

Tooltip

A single SVG circle serves as the target for an HTML tooltip built with D3.js v5. The tooltip, styled with absolute positioning and a border, appears on mouseover, follows the cursor via mousemove events, and hides on mouseout. It contains an image and styled text, demonstrating how D3 can manage interactive HTML overlays alongside SVG shapes. The example uses D3's selection and event handling methods on the circle's ID.

Nov 11, 2020

Loading thumbnail…

U1

A smiling face animation shows an expressive character with yellow circular head, black eyes, and a curved mouth. The D3.js visualization uses SVG shapes to construct the face, with animated eyebrows that move up and down over two seconds using chained `.transition()` calls. The code loads time-series data from `data.json` with d3's `json()` function, though the data is only logged to console. The face is built using D3's `arc()` path generator for the mouth and standard SVG rect and circle elements.

Sep 22, 2020

Loading thumbnail…

U2

This bar chart displays the populations of the ten most populous countries, with the United States at roughly 327 million and China leading at over 1.4 billion. Values are read from a CSV file and scaled using `d3.scaleLinear` and `d3.scaleBand`, while axes are generated with `axisLeft` and `axisBottom`. The chart uses D3 v5 to render SVG rectangles, with each bar’s height set by the band scale and its width proportional to population.

Aug 4, 2020