Marco-test

@Marco-test·3 public vizzes

THROWBACK

The visualization displays two overlaid bar charts of population data, with rectangles rendered in bright colors and semi-transparent layers to compare values across countries. Static chart elements are built using d3.scaleBand, d3.scaleLinear, and d3.scaleOrdinal with schemeCategory10, while d3.axisLeft renders the y-axis. An animated sequence updates the data every 10 seconds via setInterval, redrawing rects and text labels with d3 data joins. The SVG output uses d3.v5, with negative values shown in red and positive values in green, though the actual dataset contains only positive population figures.

Aug 4, 2020

Loading thumbnail…

Loading and Parsing CSV Data

A streaming area and line chart visualizes environmental sensor readings, depicting how Humidity changes over Time. The example demonstrates loading a CSV file with `d3.csv`, parsing the `Time` column into JavaScript `Date` objects, and numerically coercing the `Humidity` values. Using D3 v5, it renders an SVG area chart with a red gradient fill and a smooth line, animating the visualization by periodically splicing new data points into the dataset and redrawing the paths within a transition loop.

Jul 26, 2020

Loading thumbnail…

Let's make a face with D3.js!

A smiling face drawn with SVG paths animates its smile into view. The example builds the face using D3.js v5, constructing a circle for the head and a path for the mouth. Using the `getTotalLength()` method, the code sets a stroke-dasharray and transitions the dashoffset from the full path length to zero, creating a drawing effect over 200 milliseconds. The SVG elements are styled with CSS and rendered within a React-based example.

Mar 30, 2020