Height and Weight Measurement Efficiency for Block-wise Data

100%

Height and Weight Measurement Efficiency for Block-wise Data

✓ Published0🌍 Public

Last edited Feb 22, 2020

Created on Feb 22, 2020

This example visualizes the efficiency of height and weight measurements across different administrative blocks and months, using a data table with interactive sorting capabilities. The visualization displays raw counts and calculated percentages for children measured by weight, height, or both, allowing comparison across regions like Dahanu and Palghar. The code uses React for the table structure, Bootstrap for styling, and d3.js for data manipulation and SVG rendering. D3’s scale functions and interpolation libraries are applied to handle dynamic data representation, while the table supports sorting via column headers.

AI-generated description

A bare minimum HTML page.

Similar vizzes

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

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

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

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

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

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

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

73% match

Loading thumbnail…

feat1_dropdown_dependent_barchart

This visualization displays a bar chart of block-level height and weight percentages, with a dropdown menu to switch between the two metrics. The chart sorts data and animates bar transitions, updating the y-axis and value labels accordingly. It uses D3.js for SVG rendering and animations, with a color scale based on the selected metric. The chart also includes interactive tooltips showing block names and values on hover. Data is loaded from a CSV file containing eight regional blocks.

PpramodK

73% match