new-interface

100%

✓ Published2🌍 Public

Last edited Nov 13, 2021

Created on Mar 19, 2020

Forked from grids 2

A dashboard displays outcome indicators for child malnutrition, allowing users to filter data by month and category from dropdown menus. The interface includes a slider for value ranges, a location label, and a data table. D3 v5 selects the SVG element and dynamically sets its dimensions to the full browser viewport. The visualization uses Bootstrap for layout and dropdown styling, with a clean, structured panel design for presenting health metrics.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

(adding beat level)

This visualization maps malnutrition indicators across administrative regions, allowing users to drill down from block to project to beat levels. A choropleth uses a three-color scale (green, yellow, red) based on severity percentages, with labels showing location names and values. The interface includes sliders to filter value ranges, dropdowns for month and category selection, and mouseover tooltips. Built with D3 v5, it uses `d3.geoPath` with a Mercator projection, `d3.zoom` for panning, and a D3 simple slider, while data is loaded from CSV files and rendered as SVG with transitions.

AAnimesh Nautiyal

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

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

72% match

Loading thumbnail…

(adding month)level 1 with all features

This visualization presents a choropleth map of Palghar district, India, showing health indicators for stunting, wasting, and underweight children across administrative boundaries. Users select a month and health category from dropdown menus, and a slider adjusts the color-scale thresholds. Built with D3 v5 and rendered as SVG with animations, the map uses `d3.geoMercator` and `d3.geoPath` to project GeoJSON data, with hover tooltips and zoom-to-bounding-box functionality for drill-down exploration.

AAnimesh Nautiyal

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

71% match

Loading thumbnail…

async data-read

This visualization shows child malnutrition indicators across administrative blocks in Palghar, India, with monthly data for August, September, and October. It uses D3 v5 to merge CSV data with GeoJSON boundaries for both block-level and project-level regions. The SVG map renders geographic features through d3.geoPath, while asynchronous data loading via d3.json and d3.csv enables the combination of spatial and tabular datasets.

AAnimesh Nautiyal

71% match

Loading thumbnail…

grids

This visualization displays a grid-based layout with multiple colored panels, including a header bar, a slider-controlled range display, and a large SVG canvas. The interface uses Bootstrap’s grid system for responsive column and row structuring, while d3.v5 handles SVG sizing and element selection. A slider appears to adjust a numeric value shown in the adjacent label, with the main chart area left empty. The page uses a fixed full-viewport layout with distinct color-coded sections for headers, controls, and content areas.

AAnimesh Nautiyal

70% match

Loading thumbnail…

(info)Level 1 with all features

An interactive choropleth map allows exploration of child malnutrition statistics across administrative levels in Palghar, India. Users select a month and a health category (e.g., severely stunted) from dropdowns to update the map’s color encoding via a color scale. A draggable range slider refines the classification thresholds, while hovering over a polygon reveals a tooltip with the block name and percentage. The map, rendered with SVG paths using `d3.geoMercator` and `d3.geoPath` from topoJSON data, includes an animated transition when the slider changes, with zoom support via `d3.zoom`.

AAnimesh Nautiyal

70% match