Animesh Nautiyal

sanky

Value of PI

FlexBox Layout

This example shows a flexbox-based layout for a step-by-step visualization interface, with a left panel containing labeled steps (Step1 through Done!) and a right panel for content. The code uses plain HTML and CSS, relying on the `display: flex` property, `flex-grow`, and `flex-direction` to arrange the title, steps, and map area. Rendered as a React component, it demonstrates a responsive, grid-like structure without any data binding or external libraries, serving as a minimal template for building a visual workflow.

static map range slider

A static map of Palghar district blocks is colored by a percentage value from a CSV dataset, with each block labeled and hoverable to reveal tooltip details. A range slider controls the color thresholds, recoloring the map via transitions. The visualization uses D3 v5 with `geoMercator` and `geoPath` for the GeoJSON projection, `d3.slider` for the range input, and SVG rendering for both the map and slider elements.

basic map

This choropleth map shows block-level data for the Palghar district, with each polygon colored green, yellow, or red based on the value of the `c1` attribute from a CSV file. Hovering over a region triggers a tooltip displaying the block name and its stunted child percentage. Built with D3 v5, the visualization uses `d3.geoMercator` and `d3.geoPath` to project GeoJSON shapes and renders SVG paths with a zoom transform. Data is joined by matching the `Block` names between the CSV and GeoJSON properties.

react first level drilldown map using zoom

This example shows a first-level drilldown map of India that zooms into the selected state or district. Clicking a polygon triggers a smooth zoom animation that fits the clicked region’s bounding box, computed with `d3.geoPath().bounds`, before updating the rendered features. The map uses React state to toggle between state-level and district-level TopoJSON data, loaded via `d3.json`, while `d3.zoom` handles pan and scale transforms on the SVG. The `geoMercator` projection and `geoPath` render the geographic boundaries in a teal fill.

Waste-Aggregation by gates

This interactive map visualizes waste aggregation across buildings and gates in a ward of Mumbai. It uses Leaflet with tile layers from OpenStreetMap, and fetches GeoJSON data for buildings, gates, and their mappings via D3’s `d3.json`. Building circles show population and waste metrics in popups, while clicking a gate re-renders the building layer with a custom styling function that highlights buildings linked to that gate in black, using data from a static gate-to-building JSON file. The map initializes at a zoom level of 16 centered on the ward.

object loop

This example converts GeoJSON data containing town health center information into CSV files, one per feature collection in the dataset. The code iterates through each array in the `data` variable, extracts the properties from each feature, and uses `jsonToCSV` to create a comma-separated representation with headers. It then triggers a browser download via the `downloadCSV` function, setting the `href` and `download` attributes on the hidden anchor element. The process relies on JavaScript’s `Object.keys`, `JSON.stringify`, and array mapping, while D3 is only imported but not actively used in the visualization logic.

dontmove

This visualization generates a full-screen SVG animation that responds to the prominent title "dontmove." The code uses the D3 v7 `select` API to append an SVG canvas sized to the viewport, and animates a dynamically built queue of elements. The dataset is a collection of embedded base64-encoded images and external image URLs, which are not actually rendered or manipulated in the visible code. The page includes a YouTube embed link, while the main script loads the D3 library and sets up the basic SVG container without displaying explicit data-driven shapes or force simulations.

Fork of Bob Ross Painting

This fork of a Bob Ross–inspired painting renders an animated sunset over a landscape using only SVG primitives. A full-canvas rectangle fills the scene with a sky gradient, while a sun circle gradually rises and changes color. The visualization relies on native SVG `<linearGradient>` definitions and SMIL `<animate>` elements to shift gradient stops and the circle’s vertical position over time. The code builds directly on an earlier SVG fundamentals exercise and sandbox, with no external libraries involved.

test geomercator

This example displays a choropleth map of Mumbai's ward boundaries using a Mercator projection, with ward numbers labeled at each polygon's centroid. The map uses `d3.geoMercator` and `d3.geoPath` to render geographic data loaded from a local GeoJSON file, styling wards in grey or green depending on their `prabhag_no` property. Clicking a highlighted ward opens an external link, demonstrating basic interactivity with SVG event handlers. The visualization applies a custom scale and centering to focus on the city region.

niLayout

This example presents a dashboard-style web page with a full-screen layout that includes a header, dropdown menus, and a central map area. The page uses Bootstrap’s grid system to organize these sections into a responsive, fixed layout. The visualization is initialized by setting an SVG element’s width and height to match the browser window’s dimensions using D3.js v5. The code’s structure suggests interactive controls for selecting data, though the map rendering and interaction logic are not implemented in the visible source.

new-interface

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.

text on new line

