Case Study

Lack of Education: Bihar Edition

Public Demographic & Education Data Visualizer

ReactD3.jsTailwind CSSGeoJSONChart.js

The Problem

Engineering Context & Problem Statement

Public census and governmental education data in India is often locked in dense, multi-thousand-page static PDF reports. Researchers, journalists, and civic advocates lack an accessible, visual means to observe district-level disparities in literacy, pupil-teacher ratios, and basic school infrastructure.

The Solution

System Architecture & Implementation Strategy

Built an interactive geospatial visualization portal that parses open census datasets and renders district-by-district choropleth heatmaps, literacy distribution curves, and infrastructural readiness indexes.

System Pipeline & Data Flow

Pipeline Flow

Raw Public Census Data -> Python ETL Pipeline -> GeoJSON / Clean JSON -> React Frontend (D3 Geospatial Heatmap + Chart.js) -> Browser View

Raw governmental census spreadsheets are sanitized into clean GeoJSON geometries and normalized JSON records. A React frontend leverages D3.js and Chart.js to render SVG maps and responsive demographic charts.

Overview

Developed as an open-source civic initiative under the Kalvium Community, Lack of Education: Bihar Edition makes educational disparities understandable through interactive data exploration.

// Rendering dynamic literacy rate bars with D3
export function renderLiteracyHistogram(data, container) {
  const svg = d3.select(container).append("svg")
    .attr("width", 500)
    .attr("height", 300);
    
  svg.selectAll("rect")
    .data(data)
    .enter()
    .append("rect")
    .attr("x", (d, i) => i * 45)
    .attr("y", d => 300 - d.literacyRate * 3)
    .attr("width", 38)
    .attr("height", d => d.literacyRate * 3)
    .attr("fill", "#0284c7");
}

Architectural Trade-offs

Key Architectural Decisions

01Simplified GeoJSON topological vectors using mapshaper to reduce payload size by 78% without perceptible visual loss.
02Employed D3 for custom geospatial projections while using Chart.js for high-performance canvas-rendered distribution histograms.
03Implemented client-side URL bookmarking so specific district comparisons can be shared directly via link.

Technical Challenges Overcome

!1Optimizing heavy GeoJSON boundary geometries for smooth 60fps rendering in budget mobile devices.
!2Sanitizing disparate data formats with conflicting district spelling conventions across census years.
!3Designing intuitive comparative views that highlight disparities without visual clutter.

What I Learned

✓Public data visualization requires meticulous attention to accessibility, color-blind friendly scales, and transparent data sourcing.
✓Civic technology projects thrive when open datasets are structured into modular, reusable API endpoints.

Related Writing & Technical Essays

Read ArticleInfinite Canvas: The Death of the Webpage