Line Chart

100%

✓ Published1🌍 Public

Last edited Mar 28, 2024

Created on Mar 28, 2024

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.

AI-generated description

Visualization of crime 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 dots to see precise values. Fullscreen to see legend.

MIT Licensed

Similar vizzes

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

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

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

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

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

80% match

Loading thumbnail…

Untitled

This interactive map visualizes violent crime rates across U.S. states from 1999 to 2019, with dropdown menus to select the year and crime type. Circles sized and colored by bivariate linear scales (d3.scaleLinear) are overlaid on a U.S. map projected using d3.geoAlbersUsa with d3.geoPath. The visualization uses d3.json to load state boundaries and coordinates, with hover tooltips showing state names and values.

Aajeuphoria

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

79% match

Loading thumbnail…

EDAV 2022 TTh Project Group 31

This interactive bar chart compares violent crime rates per 100,000 population across 15 U.S. states and the District of Columbia for 2002 and 2014. Clicking the gray year label toggles between the two datasets, animating bar heights and colors via D3 v7 transitions. The chart uses `d3.scaleBand` and `d3.scaleLinear` for axes, with SVG rectangles rendered through `d3.selectAll` and a custom `update` function. Axis labels and margins are configured manually; data appears hardcoded in arrays rather than loaded from an external file.

NNaishadh Parmar

78% match