This example demonstrates how to break a single string of text into multiple lines within an SVG using D3 version 6. It shows a fixed message containing newline markers (written as “/n”) that are split into separate `<tspan>` elements for rendering. The code uses `d3.select` to target the SVG container, binds the data array, and appends a `<text>` element with each line positioned via `dy` offsets. The rendering approach relies on SVG text and tspan elements, with styling applied through D3’s `.style` method.

Horizontal grouped bar chart

This horizontal grouped bar chart displays the percentage prevalence of a health-related indicator across demographic subgroups, including gender, education level, wealth quintile, and urban/rural residence. The visualization uses a single series of horizontal bars, with subgroup names on the y-axis and percentage values on the x-axis. Built with React and D3 v6, the chart leverages `scaleLinear` and `scaleBand` to map data values and categories, renders bars and value labels as SVG elements, and includes a custom tooltip that appears on mouseover. Bars are styled with varying opacity to distinguish key subgroups from secondary categories.

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.

Fork of Making a Bar Chart

This bar chart displays the populations of the top 10 most populous countries, based on 2018 United Nations estimates. It shows how a D3 v5 bar chart can be customized, with axes and tick labels formatted using `d3.format`. The visualization uses `d3.scaleLinear` and `d3.scaleBand` to map population values and country names, while `d3.axisBottom` and `d3.axisLeft` render the axes. The data is loaded with `d3.csv` and rendered as SVG rectangles with a steelblue fill.

Fork of Grouped Bar Chart

This example shows the 10 most populous countries grouped by continent using a horizontal bar chart for each group. Each continent is rendered as a separate chart section with its own y-axis, while a shared linear x-axis encodes population values. The visualization is built with React components and D3 v6 scales, including `scaleBand` for grouping and `scaleLinear` for population. Data is loaded asynchronously from a CSV via `d3.csv`, and bars are rendered as SVG rectangles with tooltips showing formatted population values.

Map using Canvas

This example displays an Indian state-level choropleth map, colored with a rainbow sequential scale based on the `POINTS_` property from NFHS-4 survey data. It renders geographic boundaries onto a Canvas element using D3 v4’s `d3.geoPath` with a Mercator projection, while `d3.scaleSequential` maps data values to colors. Each feature is individually stroked in black and filled via Canvas 2D context operations, with data loaded from a remote GeoJSON file.

map with legend

This example displays a choropleth map of Indian states, colored according to the area of each state using a sequential rainbow color scale. The map is rendered with React and D3 v6, using `d3.geoMercator` with `fitSize` for projection and `d3.geoPath` to draw SVG paths. State boundaries come from a TopoJSON file loaded via `d3.json`, and the color mapping uses `d3.scaleSequential` with `d3.interpolateRainbow`. The accompanying legend is prepared with the `d3-legend` library, though the legend rendering is commented out.

Horizontal category Barchart

This horizontal category barchart displays percentages across demographic subgroups, with bars colored in translucent green and interactive tooltips revealing subgroup details on hover. The visualization uses React for component state management and D3.js v6’s `scaleLinear`, `axisLeft`, and `axisBottom` to map data values to bar lengths. Data comes from a local JSON file containing subgroup categories like Sex, Location, Caste, and Wealth Index. Tooltips are implemented as HTML divs positioned via D3’s selection interface. The chart renders as an SVG with a light gray axis grid, and bars animate in response to state changes from React’s `useEffect` hooks.

Overlapped Barchart9

This visualization overlays a semi-transparent bar chart and a line graph to show changes in a percentage metric across overlapping time periods, with each bar labeled and tooltips revealing start and end dates. The React app loads JSON data containing survey periods (e.g., NFHS3, NFHS5) and uses d3.scaleTime, d3.scaleLinear, and d3.line to draw SVG elements. Animated hover interactions are handled via React’s onMouseOver and onMouseOut, while d3’s selection API manages the tooltip’s opacity transitions.

xMR char calc v3 -- changing initial condition for mr avg

This visualization demonstrates a statistical process control chart that calculates upper and lower control limits for a time series dataset using an XMR (moving range) method with a dynamic initial condition. The code, written in D3 v6, loads data from a CSV file and computes moving ranges, averages, and breakpoints to detect shifts in the process. It uses D3’s `csv`, `mean`, `sum`, and `select` APIs, while the custom functions `calculateMR`, `calculateMinimum`, and `calculateBreakPoint` implement the control limit logic. The chart updates as the initial condition for the moving average changes, revealing how early data points influence the bounds.

Fork of Polished World Map

This example displays a styled world map with country boundaries and graticules, rendered as an SVG using React and D3 v5. The map uses a Mercator projection fitted to the viewport via `d3.geoMercator` and `d3.geoPath`, with land polygons from the World Atlas TopoJSON dataset. Graticules are generated with `d3.geoGraticule`, while country borders are drawn using `topojson.mesh`. The visualization emphasizes visual polish through teal land fills, subtle interior stroke lines, and a light sphere background.

