NathanGBIM

@NathanGBIM·9 public vizzes

Untitled

This interactive visualization displays dated events as colored circles along a timeline, with a draggable slider and play button controlling the temporal view. A single circle represents each entry in the `circles.csv` dataset, positioned by date and colored using `d3.hsl` based on the date value. The animation smoothly transitions circle radii as new data points appear. The code leverages d3.v4 APIs including `d3.scaleTime`, `d3.drag`, and `d3.csv`, rendering SVG elements with a React-compatible setup. A step function advances the slider position, triggering updates to the plot.

Jun 18, 2020

Loading thumbnail…

Untitled

A temporal scatterplot displays circles representing entries from a CSV file, each positioned along a time axis based on parsed dates. A draggable slider with a play button animates through the timeline, revealing circles that grow in size upon entry. The visualization uses D3 v4 with SVG rendering, leveraging d3.scaleTime, d3.drag, and d3.csv to handle date parsing, slider interaction, and data loading within a React framework.

Jun 18, 2020

Loading thumbnail…

Tuto 4

This bar chart displays car mileage (x-axis) for each car ID (y-axis), with steel blue bars indicating mileage values. The chart is rendered as an SVG using D3 v5, with data loaded from a local CSV file containing car attributes like year, mileage, and price. The code applies scales with `scaleLinear` for the continuous mileage axis and `scaleBand` for the categorical car IDs, then appends a group and uses `axisLeft` and `axisBottom` to generate labeled axes within a margin-defined plotting area.

Jun 16, 2020

Loading thumbnail…

Trying stuff out

This example shows a simple SVG face created with D3.js, featuring a mouth drawn using the `arc()` API and a yellow rectangle appended inside a path via the custom `createArc` function. The face is centered in a 960×500 viewport using SVG transforms. It demonstrates basic D3 v5 selection and data-joining techniques, importing `select` and `arc` from the D3 library and rendering entirely in SVG markup.

Jun 16, 2020

Loading thumbnail…

Tuto 3

This bar chart displays the mileage and ID of used cars from a CSV file, with a steelblue bar for each car. The x-axis shows mileage on a linear scale, while the y-axis lists car IDs as categorical bands. Built with D3 version 5, the chart uses `scaleLinear` and `scaleBand` for axis mapping and `axisLeft` and `axisBottom` to render the axes. The data is loaded asynchronously via `csv` and rendered as SVG rectangles.

Jun 16, 2020

Loading thumbnail…

Tuto 2

A stylized biological cell is drawn in SVG with D3 v5, showing a green microvillus, a red cytoplasmic region, a yellow nucleus, and a partially outlined cell body constructed from rectangles and an arc path. The code uses `d3.arc` to compute the curved top of the cell and `d3.select` to append shapes to an SVG canvas. Animated commented-out sections suggest past experiments with `transition.attr` for moving eyes and altering a mouth shape, though the visible result is a static diagram.

Jun 11, 2020

Loading thumbnail…

Switch

Two graphic displays, one a tiny yellow rectangle and the other a large red one, hold identical smiley faces drawn with D3.js. The code animates a switch: the two displays swap their transform attributes over two seconds, while the smiley’s circle, eyes, and arc-based mouth independently transition their positions and shapes. Using D3 v5’s `select`, `arc`, and chained `transition()` calls, the SVG scene shows elements moving and changing color on a light blue background.

Jun 2, 2020

Loading thumbnail…

Trying stuff out

A smiling face rendered in SVG animates through a looping sequence of color, eye, and mouth changes. The yellow circle transitions to red, while the eyes shift side to side and the mouth alters its arc shape using D3 transitions. Built with D3 v5, the example uses `select`, `arc`, and transition chains to demonstrate basic animation and attribute interpolation on SVG shapes.

Jun 1, 2020

Loading thumbnail…

Tuto

This tutorial shows the basics of setting up a D3.js project and displaying static text and styled HTML elements. The page uses JavaScript and D3 to write messages into a `<div>` with `d3.select` and into a `<pre>` element, while CSS styles the headings, list, and message. The code includes a commented-out SVG block with circles, rectangles, lines, and paths, illustrating how D3 could render shapes, though it is not currently active.

May 28, 2020