Gautier DAVID

@GautierDavid·13 public vizzes

Loading and Parsing CSV Data

This example demonstrates how to load and parse CSV data using D3 and display a simple message as a proof of concept. The page shows a large, centered text element reading “Hello HTML!” as the initial output. The code primarily focuses on the setup for data ingestion, utilizing D3’s CSV parsing capabilities to handle external tabular data, though the current implementation renders static HTML content rather than visualizing the parsed dataset. The styling is handled through basic CSS, with the message sized at 13em for visual prominence.

Jan 2, 2024

Loading thumbnail…

Smiley face Part1

A smiling face is drawn as a set of SVG shapes, including a yellow circle for the head, two black circles for eyes, and a dark mouth arc. The code builds the scene using React components, with the mouth path generated by D3’s `arc` function. It relies on D3 v7 for geometry and React 18 for rendering, producing the final SVG output.

Dec 22, 2023

Loading thumbnail…

Scatter Plot Including Species

This interactive scatter plot visualizes the Iris flower dataset, allowing users to explore relationships between quantitative measurements and species categories. Two dropdown menus dynamically change which columns are mapped to the x and y axes, with categorical values rendered as evenly spaced points and quantitative values using linear scales. The visualization is built as a reusable D3 component, utilizing `selection.on()` and `selection.dispatch()` for menu event handling, with `transition()` calls for smooth animation when updating circle positions, axes, and radius growth.

Dec 22, 2023

Loading thumbnail…

Animated Scatter Plot with Menus

This interactive scatter plot lets users explore the classic Iris dataset by dynamically changing which measurements are plotted on the x and y axes. Dropdown menus update the chart's axes, and the plotted circles smoothly transition to their new positions over time. Built with D3.js, the visualization uses menu component events to redraw the plot, relying on D3's scaleLinear for axes and transition for the animated updates.

Dec 22, 2023

Loading thumbnail…

Animated Reusable D3 Scatter Plot

This animated scatter plot displays the Iris dataset, cycling through different measurement columns every three seconds. The visualization updates the x-axis and repositions data points with smooth transitions, with each circle's movement slightly delayed for a cascading effect. Built as a reusable D3 module, it uses `scaleLinear`, `axisLeft`, `axisBottom`, and `transition().duration()` from the d3 library. The React-based implementation loads CSV data and renders the animated chart as an SVG.

Dec 21, 2023

Loading thumbnail…

Reusable D3 Scatter Plot

This example presents a reusable scatter plot built with D3 v7 and React, dynamically updating every two seconds to cycle through different Iris flower measurements. The visualization displays points scaled by petal width and sepal length, then animates through columns like sepal width and petal length by re-binding the x-value accessor. It demonstrates the getter-setter pattern for modular chart configuration, using D3's `scaleLinear`, `axisLeft`, `axisBottom`, and `selectAll().join()` for SVG rendering. Data comes from a remote CSV of the classic Iris dataset, parsed with numeric coercion.

Dec 21, 2023

Loading thumbnail…

Reusable D3 Scatter Plot with symbols

This interactive scatter plot visualizes the Iris dataset, mapping petal length against sepal length with distinct symbols for each species. Built as a reusable component using D3.js modular patterns, the chart dynamically updates based on configuration. The implementation uses D3 v7 APIs including scaleLinear, scaleOrdinal, axisLeft, axisBottom, and symbols. Data is loaded from a CSV file via d3.csv. The SVG rendering shows the scatter plot with axes, and the chart’s margins, symbol size, and value mappings are configurable through a getter/setter API.

Dec 20, 2023

Loading thumbnail…

D3 Scatter

This scatter plot visualizes the iris dataset, mapping petal length on the x-axis and sepal length on the y-axis. Each flower is rendered as a circle in an SVG canvas that fills the browser window. The code fetches data from a CSV file using `d3.csv`, parses it with a custom row function, and uses `d3.scaleLinear` with `d3.extent` to position points. It also draws axes with `d3.axisLeft` and `d3.axisBottom`, all built with d3.v7 in React.

Dec 20, 2023

Loading thumbnail…

JS and HTML

This example demonstrates how to build a custom visualization by combining JavaScript and HTML with D3.js. It shows a dynamic scene driven by a force-directed simulation, where nodes move and interact in real time. The code uses `d3.forceSimulation` to compute physical forces and update node positions, while `d3.select` and `d3.create` manage the SVG container and elements. The rendering is performed entirely through JavaScript DOM manipulation, with the `index.html` file providing a minimal body that loads D3 from a CDN and attaches the `bundle.js` script. The visualization’s appearance changes dynamically, emphasizing the interplay between code, layout, and interactive graphics.

Dec 19, 2023

Loading thumbnail…

Fork of Fork of D3 js part 2

A looping animation shows a row of circles moving in a sine-wave pattern across the screen, with each circle’s vertical position and radius oscillating based on a time parameter. The number of circles also varies smoothly between five and fifteen. The visualization uses D3 v7’s `select`, `range`, and data join to bind generated data to SVG `<circle>` elements, updating them every frame via `setInterval` and a custom `vizData` function. The rendering is pure SVG without additional JavaScript libraries.

Dec 19, 2023

Loading thumbnail…

Fork of D3 js part 2

This example shows a dynamic scatterplot of circles that oscillate vertically and change radius over time, driven by sinusoidal functions of their index and a continuously incrementing time variable. The visualization renders in SVG using D3 version 7, with a `selection.join()` pattern to update circle positions and radii every frame via `setInterval`. The data is generated procedurally by `makeData`, producing a smooth, wave-like motion across ten to fifteen elements while `vizData` binds and updates the SVG attributes.

Dec 19, 2023

Loading thumbnail…

D3 js part 2

A looping animation of circles moves vertically in a sine-wave pattern across an SVG canvas, with the number of circles oscillating between five and fifteen over time. The code uses D3 v7's `select`, `range`, and the data-join method `.join('circle')` to bind array data to SVG elements, updating their `cx` and `cy` attributes each frame via a `setInterval` callback. The visualization highlights D3's declarative enter-update-exit pattern for dynamic datasets.

Dec 19, 2023

Loading thumbnail…

Learning D3js

This example uses D3.js to create an interactive grid of horizontal and vertical stripes overlaid with two SVG masks. The masks, generated via `d3.symbol` and `d3.symbols`, reveal a series of geometric shapes—diamonds, stars, and others—at the center of the canvas. One mask is inverted, producing contrasting effects on the intersecting rectangles. The visualization is rendered entirely with SVG elements, sized dynamically to the full browser viewport, and built using D3 selections and joins in a React-agnostic setup.

Dec 18, 2023