Untitled

100%

✓ Published0🌍 Public

Last edited Mar 24, 2020

Created on Feb 28, 2020

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.

AI-generated description

A bare minimum HTML page.

Similar vizzes

Loading thumbnail…

ColorIsFake Midterm

This visualization compares average emergency response times across San Francisco neighborhoods, separating alarm and fire incidents by color-coded bundles. Animated stacked bars update when a user selects a year from the dropdown or toggles sorting. Built with D3 v5, it uses `d3.nest()` and `d3.layout.stack()` to aggregate CSV data, `d3.scaleOrdinal` for the categorical color mapping, and SVG transitions for the year-driven updates.

Pphamiter253

85% 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

80% match

Loading thumbnail…

Untitled

This example shows stacked bar charts of population counts by age group and state for selected years and columns, with values labeled above each bar. The chart updates with smooth transitions when the user changes the year, column, or toggles sorting. Built with React and D3 v5, it uses d3.csv to load data, d3.scaleBand, d3.scaleLinear, d3.stack, and transition.duration to animate bar heights and positions. The SVG renders all bars and axes dynamically.

AAbhishek Kumar

79% match

Loading thumbnail…

modified for voronoi

This example visualizes SFPD incidents by neighborhood in 2016, combining both a bar chart of average incidents and a line chart showing incident trends over time. Each neighborhood’s bar and corresponding line are linked, with mouseover highlighting the active district and click filtering to show only that district’s line. The code uses d3.nest() to aggregate data by district, d3.scaleBand for the bars, d3.scaleTime for the date axis, and d3 transitions for interactive animations. The data is loaded from the SF Open Data JSON API, and the visualization renders with SVG.

GGoomble

79% match

Loading thumbnail…

Untitled

This interactive stacked bar chart displays survey data across U.S. states for two years, showing proportions within three rating categories. A dropdown menu lets viewers switch between 2017 and 2018, triggering animated transitions of the bars, axes, and total-value labels. Built with D3 v5, the visualization uses `d3.stack()` to generate the layered series, `d3.scaleBand()` and `d3.scaleLinear()` for positioning, and SVG transitions with `transition.duration()` for smooth updates.

Pphamiter253

79% match

Loading thumbnail…

Untitled

This interactive stacked bar chart displays the sales distribution across cities for a selected customer segment, using data from a CSV file of store transactions. A dropdown menu filters by segment, while a checkbox toggles city sorting by total sales value. Built with D3 v5 and React, the visualization uses `d3.stack`, `d3.scaleBand`, and `d3.scaleLinear` to render the bars, with smooth transitions animated via `transition().duration()`. SVG elements and axes update dynamically in response to user selections.

SSarahKiyani

78% match

Loading thumbnail…

Untitled

A dropdown menu selects a region, and a stacked bar chart animates to show the distribution of Furniture, Office Supplies, and Technology sales across cities. Each bar is segmented by category, with city names on the x-axis and total sales scaled on the y-axis. A checkbox toggles the sorting of bars by city name or by the derived segment total. The chart uses d3.csv to load the Superstore data, d3.stack for layering, d3.scaleBand and d3.scaleLinear for scales, and d3.transition to animate updates. SVG rendering with React centers the visualization.

SSarahKiyani

78% match

Loading thumbnail…

2018: Reactietijden horizontal bars

This visualization shows the 2018 response times for different priority categories using animated horizontal bars. The data is loaded from a local JSON file and rendered using D3.js v3 with SVG. Each bar is a bullet chart representing response times for critical, high, medium, low, and total categories. The code uses D3’s bullet chart plugin, which includes ranges, markers, and measures, and features a transition effect when the "Update" button is clicked, randomizing the displayed values with `d3.transition` and a linear scale.

MMisunoKitara

78% match