C

Christian Magelssen

@cmagelssen·18 public vizzes

Loading thumbnail…

Matrix

A matrix of small multiples displays ski racing performance data, with each row representing a skier (by bib number) and each column a split point along the course. Individual circles plot performance values, jittered on the x-axis to reduce overplotting, with axes scaled via `d3.scalePoint` and `d3.scaleLinear`. Built with D3 v7, the SVG visualization uses `d3.groups` to organize data by bib and renders interactive circles that highlight on mouseover, styled with CSS. Data originates from a CSV file of timing differences.

Loading thumbnail…

Performance analysis

Four small multiples display scatterplots of alpine ski split times across training days and course types. Each panel corresponds to a different intermediate timing point, with points jittered along the course axis. A dropdown menu filters all panels by ski academy. The visualization uses D3 v7 with SVG rendering, custom `scatter()` and `menu()` reusable chart functions, and `d3.rollups` to aggregate means. Data comes from a CSV file loaded via `d3.csv`.

Loading thumbnail…

Grouped Bar Chart

This example shows the ten most populous countries grouped by continent, with horizontal bars scaled by population. Each continent appears as a separate band containing its countries, with a title and shared x-axis. The visualization is built with React and D3 v6, using `scaleBand` for country placement, `scaleLinear` for population values, and SVG rectangles rendered via a custom `Marks` component. Data is loaded asynchronously from a CSV file using D3's `csv` method.

Loading thumbnail…

React Starter

This example demonstrates a minimal React application that loads a CSV dataset using d3.csv and logs the parsed data to the browser console. The interface renders a single centered message, “React Starter,” styled with large em-based font sizing. The code initializes a React component with the useState and useCallback hooks, fetching external data asynchronously. D3 v5 handles the CSV parsing, while React 16.13.1 manages the component lifecycle and DOM rendering through ReactDOM. This serves as a template for integrating D3 data-loading utilities within a React-based visualization project.

Loading thumbnail…

React Starter

This example demonstrates a React component that renders six red circles of increasing size onto an SVG element. The circles are positioned horizontally, with their radius and x-coordinates derived from a static data array. The code uses React hooks (`useRef` and `useEffect`) to access the SVG node and the D3 v5 `select` API to perform a data join, appending circle elements with attributes for fill, radius, and position. The rendering target is an SVG background styled with light grey.

Loading thumbnail…

HTML Starter

A single orange-to-green bar visualizes a numeric score of 79 on a fixed 0-to-100 scale. The bar’s width and fill color both derive from the same data value using `d3.scaleLinear` for the x-position and color ranges. Rendered as an SVG rectangle with a black stroke, the chart updates automatically when the data array changes. The example uses D3 v6 to append the SVG and bind the data to the rectangle element.

Loading thumbnail…

Grouped Scatter Plot

A grouped scatter plot displays the relationship between sepal length and sepal width for three Iris species, with each species rendered in its own horizontal band. The visualization uses React and D3 v6 to compose scales and axes, with `scaleBand` positioning species groups and `scaleLinear` mapping measurements. SVG circles represent individual flowers from the Iris dataset, and tooltips show exact values. Axis components are built from custom React components, while `d3.csv` loads the data from a remote source.

Loading thumbnail…

React Starter

This example shows a simple React application that renders a dropdown menu for choosing a pet. The code uses React 16.13.1 and ReactDOM to mount an `App` component into the DOM, displaying a labeled `<select>` element with six pet options. The interface is styled with a large font size for the message class, though that class is not applied in the current component. The rendering approach relies on `ReactDOM.render` to inject the component into the root element defined in the HTML.

Loading thumbnail…

React-Select Interactive Menu | Number of HIV New Case

The visualization displays the number of new HIV cases per quarter across 50 districts, shown as layered line and circle marks. Users interact with a React-Select multi-select dropdown to filter which districts appear, with the chart updating dynamically. The code uses Vega-Lite API to build the layered specification, D3.js to load CSV data from a GitHub gist, and React for state management and re-rendering. Tooltips are enabled through Vega-Tooltip, while the chart’s size adapts to the window dimensions.

