Skip to main content
100%

haCkARTO VL

✓ Published0🌍 Public
Aalexsroth
Last edited Jun 7, 2018
Created on Jun 7, 2018

A game-like map visualization built with CARTO VL and Mapbox GL JS challenges users to locate the hottest county in the United States. The map renders counties with a color gradient from cold (pink) to hot (teal), visually encoding temperature data. Players enter their name, start a timer, and click on the map to guess the correct county, with the gradient serving as a styling guide. The interface includes a progress bar and ranking display, all styled with Bootstrap and custom CSS.

AI-generated description

Similar vizzes

Loading thumbnail…

Paint by Numbers II

This interactive map of U.S. counties lets users paint each county with one of nine colors, with selections shared via a URL hash. Dragging across the map assigns colors, while clicking the legend or pressing number keys switches the active color. Built with D3 v3 and TopoJSON, the visualization uses `d3.geo.albersUsa` for projection, `d3.behavior.drag` for painting, and merges colored counties into SVG paths via `d3.geo.path`. County boundaries are rendered as a mesh, with a background stroke and interactive foreground paths.

Mmbostock
70% match
Loading thumbnail…

Country Map

This example renders a choropleth-style map of United States counties on an SVG canvas. Each county polygon is drawn as a purple path with white strokes, and hovered counties turn red, with the county name appearing as a tooltip. The visualization uses D3 v5’s `geoAlbersUsa` projection with `geoPath` to generate the shapes, and TopoJSON’s `feature` method to parse county boundaries from the us-atlas dataset. County names come from the TopoJSON properties, while the map loads via a remote JSON URL.

AAashish Pandey
67% match
Loading thumbnail…

Ready for a Chloropleth

This block displays a static map of United States counties rendered as SVG paths, colored a uniform light gray with subtle borders. The map uses the Albers USA projection and draws county boundaries from a 20m Census shapefile. While the visualization itself has no data-driven coloring, it is built as a "ready for chloropleth" template: hovering over any county reveals a tooltip with the county name and state, populated by cross-referencing state and county FIPS codes. The example demonstrates how to set up county-level geographic data, apply a projection, and implement interactive mouseover tooltips, providing a foundation for mapping quantitative data onto U.S. counties.

Aaaronmunoz
67% match
Loading thumbnail…

Let's make a map of US-counties with D3.js:"hover and county name "

This example displays a choropleth-style map of all US counties rendered as SVG paths, with county names revealed on hover via a native `<title>` element. The visualization uses D3 v5’s `geoAlbersUsa` projection and `geoPath` to draw county boundaries from TopoJSON data loaded from the us-atlas package. County shapes are styled with black strokes and a green fill on mouseover, showing the geographic distribution of administrative divisions. The code filters the TopoJSON for county features and binds them to path elements, relying on the browser’s built-in tooltip behavior for the name display.

NNita
66% match
Loading thumbnail…

US Map

This interactive visualization displays all US counties as a choropleth-style map rendered with a natural Earth projection using d3.geoPath. The map is drawn with SVG elements, featuring graticules and a sphere outline to provide geographic context. County boundaries come from a TopoJSON file loaded asynchronously and converted to GeoJSON features. Built with React and D3 v7, the visualization dynamically fills the browser window and uses the Poppins font for its minimal interface.

JJohn Lewis
66% match
Loading thumbnail…

Something crazy

This example displays a choropleth map of U.S. postal codes, where a randomly selected threshold dynamically recolors polygons based on their population totals. The visualization uses the CartoDB.js library to load a Leaflet map layer, then modifies its CartoCSS styling on each page load. A JavaScript function converts the current timestamp into an RGB color, which is applied to polygons exceeding a random population value, while all other areas retain a fixed pink fill. The underlying data comes from a CartoDB-hosted dataset of postal code boundaries.

Aandrewxhill
66% match
Loading thumbnail…

map: usa, counties

This example renders a choropleth-style map of the United States, displaying county and state boundaries overlaid on landmasses, with graticules and a sphere outline. It uses a React component with `d3.geoAlbersUsa` for projection and `d3.geoPath` for drawing geometries. Data comes from the US Atlas TopoJSON (`us-atlas@3.0.0/counties-10m.json`), processed with `topojson.feature` and `topojson.mesh`. Interactive tooltips show county and state names on hover. The SVG output is styled with semi-transparent fills and distinctive boundary strokes.

Zzach b.
66% match
Loading thumbnail…

map: NY Counties

This interactive map displays New York State counties using a glitchy, layered rendering technique. The visualization uses D3’s geoAlbersUsa projection and geoPath to render county boundaries from a TopoJSON source, with hover effects that highlight individual counties. The map also includes world landmasses and graticules, creating an overlapping collage effect where the state’s counties appear superimposed on global geography. React manages the component state while D3’s json and topojson.feature APIs load and parse the geographic data for SVG rendering. The stylized CSS uses semi-transparent fills and hover states to emphasize the experimental aesthetic.

Zzach b.
65% match