Untitled

100%

✓ Published1🌍 Public

Last edited Dec 12, 2021

Created on Dec 10, 2021

This interactive bar chart displays bias-motivated incidents in NYC for 2020 and 2021, with buttons toggling between the two years. The visualization uses D3.js v7 within an HTML page, rendering as an SVG. It fetches CSV data from a GitHub repository and animates bar height, position, and axis transitions over one-second durations using D3’s scaleBand, scaleLinear, and transition methods. The chart highlights changes in incident counts across bias categories.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

Similar vizzes

Loading thumbnail…

NYC Hate Crime Analysis

This interactive bar chart visualizes NYC hate crime counts by bias type, with buttons to switch between 2020 and 2021 data. The visualization uses D3.js v6 with scalable vector graphics (SVG) and animated transitions to update bar heights and axes smoothly. Data is loaded asynchronously from a CSV file hosted on GitHub, and the chart maps bias categories to the x-axis using `d3.scaleBand` while the y-axis uses `d3.scaleLinear` to represent counts. A custom `update()` function handles data parsing and re-rendering.

RRona Xu

88% match

Loading thumbnail…

Untitled

Interactive buttons update a bar chart showing the percentage share of a sample that overreports voter turnout, with separate bars for female and male groups across the 2008, 2012, and 2016 datasets. The visualization uses D3.js v6 with an SVG rendering approach, where clicking a button triggers a transition that updates the x and y axes and smoothly animates the bar heights over one second. The code defines three static data arrays and employs d3.scaleBand for the categorical axis, d3.scaleLinear for the value axis, and transition methods to animate the chart between states.

Mmandu427

78% match

Loading thumbnail…

Untitled

This interactive stacked bar chart visualizes fire and alarm response times across San Francisco neighborhoods from 2012 to 2019. A dropdown menu switches between years, and a checkbox toggles sorting by total average response time or alphabetical order. Built with D3 v5 in a React-free HTML page, it uses `d3.csv`, `d3.stack`, `scaleBand`, `scaleLinear`, and `scaleOrdinal` to render SVG rectangles and total-value labels. Axes transition smoothly via d3 transitions, while the data comes from a CSV file with `Group`, `Neighborhoods`, `Year`, and `Avg` columns.

Pphamiter253

78% match

Loading thumbnail…

Untitled

This interactive bar chart displays the percentage of survey respondents by racial group who overreport voter turnout in three U.S. election years (2008, 2012, 2016). Buttons trigger updates between datasets, animating bar heights via D3 transitions. The visualization uses D3 v6 with `d3.scaleBand` for the categorical x-axis, `d3.scaleLinear` for the y-axis, and d3-axis to render both axes. Each bar’s y-position and height are recalculated from the value property, with a 1000-millisecond transition applied to all entering, updating, and exiting rectangles.

Mmandu427

77% match

Loading thumbnail…

Untitled

A bar chart displays monthly incident counts, with values ordered from January to December despite the CSV’s shuffled rows. The visualization uses a linear x-scale and band y-scale, with bars styled in steelblue. D3’s `scaleLinear`, `scaleBand`, `axisBottom`, and `axisLeft` handle scaling and axes, while `axisBottom`’s tick format converts numbers to “Mila” units. The React framework is not used; instead, D3 selects the SVG directly. Data comes from `data.csv`, and a title and axis labels are added via SVG groups and text elements.

PPaolaAntonicoli

77% match

Loading thumbnail…

Untitled

This interactive stacked bar chart displays state-level data across two years. A dropdown menu selects the year, and the visualization animates the transition between the 2017 and 2018 views. The chart uses a categorical color scale to distinguish three data ranges. The code leverages D3 v5 APIs including `d3.csv`, `d3.scaleBand`, `d3.scaleLinear`, and `d3.stack`. Built with SVG elements, the bars and their total value labels are rendered directly, with a 750ms transition on year change.

JJens Grochtdreis

77% match

Loading thumbnail…

Untitled

This interactive bar chart displays road accident statistics across police stations, with a dropdown menu to switch between different data columns such as fatalities, injury severity, collision types, and day of the week. Built with D3 v3 and React, the visualization uses `d3.scale.ordinal` for the x-axis, `d3.scale.linear` for the y-axis, and SVG rectangles that smoothly animate via `transition().ease()` when the selected metric changes. Data is loaded from a CSV file, and hover tooltips reveal exact values per station.

Aachintyatripathi

77% match

Loading thumbnail…

Fork of Fork of Fork of Fork of Fork of Final Project

This visualization presents an interactive bar chart that displays patterns in crime data across New York State, categorized by offense type and year from 2012 to 2021. A single radio button allows the viewer to trigger a view of the SO2 data. The chart uses an SVG container with a light blue background, rendering static bars whose values are updated when the button is clicked. The implementation relies on D3.js v6 for DOM selection, scaling, and event handling, with the dataset hardcoded as a JavaScript array within the script.

YYi Yang

76% match