Using node-canvas

100%

Using node-canvas

✓ Published0🌍 Public

Last edited Sep 19, 2017

Created on Sep 18, 2017

A static choropleth map renders the prevalence of mental and substance use disorders across U.S. counties for 2014. Using `d3.geoPath` and `node-canvas`, the visualization draws county boundaries and fills them with a ten-step color scale based on `mental_substance.json` data. The code constructs a canvas context, applies a threshold scale from `d3-scale`, and renders state and national outlines from the `us-atlas` TopoJSON file. Data originates from FiveThirtyEight’s “35 Years Of American Death” project.

AI-generated description

This example shows how to create static graphs with d3.geoPath and node-canvas.

The map shows the distribution of Mental and substance use disorders in 2014. Data comes from 35 Years Of American Death by FiveThirtyEight.

GPL-3.0 Licensed

Similar vizzes

Loading thumbnail…

DataViz Project - Third Visualization - Mental Illness Choropleth Map

This choropleth map visualizes the percentage of each country’s population affected by mental illness in 2017, highlighting geographical disparities and enabling comparisons across regions. Built with React and D3 v5, it uses `geoNaturalEarth1` and `geoPath` to render country boundaries and graticules, while a `scaleSequential` with `interpolatePuBu` encodes data values as color intensity. Country codes are mapped to numeric identifiers via CSV data, and missing values appear in black. The map is interactive through SVG tooltips showing country names.

FFelipe Mejías

75% match

Loading thumbnail…

DataViz Project - Third Visualization - Mental Illness Choropleth Map with Linked Line Chart and Color Legends

A choropleth map displays the global percentage of national populations with mental illness for a selected year, with a linked line chart below showing each country's trend over time. Moving the mouse across the chart updates the selected year, redrawing the map's sequential blue color scale and positioning a vertical line on the line chart. The visualization uses React with D3 v5, including `geoNaturalEarth1` and `geoPath` for map projections, `scaleSequential` for coloring, and `scaleTime`/`scaleLinear` for the line chart. Data comes from a CSV of mental health disorders, with country boundaries from TopoJSON.

FFelipe Mejías

75% match

Loading thumbnail…

DataViz Project - Third Visualization - Mental Illness Choropleth Map with Linked Line Chart

A choropleth map shades countries by the percentage of their population with mental illness for a selected year, while a linked line chart below plots the same metric over time for every country. Moving the mouse horizontally across the chart updates the map to the corresponding year. The visualization uses React with D3 v5, including `geoNaturalEarth1` and `geoPath` for the map, `scaleSequential` with `interpolatePuBu` for color encoding, and `scaleTime` for the year axis. Data comes from a CSV of mental health disorders, with country boundaries from World Atlas TopoJSON.

FFelipe Mejías

74% match

Loading thumbnail…

D3 - Choropleth

This choropleth map visualizes poverty rates across U.S. counties in 2022, with counties colored according to a blue sequential threshold scale and state boundaries overlaid in white. The visualization includes an interactive legend and a tooltip that displays county name, state, and poverty value on mouseover. The code uses d3.geoPath to render geographic shapes, d3.scaleThreshold with d3.schemeBlues for color mapping, and topojson.feature to process the US county data. Data is loaded from a CSV file and merged with US TopoJSON geometry, with the rendering handled in SVG.

CChandana Srinivas

74% match

Loading thumbnail…

Untitled

A choropleth map of the United States displays county-level poverty rates, colored with a threshold scale using a green sequential scheme. The visualization includes a legend with a color bar and labeled ticks. The code uses D3 v5 and the `d3.geoPath` and `d3.scaleThreshold` APIs, along with TopoJSON for US county boundaries and a CSV data file for the rates.

IIsha Singh

74% match

Loading thumbnail…

Untitled

A choropleth map of US counties depicts poverty rates using a threshold color scale with a green sequential scheme. The visualization loads TopoJSON geographic data via `d3.json` and joins it with CSV values using `d3.map`. It renders county boundaries with `d3.geoPath`, overlays state borders, and includes a legend with an axis. The map also uses `d3.axisBottom` and `d3.scaleThreshold` for color classification.

Rryan-dirajlal

74% match

Loading thumbnail…

d3.geoPath + node-canvas

This example demonstrates how to render geographic data to a Canvas element using d3.geoPath with node-canvas, producing a stroked mesh of United States county boundaries. The rasterize script loads US Atlas TopoJSON data, converts it to GeoJSON with topojson-client, and passes it through d3.geoPath’s context method to draw paths into a 960×600 canvas. It then writes the resulting bitmap to a PNG file, showing server-side vector-to-raster conversion without a browser.

Mmbostock

73% match

Loading thumbnail…

Fork of DataViz Project - Third Visualization - Mental Illness Choropleth Map

This interactive D3.js v5 choropleth map shows the percentage of each country’s population affected by mental illness in 2017, using a sequential blue color scale over a Natural Earth projection. The React-based view renders SVG paths for countries, with missing data marked in black, and includes graticules, a sphere background, and interior boundaries. It uses `d3.geoPath`, `d3.geoNaturalEarth1`, and `d3.geoGraticule` for map geometry, while pulling data from a CSV of health disorders and a country-code lookup.

VVenkata Rajashekar Reddy Chinthala

73% match