L

loicvdk

@loicvdk·21 public vizzes

Loading thumbnail…

Digital Firm - Wiki

This example shows a horizontal bar chart ranking the six most populous countries by population, with animated bars that expand in width over one second. The visualization uses React and D3 v5, employing `scaleLinear`, `scaleBand`, `axisBottom`, and `axisLeft` to construct the axes. Bars are rendered as SVG rectangles with a flip transform, while transitions animate their growth. Population values are formatted using D3’s `format` with a custom tick formatter that replaces gigabyte suffixes with billions. The chart also includes axis labels, gridlines, and a title, with styling applied via CSS.

Loading thumbnail…

Digital Firm - Wiki

This visualization displays a scatter plot of 100 random data points, mapping x and y values to axes labeled "Time (year)" and "Donker Drunk." It animates circles from a central point to their final positions using D3 transitions. The chart includes styled axes, tick marks, and labels, and the code leverages D3's `scaleLinear`, `axisBottom`, `axisLeft`, and `transition` APIs within a React framework, rendering to SVG.

Loading thumbnail…

Temperature in SF Line Chart

This chart shows a week of temperature readings in San Francisco as a smooth orange line, with time on the x-axis and temperature on the inverted y-axis. It uses D3 v5 with an SVG rendering approach, reading data from a CSV file via `d3.csv`. The code employs `scaleTime`, `scaleLinear`, `axisLeft`, `axisBottom`, and `line` with `curveBasis` to generate the path, while grid lines are created through tick sizes.

Loading thumbnail…

Customizing Axes

This example displays a horizontal bar chart of the top 10 most populous countries, with population values formatted in abbreviated units and a custom y-axis label. Built with React and D3.js v5, it uses `d3.csv` to load the data, `scaleLinear` and `scaleBand` to map values, and `axisLeft`, `axisRight`, and `axisBottom` to render axes. Custom tick formatting replaces the default 'G' suffix with 'B' to denote billions, and the SVG rendering includes explicit margin and inner-dimension calculations.

Loading thumbnail…

Making a barchart

A horizontal barchart displays population counts for ten countries, with bars sorted from largest to smallest and value labels placed along the top axis. The visualization uses React with D3 v5, loading data from a CSV file and rendering as SVG. It employs `d3.csv`, `scaleLinear`, `scaleBand`, and axis generators (`axisLeft`, `axisBottom`, `axisRight`) to position bars and ticks. The code explicitly multiplies population values by 1000, and styling uses a steelblue fill for rectangles.

Loading thumbnail…

Choropleth Map with Interactive Filtering

This choropleth map colors world countries by their economy type, with a color legend that supports interactive filtering. Clicking a legend category highlights matching countries and dims all others, while a zoomable natural Earth projection enables pan and scale exploration. Built with React and D3 v5, it uses `geoNaturalEarth1` and `geoPath` for map rendering, `scaleOrdinal` with `schemeSpectral` for color mapping, and `zoom` for interaction. Country data is loaded from the World Atlas TopoJSON and TSV files.

Loading thumbnail…

Bowl of fruit

This example shows three buttons labeled "Today," "This week," and "This month" inside a rounded rectangular bowl. Clicking a button updates its fill color from a bright green to a darker shade. The visualization demonstrates d3's data join concept by explicitly handling the enter, update, and exit states for both SVG groups and their child elements. It uses `scaleOrdinal` for colors and a custom `radiusScale`, while positioning elements with an `attr` transform based on their index.

Loading thumbnail…

Let's make a map

This map visualization displays global country boundaries using a natural Earth projection. The code uses d3.geoPath and d3.geoNaturalEarth1 to render the sphere and countries as SVG paths. Country names come from a TSV file, joined to the TopoJSON geometry via ISO codes. d3.zoom supports interactive pan and zoom, while CSS hover styling highlights individual nations.

Loading thumbnail…

Cars Scatter Plot

A scatter plot displays the relationship between horsepower and weight for individual cars, with each circle representing a car model. The visualization uses D3 v5’s `scaleLinear`, `extent`, `axisLeft`, `axisBottom`, and `csv` to load and map data from an auto-mpg dataset. Points are rendered as SVG circles with partial opacity, and the chart includes labeled axes, grid lines, and a title. The code runs within a React starter framework and draws to an SVG element using margins for layout.

Loading thumbnail…

Boll of fruit - click to select

Five apples transition into a bowl, resizing and recoloring via ordinal scales, while click-to-select highlights a fruit with a black stroke. The D3 v5 data join manages enter, update, and exit states, animating radius and position with `transition().duration(1000)`. Apples are removed, replaced with lemons, and filtered over timed intervals, demonstrating object-consistent updates through a key function. SVG rendering with `scaleOrdinal` for colors and radii drives the interactive, animated visualization.

Loading thumbnail…

Choropleth Map