xMR char calc v2

This visualization plots 39 monthly data points and computes control limits using a moving range approach. It identifies breakpoints where the process shifts, applying three rules: points exceeding 2.66 times the average moving range, two of three points beyond 1.98 sigma, and seven consecutive points above the mean. The code uses d3.csv, d3.mean, and array methods to calculate lower and upper bounds, rendering the series with D3 v6.

xMR chart

This example demonstrates an xMR control chart, a statistical process control tool that plots individual data points and their moving ranges over time. It uses a dataset of monthly measurements (from April 2017 to June 2020) to identify the first point where the process goes out of statistical control. The chart computes the mean and average moving range from the first 12 points, then applies Western Electric rules (two points beyond 2 sigma, or three points beyond 1 sigma) to detect the breakpoint. The visualization is built with D3 v6’s `select`, `csv`, and `mean` functions for data loading and calculation.

Overlapped Barchart8

This example visualizes survey data as a time-series line chart overlaid with semi-transparent rectangle bars representing each survey period. It uses D3’s scaleTime and scaleLinear for axes and a line generator for the trend line. The React app fetches `timeperiodv2.json` and displays tooltips on mouseover, with animated opacity transitions, highlighting each period’s name and value. SVG rendering draws the bars, axes with ticks, and labels directly above each bar.

Overlapped Barchart7

This example combines a timeline bar chart with an overlaid line graph to show changes in percentage values across five survey periods from 2005 to 2020. Each green bar spans its corresponding date range, with labels above and hover tooltips revealing exact start and end dates. A green path, generated using `d3.line`, connects the bar midpoints to emphasize the downward trend. Built with React and `d3.scaleTime` and `d3.scaleLinear`, the SVG renders axes, ticks, and bars from the timeperiodv2.json data, with `d3.timeParse` handling date conversion and CSS transitions animating tooltip opacity.

Overlapped Barchart6.1

This example shows a time-series bar chart overlapped with a line graph, plotting five survey data points over a roughly 15-year span. Each bar represents a survey period’s start and end dates, with its height indicating the percentage value. The red line connects the middle date of each period to its value. The visualization uses React for rendering and d3.scaleTime, d3.scaleLinear, and d3.line to generate the SVG elements. Data comes from the local JSON file `timeperiodv2.json`.

Overlapped Barchart5

This example visualizes health survey data across time periods using a series of overlapping, semi-transparent rectangles. The bars are positioned along a time axis from the start to the end date of each survey, with their height reflecting the reported percentage value. A red line connects the midpoints of these intervals to highlight the trend over the years. The visualization is rendered as an SVG using React and D3.js v6, specifically employing `d3.scaleTime`, `d3.scaleLinear`, `d3.line`, and JSON data loading via `d3.json`.

Overlapped Barchart4

This visualization shows how a percentage value changes across overlapping time periods, with each period's range displayed as a bar and the trend emphasized by a red line connecting the midpoints of each period. It combines a time-based bar chart with a line overlay to reveal the downward trend in the data. The chart is built using React to manage the loading and transformation of the JSON data, while D3.js functions like `scaleTime`, `scaleLinear`, and `line` handle the coordinate scaling and path generation. SVG rectangles are positioned using each period’s start and end date, and the line uses the calculated middle date of each period.

Overlapped Barchart3

This visualization displays five time periods as overlapping horizontal bars on a timeline, with each bar's width representing the date range and height reflecting the data value (a percentage). The chart uses React to manage state and D3 v6 APIs (`d3.json`, `d3.scaleTime`, `d3.scaleLinear`) to parse dates from a JSON file (`timeperiodv2.json`) and map them to SVG rectangles. The bars, drawn in semi-transparent green, overlap to highlight how different survey periods (e.g., NFHS3, RSOC, CNNS) compare chronologically and by value, while axes and grid lines are generated from D3’s tick functions.

Fork of Overlapped Barchart2

This example uses a React component with D3 to visualize survey period overlaps as a horizontal time-series bar chart. Each rectangle’s x-position and width map to a survey’s start and end dates using `d3.scaleTime`, while its height represents the reported percentage via `d3.scaleLinear`. The SVG bars are drawn from `timeperiodv2.json`, which provides start and end dates parsed with `d3.timeParse`. The chart displays five national surveys from India, showing how their data collection periods overlap across time.

Overlapped Barchart

This visualization uses a React component to render an overlapped barchart in SVG, displaying percentage values across five time periods from survey data. The code loads JSON data via d3.json, then constructs scales with d3.scaleBand and d3.scaleLinear to map time periods and values to x and y coordinates. Overlapping bars are drawn as semi-transparent green rectangles with rgba(200,255,220,.9) fill, allowing underlying bars to show through when values decrease over time. The chart omits axis labels and focuses solely on the bar geometry, with data sourced from the timeperiod.json file.

