Skip to main content
SimilarExport ZIP
100%

census block heatmap

✓ Published0🌍 Public
CCaged
Last edited Aug 26, 2011
Created on Aug 26, 2011

A census block heatmap displays population or demographic counts across Minnesota’s block-level geography, using color intensity to reveal spatial density variations. The visualization loads GeoJSON feature data from `/data/mn-blks.json`, then applies `d3.scale.quantile` to bin the count values into four color classes. The map is rendered using the Polymaps library (`po.geoJson`), which projects and draws the geographic shapes, while `_.each` from Underscore assigns the appropriate CSS class (e.g., `nh q5-0` through `q5-3`) to each block element based on its quantile bucket. The coloring relies on pre-defined styles for those classes, visually encoding the counts without needing explicit pixel-level drawing.

AI-generated description

Similar vizzes

Loading thumbnail…

Untitled

This visualization displays population density per square mile across U.S. census block groups using a choropleth map. A threshold color scale with d3.schemeOrRd maps density values to sequential red tones, while a legend with a sqrt scale and axis shows the breakpoints. The code loads TopoJSON data via d3.json, renders block group polygons with d3.geoPath, and overlays county boundaries as black outlines. An interactive legend is constructed with rect elements and d3.axisBottom.

CCurran Kelleher
69% match
Loading thumbnail…

Untitled

A choropleth map of population density by census block group uses a sequential color scale from the d3-scale-chromatic library to shade geographic regions. The visualization renders as SVG via d3.geoPath, with a threshold scale mapping density values to the OrRd color scheme and a legend using d3.axisBottom. It loads TopoJSON data containing block group polygons, fills each path according to its population per square mile, and outlines counties with a subtle stroke. The code applies d3.scaleThreshold and d3.scaleSqrt to encode the data range.

JJohan van Beusekom
67% match
Loading thumbnail…

Dot density map

This dot density map visualizes population distribution across Massachusetts census blocks using one dot to represent two people. The code renders polygons to an offscreen canvas with unique colors per feature, then uses Canvas `getImageData` for point-in-polygon tests to place random dots within each block’s bounds. It draws the final dots on a separate canvas using the Albers projection and `d3.geo.path`, with data from a TopoJSON file (`block.json`). The map uses colors and the D3 v3 library.

AAnimesh Nautiyal
67% match
Loading thumbnail…

Untitled

A choropleth map of population density per square mile colors U.S. census block groups using a threshold scale and the sequential color scheme `d3.schemeOrRd[9]`. The visualization includes a square-root-scaled legend with an axis, and overlays county boundaries as black strokes at 30% opacity. The code loads TopoJSON data via `d3.json`, converts it with `topojson.feature`, and renders it with `d3.geoPath`. The legend uses `d3.scaleThreshold` and `d3.axisBottom`. The map is built with D3 v4 and React in the supporting files.

AAlice Hua
66% match
Loading thumbnail…

Heatmap

This heatmap blends a base map with three point locations that are transformed into radial gradients, showing how they are highlighted on a map. The visualization combines a CloudMade tile layer and OpenStreetMap data, with the points loaded as GeoJSON features. The map uses the Polymaps library, and its `load` callback dynamically adjusts each point’s radius based on the current zoom level while assigning a green gradient fill with fading opacity.

Mmbostock
65% match
Loading thumbnail…

Heatmap (2D Histogram, CSV)

This heatmap displays the frequency of values across dates and time buckets, with color intensity representing the count. The visualization uses a 2D histogram where each rectangle's fill color maps to the count value, from white to steelblue. Built with D3 v3, the code loads CSV data via `d3.csv`, parses dates with `d3.time.format`, and renders the tiles as SVG rectangles. Axes and a color legend are generated using `d3.svg.axis` and the linear scale functions.

Mmbostock
64% match
Loading thumbnail…

functions most often used in d3.js blocks

This heatmap-like visualization shows how frequently each D3.js function appears in a collection of blocks, using a matrix of colored squares. Each row represents a combination of functions co-occurring in a block, while columns correspond to individual D3.js functions (e.g., `d3.select`, `d3.max`, `d3.csv`, `d3.scale.linear`), color-coded by their D3 module category: selections in blue, scales in gold, axes in teal, and utility functions in gray. The final column encodes the number of blocks (the frequency) for each combination, with darker/larger marks indicating higher counts. Sorted by frequency, the chart reveals that simple combinations dominate, while complex multi-function blocks are rarer, with function co-occurrence patterns highlighting the most common D3.js workflows in blocks.

EEE2dev
64% match
Loading thumbnail…

Heatmap with time series in D3

A heatmap displays annual property-crime rates for U.S. states from 2000 to 2019, using color intensity to show per-100,000-person offense counts. It uses `d3.scaleThreshold` with `d3.interpolateBlues` to map rates to colors and a sequential color scale for fill, while `d3.legendColor` provides a threshold legend. Data comes from the CORGIS smoking dataset, filtered for property crimes. Tooltips reveal exact values on hover, and axes are labeled using `d3.axisBottom` and `d3.axisLeft`, with the SVG rendered via D3 v6.

EEunice Tu
64% match