Diavek

@Diavek·11 public vizzes

CANADA (REGIONS) Coronavirus Deaths by Country over Time (with Voronoi Hover)

A log-scale line chart tracks cumulative COVID-19 deaths over time across Canadian provinces, sourced from the Johns Hopkins dataset. Using React with D3 v5, the visualization renders SVG paths via `d3.line` and applies a Voronoi overlay built with `d3.Delaunay` to enable hover interactions, highlighting the nearest data point and its corresponding province’s trajectory while displaying a tooltip with the death count and date.

May 1, 2020

Loading thumbnail…

CANADA Coronavirus Deaths by Country over Time (with Voronoi Hover)

A multi-line chart displays cumulative coronavirus deaths over time for Canada’s provinces, with each province represented by a gray line. A log-scaled y-axis and time-scaled x-axis frame the data. Hovering over any point activates a Voronoi overlay, built with d3.Delaunay, which highlights the nearest province’s line and shows a tooltip with the death count and date. Data comes from the Johns Hopkins Coronavirus dataset, rendered as SVG via React and D3 v5.

Apr 14, 2020

Loading thumbnail…

Hello HTML

This example shows a grid of 18 identical cartoon faces, each rendered with a yellow background circle, two eyes, and an arc-shaped mouth, composed using React components. The faces are generated by mapping over an array from `d3.range` and rendering each `Face` component with randomized eye radii. The visualization uses React to structure the SVG elements, while the mouth is drawn with a `d3.arc` path generator. All faces share the same fixed dimensions and coordinate centers, creating a repetitive pattern with slight variations in eye size.

Apr 13, 2020

Loading thumbnail…

Coronavirus Deaths by Country over Time (with Voronoi Hover)

A streamgraph-style line chart displays cumulative COVID-19 deaths by country over time, using data from the Johns Hopkins Coronavirus Dataset. A single line represents each country on a log-scaled y-axis. Hovering over any point activates a Voronoi overlay, built with `d3.Delaunay` and `d3.voronoi`, which highlights the nearest data point, illuminates the corresponding country’s entire line, and shows a tooltip with the country name, death total, and date. The visualization is rendered as SVG in React, with axes and scales from D3 v5.

Mar 29, 2020

Loading thumbnail…

Voronoi Overlay with Labels

This line chart displays cumulative global coronavirus deaths over time by country, using a log-scaled y-axis and data from the Johns Hopkins Coronavirus Dataset. Hovering over any point on the chart highlights the corresponding country’s entire line and shows a tooltip with the country name, death count, and date. The implementation uses React with d3.scaleTime, d3.scaleLog, and d3.line for the visualization, while a Voronoi overlay built with d3.Delaunay and d3.delaunay.voronoi captures mouse interactions, rendering cells as SVG paths with pointer-events enabled.

Mar 28, 2020

Loading thumbnail…

Coronavirus Deaths Over Time by Country With Voronoi Overlay

This example displays cumulative COVID-19 deaths over time for multiple countries as a multi-series line chart using a log scale. A Voronoi overlay facilitates mouse interaction by partitioning the chart into regions nearest each data point. The visualization is built with React and D3 v5, using d3-scale for axes and d3-delaunay for the Voronoi diagram. Data comes from the Johns Hopkins Coronavirus dataset, rendered as SVG paths with hover events logging interactions.

Mar 28, 2020

Loading thumbnail…

Coronavirus Deaths Over Time by Country

This chart displays cumulative COVID-19 deaths over time for each country, with each country represented by a colored line. The y-axis uses a logarithmic scale to accommodate the wide range of death totals, while the x-axis shows time progression. The visualization is built with React and D3 v5, using `scaleTime`, `scaleLog`, and `line` to generate SVG paths. It sources its data from the Johns Hopkins Coronavirus Dataset, loading the CSV via D3’s `csv` function and parsing dates with `timeParse`.

Mar 28, 2020

Loading thumbnail…

Coronavirus Y Axis

The chart shows global cumulative coronavirus deaths over time, with a simple line rising steeply as the outbreak progresses. Total daily counts are calculated by summing all reported deaths per date from the Johns Hopkins CSSE dataset. The visualization uses D3 v5 axis utilities, `d3.axisBottom` and `d3.axisLeft`, to render grid lines and date/death labels, while the line itself is generated with `d3.line`. The React component structure handles SVG rendering and margins.

Mar 28, 2020

Loading thumbnail…

Hello HTML

A minimal SVG circle renders on a plain HTML page, occupying a 960×500 canvas with a blue fill, black outline, and fixed stroke width. The example demonstrates the simplest possible HTML structure for embedding vector graphics, using inline SVG directly within a `<body>` element. The page relies solely on standard HTML and SVG APIs—no JavaScript libraries or data sources—to position the circle at coordinates (480, 250) with a radius of 245. The provided CSS sets the body margin to zero and hides overflow, ensuring the graphic displays edge-to-edge without scrolling.

Jan 17, 2020

Loading thumbnail…

Let's make a face with D3.js!

This example demonstrates fundamental DOM manipulation with D3.js by constructing a smiley face from basic SVG shapes. The code selects the SVG element and appends a circle with a radius of 200 pixels, while the accompanying stylesheet hides body margins and overflow. Using D3 v5’s `select` and `append` methods, the visualization shows how to programmatically create and style SVG elements, with related video content explaining animated eyebrow movement.

Oct 11, 2019

Loading thumbnail…

Kevin's face

A large yellow circle sits at the center of a blank SVG canvas, filling most of the viewport. The shape is drawn using D3 v5's selection and append methods, with its radius and coordinates set directly via the attr function. The code imports only the select function from d3, and the SVG element is created with unusually large width and height attributes in the HTML. The body has no margin and hidden overflow, so the circle appears as a simple, static geometric composition.

Oct 11, 2019