Test Chloropleth

100%

Test Chloropleth

✓ Published0🌍 Public

Last edited May 10, 2024

Created on May 10, 2024

This visualization displays the number of data points across U.S. states in a hexagon tile grid choropleth. The color scale uses a threshold encoding with d3.scaleThreshold and d3.schemeBlues to represent counts from the StateFile.csv dataset. The map is rendered using d3.geoPath and TopoJSON, loading US state hexgrid geometry from a GitHub-hosted GeoJSON file. A legend with an axis provides reference for interpreting the color values.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

Similar vizzes

Loading thumbnail…

Fork of Chloropleth

This visualization displays a choropleth map of the United States using a hexgrid projection, with each state's fill color corresponding to a numerical value from the `StateFile.csv` data (ranging from 0 to 221, likely representing counts or frequencies). The map is rendered as an SVG using `d3.geoPath` with a `d3.geoEqualEarth` projection fitted to the canvas. The code loads GeoJSON map data and CSV statistics via `d3.json` and `d3.csv`, then maps state codes (ISO 3166-2) to values using a linear color scale that transitions from white to blue. Interactive mouseover effects are present but commented out.

Bblanchestora@gmail.com

85% match

Loading thumbnail…

USA Map

This choropleth map of the United States colors each state according to a numeric value loaded from a CSV file, using a linear lightred-to-red scale. The SVG rendering is built with d3.geoPath, which projects the US states from a GeoJSON file, while topojson.feature extracts the state features. State FIPS codes from the CSV are matched against the GeoJSON IDs to assign fills, with gray as the default for missing data. The visualization relies on d3.select, d3.csv, and d3.json for data loading.

NNukaShravanKumar

82% match

Loading thumbnail…

USA Map

This visualization displays a choropleth map of the United States, where individual states are filled with varying intensities of red based on values loaded from a CSV file. States without matching data appear in gray. The map is rendered as an SVG using D3.js, with geographic boundaries drawn via `d3.geoPath` and TopoJSON features from the `us-10m.v1.json` dataset. A `d3.scaleLinear` maps data values to a color range from light red to deep red for each state's fill.

Hharsha

80% match

Loading thumbnail…

Untitled

This example displays a choropleth map of the United States, coloring each state based on a numeric diversity value ranging from 0 to 5, with values mapped to a categorical color scale from grey to dark red. The map renders state boundaries using D3’s `d3.geoPath` and TopoJSON data from the US 10m dataset, while state fill colors are assigned via an ordinal `d3.scaleOrdinal`. The code loads the TopoJSON file and appends SVG paths for each state, using the diversity object to set fill colors and adding white state borders.

YYFKxenigsegg

80% match

Loading thumbnail…

Choropleth Map

A choropleth map of United States states renders geographic boundaries as SVG paths, colored light blue with black outlines and a red hover state. The map uses the topojson library to convert US Atlas TopoJSON data into GeoJSON features, then projects them with d3.geoAlbersUsa and renders them via d3.geoPath. Interactive zooming is enabled through a d3.zoom event that applies transform updates to the map group, while a categorical color legend displays the domain. State data loads from a remote US Atlas JSON file.

NNicholas Papacostas

80% match

Loading thumbnail…

Centered US Choropleths Map

A centered US choropleth map displays state boundaries with a uniform purple fill, using state-level rate data from a TSV file. The visualization loads US Atlas TopoJSON data and renders it with React and D3 v5, using `d3.geoAlbers` for projection and `d3.geoPath` to draw state and interior mesh paths. The code includes commented-out attempts at threshold-based color mapping with `d3.scaleThreshold` and `d3.schemeGreens`, though the final version applies a single color to all states.

Yyuzhang21

80% match

Loading thumbnail…

Centered US Choropleths Map

A choropleth map of US states displays state-level rates using a green color scale, with state boundaries from the US Atlas TopoJSON and state rate data from a TSV file. The visualization uses React with D3’s `geoAlbers` projection and `geoPath` to render SVG paths, applying a `d3.scaleThreshold` color lookup based on each state’s rate. The map includes a sphere background and interior state borders, with loading handled via `Promise.all` to fetch both TopoJSON and TSV data.

Wwenleicao

80% match

Loading thumbnail…

USA state Map

A choropleth map of the United States colors states based on a numeric value from a CSV file, with a linear color scale mapping low values to light red and high values to dark red. The map is rendered as SVG using D3 v6 and topojson, with the `d3.geoPath` generator drawing state boundaries and `d3.scaleLinear` adjusting fill colors. States without matching data appear blue. The CSV is loaded via `d3.csv`, and state boundaries come from the us-10m.v1.json TopoJSON file.

VVinay Vemuri

80% match