css flexbox

This example demonstrates a minimal HTML page that showcases the use of CSS flexbox, indicating a layout container through the `class="layout"` style definition. The page consists of a basic structure with a `<style>` block and a `<div>`, and it uses JavaScript to log a message to the browser console. The rendering approach relies on standard HTML and CSS, with the page centered and set to a large font size, though the flexbox properties themselves are not fully defined in the visible code.

bootstrap layout

This example demonstrates a full-screen layout divided into four colored panels using Bootstrap’s grid system. The page structure consists of two columns, each containing two rows, with each panel filled by a background color class (danger, info, secondary, warning). The code applies d3.v5’s `select` function from the `d3` module to target the SVG element and sets its width and height to match the browser viewport dimensions. The panel arrangement is entirely static, with the Bootstrap classes defining the visual hierarchy.

XmR

This example demonstrates an XmR control chart—a statistical process control tool—by loading a CSV dataset of numeric measurements and computing the moving range between consecutive values. The visualization itself is not yet rendered; instead, the code focuses on data preprocessing using `d3.csv` and `d3.mean` to parse and log the raw values and their absolute differences. The D3 v6 library fetches data from a GitHub Gist, while a minimal HTML page sets up a blank canvas with oversized text styling, leaving the chart implementation open for future steps.

Dot density map

This dot density map visualizes population distribution across Massachusetts census blocks using one dot to represent two people. The code renders polygons to an offscreen canvas with unique colors per feature, then uses Canvas `getImageData` for point-in-polygon tests to place random dots within each block’s bounds. It draws the final dots on a separate canvas using the Albers projection and `d3.geo.path`, with data from a TopoJSON file (`block.json`). The map uses colors and the D3 v3 library.

Dot Density India

A dot density map of India renders each state as a colored polygon on a canvas, using a color-coding scheme where each state's RGB value encodes its index. The visualization projects geographic coordinates through a Mercator projection with d3.geoMercator, and draws the state boundaries using d3.geoPath and topojson. The rendering occurs entirely on a Canvas 2D context, with each polygon filled via a custom drawPolygon function that iterates through coordinate rings. The data comes from a remote TopoJSON file containing Indian state boundaries, loaded asynchronously with d3.json.

SVG Map template

This example displays a map of India using D3.js, rendering geographic boundaries as SVG paths. It loads GeoJSON data from a remote URL and projects it with a Mercator projection using `d3.geoMercator` and `d3.geoPath`. The map is centered on India and scaled to fit the browser window, with each feature drawn as a path element styled with the class `boundary`.

first level drilldown

This example demonstrates a hierarchical drilldown of geographic data using the D3.js library, showing districts, projects, and beats in the Palghar region of India. Clicking on a district zooms into the selected area by fetching a new GeoJSON file and redrawing the map with the corresponding sub-regions. The visualization uses `d3.geoMercator` for map projection, `d3.geoPath` for rendering geometries, and `d3.zoom` to handle pan and zoom interactions. A "back" button resets the view to the full district map.

Fork of Making map in react d3 method 2

This example displays an interactive map of India with state and district boundaries rendered as SVG polygons using React hooks and D3 v6. The code loads two TopoJSON files from GitHub Gists via `d3.json` and converts them with `topojson.feature`. A `geoMercator` projection and `geoPath` generator draw the map shapes, while React’s `useEffect` and `useRef` manage the D3 selections. The visualization updates when the bundled data arrives, filling polygons with a teal color.

Making map in react d3 method 1

This example demonstrates how to render a choropleth map of Indian states and districts using React and D3 v6. The application loads TopoJSON data from two external GitHub gists, converts it to GeoJSON features, and displays the map as an SVG path using D3’s geoMercator projection and geoPath generator. The map fills each state polygon with a teal color and updates when new geometry is fetched. The code uses React hooks (useRef, useEffect, useState) to manage the SVG selection and state data, with d3.json loading the TopoJSON and topojson.feature converting the topology.

key bind

This example demonstrates a minimal React application that captures keyboard input. It renders an input field and logs a message to the console when the Enter key is pressed, using React’s `useState` and `onKeyPress` event handler. The code includes commented-out SVG elements and a `mousePosition` state, but only the input element is active. The app is built with React 16.9 and rendered via `ReactDOM.render` into the root div, with styling applied through an external stylesheet.

Leaflet + D3 Map

This visualization combines Leaflet and D3 to create an interactive map of the Worli area in Mumbai, India. It displays GeoJSON polygon boundaries representing postal code regions from a polygon.js file, along with hand-drawn lane features from lines.json. The map uses d3.geoTransform to project geographic coordinates through Leaflet's latLngToLayerPoint method, rendering SVG paths that respond to mouseover events by changing fill colors. D3's geoPath generator creates the paths, which update dynamically as users zoom or pan the OpenStreetMap tile layer.

