A

Asperge-Atomique

@Asperge-Atomique·23 public vizzes

Loading thumbnail…

Choropleth map

This choropleth map colors world countries by their economy type using a spectral color scale. Hovering a country highlights it in red and reveals its name and economy through an SVG title tooltip. The map is rendered with D3’s `geoPath` and a Natural Earth projection, with data loaded via TopoJSON and TSV files from the world-atlas dataset. A custom `colorLegend` displays the categorical color scale.

Loading thumbnail…

Colors and Size Legends

This example demonstrates how to build custom legends for both ordinal color scales and sequential size scales in D3 v5 with SVG rendering. The color legend vertically displays five fruit categories, each with a colored circle and text label, while the size legend uses a square-root scale to show five tick values (10, 8, 6, 4, 2) as proportionally sized circles. The code implements reusable legend functions via `selection.call()`, with `scaleOrdinal`, `scaleSqrt`, and `ticks()` to generate the legend items.

Loading thumbnail…

World countries tree

This example shows a hierarchical tree of world countries, organized by continent and subregion, using a tidy tree layout. The visualization uses a horizontal dendrogram where nodes are labeled with country names, and links are drawn with D3's `linkHorizontal` path generator. The code imports functions like `tree`, `hierarchy`, and `zoom` from the `d3` module, and loads data from a JSON file. Text styling includes a custom Spirax font and white text shadow for readability.

Loading thumbnail…

World countries tree

This example shows a hierarchical tree of world countries, organized by continent and subregion, using a tidy tree layout. The visualization uses a horizontal dendrogram where nodes are labeled with country names, and links are drawn with D3's `linkHorizontal` path generator. The code imports functions like `tree`, `hierarchy`, and `zoom` from the `d3` module, and loads data from a JSON file. Text styling includes a custom Spirax font and white text shadow for readability.

Loading thumbnail…

World Countries Tree

This visualization presents the hierarchical structure of world countries, organized by continent and subregion, as a horizontal tree diagram. The layout uses a D3 tree layout with data loaded from a JSON file, rendering nodes as text labels and connections as curved paths via `linkHorizontal`. The view supports pan and zoom through D3’s zoom behavior. Styling relies on SVG elements, with font sizes varying by depth and a custom serif typeface.

Loading thumbnail…

World countries tree

This interactive D3.js visualization presents a hierarchical tree of the world's countries, organized by continent and subregion. The data is loaded from a static JSON file using D3's `json()` method, and the interface is built with an SVG canvas and a custom `select` helper. The visualization uses a class-based approach with ES6 modules, displaying country names as nodes in a nested structure.

Loading thumbnail…

World Countries Tree

This visualization displays the hierarchical structure of world countries, organized by continent and subregion, using a horizontal tree layout rendered with SVG. The code employs D3 v5’s `tree`, `hierarchy`, and `linkHorizontal` functions to compute node positions and draw curved links, while text labels are sized dynamically based on node depth. Pan and zoom interactions are enabled through D3’s `zoom` behavior, and the data comes from a local JSON file containing nested country names.

Loading thumbnail…

Cars report

This example displays a one-word report, “Honda,” pulled from a hardcoded JSON dataset of five cars stored in `cars.js`. The page renders the first car’s make in large, styled text on a dark blue background. The code imports the parsed `cars` array and uses `document.getElementById` to set the text content of a `<pre>` element. Styling relies on CSS with a Google Fonts import, while D3 v5 is loaded via CDN but not used for visualization.

Loading thumbnail…

Making a Bar Chart

This example shows a horizontal bar chart that visualizes the population of various countries, sorted by data order. The chart uses an SVG canvas with a linear scale for population and a band scale for country names, mapping data from a CSV file. The code demonstrates a step-by-step approach to building the visualization, using D3 v5 APIs such as `select`, `scaleLinear`, `scaleBand`, and `csv`. Rectangles are appended to the SVG via the `.enter()` method, with their width and y-position based on the specified scales, and the visualization includes margins that are logged but not fully utilized in the layout.

Loading thumbnail…

Making a Bar Chart

This example shows a horizontal bar chart that visualizes the population of various countries, sorted by data order. The chart uses an SVG canvas with a linear scale for population and a band scale for country names, mapping data from a CSV file. The code demonstrates a step-by-step approach to building the visualization, using D3 v5 APIs such as `select`, `scaleLinear`, `scaleBand`, and `csv`. Rectangles are appended to the SVG via the `.enter()` method, with their width and y-position based on the specified scales, and the visualization includes margins that are logged but not fully utilized in the layout.

Loading thumbnail…

Cheaps tricks for interaction

This example presents a zoomable, interactive map of the world using D3.js. It loads geographic data from a world-atlas TopoJSON file and country names from a TSV file, rendering landmasses as SVG paths. The visualization uses D3's geoNaturalEarth1 projection and geoPath to draw countries, with country names displayed as tooltips. A zoom interaction is implemented through D3's zoom module, allowing users to pan and magnify the map. The countries are styled with a light green fill, and hovering over an individual country highlights it in orange.

Loading thumbnail…

Cheaps tricks for interaction

This example displays a world map using a natural Earth projection, with each country filled in light green and outlined with a semi-transparent black stroke. It loads geographic data from the world-atlas TopoJSON dataset and joins the country names from the corresponding TSV file using a `reduce` operation. The visualization demonstrates simple hover interaction, as the CSS `:hover` selector changes the fill color to orange. The code uses `d3.geoPath` and `d3.geoNaturalEarth1` to generate the SVG paths, with the sphere rendered in dark blue.

