Skip to main content
SimilarExport ZIP
100%

Fork of barchart-sorted

✓ Published1🌍 Public
Bbepnye@gmail.com
Last edited Nov 21, 2024
Created on Nov 21, 2024
Forked from barchart-sorted

This fork of the bar chart shows child undernutrition percentages across eight blocks in Palghar, India, for three months. Interactive dropdowns let viewers switch between August, September, and October, and toggle among height, weight, or combined height-plus-weight measurements. The sorted bar layout updates smoothly with d3 transitions, reordering bars and rescaling axes. Bars are color-coded with a sequential d3-scale-chromatic interpolator (RdYlGn), and a d3 tooltip displays block values. Data comes from the provided CSV files.

AI-generated description

barchart sorted

MIT Licensed

Similar vizzes

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
93% 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
87% 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
84% match
Loading thumbnail…

barchart-sorted

This interactive bar chart displays percentages of height, weight, and combined height+weight across eight administrative blocks, with a dropdown to switch between months (August, September, October) and a second dropdown to select which metric to visualize. The bars are sorted descending for the selected metric, and hovering reveals a tooltip with the exact value. Built with D3.js (v5) and SVG, the visualization uses `d3.scaleLinear` for the y-axis, `d3.scaleBand` for the x-axis, and `d3.interpolateRdYlGn` for color encoding. Transitions animate bar repositioning, resizing, and axis updates when the metric changes. Data is loaded from CSV files (`data.csv` and `data_month.csv`) and parsed with type conversion.

AAnimesh Nautiyal
82% match
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
82% match
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
82% 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
81% match
Loading thumbnail…

barchart-sorted

This example shows an interactive, animated bar chart comparing height and weight percentages across eight administrative blocks. Users can switch between viewing height data, weight data, or their combined sum, as well as select among three months (August, September, October) via dropdown menus. The bars are sorted by the selected metric and colored using a sequential color scale with an RdYlGn interpolator. Built with D3 v5, the visualization uses `d3.scaleLinear`, `d3.scaleBand`, and `d3.axisLeft` for scales and axes, with transitions animating bar positions, heights, text labels, and the y-axis. Hovering over a bar reveals a tooltip with the block name and value, while the underlying SVG renders the chart and its table-like layout.

AAbirKhan96
80% match