faversin17

@faversin17·6 public vizzes

Untitled

This example shows monthly counts of a categorical status variable from September 2017 through September 2019, rendered as a smooth area chart. A main focus panel displays the full time series, while a smaller context panel beneath it provides a brush for selecting date ranges. Users can also pan and zoom directly on the focus chart. The visualization uses D3 v4 with `d3.brushX`, `d3.zoom`, and `d3.area` with monotone curve interpolation, reading data from a CSV file where dates are parsed with `d3.timeParse`.

Oct 22, 2019

Loading thumbnail…

Untitled

This interactive time series visualization displays daily count data from September 2018 to September 2019. Using D3.js version 3, it renders an SVG line chart with buttons to aggregate the data into weekly or monthly sums, with missing dates linearly interpolated. Hovering over the chart reveals tooltips and focus elements, while the axes are drawn using `d3.svg.axis`.

Oct 22, 2019

Loading thumbnail…

Untitled

This example demonstrates a linked dataset of monthly S&P 500 index prices from a CSV file, presented as a brushable area chart. Users can adjust the visible time range by dragging a brush in the lower context panel, which updates the main focus chart’s x-axis domain. The code uses `d3.brushX` for selection, `d3.zoom` for panning, and `d3.area` with `d3.curveMonotoneX` to render the paths. Both charts are drawn in SVG with axes generated by `d3.axisBottom` and `d3.axisLeft`.

Oct 22, 2019

Loading thumbnail…

Untitled

This interactive time-series chart displays a daily value over three months and lets the user switch between daily, weekly, and monthly aggregated views. It renders an SVG line chart using D3 v3, with axis labels, an orange line, and a tooltip that appears on hover over the chart area. The code aggregates data by summing values for each time unit and linearly interpolates gaps, using APIs like `d3.time.scale`, `d3.svg.axis`, and `d3.bisector`. Buttons enable the time-unit selection, and the chart updates dynamically on click.

Oct 10, 2019

Loading thumbnail…

A Re-Recreation of Gapminder’s Wealth & Health of Nations - Romain Vuillemot

This interactive scatter plot recreates the classic Gapminder visualization, mapping countries as circles over time, with income per capita on the x-axis, life expectancy on the y-axis, and population encoded by circle radius. Users can drag any country circle to explore its historical trajectory, which is drawn as a gray path connecting its annual data points. The code uses D3.js v3 for SVG rendering and animation, with a custom `dragit.js` library handling the drag-and-drop interaction and trajectory display. Data is loaded from a local `nations.json` file, and a slider lets viewers scrub through years from 1800 to 2008.

Oct 10, 2019

Loading thumbnail…

CO2 Emissions Over Time

This stacked area chart visualizes global CO2 emissions over time, broken down by source categories like Gas, Liquids, Solids, Cement Production, and Gas Flaring. It shows how emissions from different fossil fuel types have grown since 1790, with the area labels positioned using the `d3-area-label` library. The visualization is rendered as an SVG using D3 v4, employing `d3.stack` for data aggregation, `d3.area` with a basis curve for the shapes, and `d3.scaleOrdinal` with `d3.schemeDark2` for color encoding. Data comes from a CSV file loaded via `d3.csv`.

Oct 10, 2019