Loading thumbnail…

Cheap Tricks for Interaction

This interactive map of the world displays country names as tooltips on hover, with countries highlighted in red. Users can pan and zoom the map using mouse interactions. Built with d3.js, the visualization uses `d3.geoNaturalEarth1` for projection, `d3.geoPath` to render SVG paths from TopoJSON data sourced from world-atlas, and `d3.zoom` for panning and zooming. The country names come from a TSV file, and hover effects are handled through CSS.

Loading thumbnail…

Let's create a world map (geoNaturalEarth1)2 - with d3

This example displays a world map rendered with the geoNaturalEarth1 projection, showing countries as light-green polygons with black outlines against a dark-blue spherical background. It loads geographic data from the world-atlas TopoJSON dataset via d3.json, then converts the TopoJSON features into GeoJSON using the topojson.feature API. The d3.geoPath generator projects and draws each country path onto an SVG canvas, while the sphere outline is created by passing a Sphere object to the same path generator.

Loading thumbnail…

Let's create a world map (geoNaturalEarth1)2 - with d3

This example displays a world map using the Natural Earth projection, with countries rendered as light green polygons against a dark blue sphere. The visualization loads GeoJSON country boundaries from the world-atlas TopoJSON dataset via `topojson.feature`, then projects them using `d3.geoNaturalEarth1` and draws them as SVG paths with `d3.geoPath`. A data join appends each country path, while a separate path illustrates the globe’s outline. The code relies on d3.select, d3.json, and d3.v5, with styling controlled by CSS classes.

Loading thumbnail…

Bowl of fruits - Select by hovering

A bowl of fruits displays apples and lemons as colored circles in a rounded rectangle, with hovering any fruit highlighting it with a thick black outline via a mouseover event that updates the selectedFruit state. Built with D3 v5, the visualization uses a general update pattern to join data to SVG groups and circles, with ordinal scales mapping fruit types to colors and radii, while the data source is a static array modified by timed pop and filter operations.

Loading thumbnail…

Bowl of fruits

A bowl of fruits visualizes data joins in D3.js v5, showing five circles that represent fruit types. The example uses `d3.scaleOrdinal` to map fruit types to colors and radius values, with SVG circles positioned along a horizontal axis. After rendering, a `setTimeout` removes the last fruit, and another replaces one fruit with a lemon, triggering enter, update, and exit selections through the `render` function. The code demonstrates fundamental DOM manipulation with `d3.select`, `selection.data`, `selection.enter`, and `selection.exit` on a static SVG canvas.

Loading thumbnail…

Bowl of Fruit - General Update Pattern Special Cases

This example demonstrates the general update pattern in D3, showing how to handle data joins with special cases for entering, updating, and exiting elements. A bowl of fruit animates through sequential changes: apples appear, one is eaten, an apple transforms into a lemon, and another apple disappears. Using d3.select, data joins, and the enter/merge/exit methods, the code updates SVG circles and text elements representing each fruit. The example uses d3.range to generate initial data and a sequential setTimeout timeline to trigger state changes, with scales for color and radius mapping fruit types.

Loading thumbnail…

Bowl of Fruit - Click to Select

This example shows a dynamic bowl of fruit represented as colored circles in an SVG canvas. The visualization initially displays five apples, then sequentially removes one fruit, changes another from an apple to a lemon, and filters out a second apple, demonstrating how the `fruitBowl` function from `fruitBowl.js` updates the chart with each state change. The code uses D3 v5’s `scaleOrdinal` for color and radius mapping, and relies on the selection and data-join methods (`.enter()`, `.merge()`, `.exit()`) to manage circle elements.

Loading thumbnail…

Customizing Axes

This bar chart displays the populations of the top 10 most populous countries, based on 2018 estimates from the United Nations World Population Prospects. It illustrates how D3 axes can be customized: the x-axis uses a custom tick format (converting billions to ‘B’), while tick lines are extended across the plot area. The y-axis removes its domain line and ticks for a cleaner look. Built with D3 v5, the chart uses `scaleLinear` for the x-axis, `scaleBand` for the y-axis, and `axisBottom` and `axisLeft` for the axes, with styling applied via SVG and CSS.

Loading thumbnail…

Bowl of fruits

This example shows a dynamic bowl of fruits rendered as circles in an SVG canvas, where apples and lemons appear and disappear over time. Initially five fruits are drawn using a D3 data join with `scaleOrdinal` for both color and radius, mapping fruit types to red or yellow. After one second, a fruit is removed and another changes from an unknown type to a lemon, triggering D3’s enter/exit updates to reflect the state changes. The code uses D3 v5’s `select`, `range`, and `scaleOrdinal` APIs with explicit `setTimeout` calls to drive the transitions.

Loading thumbnail…

Making a Bar Chart

This visualization displays the populations of thirteen countries from 2018 Wikipedia data, using horizontal bars ordered alphabetically by country name. Built with D3 v5, it loads a CSV file and renders an SVG bar chart. The chart employs `scaleLinear` for the population x-axis and `scaleBand` for the categorical y-axis, with `axisLeft` and `axisBottom` providing tick labels. Steelblue rectangles represent each country’s population, scaled by the linear axis.

Loading thumbnail…

Cars report

A dashboard displays the brand of the first car from a small inline JSON dataset, rendered as oversized text in a dark, blue-themed page. The example uses d3.v5 to parse the data and plain JavaScript to update the DOM. It highlights VizHub’s ability to combine an ES6 module, inline data, and external styling, with the CSS font loaded from Google Fonts.