Bar chart with D3.js

100%

Bar chart with D3.js

✓ Published1🌍 Public

Last edited Apr 3, 2023

Created on Apr 3, 2023

Forked from Untitled

A bar chart displays total victims of mass shootings across ten US states, with California, Texas, and Florida leading. Hovering over a bar highlights it, dims value labels, and draws a dashed threshold line showing the divergence of other states from the selected one. The visualization uses D3 v5 with SVG rendering, scales such as `d3.scaleBand` and `d3.scaleLinear`, and axis generators for gridlines. Data comes from an embedded sample array, while CSS styles the container, bars, and text.

AI-generated description

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

Similar vizzes

Loading thumbnail…

ICE 6 - Rendering Marks and Channels with React & D3

This example visualizes the total victims of mass shootings in the top 30 U.S. states using a horizontal bar chart. Built with React and D3 v5, the SVG rendering maps each state to a band scale on the y-axis and a linear scale on the x-axis, encoding victim counts as bar widths. The code loads CSV data via `d3.csv`, applies `scaleBand` and `scaleLinear`, and manually renders axes and gridlines using `d3.axisBottom` and `d3.axisLeft` alternatives. State names are labeled alongside each bar, with tick marks drawn as blue lines.

Ssenthilrajendran1

83% match

Loading thumbnail…

3D Bar Chart

This example displays a 3D bar chart using Three.js to visualize mass shooting data from a CSV file. It shows the total fatalities and injured victims for each state as red and green bars that are positioned along a three-dimensional grid. The chart builds its scene using Three.js primitives like `THREE.BoxGeometry` and `THREE.MeshBasicMaterial`, while D3.js handles CSV loading and scaling via `d3.csv`, `d3.scaleBand`, and `d3.scaleLinear`. The scene renders with a perspective camera and an animated `requestAnimationFrame` loop.

Ssenthilrajendran1

81% match

Loading thumbnail…

ICE-7-Pie Chart

This interactive pie chart summarizes the total number of mass shooting victims across the top 20 U.S. states. It uses D3 v5’s `pie`, `arc`, and `scaleOrdinal`/`schemeCategory10` APIs to generate and color the SVG segments, with a color-coded legend listing each state and its victim count. The data is loaded from a remote CSV and sorted by `Total_Victims` before slicing. Hovering over a segment highlights it and logs the value to the console.

Ssenthilrajendran1

77% match

Loading thumbnail…

Making Sense of the Senseless

This visualization, titled “Making Sense of the Senseless,” displays U.S. mass shooting incidents as a bar chart of total victims per year, with bar colors encoding the shooter’s age. It uses the vega-lite-api to construct the chart, with d3.csv loading the dataset from a GitHub gist. The chart is rendered as an SVG via vega and vega-lite, with custom configuration for axis styles and tooltips enabled through vega-tooltip. The visualization emphasizes readability with a dark color scheme and large fonts.

Hhagerka

77% match

Loading thumbnail…

Fatal Police Shootings Chart Working Copy

This interactive bar chart visualizes fatal police shootings in the United States, allowing users to explore how incidents distribute across categories such as race, gender, and armed status. The chart dynamically aggregates counts from the Washington Post dataset using d3.nest() and presents results through React components with SVG rendering. Users select a variable from a dropdown menu, triggering the x-axis to update via React's state management. The implementation uses d3.scaleBand and d3.scaleLinear for axes, with native SVG `<title>` tooltips embedded in each bar.

MMartin Blatz

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

74% match

Loading thumbnail…

Fatal Police Shootings Charting

An interactive React dashboard charts fatal police shootings in the United States, using a dropdown menu to dynamically regroup counts by attributes like race, gender, or armed status. The bar chart updates through d3.nest() aggregation, with scales from d3.scaleBand and d3.scaleLinear rendering SVG rects. Data comes from the Washington Post’s Fatal Police Shootings Database, parsed via d3.csv. Tooltips display exact counts on hover.

MMartin Blatz

73% match

Loading thumbnail…

Bar chart with D3.js

This interactive bar chart displays crime statistics across Costa Rican cantons, breaking down reported incidents by victim type and offense category. Built with D3.js v5, the visualization uses `d3.scaleBand` and `d3.scaleLinear` to position SVG rectangles, with data loaded from a CSV file via `d3.csv`. Hovering over a bar triggers `mouseenter` and `mouseleave` events that fade other bars, draw a dashed threshold line via `chart.append('line')`, and temporarily display percentage divergence labels for comparison.

Eest85

73% match