mandu427

@mandu427·4 public vizzes

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.

Dec 18, 2020

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.

Dec 18, 2020

Loading thumbnail…

Untitled

This example shows how bar charts can compare values for two groups, Female and Male, across three different time periods (2008, 2012, 2016) using interactive buttons. The chart displays the data as blue bars, with the y-axis scaled to the maximum value of the current dataset. The code uses d3.v6 to create an SVG, with `d3.scaleBand` for the x-axis, `d3.scaleLinear` for the y-axis, and transitions of 1000 milliseconds to animate updates between datasets. The `update` function binds data to rectangles, merges enter and update selections, and removes exiting bars.

Dec 18, 2020

Loading thumbnail…

Untitled

Three interactive bar charts show employment rates for female and male groups across three Olympic years. Buttons for 2008, 2012, and 2016 trigger updates that transition the bars with a 1000-millisecond animation using D3 v6’s `transition()` method. The SVG chart uses `d3.scaleBand` for the categorical x-axis, `d3.scaleLinear` for the y-axis, and a data join pattern with `enter`, `merge`, and `exit` selections to handle changes. The page loads D3 from a CDN inside a React wrapper.

Dec 18, 2020