Skip to main content
Log in
J

julieducasse

@julieducasse·9 public vizzes

Loading thumbnail…

Fruit bowl

A fruit bowl shows five fruit circles—oranges and lemons—arranged in a row on a grey background. Viewers can click a fruit to highlight it with a black stroke. Over time, fruits are removed, replaced, or filtered out, and the remaining fruit smoothly transition to new positions. The example uses D3 v5 data joins with `selection.enter`, `merge`, and `exit` to animate SVG `circle` elements via `transition.duration`, and `scaleOrdinal` to map fruit types to radii.

Oct 20, 2019
Loading thumbnail…

Bowl of Fruit - General Update Pattern Special Cases

This example demonstrates the General Update Pattern with a bowl of fruit that changes over time: five apples appear, then one is removed after a second. It shows how to handle enter, update, and exit selections in D3 v5 using SVG. The code imports `scaleOrdinal` from `d3` to map fruit types to colors and radii, and uses `selection.merge()` to combine entering and updating groups. The fruit bowl itself is a rounded rectangle appended once via a `[null]` data join. A `setTimeout` triggers the pop operation to remove an apple.

Oct 20, 2019
Loading thumbnail…

Let's make a face with D3.js!

A smiley face rendered in SVG with D3.js v5 demonstrates fundamental DOM manipulation through animated eyebrow movement. The face, eyes, and eyebrows are drawn as SVG circles using d3.select and d3.append, with the eyebrow positions controlled by coordinate offsets. The face circle triggers a recursive animation via addEvents and transition.attr, moving the entire face group vertically over two seconds before reversing direction. The example uses D3's selection.transition with .duration and .on("end") callbacks to create a continuous bobbing motion, showing how to build and animate SVG elements without external data.

Sep 27, 2019
Loading thumbnail…

Fruit bawl

This visualization displays a static bowl of fruit rendered entirely through inline SVG shapes, with all styling defined in an external stylesheet. The SVG canvas is 960 by 500 pixels and contains no dynamic elements or data-driven features. The rendering relies on raw SVG elements such as `<svg>`, `<g>`, and `<path>` with CSS classes for stroke and fill properties, including `stroke-linejoin` and `stroke-linecap`. The example demonstrates basic SVG structure without any JavaScript libraries, showing a hand-coded illustration rather than a data mapping.

Sep 27, 2019
Loading thumbnail…

Temperature in San Francisco Line Chart

This line chart visualizes one week of temperature data in San Francisco, with time on the x-axis and temperature in degrees Celsius on the y-axis. It uses D3 v5 APIs including `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `line` with a `curveBasis` interpolation to render a smooth path. The chart is drawn as an SVG with margins, axis labels, and a title, and the data is loaded from a CSV file hosted on VizHub.

Sep 20, 2019
Loading thumbnail…

Making a Bar Chart

This example displays a horizontal bar chart of the top 10 most populous countries, with population values formatted in billions. The chart uses D3 v5 APIs including `d3.csv`, `d3.scaleLinear`, `d3.scaleBand`, `d3.axisLeft`, and `d3.axisBottom` to render an SVG. Data from `data.csv` is loaded and multiplied by 1000 to represent actual population counts. The visualization includes a titled axis label and removes default axis lines for a cleaner presentation.

Sep 19, 2019
Loading thumbnail…

Customizing Axes

This bar chart displays the population of the top 10 most populous countries, based on 2018 United Nations estimates. The visualization emphasizes customized axes: the y-axis removes its domain and tick lines, while the x-axis uses a formatted tick label that converts large numbers into abbreviated values like "1.42B" and draws gridlines across the chart. Built with D3 v5, it uses `scaleLinear`, `scaleBand`, `axisBottom`, `axisLeft`, and the `format` function. The chart is rendered as SVG, with data loaded from a CSV file and scaled by thousands.

Sep 19, 2019
Loading thumbnail…

Stylized Bar Chart

This example displays the top 10 most populous countries as horizontal bars, using React to render the SVG chart and D3 v5 scales for positioning. The y-axis uses a band scale for country names, while the x-axis uses a linear scale for population values, with tick labels formatted from gigabytes to billions. Data comes from the United Nations World Population Prospects 2019, loaded via d3.csv. The visualization emphasizes minimalist styling with Poppins font and a teal color scheme, omitting gridlines for a clean, stylized appearance.

Sep 19, 2019
Loading thumbnail…

Responding to Resize

This example demonstrates how a D3.js visualization can respond to browser window resizing. A green X is drawn across the full viewport, with its lines recalculated to match the current window dimensions. The code uses the `clientWidth` and `clientHeight` properties of a div container to set the SVG element's width and height attributes. A `redraw` function is invoked on the `resize` event, regenerating the line positions with a data join using `selectAll` and `merge`.

Sep 19, 2019