Fork of Heatmap with time series in D3

100%

Fork of Heatmap with time series in D3

✓ Published0🌍 Public

Last edited Aug 6, 2024

Created on Aug 6, 2024

Forked from Heatmap with time series in D3

This heatmap shows the property-related crime rate per 100,000 people for each U.S. state from 2000 to 2019, with states on the y-axis and years on the x-axis. Each cell encodes the crime rate using a sequential blue color scale based on `d3.scaleSequential` and `d3.interpolateBlues`, with a color threshold legend from `d3.legendColor`. The visualization uses D3 v6 to load data from a CORGIS CSV via `d3.csv`, render SVG rectangles, and display a hover tooltip showing the exact offense count.

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…

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

92% match

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.

83% match

Loading thumbnail…

maps

This choropleth map shows U.S. state crime rates per 100,000 people, with states colored on a sequential orange-red scale based on values loaded from a CSV file. The visualization uses D3 v7 and TopoJSON to render state boundaries via `d3.geoAlbersUsa` projection and `d3.geoPath`, while encoding data with `d3.scaleSequential` and `d3.interpolateOrRd`. A canvas-generated gradient legend with a `d3.axisBottom` scale accompanies the SVG map, and hover interactions display crime values and state names in a tooltip.

Vvydeeshm@gmail.com

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

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

79% match

Loading thumbnail…

Line Chart-project

This visualization shows violent crime rates per 100,000 people across U.S. states from 2000 to 2019, with each state represented as a colored line and dot. The chart uses d3.line and d3.scaleOrdinal to draw paths, while d3.legendColor from d3-legend renders a color legend. Hovering over dots reveals exact crime values and state names via SVG title elements. Data comes from the CORGIS dataset, processed with d3.csv and d3.group, and rendered as an SVG using D3 v7.

AArun

79% 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…

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.

78% match