Skip to main content
SimilarExport ZIP
100%

India-Map-react-app-1

✓ Published1🌍 Public
NNita
Last edited Aug 26, 2023
Created on Aug 25, 2023

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.

AI-generated description

React Starter code.

MIT Licensed

Similar vizzes

Loading thumbnail…

crime

This interactive visualization displays the number of crime cases against women across Indian states, with a choropleth map colored by crime type and two donut charts for selecting the year and crime category. The map updates dynamically when users change the dropdown selections. Built with D3 v7 and React, the code uses `d3.rollups` for data aggregation, `d3.geoPath` for rendering the TopoJSON map of India, and `d3.scaleOrdinal` with custom color themes. Data comes from a CSV file hosted on GitHub Gist.

Ppvreswar7@gmail.com
84% match
Loading thumbnail…

Fork of Bar chart Crime Against Women India 2024

Three bar charts visualize crime statistics across Indian states and crime categories for 2022. The first and third charts show crime rates per 100,000 population for each state using horizontal bars colored with sequential scales, while the second chart displays the top 15 crime types by rate with vertical bars. All charts use D3 v7 APIs including `scaleBand`, `scaleLinear`, `scaleSequential`, and `d3.axisBottom`/`d3.axisLeft`, with interactive tooltips that appear on mouseover.

NNita
84% match
Loading thumbnail…

Crime India 2022 - 1

This D3.js visualization presents an analysis of crime data from India for 2022, displaying multiple interactive charts including a bar chart of police complaints, a horizontal bar chart of crime rates by state, and a chart highlighting top crime types. Using d3.csv to load the data, the visualization employs various D3 API functions such as d3.scaleBand, d3.scaleLinear, d3.axisBottom, d3.axisLeft, and d3.select, with SVG rendering for the visual output. The charts feature tooltips that appear on mouseover, color-coded bars, and legends, providing an insightful overview of India's crime statistics from 2022.

NNita
83% match
Loading thumbnail…

Bar chart Crime Against Women India 2024

This bar chart visualizes crime against women in India, displaying the top fifteen crime types by rate per 100,000 population and comparing crime rates across all states and union territories using two separate horizontal bar charts. The visualization uses D3.js v7 with an SVG rendering approach, employing `d3.scaleBand`, `d3.scaleLinear`, and `d3.scaleSequential` for color encoding, with interactive tooltips providing detailed information on hover. The data is loaded from CSV files using `d3.csv` and parsed before being passed to the chart creation functions.

NNita
83% 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
83% 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
82% match
Loading thumbnail…

Bar chart and map chart for dataset

Linked bar chart and map views display crime statistics across Indian states, with a choropleth map colored by case counts and an adjacent horizontal bar chart showing the same values in descending order. Two dropdown menus filter the data by year and crime type, such as rape or dowry deaths. The visualization uses D3 v7 with `d3.scaleLinear`, `d3.scaleBand`, and `d3.geoPath` to render the map from TopoJSON data, while the bar chart updates via shared scales and a re-render function. The dataset comes from a CSV file on crime against women.

LlzlazmSylas
82% match
Loading thumbnail…

Scatter-plot-crime-rate-women-India-chargesheet-rate

This interactive scatter plot compares the chargesheet rate and crime rate against women across Indian states for 2021, using NCRB data loaded via d3.csv. Each circle represents a state, with color encoding the state name and opacity highlighting the selected point. Built with React and D3 v7, the visualization uses d3.scaleLinear for the x and y axes, d3.scaleOrdinal with schemeDark2 for coloring, and d3.axisLeft and d3.axisBottom for ticks. Clicking or hovering a circle updates its opacity and stroke width, and the SVG renders all marks with an interactive tooltip effect.

NNita
82% match