A7 Heatmap

100%

✓ Published0🌍 Public

Last edited Mar 8, 2024

Created on Mar 8, 2024

A heatmap of burglary rates per 100,000 people across U.S. states from 2000 to 2019, sourced from the CORGIS dataset and rendered as an SVG. The visualization uses D3.js v7 with `d3.scaleBand` for axes, `d3.scaleSequential` with `d3.interpolateReds` for color encoding, and a threshold legend via the d3-legend library. Hovering over each cell reveals precise values and state names.

AI-generated description

Visualization of burglary rates (per 100k people) by state from the CORGIS dataset made with D3. Color legend and threshold code from Susie Lu. Implementation from D3 Graph Gallery.

Hover over squares to see precise values. Fullscreen to see legend.

MIT Licensed

Similar vizzes

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

82% match

Loading thumbnail…

A6 Qualitative Scatter Plot

This scatter plot displays the relationship between burglary and motor crime rates across U.S. states from 2015 to 2019, with each dot representing a state-year observation. The visualization uses color to distinguish years, employing an ordinal color scale with a d3.legendColor legend. Hovering over a dot reveals precise values through SVG title tooltips. The chart is rendered with D3 v7, using d3.scaleLinear for both axes and d3.scaleOrdinal for color mapping, with data sourced from the CORGIS dataset.

NNoah C.

82% match

Loading thumbnail…

A7 Multi-Line Chart

This chart visualizes violent crime rates per 100,000 people across U.S. states from 2000 to 2019, using data from the CORGIS dataset. Each state is shown as a multi-line path with colored dots for individual data points, and hovering reveals exact values. The visualization is built with D3 v7, using `d3.csv` for data loading, `d3.line` for path generation, and `d3.legendColor` from the d3-legend library for the color legend. Axes are rendered via `d3.axisBottom` and `d3.axisLeft`, with an ordinal color scale distinguishing states.

NNoah C.

81% match

Loading thumbnail…

Crime Rate CORGIS Heatmap

This heatmap visualization displays violent crime rates for US states from 2008 to 2019 using CORGIS data. It presents a grid of colored squares, with each square representing a state-year combination and color intensity mapping to the crime rate via red fill values. The visualization is built with p5.js, using its `loadTable` function to fetch and parse a remote CSV file. It dynamically draws the legend, axes, and state labels through the canvas API, with the color scale ranging from dark red for lower rates to bright red for higher ones.

NNoah C.

80% match

Loading thumbnail…

Line Chart

This line chart displays violent crime rates per 100,000 people for each U.S. state from 2000 to 2019, using data from the CORGIS dataset. Each state is represented by a colored line, with a color legend on the right for identification. Built with D3.js (v7), the visualization uses `d3.scaleLinear` for axes and `d3.scaleOrdinal` for color assignment, rendering paths and hover-able circles in SVG. The `d3.legendColor` API adds the threshold legend, and tooltips reveal exact values on hover.

AArun

77% match

Loading thumbnail…

A6 Diverging Color Bar Chart

This diverging bar chart visualizes changes in violent crime rates across U.S. states between 2000 and 2019, using a red-blue color scale to distinguish increases from decreases. The chart shows both positive and negative changes diverging from a central zero axis, with state labels positioned on the appropriate side of each bar. Built with D3 v7, it uses `d3.scaleDiverging` and `d3.scaleThreshold` for color mapping, while `d3.legendColor` renders the threshold legend. Data comes from the CORGIS dataset, and hovering reveals precise values. The visualization employs an SVG container with a centered y-axis and responsive sizing based on window dimensions.

NNoah C.

77% match

Loading thumbnail…

Untitled

An interactive choropleth map displays property crime rates across U.S. states from 2009 to 2019, with dropdown menus to select the year and crime type (property crime, burglary, larceny, or motor vehicle theft). The map uses `d3.geoAlbersUsa` projection and `d3.geoPath` to render state boundaries from a TopoJSON file. Crime values are mapped to a red color scale using `d3.scaleThreshold`, with a legend generated via `d3.legendColor`. Hovering over a state reveals a tooltip with details, and the visualization updates dynamically through SVG transitions.

Nnellylopez2022

75% match

Loading thumbnail…

Untitled

This visualization plots U.S. state-level crime statistics, showing violent crime totals against homicide cases for each state, with bubble size encoding population and color assigned by state name. The chart uses d3.v4 with d3-scale-chromatic for color mapping and includes an interactive tooltip that displays the state name on hover, while also fading out non-hovered bubbles. Data comes from the estimated_crimes.csv file, rendered as SVG circles with axes and labels generated using d3.axisBottom and d3.axisLeft.

Ssruthisenapathi

75% match