SWK testing 3 month

This visualization displays a bar chart of dry waste before segregation for the HiraSethChawl – Waras Lane over a three-month period in 2020. The chart uses a vega-lite-api specification with a single bar mark encoding a quantitative y-axis and temporal x-axis. Data is loaded asynchronously from a TSV file via `d3.tsv`, filtered to a single lane, and parsed for numeric values. Custom axis and label styling are applied through a config object, while the chart is rendered with vega-tooltip for interactive hover details.

SWK testing

This chart displays daily dry-waste totals after segregation for lanes in the SWK dataset, with bars colored by lane name and tooltips showing the number of houses performing segregation. Built with the vega-lite-api, it uses `vl.markBar()` and encodes the sum of `drywaste_af` against the date field. Data loads from a CSV via `d3.csv`, with the view sized to the window and rendered as SVG.

Histogram

This histogram visualizes the distribution of waste-collection metrics from a municipal dataset, showing how values like houses reached or dry waste collected are spread across recorded observations. The chart uses D3.js v6 to generate a bar chart, with React managing the component state and data loading via the `d3.json` method. The histogram displays frequency counts for each bin on the y-axis, while the x-axis represents the numeric range of the selected variable.

Map with React & D3 using useRef hook

A world map visualizes country-level metrics such as population, name length, and GDP, colored on a grayscale-to-red gradient. Clicking a country zooms the projection to focus on that selection. Built with React and D3 v5, the example uses `useRef` and a custom `useResizeObserver` hook to track container dimensions, `geoMercator().fitSize` for projection, `geoPath` for rendering, and `scaleLinear` for the color scale with transitions on attribute updates.

Leaflet Map

This example combines Leaflet and D3 to visualize hand-drawn lanes and postal-code polygon boundaries in the Worli area of Mumbai. The map displays OpenStreetMap tiles as a base layer, with green polygons representing pincode regions and orange lines representing named lanes. Hovering over a lane highlights it and updates a custom Leaflet control with the lane’s name. Permanent tooltips show office name, office type, and pincode for each polygon, using Leaflet’s `L.geoJson`, `bindTooltip`, and event-driven style overrides.

Menu with react-dropdown

This example demonstrates a simple interactive menu using React, where a dropdown selection controls a displayed value. It shows a categorical attribute picker with options for iris dataset measurements like sepal length and petal width. The interface uses the `react-dropdown` library and React hooks, specifically `useState` to manage the selected value and `onChange` to update it. The dropdown and its options are styled via custom CSS in the accompanying `index.html`, while the `Dropdown` component renders each option based on the provided `attributes` array.

Polished Scatter Plot with Menus

This interactive scatter plot displays the classic Iris dataset, allowing users to explore relationships between different floral measurements. Two dropdown menus control which attribute is plotted on the x and y axes. The visualization is built using React and D3 v5, rendering axes and circle marks as SVG elements. Data loading relies on d3.csv, while scales are computed with d3.scaleLinear, utilizing d3.extent and d3.nice for domain and range adjustments.

Interactive Color Legend

This interactive scatterplot displays the Iris flower dataset, letting viewers change the x-axis attribute via a dropdown and hover over a color legend to highlight points of a selected species. The React-based visualization uses d3.scaleLinear for axes, d3.scaleOrdinal for categorical colors, and renders all marks as SVG circles. Hovering the legend dims non-matching species while emphasizing the filtered data through a separate overlay layer built with array filtering.

Color Legend

This interactive scatterplot lets users explore the Iris dataset by selecting which measurement to map to the x-axis (e.g., petal length, sepal width). Data points are rendered as circles using React and SVG, with their position derived from `d3.scaleLinear` for x and y values, and their color assigned via `d3.scaleOrdinal` based on species. A color legend, built from the same ordinal scale, displays each species’ color and name, while a dropdown menu updates the x-axis attribute using React state. The chart loads the data asynchronously using D3's `csv` function.

react zoom transition

This example demonstrates a zoomable React component that applies a D3 zoom behavior to any SVG content, shown here with a large “Hello, World!” text element. The `ZoomContainer` component uses `d3.zoom()` and its `zoom` event to capture the current transform, storing it in React state via `useState`, then applies that transform as `translate` and `scale` attributes on a `<g>` element. The `Stage` component provides the SVG context through React’s `Context` API, and the `useSvg` hook supplies the DOM node to D3.

Scatterplot in react d3

