Skip to main content
SimilarExport ZIP
100%

Fork of D3 Starter

✓ Published0🌍 Public
DDouglas Devine
Last edited Oct 29, 2024
Created on Oct 29, 2024
Forked from D3 Starter

This example demonstrates a bubble map of the United States, using bubble size to represent data values for selected states. It leverages the Highcharts library, specifically the `Highcharts.mapChart` method with the `mapbubble` series type, alongside the `highcharts.js` and `maps.js` modules. The map uses the built-in US state GeoJSON data from Highcharts’ map collection, joining state codes like `US-CA` to display proportional bubbles. The code includes hardcoded data for states such as California and Texas, with sizing controlled by `minSize` and `maxSize`.

AI-generated description

A demonstration of how to start using D3 version 6.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of D3 Starter

This example presents two geographic maps: a world map using the Natural Earth projection and a United States map with state population data. The world map renders all countries from a TopoJSON file using `d3.geoPath` with `d3.geoNaturalEarth1`, while the U.S. map uses `d3.geoAlbersUsa` to display state boundaries. State populations are visualized through a sequential color scale (`d3.scaleSequential` with `d3.interpolateBlues`), where values are mapped to specific state names via a static lookup object. Tooltips are added using SVG `<title>` elements to show population numbers.

AAbhiram-Janagama
76% match
Loading thumbnail…

Fork of D3 Starter

This fork of D3 Starter uses SVG rendering to display a choropleth map of US counties with bubble overlays sized by population. The visualization loads TopoJSON geographic data and renders county boundaries, internal state lines, and semi-transparent red circles at each county centroid where circle radius is scaled by the square root of population using `d3.scale.sqrt`. Interactive tooltips on hover reveal county names and population values. The code uses `d3.geo.path` for geographic projection and `topojson.mesh` for state borders, with `d3.select`, `.data()`, `.enter()`, and transition methods for dynamic styling. A YouTube tutorial link is embedded in the README.

Eemilienbf
74% match
Loading thumbnail…

Fork of D3 Starter

This choropleth maps crime rates per 100,000 people across U.S. states, coloring each state on a red-orange gradient from low to high values. The map uses an Albers USA projection via `d3.geoAlbersUsa()`, with state boundaries drawn through `d3.geoPath()`. State-level data from a CSV is joined to TopoJSON features from the us-atlas package, and a hover tooltip shows each state’s name and rate. A gradient legend, rendered as a Canvas image embedded in the SVG, includes an axis from `d3.axisBottom()`.

Vvydeeshm@gmail.com
74% match
Loading thumbnail…

Fork of React & D3 Starter - practice

This example displays a base choropleth map of the United States, with each state filled in light blue and separated by white borders. Built with React and D3.js v7, it loads TopoJSON data from the us-atlas package and uses `d3.geoAlbersUsa()` for the map projection and `d3.geoPath()` to render the state shapes. The SVG output is generated within a React component, with the map drawn before any dataset has been linked.

Vvijaysaichigullapally1@gmail.com
74% match
Loading thumbnail…

Fork of React & D3 Starter

This choropleth map displays sample population data for U.S. states, with each state filled according to its value on a blue sequential color scale. The map is rendered as an SVG using D3.js v7, with state boundaries drawn via the `d3.geoPath` projection and TopoJSON data from the us-atlas package. Hovering over a state triggers a tooltip showing the state name and its associated data value, using D3's selection and styling methods.

Kkarthikpavan1198@gmail.com
74% match
Loading thumbnail…

Fork of React & D3 Vibecoding Starter

This example displays a choropleth map of U.S. states, using darker blue fills to indicate higher population values from a hardcoded dataset for fourteen states, with unlisted states shown in light gray. It loads TopoJSON from the us-atlas package, converts it to GeoJSON with `feature`, and renders paths via `d3.geoPath` and the `d3.geoAlbersUsa` projection. A linear color scale maps population extents to a blue range, and hover tooltips appear through SVG `title` elements. The map uses D3 v7 and TopoJSON-client, with an SVG rendering approach.

Ssaisanthoshravula@my.unt.edu
73% match
Loading thumbnail…

Fork of D3 World Mapzzz

A choropleth map of the United States visualizes a diversity index for each state, ranging from white to blue via a linear color scale. The visualization uses D3 v4 with `d3.geoAlbersUsa` for projection and `d3.geoPath` to render state boundaries from TopoJSON data. State polygons are filled based on a hardcoded dataset of diversity values, and hovering highlights the state with a thicker stroke. The code includes a commented-out tooltip and a legend using `d3.legendColor`, though neither is fully implemented.

11godfrey
73% match
Loading thumbnail…

Fork of Map

This example displays a choropleth-style map of the United States, with each state filled in a light blue shade and outlined by dark gray borders, over a pale background. Hovering over a state reveals its name via an SVG `<title>` tooltip. The visualization uses a `d3.geoAlbersUsa` projection and `d3.geoPath` to render TopoJSON data from the us-atlas package, drawing both individual state polygons and the national outline. State names are derived from the TopoJSON geometries’ `properties.name` field.

Sson.sultan@yahoo.com
73% match