Skip to main content
SimilarExport ZIP
100%

Interactive Bar Chart

✓ Published0🌍 Public
WWenqi Sun
Last edited Dec 15, 2022
Created on Dec 15, 2022
Forked from HTML Starter

This interactive bar chart visualizes the percentage of weapon categories used in crimes, filtered by sex through radio buttons. Users can toggle between male and female data, with bars animating their widths via D3 transitions. The chart employs D3 v7 scales, axes, and SVG rendering, featuring a hover tooltip that displays additional details. Data originates from the Los Angeles Crime Data dataset (2020 to present), loaded asynchronously via d3.json.

AI-generated description

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

See also React Starter.

MIT Licensed

Similar vizzes

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
77% 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
75% 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
75% match
Loading thumbnail…

A6 Diverging Bar Chart

This diverging bar chart visualizes police shootings by race and gender, with male counts extending left from a central vertical axis and female counts extending right. The chart uses a red-blue diverging color scale, with color intensity corresponding to magnitude. Built with D3 v7, the visualization aggregates CSV data, filters to only male and female records, and uses separate linear scales for each gender to position the bars from the center. Race categories are placed on a band scale along the y-axis, while the diverging color interpolation and axes are constructed using D3’s scale utilities.

Nnathanjmuljadi@gmail.com
75% match
Loading thumbnail…

EDAV7_1_axes

Animated bar chart compares reported crimes against women in India across four categories—female/no, female/yes, male/no, male/yes—over multiple years. Six sequential stages animate bar heights and colors, using d3.axisBottom for the x-axis and d3.scaleBand and d3.scaleLinear to map categories and values. The transition API with specified durations and delays animates rect attribute changes, while the SVG background highlights the plot area. Data comes from a GitHub-hosted CSV file.

HHelen-Luwei-Zhang
75% match
Loading thumbnail…

EDAV_interactive

Four animated bar charts display the reported rate of crimes against women in India across successive years, with categories for female/male and yes/no responses to a survey question. The visualization sequentially transitions between five years of data using D3 v7 transitions that update bar heights, positions, and fill colors. Each staged transition delays two seconds before updating the y-scale domain and rendering new values. The charts render as SVG rectangles with axes, drawing from a CSV dataset about crimes against Indian women.

HHelen-Luwei-Zhang
74% match
Loading thumbnail…

Untitled

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.

RRona Xu
74% match
Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot displays U.S. Metro Areas violent crime data, letting users select which attribute to plot on each axis via dropdown menus. The visualization uses React for component-based rendering and d3.scaleLinear for axis scales, with SVG circles representing data points. Users can compare metrics including violent crime, homicides, robberies, and total population across metro areas. The chart includes axis labels, formatted tick values using d3.format, and a color legend with hover interactions that fade non-hovered categories. Data is loaded from a CSV file using d3.csv.

Yyyaaa1
74% match