DeepHarvey

@DeepHarvey·4 public vizzes

Selecting a Year on a Line Chart

A line chart displays population estimates and projections for world regions from 1950 to 2100, sourced from UN population data. Moving the mouse across the chart updates a vertical black line marking the selected year, with each region’s line colored via a categorical scale. The visualization uses D3 v5’s `scaleTime`, `scaleLinear`, `line` with `curveBasis`, and `nest` to group data, while mouse interaction relies on `mouse` and `xScale.invert`. A custom `colorLegend` component renders the color key.

Mar 5, 2020

Loading thumbnail…

Lets build a map

This example builds a world map using D3 version 5 and React. It renders country boundaries as SVG paths with a light green fill and dark green strokes, over a blue ocean sphere. The map uses the `geoNaturalEarth1` projection and `geoPath` for geographic shape generation, with data loaded from a TopoJSON file via `json` and processed with `feature`. A static SVG element supplies the container for all drawn paths.

Feb 13, 2020

Loading thumbnail…

d3 make a face

This example shows a blank SVG canvas with a console log demonstrating the d3 library in use. The page loads d3.v5 directly from a CDN via a script tag, creating a 960-by-500 pixel SVG element. It uses plain HTML and JavaScript to verify that d3 is accessible in the browser, with a minimal stylesheet that removes margin and hides overflow.

Jan 10, 2020

Loading thumbnail…

HTML Starter

This example shows a minimal HTML page that centers the text “Hello HTML” on the screen with a large font size. The page uses plain HTML and CSS, with a `<style>` block setting `text-align: center` and `font-size: 13em` on the `body` element. No JavaScript libraries or external frameworks are used; the visualization is achieved entirely through static markup and styling. The content is static and does not respond to user interaction or data changes.

Jan 10, 2020