This interactive scatterplot displays the Iris dataset, plotting sepal width against a user-selected attribute (petal width, sepal length, etc.) via a dropdown menu. Each flower is rendered as a circle, colored by species using a d3.scaleOrdinal. Built with React and D3 v6, the visualization loads CSV data from a GitHub gist, applies linear scales using d3.scaleLinear, and renders SVG circles for marks. The dropdown updates a React state hook, which dynamically adjusts the x-scale domain and re-renders the chart.

Menu with react

A React-based dropdown menu displays a list of Indian location names, with Uttrakhand selected by default. The example uses React's `useState` hook and a custom `Dropdown` component to manage the selected value, which is rendered to the DOM via `ReactDOM.render`. The select element updates the state on user interaction, though the displayed value is not visually emphasized. The interface uses HTML `<select>` and `<option>` elements styled with CSS, with the selection data defined in a static array.

Map with React & D3

This example renders a choropleth map of India using React and D3. It displays state boundaries as SVG paths, filled with a teal color, against the full browser viewport. The map is projected using `d3.geoMercator` and drawn with `d3.geoPath`, while TopoJSON data is fetched from a remote gist and converted to GeoJSON via the `feature` function. React components manage the data loading lifecycle and render the SVG elements, with D3 handling the geographic calculations.

Barchart with React & D3

This example uses React and D3 to display a horizontal bar chart of the top 10 countries by 2020 population from a UN dataset loaded via d3.csv. The chart shows each country’s population as a bar, using D3’s scaleBand and scaleLinear to map country names and population values to screen coordinates within an SVG rendered by React. React’s useState and useEffect manage the asynchronous data loading, and the visualization updates once the CSV is fetched and parsed.

Loading data using d3 and react

This example demonstrates loading a CSV dataset into a React component using D3’s `csv` method. The code fetches a list of named CSS colors from a GitHub gist and displays the number of rows and columns in the dataset as text. React hooks like `useState` manage the asynchronous data loading state, showing a “loading…” message until the promise resolves. The visualization itself is minimal, focusing solely on data retrieval and basic metadata display rather than graphical rendering.

Mouse follower

A React application renders a full-screen SVG that tracks the mouse cursor with a black circle. The component uses React hooks `useState` and `useCallback` to store and update the cursor position on every `mousemove` event, and re-renders the SVG circle’s `cx` and `cy` attributes accordingly. The SVG’s width and height are set to the browser window dimensions, and the circle’s radius is fixed at 30 pixels. ReactDOM is used to mount the component into the DOM, with no external data source beyond the user’s pointer movement.

Loading and parsing topojson data

This example demonstrates how to load and parse a TopoJSON file from a remote URL, logging the resulting JSON object to the browser console. The code defines an asynchronous function that uses the `fetch` API to request the TopoJSON file and then parses the response as JSON. It specifically targets a dataset containing India’s state boundaries from the NFHS-4 survey, with the file hosted on GitHub Gist. The visualization itself is minimal, containing only a near-empty webpage with oversized text, as the primary purpose is to inspect the raw data structure through the console output rather than display a map.

map-level

This example uses the D3 v5 library to render an interactive map-based visualization. The page layout is built with Bootstrap 4, containing a navigation bar, a form panel, and a map area. The D3 code selects an SVG element and dynamically sets its dimensions to match the browser viewport, though the detailed map rendering and data interaction logic are not visible in the provided files. The approach relies on D3’s selection and attribute methods to prepare the canvas for geographic data display.

react

A grid of eight identical cartoon faces is rendered in React, each with a yellow circular head, black-bordered stroke, eyes, and an arc-shaped mouth. The faces are generated by mapping over an array created with `d3.range`, and each face is composed of reusable React components like `BackgroundCircle`, `Eyes`, and `Mouth`. The `Mouth` component uses `d3.arc` to define the path, while the SVG output is produced declaratively through React props for dimensions and positioning.

Leaflet-form

This example is an interactive map for collecting user-generated geographic data. A Leaflet map centered on Gothenburg, Sweden, displays OpenStreetMap tiles and includes a blank GeoJSON layer. Users can add features to this layer, which are then clickable. The code uses Leaflet, the Leaflet.draw plugin for drawing shapes, and EasyButton for custom controls, with jQuery handling form input.

hgis

This example renders a full-screen SVG canvas that resizes to fill the browser viewport. The visualization sets up a fixed, full-body layout using Bootstrap utility classes and custom CSS with overflow hidden. The D3 v5 library handles the SVG element, and the code uses `document.body.clientWidth` and `document.body.clientHeight` to compute the canvas dimensions. The header and fill areas are styled with Bootstrap’s background color classes, but no actual data or marks are drawn in the provided scripts.

(adding awc level)

