anouckstbr@gmail.com

@Aconuk·10 public vizzes

Animations

Animated fruit bowl demonstrations show how data joins and transitions work in D3.js, with apples and lemons appearing, disappearing, and changing type over time. Using `selectAll` and the `.enter()`, `.merge()`, and `.exit()` selection APIs, circles animate their radius and position through `.transition()`. A separate face graphic uses `arc()` paths and tweened eyebrow movements, while click and hover interactions trigger selection states that update stroke styling.

May 29, 2024

Loading thumbnail…

Temperatures in multiple cities

This line chart displays daily average temperatures in degrees Celsius for multiple cities over the first five months of 2020, with each city represented by a colored line. The chart uses a categorical color scale to distinguish cities and includes a legend. The data is loaded from a CSV file and rendered as an SVG using D3 v5. The code employs `d3.scaleTime` and `d3.scaleLinear` for axes, `d3.line` and `curveBasis` for line paths, and `d3.nest` to group data by city.

Apr 10, 2024

Loading thumbnail…

Circles on a map

This example displays a choropleth map of the world colored by income group, with a legend showing the color categories. The map uses a natural Earth projection and is rendered with SVG paths via d3.geoPath. A color legend built with a custom function displays ordinal color swatches. Users can pan and zoom the map using d3.zoom, while the data combines TopoJSON world geometries with CSV population estimates.

Apr 9, 2024

Loading thumbnail…

Scatter Plot with Menues

An interactive scatter plot displays used car data from the UCI Machine Learning Repository, plotting attributes like selling price, present price, and kilometers driven against each other. Two dropdown menus, implemented with D3's `dropdownMenu`, let the user switch which numerical columns appear on the x- and y-axes. The visualization uses D3 v5's `scaleLinear`, `axisLeft`, and `axisBottom` for the chart, and renders circles in SVG with a staggered 1-second transition animation on dataset changes.

Apr 9, 2024

Loading thumbnail…

Interactive Choropleth Map

This interactive choropleth map displays global economic classifications by country, with a color legend that filters highlights when clicked. Built with D3 v5, it uses `geoNaturalEarth1` projection, `geoPath`, and `geoZoom` for pan and zoom interactions. The map renders SVG paths from TopoJSON world atlas data, while an ordinal color scale applies a spectral scheme. Hovering changes country fill, and selecting a legend category dims non-matching regions.

Apr 8, 2024

Loading thumbnail…

Choropleth Map

This choropleth map colors world countries by income group using an ordinal color scale with a spectral scheme. The visualization supports pan and zoom interactions through d3.zoom, while d3.geoPath and a Natural Earth projection render the geographic shapes. A custom color legend component displays the categorical colors with labeled circles. Country names and income groups appear as tooltips via SVG title elements, with data loaded from the world-atlas TopoJSON and TSV files.

Apr 8, 2024

Loading thumbnail…

Color Legend

This example demonstrates two reusable D3 legend components positioned on a single SVG: a color legend using an ordinal color scale for categorical items like fruits, and a size legend built from a square-root scale that maps numeric values to circle radii. The color legend renders colored circles with labels, while the size legend filters out zero values and reverses tick order. Both use enter/merge/exit selections via `selection.selectAll` and `.data` to update groups, with circle and text elements positioned through transform attributes.

Apr 8, 2024

Loading thumbnail…

Blank Canvas

This visualization displays a hierarchical tree of world regions, subregions, and countries using a horizontal dendrogram layout. It shows the organizational structure of global geography, from continents down to individual nations. The code uses d3.tree, d3.hierarchy, and d3.linkHorizontal to compute and draw the paths, with SVG text elements labeled with each node’s name. Data comes from a local data.json file, and the Montserrat font is loaded via Google Fonts, with zoom and pan functionality enabled through d3.zoom.

Apr 8, 2024

Loading thumbnail…

Let's make a map with D3.js!

This example shows an interactive world map using a Natural Earth projection, with countries filled in light green that turn red on hover and a blue sphere backdrop. Built with D3 v5, it loads TopoJSON and TSV country metadata from the world-atlas package, then renders paths using d3.geoPath with the geoNaturalEarth1 projection. Pan and zoom controls are enabled via d3.zoom, applying transforms to the map’s group element, while tooltips display country names through SVG title elements.

Apr 5, 2024

Loading thumbnail…

Fork code testing

This example demonstrates various D3.js v7 chart types, including a bar chart of global population, a scatter plot of car prices, a line and area chart of Detroit temperatures, and an area chart of French population over time. It also includes an animated SVG face with moving eyebrows. The visualizations use D3 scales, axes, and SVG rendering, with data loaded from CSV files. The face animation utilizes D3 transitions to move elements.

Apr 2, 2024