Major Crimes in Boston with Dropdown Menu for Year

100%

Major Crimes in Boston with Dropdown Menu for Year

✓ Published0🌍 Public

Last edited Oct 10, 2020

Created on Oct 7, 2020

This interactive visualization displays major crimes in Boston as a bar chart, with the color of each bar representing the year and the bar height showing the crime count per offense category. A dropdown menu allows users to filter the data by selecting one or multiple years. Built with React and Vega-Lite API, the chart loads CSV data via D3’s `csv` function and renders using `vl.markBar()` with `vl.x()` and `vl.y()` encodings. The code includes a custom config for axis styling and uses Vega Tooltip for interactivity.

AI-generated description

The data shown here comes from Boston Crimes Dataset

This chart meant to show the "Major Crimes in Boston". The color denotes the number of occurrences of that crime in that particular year. The drop down allows you to choose the year for which you would like to see Crime Count.

The inspiration for this drop down menu was from https://vizhub.com/pichayutter/88497edd1bcb466997c8d73dc10bf35d

MIT Licensed

Similar vizzes

Loading thumbnail…

Major Crimes in Boston

This example visualizes major crimes in Boston from a city dataset, using a bar chart where each bar represents a crime type and its length corresponds to the number of incidents. The bars are color-coded by year, and hovering reveals a tooltip with the crime name and exact count. Built with Vega-Lite and rendered via the `vega-lite-api`, it loads data from a CSV URL using D3’s `csv` method, then applies custom axis styling and tooltip handling from `vega-tooltip`.

JJosvin John

90% match

Loading thumbnail…

Massachussetts Top 10 Crime City filter works

A dropdown menu filters a bar chart of the top 10 cities in Massachusetts by crime rate, comparing All, City, Rural, and Suburb community types. The bars display the crime ratio as a percentage, with hover tooltips showing exact values. Built with React and D3 v5, it uses `scaleBand`, `scaleLinear`, and `csv` to load and visualize 2016 crime data, with SVG rendering for the chart and axes.

Wwenleicao

78% match

Loading thumbnail…

Massachussetts Top 10 Crime City filter works

This example displays the top 10 Massachusetts cities by crime rate, presented as a bar chart with a dropdown menu to filter by community type (all, city, rural, or suburb). The visualization uses React for state management and D3 v5’s `scaleBand` and `scaleLinear` for axes, with data from a 2016 crime dataset loaded via `d3.csv`. The dropdown is implemented with `react-dropdown`, and selecting an option updates the chart, though the filtering logic is incomplete. SVG rendering with tick marks and formatting via `d3.format` displays percentages on the y-axis.

Wwenleicao

78% match

Loading thumbnail…

Massachussetts Top 10 Crime City filter works

This interactive bar chart displays the crime rates of Massachusetts cities, filterable by community type (All, City, Rural, Suburb) via a dropdown menu. Built with React and D3 v5, it renders an SVG visualization where each bar shows the crime rate as a percentage. The chart loads data from a CSV file containing 2016 crime statistics, using D3's `csv`, `scaleBand`, `scaleLinear`, and `format` functions for data processing and axis scaling. The top 10 cities are displayed by default, with tooltips revealing precise percentage values.

Wwenleicao

77% match

Loading thumbnail…

Massachussetts Top 10 Crime City filter works before adjust axis

This interactive visualization displays the top 10 cities in Massachusetts by crime rate, filtered by community type (city, rural, or suburb) through a dropdown menu. Built with React and D3 v5, it renders an SVG bar chart using `scaleBand` and `scaleLinear` to map city names and crime ratios. The bars show tooltips with formatted percentage values, and the y-axis uses `d3.format` for readability. Data comes from a 2016 Massachusetts crime dataset loaded via `d3.csv`. The author notes unresolved issues with axis alignment and label rotation.

Wwenleicao

77% match

Loading thumbnail…

Polished Massachussetts Top 10 Crime City add filter

A dropdown menu filters a bar chart of the top 10 Massachusetts cities by crime rate, showing the percentage for either all communities or only city, rural, or suburb types. The SVG chart uses d3.scaleBand and d3.scaleLinear to position bars, with d3.axis formatting for tick labels. Data comes from a CSV file loaded via d3.csv, and the interface is built with React components and ReactDropdown.

Wwenleicao

77% match

Loading thumbnail…

Massachussetts Top 10 Crime City filter works

This interactive bar chart shows the top 10 cities in Massachusetts by crime rate, with a dropdown menu filtering results by community type (All, City, Rural, or Suburb). The visualization uses React to manage state and render the dropdown, while d3.scaleBand and d3.scaleLinear handle the axes and bar positioning. Crime data comes from a CSV file loaded via d3.csv, with each bar displaying a tooltip showing the exact crime ratio. The y-axis labels are formatted as percentages using d3.format, and the SVG rendering includes gridlines and axis ticks styled with CSS classes.

Wwenleicao

76% match

Loading thumbnail…

Massachussetts Top 10 Crime City add filter

A bar chart displays the top 10 Massachusetts cities by crime rate, filtered by community type (all, city, rural, suburb). The visualization uses React with D3 v5's `scaleLinear`, `scaleBand`, and `format` to render SVG rectangles. Crime ratio data comes from a CSV of the 2016 Massachusetts crime dataset. A Dropdown component controls the community filter, re-filtering the data and updating the chart dynamically.

Wwenleicao

76% match