This visualization presents an interactive choropleth map of Palghar district, India, showing child health metrics such as stunting and underweight prevalence across administrative levels (block, project, beat, and AWC). Users can select a month and health category via dropdowns, and a slider filters the displayed range. The map, built with D3 v5 and SVG, uses a Mercator projection (`d3.geoPath`, `d3.geoMercator`) and updates polygon colors and labels dynamically. A tooltip, data table, and zoom functionality (`d3.zoom`) enhance exploration of the GeoJSON-based geographic and attribute data.

grids 2

This example presents a dashboard layout with distinct regions for a map, table, slider, and hierarchical data, though the visible code only establishes the Bootstrap-based grid structure and an empty SVG canvas. The page uses Bootstrap 4 for responsive column and row sizing, with a fixed full-height container and color-coded placeholders. D3 v5 is imported and used solely to set the SVG’s width and height based on the document’s client dimensions. The index.js file applies these attributes without additional data binding or rendering, leaving the actual visualizations unimplemented.

Zoom to Feature

Clicking a block in the Talasari or Jawhar block map zooms into that shape and filters the view to just its sub-features. The D3 v5 code uses `d3.geoMercator` and `d3.geoPath` to render the GeoJSON polygons, while `d3.zoom` handles pan and zoom transitions. A back button resets the map to the full district view. SVG paths trigger the zoom-to-bounding-box interaction with a smooth animated transition.

Ploting points

This example plots point data from a GeoJSON file onto a map of the Palghar district using D3.js. Each point represents an Anganwadi center, rendered as a small circle positioned with the Mercator projection. The code uses D3 v5 with `geoMercator`, `geoPath`, and `selectAll("circle")` to visualize the spatial distribution of the centers. The map is rendered as SVG, and the points are drawn directly from the `awc.json` feature collection.