This choropleth map colors countries by economic classification, with a hover effect highlighting individual nations and a legend showing the categorical color scale. The visualization renders world geography using `d3.geoPath` with a Natural Earth projection, while `d3.zoom` enables pan and zoom interaction. Data loads from the world-atlas TopoJSON and TSV files, merged by country ID, and the color scale uses `d3.scaleOrdinal` with `schemeSpectral` ranges. The legend is built as a reusable component with `selection.enter` and `merge` patterns.

Loading thumbnail…

Cheap Tricks for Interaction

This map visualization presents an interactive world atlas, highlighting countries in green against a blue sphere. Hovering over a country turns it red and reveals its name in a tooltip. The example uses D3.js v5 for SVG rendering, specifically employing `geoPath` and `geoNaturalEarth1` for map projection, `zoom` for interactive panning and scaling, and TopoJSON's `feature` to process geographic data. Country names are matched from a TSV file from the `world-atlas` package, which also supplies the GeoJSON data.

Loading thumbnail…

Boll of fruit - click to select

Five apples appear as circles whose size and color encode fruit type, and a black or white stroke highlights the user-selected fruit. Clicking a circle updates the selection with a one-second transition that animates circle radius and position. The example demonstrates D3's data join model by explicitly handling enter, update, and exit states through `selectAll`, `.data`, `.enter`, `.merge`, and `.exit`, using `scaleOrdinal` for color and radius scales.

Loading thumbnail…

Color and size legend

This example demonstrates how to create color and size legends for data visualization using D3.js v5. It shows two separate legend groups: a color legend using `scaleOrdinal` with four fruit categories (apple, lemon, melon, lime) and a size legend using `scaleSqrt` for numeric values from 0 to 10. The implementation uses data joins with `.enter()`, `.merge()`, and `.exit()` methods to manage SVG circle and text elements, with both legends rendering in an SVG container.

Loading thumbnail…

Black Canva

A black rounded rectangle fills the entire browser viewport. The visualization adapts to the screen size by querying the document body's dimensions and setting the SVG's width and height attributes accordingly. The code uses d3.select to target the SVG element, then appends a rect with a corner radius of 100 pixels. The SVG is rendered in the browser, with the script loading d3 v5 from the unpkg CDN. The rect's dimensions match the computed viewport size, creating a simple full-screen black canvas with softly rounded corners.

Loading thumbnail…

Boll of fruit - Hover to select

Five fruit circles are rendered in an SVG, and hovering one turns its outline black. A data join in D3 v5 handles enter, update, and exit states: new fruits grow in, types change between apples and lemons, and removed fruits shrink away. The code uses `d3.selectAll`, `selection.data`, `selection.merge`, and `transition.attr` for the animated updates, with `scaleOrdinal` mapping fruit type to color and radius. The `fruitbowl.js` module manages the rendering.

Loading thumbnail…

Bowl of fruit

This example demonstrates how D3 data joins manage the lifecycle of DOM elements. It shows a bowl of fruits where apples change into lemons, are removed, or disappear entirely, with each fruit rendered as a circle and label. The visualization uses D3 v5’s `selectAll`, `data`, and explicit `enter`, `update`, and `exit` handlers to add, modify, or delete SVG elements based on changing array data. Color and radius are mapped via `scaleOrdinal` based on fruit type.

Loading thumbnail…

Boll of fruit

Five apples animate into a row, then shrink and vanish as they are eaten or replaced by lemons. This demonstrates the D3 data join pattern with explicit enter, update, and exit selections. The code uses `selection.data`, `selection.enter`, `selection.merge`, and `selection.exit` alongside `.transition().duration()` for smooth radius and position changes. Fruit type determines color and size through `scaleOrdinal` with a d3.v5 SVG rendering approach.

Loading thumbnail…

World Population Area Chart

This area chart visualizes world population growth over time, with a smooth orange filled region beneath the curve. The x-axis displays years as time scales, while the y-axis shows population counts formatted in billions. Built with D3 v5 in a React framework, the chart uses `scaleTime`, `scaleLinear`, and `area` with `curveBasis` to generate the path. Data comes from a CSV file of world population by year, rendered as an SVG with custom axis labels and gridlines.

Loading thumbnail…

Let's make a face

A yellow circle face with black eyes and rectangular eyebrows appears on an SVG canvas. The code uses D3 v5 selections, the `arc()` generator for the mouth, and chained `transition().duration()` calls to animate the eyebrows downward and back. All shapes are positioned relative to a centered group using explicit pixel offsets for eye spacing and eyebrow placement.

Loading thumbnail…

Cars Report

This example displays a text-based report of used cars priced under $2,000, listing their year, make, model, and price. It initially shows a "loading..." message, then after a simulated 2-second delay, fetches car data as JSON via a Promise from `getCars.js`. The `generateReport.js` module filters the array and maps each car using the `formatCar.js` helper to construct styled lines. React renders the static report in a `<pre>` element, with the page content updated through plain DOM manipulation using `document.getElementById`.