Heatmap with time series in D3

100%

Heatmap with time series in D3

✓ Published2🌍 Public

Last edited Mar 14, 2024

Created on Mar 11, 2024

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.

AI-generated description

Heatmap visualization of states' crime rate with time series from 2000-2019 from the CORGIS dataset 'https://corgis-edu.github.io/corgis/csv/smoking/'in D3. The crime rate includes all the property-related crimes. Color legend from Susie Lu and colorbrewer. Referenced to geeksforgeeks

MIT Licensed

Similar vizzes

Loading thumbnail…

A7 Heatmap

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.

NNoah C.

82% 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

78% 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.

77% 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

76% match

Loading thumbnail…

d3 time series heatmap

This example visualizes yearly infection counts for U.S. states from 1970 to 1980 as a time series heatmap, where each cell’s color intensity reflects the number of infections. The chart uses a sequential color scale based on ColorBrewer’s OrRd palette, with a legend generated via the d3-legend plugin. Rendered as SVG, the heatmap positions state labels on the y-axis and years on the x-axis, while a custom tooltip displays state, year, and infection count on hover. The data is loaded from a CSV file using d3.csv.

AAndrew

76% 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.

76% match

Loading thumbnail…

d3 heatmap

This example visualizes yearly infection counts for US states from 1970 to 1980 using a heatmap. Cells are colored on a red scale, with darker shades representing higher infection numbers, and hover interactions reveal a tooltip with state, year, and exact count. The visualization uses d3.csv to load data, appends SVG text elements for labels and legend, and creates colored rect elements for each data point. The tooltip is positioned with event.pageX and event.pageY, while the legend is drawn manually with a loop generating gradient rectangles.

AAndrew

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