(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.

(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`.

(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.

level 1 with all features

This visualization shows a choropleth map of Palghar district, India, displaying nutritional indicators for children across administrative blocks and projects. Users can switch between seven categories, including stunting, wasting, and underweight rates, using a dropdown menu. A slider filters the color scale to focus on specific value ranges, while hovering reveals tooltips with region names and percentages. The map uses D3 v5 with a Mercator projection and `d3.geoPath` to render GeoJSON data. SVG polygons and text labels animate color changes and update values when switching indicators, with zoom support for detailed inspection.

Level 1 with all features

This interactive map of Palghar district visualizes child health indicators across administrative blocks, showing metrics like stunting and underweight prevalence. Users can switch between August, September, and October data through a month selector and filter by seven health categories. A slider lets viewers adjust the color thresholds for the choropleth map. The visualization uses D3.js v5 with a Mercator projection to render GeoJSON polygons, providing colored boundaries with labels, tooltips on hover, and an accompanying data table. The SVG rendering adjusts colors and labels dynamically with animated transitions.

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.

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.

Blank Canvas

A blank SVG canvas fills the browser window, sized to the full viewport. The example demonstrates a minimal D3 v5 setup where a single SVG element is selected and its width and height attributes are set dynamically using `document.body.clientWidth` and `document.body.clientHeight`. The code imports the `select` function from D3 and applies no other visual elements, serving as a starting point for further visualization work.

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.

update pattern

Clicking Random generates a new alphabet subset, and the visualization demonstrates D3’s enter, update, and exit pattern. Letters slide vertically and horizontally via `d3.transition` while changing fill-opacity; entering letters appear green from above, exiting ones drop below in brown, and updates shift to new positions in dark gray. The code uses `d3.selectAll` with key functions for data joining, and renders animated SVG text elements.

Map drill down

This example demonstrates a drill-down choropleth map of Palghar district blocks, colored by data values from an external CSV. It shows a tooltip on hover and supports pan/zoom interaction. Built with D3 v5, it uses `d3.geoMercator`, `d3.geoPath`, and `d3.zoom` to render and manipulate SVG paths from GeoJSON data, while `d3.csv` and `d3.json` merge the dataset with geographic boundaries.

dynamic monthwise map

This dynamic map shows child health indicators across blocks in Palghar district, India, with a dropdown to switch between months (August, September, October) and a second dropdown to toggle between severely stunted and stunted children counts. The choropleth colors each block red, yellow, or green based on the selected metric’s value relative to a three-tier scale, and hovering reveals a tooltip with additional percentages for stunting, underweight, and low birth weight. Built with D3 v5, it uses `d3.geoPath` with a Mercator projection, `d3.csv` and `d3.json` for data loading, and `d3.event` for mouse interaction, rendering features as SVG paths with zoom support via `d3.zoom`. The monthly CSV data is merged into the GeoJSON features by block name before rendering, with colors recalculated on selection change.

month + category map

A choropleth map of Palghar district highlights child nutrition indicators across eight blocks, with dropdown menus to switch between August, September, and October, and between stunted or severely stunted child counts. The map renders block polygons from a GeoJSON file using d3.geoPath with a Mercator projection, and colors each block red, yellow, or green based on a three-tier threshold. D3 transitions animate the fill changes when a new month or metric is selected, and hovering shows a tooltip with additional stunting, underweight, and low birth weight percentages. Data comes from monthly CSV files merged into the GeoJSON properties.

map with categaory

This example displays a choropleth map of Palghar district blocks, colored by two quantitative categories (c1 and c2) selectable via a dropdown menu. The map renders GeoJSON polygons using `d3.geoPath` and `d3.geoMercator`, with colors assigned by dividing each category’s range into three bins (red, yellow, green). A tooltip appears on hover, and both the map and dropdown are animated with `d3.transition`. Zooming is enabled via `d3.zoom`, and data from a CSV file is joined to the GeoJSON.

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.

My Bowl of fruits

The visualization displays a bowl of five apples, rendered as simple SVG shapes on a full-window canvas. The code uses d3.select to target the SVG element, d3.range to generate the fruit array, and a makefruit factory function to create each apple object. The example relies on the D3 v5 library, with the SVG drawing area sized to the browser’s client dimensions.

static map+color+tooltip+label

This example presents a static choropleth map of Palghar district blocks, colored by the "c1" attribute from a CSV file joined to GeoJSON boundaries. It uses d3.geoPath and d3.geoMercator to render the polygons, with a custom color scale dividing values into red, yellow, and green ranges. Hovering over a block triggers a tooltip via d3.select and d3.event, showing the block name and c1 value. Block labels are positioned at polygon centroids using pathGenerator.centroid, and the map supports zooming through d3.zoom.

Untitled

This interactive choropleth maps the author’s personal travel history, coloring U.S. states by whether they were lived in, visited, or unvisited, with a legend for reference. Cities where the author resided appear as orange circles, sized by years spent there, and hover tooltips reveal each city’s name. Built with D3 v3, it uses `d3.geo.albersUsa` and `d3.geo.path` to project and render GeoJSON state boundaries, while `d3.csv` loads the state and city data. Circle radii scale with the square root of years lived, and SVG hover effects lighten state fills.

Untitled

A bar chart displays the frequency of each letter in the English language, sourced from a tab-separated data file. The chart presents bars for each letter from A to Z, with an interactive checkbox that triggers a sort animation. Using d3.tsv for data loading, d3.scale.ordinal and d3.scale.linear for scales, and d3.svg.axis for axes, the visualization animates bar reordering with transitions. React renders the SVG container, while the checkbox toggles between alphabetical and frequency-based sorting, with bars and x-axis labels animating over 750 milliseconds.

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.

Svg example

This example demonstrates the rendering of vector graphics using an SVG canvas within a React application. The composition uses primitive SVG elements, including a circle, a line, and a path, all grouped within a `<g>` element. The group applies a scale transformation of 3 and a translation of (100, 4) to the shapes. The path element defines a polyline with red strokes and a lavender fill, while the line is styled with a black stroke and a specific width, all generated through the react framework.

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.

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.

test

This example demonstrates a static SVG rectangle that animates its width in response to a button click. The visualization uses D3.js to select the HTML body element, create an SVG container, and draw a rectangle. When the button triggers the `trigger()` function, the rectangle transitions its `width` attribute from 50 to 400 over a duration of 2000 milliseconds with a 100-millisecond delay, before being removed from the scene. The page relies on inline JavaScript and D3’s selection and transition APIs.

feat1_histogram_with_color

This visualization displays a bar chart of height percentages across eight blocks in the Palghar district, with each bar colored on a red-yellow-green sequential scale based on its value. The bars render as SVGs using D3.js, with d3.scaleBand for the x-axis categories and d3.scaleLinear for the y-axis. Colors are generated via d3.scaleSequential with d3.interpolateRdYlGn. The code also includes axis labels and value text annotations atop each bar, sourced from a local CSV file containing block-level aggregated data.

Untitled

This example renders a simple static SVG scene containing a path, an inactive polygon with dashed gray styling, and a group of active and tentative shapes including a red circle and dark gray rectangle. The code relies on D3.js version 5.15.0 for element selection and class manipulation via `d3.select` and `.classed`. The SVG is drawn directly in the HTML with inline styling, showing how CSS classes like `.active` and `.tentative` control stroke appearance and opacity.

HTML Starter

A minimal SVG face rendered from basic geometric shapes. D3.js v5 is used to select the root SVG element, center a group at the canvas midpoint, and append a yellow circle with a black stroke as the head. Two small circles form the eyes, each positioned via a translation transformation, while a red arc path, created with `d3.arc` using specified inner and outer radii and angle bounds, serves as the mouth. The example demonstrates foundational D3 selection, attribute setting, and shape construction within a bare HTML page using React as the framework.