C

codexmon

@codexmon·17 public vizzes

Loading thumbnail…

Polished Scatter Plot with Menus

This interactive scatter plot visualizes the Iris Dataset, displaying measurements such as petal length and sepal width. Users can independently select which attribute is plotted on the X and Y axes using ReactDropdown menus, with axis labels updating accordingly. The visualization uses React with hooks to manage state, D3 scales (scaleLinear) for positioning, and renders SVG circles with tooltips via the title element. Custom AxisBottom and AxisLeft components generate ticks, while CSV data is loaded asynchronously through the d3.csv function.

Loading thumbnail…

Color and Size Legends - Component Experiment

This example demonstrates two custom legend components—one for a categorical color scale and one for a quantitative size scale—rendered as SVG within a D3 v5 visualization. The color legend uses `scaleOrdinal` to map fruit names to colors, while the size legend uses `scaleSqrt` to map numeric values to circle radii. Both legends are implemented as reusable functions that receive their parameters via `Object.assign`, following the "Towards Reusable Charts" pattern. The code explicitly sets properties on the component functions before invoking them with `.call()`, and each legend updates its groups, circles, and text elements through D3's select, enter, merge, and exit operations.

Loading thumbnail…

Color and Size Legends

This example demonstrates how to construct separate color and size legends using D3 v5. A color legend maps ordinal categories to distinct colors, while a size legend uses a square root scale to represent numeric values with varying circle radii. The code defines reusable `colorLegend` and `sizeLegend` functions that handle tick creation, circle rendering, and text labels, then calls them with `selection.call()`. Both legends render as SVG groups with styled text and outlined circles, using `scaleOrdinal` and `scaleSqrt` from the d3 module.

Loading thumbnail…

World Countries Tree

This visualization displays a hierarchical tree of world countries, organized by continent and subregion, with each country shown as a text label and connected by curved links. The D3.js code uses the `tree` layout, `hierarchy`, and `linkHorizontal` generators to position the nodes and draw the connecting paths. Rendered as an SVG with a fixed viewport, the tree supports zooming through the `zoom` module, which updates the root group’s transform on the `'zoom'` event. Node labels vary in font size based on depth, using the Playfair Display typeface.

Loading thumbnail…

Blank Canvas

A blank, fixed, full-viewport SVG canvas is drawn using D3 (d3.v5). The visualization only renders a single rounded rectangle covering the entire browser window, with no underlying data or marks beyond this base shape. The code uses D3’s `select` and `attr` methods to size the SVG to the viewport’s clientWidth and clientHeight, applying rounded corners via `rx`. It relies on HTML `body` CSS for positioning and uses a simple SVG `rect` element for output.

Loading thumbnail…

Let's make a map with D3.js!

This example displays a world map rendered as an SVG, with countries filled in light green against a blue spherical backdrop. It uses D3 v5 and TopoJSON to load world-atlas data, then applies a natural Earth projection via `d3.geoNaturalEarth1` and traces country boundaries with `d3.geoPath`. The code also draws a background sphere path to represent the globe.

Loading thumbnail…

Map with Selectable Countries

This interactive choropleth map displays world countries colored by their economic classification, with grayed-out, semi-transparent countries when one is selected. Clicking a country highlights it and shows its name and value in a tooltip; clicking again deselects it, and clicking a color legend swatch filters the map to that category. Built with D3 v5, it uses `d3.geoNaturalEarth1` for projection, `d3.geoPath` for rendering SVG paths, and `topojson.feature` to convert TopoJSON from the world-atlas package, joined with TSV metadata containing ISO codes and economy data.

Loading thumbnail…

Choropleth Map with Interactive Filtering

A world choropleth map colors countries by economic classification using a categorical ordinal scale. Clicking a legend item filters the map, dimming unselected countries and highlighting the chosen category while clicking again resets the view. The visualization is built with D3 v5, using `geoNaturalEarth1` and `geoPath` for map projection and rendering, with pan and zoom enabled via `d3.zoom`. Data comes from the World Atlas TopoJSON, and the legend uses SVG circles with click handlers.

Loading thumbnail…

