Engine194

@Engine194·11 public vizzes

Fork of D3 Starter

A cheerful SVG face, drawn with D3 v7, blinks its eyes and grows pink blush marks before settling into a steady stare. The example uses basic D3 selections and transitions to animate circle positions and radii over timed intervals, while CSS keyframes control the blush fill. Rendering relies on SVG shapes and an arc-generated mouth, all orchestrated through D3's `transition` API.

May 12, 2023

Loading thumbnail…

Color legend

A custom color legend displays four ordinal categories—apple, lemon, lime, and orange—as colored circles or squares, rendered with D3 v7's `scaleOrdinal` for domain and range mapping. The legend component supports configurable shapes, spacing, and offsets, using SVG `g`, `rect`, `circle`, and `text` elements. The example demonstrates a reusable legend pattern with enter/merge/exit updates, invoked via `.call(colorLegend.render, {square: false})` to show circular swatches with labels.

Mar 22, 2023

Loading thumbnail…

World Countries tree

This visualization displays the hierarchical structure of world countries organized by continent and subregion. The tree layout uses d3.tree() to position nodes, with d3.hierarchy() processing the nested JSON data and d3.linkHorizontal() generating the connecting paths. The SVG rendering applies distinct text sizes to differentiate world, continent, zone, and country levels, while a d3.zoom() behavior enables panning and scaling of the entire tree.

Mar 21, 2023

Loading thumbnail…

Black Canvas

The visualization displays only a large black rounded rectangle rendered across the full viewport, with no data marks or interactive elements. The code uses d3.select and d3.arc to manipulate the SVG canvas, setting its dimensions to the browser’s client height and width, then appending a `<rect>` element with corner radius 50. The fixed, full-screen body styling combined with the centered 13em font size suggests a minimalist, title-like presentation. The example demonstrates basic D3 SVG construction without any data source, relying solely on DOM geometry and styling.

Mar 21, 2023

Loading thumbnail…

Cheap Tricks for World Map

This example demonstrates a world map rendered with D3's geo projections, using the `d3.geoNaturalEarth1` projection and `d3.geoPath` to draw country polygons. The map displays landmasses in light green with a dark blue ocean sphere, and countries highlight red on hover via a CSS `:hover` rule. The code loads geographic data from the `world-atlas` package, processes it with the `topojson` library's `feature` function, and applies `d3.zoom` to allow interactive pan and zoom through SVG transforms. The visualization is built with D3 v7 and rendered as SVG, with styling defined in a separate `styles.css` file.

Mar 21, 2023

Loading thumbnail…

Make a World Map

This example displays a world map rendered as SVG paths, with countries filled in light green and a dark blue sphere as the background. It uses D3 version 7’s `geoPath` and `geoNaturalEarth1` projection to generate the geographic shapes, while the `topojson` library’s `feature` function converts TopoJSON country boundaries from the world-atlas dataset into GeoJSON features. The code fetches the data from a remote URL and asynchronously appends the country paths to the SVG container.

Mar 21, 2023

Loading thumbnail…

Interact with vis

A selection of apples and lemons enters, updates, and exits with animated transitions as the dataset changes over time. Clicking a fruit highlights its outline in white. The code uses SVG rendering with D3 v7 data joins, `scaleOrdinal` for color and radius mapping, and chained `.transition().duration()` calls to smoothly animate position, radius, and removal.

Mar 21, 2023

Loading thumbnail…

Nested update

A D3 v7 SVG animation demonstrates nested join updates for a fruit bowl. Five apples render as colored circles with labels; timed updates remove items, change an apple to a lemon, and filter the array. The code uses `selection.data()` with a key function, enter/merge/exit selections, and `selection.transition()` to animate circle radii and group transforms. The example imports `scaleOrdinal` from d3 for color and radius mapping, showing dynamic data-binding patterns.

Mar 21, 2023

Loading thumbnail…

D3 data join

This example demonstrates D3’s data join pattern by animating a bowl of fruit rendered as SVG circles. It shows how entering, updating, and exiting elements are handled when the underlying data array changes over time. The code uses `selection.data`, `enter`, `merge`, and `exit` with `transition` to smoothly resize and reposition circles, while a scale maps fruit types to colors and radii. The dataset is generated in JavaScript with random IDs, and three timed updates modify the array to trigger the join animations.

Mar 21, 2023

Loading thumbnail…

Line chart

This line chart visualizes temperature readings in San Francisco over several days in March 2015. The chart plots time on the x-axis and temperature in degrees Celsius on the y-axis, with a smooth red curve connecting the data points. It uses D3 v7's `scaleTime` and `scaleLinear` for axes, `axisBottom` and `axisLeft` for ticks, and `line` with `curveBasis` to draw the smooth path. The data is loaded from a CSV file and rendered as an SVG.

Mar 18, 2023

Loading thumbnail…

Make a bar chart population

This example displays a horizontal bar chart of the world’s most populous countries, ranking them from China to Thailand based on their population counts. The chart renders as an SVG using D3 v7, with a linear scale mapping population to bar width and a band scale for country names. Data is loaded from a semicolon-delimited CSV file and parsed with `d3.dsvFormat`. The chart uses `d3.scaleLinear`, `d3.scaleBand`, `d3.axisLeft`, and `d3.axisBottom` to construct the axes and bars, which are styled with a steel blue fill.

Mar 15, 2023