Akshita Shukla

@AkshitaShukla7898·3 public vizzes

first level drilldown

A choropleth map of municipal ward 61 visualizes waste generation data, initially displaying aggregated totals for regions like ANAND NAGAR and Tarapore Garden. Clicking a region triggers a smooth zoom animation that drills down to show individual building clusters within that area, colored by their respective waste output. The visualization uses D3.js v5 with `d3.geoPath`, `d3.geoMercator`, and `d3.zoom` to render GeoJSON boundaries and enable the interactive transition. It merges CSV waste metrics with geographic features to drive the color scale and drilldown logic.

Dec 7, 2021

Loading thumbnail…

basic map

This visualization displays a choropleth map of Palghar district's blocks, colored by a metric from a CSV file. It uses `d3.geoMercator` projection and `d3.geoPath` to render GeoJSON polygons. The map shows block names as labels, and hovering over a region displays a tooltip with the block name and its corresponding value. The code also incorporates a zoom feature and reads data from `block.geojson` and `data.csv` using `d3.json` and `d3.csv`.

Nov 30, 2021

Loading thumbnail…

Fork of Let's make a face with D3.js!

This example displays a set of geographic regions as a simple SVG map. It loads GeoJSON data from `region.json` and renders each polygon as a separate `path` element. The visualization uses D3.js v5, specifically the `d3.geoPath` function and a `d3.geoMercator` projection. The code automatically calculates an appropriate scale and center point for the mercator projection based on the bounds of the provided features, then positions the map in the center of the canvas.

Nov 28, 2021