Bowl of Fruit - Topologica Experiment

Five apples appear as red circles in a row, then one is removed and another becomes a yellow lemon, with a black outline on hover. Built with Topologica and D3 v5, the visualization demonstrates declarative incremental updates: the `fruitBowl` component uses `selection.selectAll` and `merge` to add, modify, and remove SVG circles based on dataflow state. Interactions trigger `mouseover` and `mouseout` events, updating the `hoveredIndex` through Topologica's event-driven dataflow.

Loading thumbnail…

Bowl of Fruit - Nested General Update Pattern - Outtake

A sequence of apples and lemons moves across the screen, each fruit represented by a circle and a label. The animation demonstrates the nested general update pattern, where entering groups first render with zero radius and opacity, then transition to their full size and visibility. The code uses D3 v5’s `select`, `enter`, `merge`, `exit`, and `transition` APIs, alongside `scaleOrdinal` for color and radius mapping. This outtake shows a fruit bowl that loses apples and swaps one apple for a lemon, all rendered as SVG with animated transitions.

Loading thumbnail…

Bowl of Fruit - Click to Select

Five apples sit in a row as circles, each colored by a `d3.scaleOrdinal` color scale. Clicking an apple selects it, applying a black stroke to highlight the choice, managed by React's `useState`. The `FruitBowl` component renders SVG circles, positioned by index and scaled by fruit type, using D3 v5 with React.

Loading thumbnail…

React Hooks Bowl of Fruit

A static bowl of fruit rendered as SVG circles demonstrates React Hooks and D3.js scale constructors working together. Using `d3.scaleOrdinal` for both fill color and radius, five red apples appear in a row, with the first apple highlighted by a black stroke on click. The `FruitBowl` component receives array data and handles selection state via React's `useState`, while the code includes commented-out transition logic for future interactive animation, indicating a placeholder for D3's `.transition()` API.

Loading thumbnail…

Bowl of Fruit - Hover to Select

Five apples and a lemon are visualized as colored circles, with hover selection highlighting the fruit under the cursor. The animation uses D3 v5’s selection transition system to grow and shrink circles as fruits are eaten or replaced over time. The code imports `scaleOrdinal` for color and radius mappings, and drives state changes through timed callbacks.

Loading thumbnail…

Bowl of Fruit - General Update Pattern Special Cases

This example demonstrates the General Update Pattern in D3 v5, showing how data joins handle special cases like adding, removing, and modifying elements. Rendered as an SVG bowl of fruit, apples and lemons are drawn as circles and text labels using scaleOrdinal for color and radius. The code shows explicit enter, update, and exit selections via groups, merging enter with update nodes, and removing exited elements. A timed sequence triggers fruit removal and type changes to illustrate the pattern’s behavior.

Loading thumbnail…

Bowl of Fruit - Animated Transitions

This example demonstrates animated transitions for a fruit bowl visualization, where apples and lemons enter, exit, and change type with smooth circular motion. It renders SVG circles using d3.v5, with data bound by a random ID key. The `fruitBowl` function uses `selection.enter`, `merge`, and `exit` to join data, while `transition().duration()` animates the circle radius and x-position. A color scale and radius scale map fruit types to visual properties, driven by timed `setTimeout` calls that modify the fruit array and re-render.

Loading thumbnail…

Making a Bar Chart

This bar chart displays the top 10 most populous countries based on 2018 estimates from the United Nations World Population Prospects. It shows population values for each country, with China and India leading significantly. The visualization uses D3 v5 with scaleLinear and scaleBand to map data to SVG rectangles, while axisLeft and axisBottom render the labeled axes with custom tick formatting. The code also customizes axes by removing domain lines and adds a title and axis label. Population data is loaded from a CSV file and multiplied by 1000.

Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face is drawn as an SVG circle with animated eyebrows made of rectangles. The eyebrows transition upward and then return to their original position over two seconds each using D3's `transition()`. The face is built with D3 selections, appending elements like `circle`, `rect`, and `path`, while the mouth uses the `arc()` generator. Data is hardcoded in `index.js`, and the visualization runs entirely in the browser with D3 v5.