Loading thumbnail…

Box Plot

This box plot visualizes the distribution of COVID-19 case counts across selected countries, showing min, first quartile, median, third quartile, and max values using a vertical whisker-and-box layout. The chart is built with React and D3 v5, using `scaleLinear` and `scaleBand` for positioning, `d3.nest` and `d3.quantile` to compute summary statistics, and SVG `rect` and `line` elements for rendering. Data comes from a CSV file of global COVID-19 figures, filtered to include only countries with at least 5,500 new cases.

Loading thumbnail…

Grouped Bar Chart

This example shows the 10 most populous countries in the world, grouped by continent, using horizontal bars whose lengths represent population. Each continent has its own chart panel with an internal band scale for its countries, all sharing a common linear population axis. The visualization is built with React and uses D3’s `scaleBand` and `scaleLinear` for layout, rendering marks as SVG rectangles. Data is loaded from a CSV file via `d3.csv`, and population labels are formatted using D3’s `format` API.

Loading thumbnail…

HW1-iris.csv

This interactive scatterplot visualizes the Iris dataset, displaying sepal and petal measurements for three Iris species. Users can dynamically select which measurement appears on the x-axis and y-axis via dropdown menus, with each update re-rendering the plot. The visualization uses d3.scaleLinear for axes and d3.scaleOrdinal to map species to distinct colors. Rendered as SVG using d3.select, d3.csv loads the data from a GitHub-hosted CSV file, while d3.axisBottom and d3.axisLeft generate the labeled axes with gridlines.

Loading thumbnail…

Meny tutorial med Curran

This example shows a simple web interface for choosing a pet from a dropdown menu. The React application renders a labeled select element with options for dog, cat, hamster, parrot, spider, and goldfish. Using the `Dropdown` component, which wraps a native HTML `<select>` element, the app manages its selected value through the `useState` hook and logs each selection to the console. The code relies on the React and ReactDOM libraries to handle state and DOM rendering, while the styles in the HTML provide enlarged text and select controls for better visibility.

Loading thumbnail…

Plain React.js

This example shows a single teal circle rendered on a plain HTML page. The circle is positioned at a fixed x-coordinate with a set radius, demonstrating the minimal setup for a React component within an SVG canvas. It uses React and ReactDOM to mount the `App` component, which renders an SVG containing the `BackgroundImg` component, a simple `<circle>` element. The styling is applied via a global CSS rule, and the page loads React and ReactDOM from CDN links, producing a static, simple visualization.

Loading thumbnail…

Untitled

A force-directed network diagram displays node clusters with colored links and interactive labels. The visualization uses `d3.forceSimulation` with charge, link, and center forces to position nodes, while drag behavior lets users reposition them. Rendering relies on SVG paths and circles, with link opacity varied by connection strength. Data comes from an embedded JSON array of nodes and edges, and a React component manages the state and lifecycle of the simulation.

Loading thumbnail…

DASHBOARD

This dashboard visualizes the performance of individual skiers across multiple runs, comparing their race time ratios against a reference time. A dropdown menu lets users select a start number (BIB) to view that skier’s data. The chart uses D3 v6 to render an SVG bar chart, with red bars for positive ratios and teal bars for negative ones, and D3 scales and axes for layout. Data is loaded from a CSV file and filtered dynamically upon selection.

Loading thumbnail…

Learning D3.js

This example demonstrates a simple animated figure built from ellipses representing a body, limbs, and a head. It uses D3.js v5 selections to append SVG shapes and apply manual `transform` attributes, while `transition()` methods animate properties like position and style. The figure is constructed entirely in code, with no external data source, and renders in a 960×500 viewport using static SVG elements.

Loading thumbnail…

Untitled

A single green circle is centered on a plain SVG canvas, demonstrating a minimal React-based visualization setup. The code uses an SVG `<circle>` element with hardcoded coordinates and dimensions, rendered directly in an HTML page. The page imports a stylesheet that resets margins and hides overflow, ensuring the circle displays cleanly. This example serves as a basic starting point for building more complex visualizations with React and SVG.