Crime Viz

100%

✓ Published0🌍 Public

Last edited Jul 11, 2022

Created on Jul 11, 2022

This bar chart visualizes crime statistics across Nigeria’s 20 most dangerous states in 2016, with horizontal bars sorted by total reported cases. The visualization uses React and D3 v5, leveraging `scaleBand` for the categorical y-axis and `scaleLinear` for the numeric x-axis. Data is loaded asynchronously via `d3.csv` from a GitHub gist, formatted with custom tick formatting that abbreviates large numbers. SVG rectangles render the marks, with native `<title>` elements providing hover tooltips. The chart includes labeled axes, a title, subtitle, and source attribution.

AI-generated description

Loads data using React and D3 utilities, Bare minimum for projects

MIT Licensed

Similar vizzes

Loading thumbnail…

3D Bar Chart using D3.js

This example visualizes reported crimes across Texas cities from January to September as an interactive 3D bar chart, with each city represented by a cluster of colored bars for each month. The visualization uses D3.js v5 for data loading and scales, while the d3-x3d plugin and the d3-3d library generate the 3D geometry and rendering via X3DOM. The CSV dataset is parsed with d3.csv, and the chart is created with `d3.x3d.chart.barChartMultiSeries()`, displaying crime counts on the axes.

Nnagarajuobbineni

74% match

Loading thumbnail…

India-Map-react-app-1

This example presents a horizontal bar chart visualizing crime rates against women across Indian states and union territories in 2021, using data from a CSV file loaded via d3.csv. The React application renders SVG bars with d3.scaleLinear and d3.scaleBand, sorting states by descending crime rate. Bars are colored steel blue with adjustable opacity and stroke width on selection. The chart includes axes generated by d3.axisLeft and d3.axisBottom, plus value labels and hover-triggered text showing state names and rates.

NNita

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

73% match

Loading thumbnail…

Bar chart of crime in India

This bar chart displays the total number of rape cases reported across different states in India, with each bar’s height proportional to the case count. The visualization uses D3 v7’s `scaleLinear` and `scaleBand` to map case numbers to horizontal bar lengths and states to vertical positions, rendering as SVG with semi-transparent red bars. The x-axis is labeled “Total number of rape crime cases in India,” and data comes from a CSV file loaded via `d3.csv` containing crime statistics against women.

LlzlazmSylas

73% match

Loading thumbnail…

Crime Data - Crime Type Occurence Analysis

This bar chart displays the number of occurrences for each crime type in a dataset, with rotated labels along the x-axis to accommodate longer category names. The visualization uses D3.js v7 to load a CSV file via `d3.csv`, aggregate counts with JavaScript objects, and render the chart as SVG. It employs `d3.scaleBand` and `d3.scaleLinear` for positioning, along with `d3.axisBottom` and `d3.axisLeft` to generate axes. The chart includes a title and axis labels, showing that theft or similar categories likely dominate the distribution.

VVinay Vemuri

73% match

Loading thumbnail…

Dynamic Bar Chart

This dynamic bar chart visualizes crimes against women in India, showing the number of assault cases for each state in a selected year. A dropdown menu lets users switch between years, while bars transition smoothly to updated values and re-sort in descending order. The visualization uses D3 v7 APIs including `csv`, `rollups`, `scaleLinear`, and `scaleBand`, with `transition` and `easeLinear` for animation. Bars change opacity on hover, and value labels appear at the end of each bar. The dataset comes from a CSV hosted in a GitHub gist.

GGabrielle Nyirjesy

72% match

Loading thumbnail…

Interactive Bar chart for Crime against Indian Woman

This interactive bar chart displays the number of crimes against women across Indian states, with a dropdown menu to filter by year and another to select a specific crime type. The bars are sorted in descending order, and the bar widths animate smoothly when the selection changes. The visualization uses D3 v7 with `scaleLinear`, `scaleBand`, `rollups`, and `transition` to update the chart. Data comes from a CSV file of reported crimes, aggregated by state and year, with the x-axis showing case counts and the y-axis listing states.

LlzlazmSylas

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

72% match