Skip to main content
SimilarExport ZIP
100%

feat1_month_dependent_barchart

✓ Published2🌍 Public
AAnimesh Nautiyal
Last edited Feb 10, 2020
Created on Feb 10, 2020

A bar chart compares the percentage of children with height or weight deficiencies across eight blocks in Palghar district, India, for three months (August, September, October). Users switch between metrics and months via dropdowns, triggering animated transitions in bar heights, fill colors, tooltips, and axis scales. The React app renders SVG rects and text, using D3 scales, transitions, and a tooltip div, with data from a CSV file.

AI-generated description

A bare minimum HTML page.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

feat1_month_dependent_barchart

A bar chart compares the percentage of children with height or weight deficiencies across eight blocks in Palghar district, India, for three months (August, September, October). Users switch between metrics and months via dropdowns, triggering animated transitions in bar heights, fill colors, tooltips, and axis scales. The React app renders SVG rects and text, using D3 scales, transitions, and a tooltip div, with data from a CSV file.

AAnimesh Nautiyal
100% match
Loading thumbnail…

feat1_with_month

This interactive bar chart visualizes monthly child nutrition metrics—height and weight percentages—across eight administrative blocks in Palghar, India. Users select a metric (Height% or Weight%) and a month (August, September, or October) via dropdown menus. The chart animates transitions between selections using D3's `transition().duration()`, updating bar heights, colors, and the y-axis scale. A tooltip displays exact values on hover. The visualization uses `d3.csv` for data loading, `d3.scaleBand` and `d3.scaleLinear` for scales, `d3.interpolateRdYlGn` for color encoding, and renders SVG rects with text labels.

AAsmabee Khan
91% match
Loading thumbnail…

feat1_dropdown_dependent_barchart

This interactive bar chart displays the percentage of height and weight for different blocks in the Palghar region, sourced from `data.csv`. Users switch between the two metrics via a dropdown menu, which triggers a smooth 1-second animation. Built with React and using D3.js, SVG rectangles and text labels are rendered and transitioned. The chart uses `d3.scaleLinear` for the y-axis, `d3.scaleBand` for the x-axis, and applies a sequential color scale (`d3.interpolateRdYlGn`) to encode values. A tooltip appears on hover, and the code uses `d3.csv` for data loading.

AAnimesh Nautiyal
87% match
Loading thumbnail…

barchart-sorted

This interactive bar chart visualizes the height and weight percentages of children across eight blocks in Palghar district, India, with monthly data for August, September, and October. Users select a month and a metric—height, weight, or combined height and weight—via dropdown menus. The bars animate through a transition over one second, re-sorting and rescaling to reflect the chosen metric, with a color scale interpolating red-yellow-green. The visualization uses D3.js v5, including `d3.scaleLinear`, `d3.scaleBand`, and `d3.scaleSequential`, rendering SVG rectangles with tooltips.

AAbirKhan96
85% match
Loading thumbnail…

Fork of barchart-sorted

This interactive bar chart compares child nutrition indicators across eight blocks in Palghar district, showing Height%, Weight%, and combined Height+Weight% values. Users select a month and metric from dropdown menus, triggering animated transitions that re-sort and re-color the bars using a sequential color scale. The visualization uses D3.js with `scaleLinear`, `scaleBand`, and `transition.attr` for smooth updates, while a tooltip displays exact values on hover. Data comes from the provided CSV files, with SVG rendering and Bootstrap for layout.

DDhiva21
84% match
Loading thumbnail…

feat1_dropdown_dependent_barchart

This example presents a dropdown-driven bar chart comparing height and weight percentages across geographic blocks. Users select a metric from the dropdown, triggering a smooth 1-second transition that updates bar heights, fill colors, and the y-axis scale. The visualization uses D3 v5 with d3.scaleBand and d3.scaleLinear for positioning, a sequential color scale for encoding values, and transition methods for animated updates. Data comes from a local CSV file, rendered as SVG rectangles with tooltips that display block names and values on hover.

AAnimesh Nautiyal
83% match
Loading thumbnail…

feat1_dropdown

A bar chart displays the percentage of height and weight measurements for eight blocks in Palghar, India, with bars colored on a red-yellow-green scale. A dropdown menu lets users switch between the two measurement types, though the change handler currently only logs the selection. The visualization uses D3 v5 with scaleSequential and interpolateRdYlGn for color encoding, scaleBand for x-axis positioning, and scaleLinear for the y-axis. Data is loaded from a CSV file, and results are rendered as SVG.

SSubodh Singh
83% match
Loading thumbnail…

barchart-monthwise

This interactive bar chart displays malnutrition metrics across eight administrative blocks, letting users switch between height percentage, weight percentage, or their combined value, and filter by month (August, September, October). The visualization uses D3 v5 with SVG and animated transitions, employing `d3.scaleBand` for the categorical x-axis and `d3.scaleLinear` for the y-axis. Bars are colored with a sequential `d3.scaleSequential` interpolating through `d3.interpolateRdYlGn`. Tooltips appear on hover, and the data comes from external CSV files.

AAnimesh Nautiyal
83% match