mainView = {
if (!selectedState) return renderMap();
return renderLineChart(selectedState);
}
Public
Edited
May 9
1 fork
// Observable notebook: India Map with Clickable Line Chart (Updated for Excel inputs)
//import { FileAttachment } from "@observablehq/runtime";
//import * as d3 from "d3";
//import * as XLSX from "xlsx";
XLSX= require("xlsx")
// Parse MapData.xlsx
mapData = {
const file = await FileAttachment("MapData@2.xlsx").arrayBuffer();
const workbook = XLSX.read(file, { type: "array" });
const sheet = workbook.Sheets[workbook.SheetNames[0]];
const data = XLSX.utils.sheet_to_json(sheet);
return data.map(d => ({
state: d["State/UT Waqf Board"],
value: +d["Immovable Property"]
}));
}
// Parse LineChart.xlsx
lineChartData = {
const file = await FileAttachment("LineChart@2.xlsx").arrayBuffer();
const workbook = XLSX.read(file, { type: "array" });
const sheet = workbook.Sheets[workbook.SheetNames[0]];
const data = XLSX.utils.sheet_to_json(sheet);
return data.map(d => ({
state: d["State"],
year: d["Year"],
value: +String(d["Total Net Income Declared (Rs)"]).replace(/[^0-9.]/g, "")
}));
}
// Load GeoJSON
geoData = FileAttachment("GeoData.json").json()
geoData.features.map(d => d.properties.ST_NM)
{
const width = 800;
const height = 800;
const svg = d3.create("svg")
.attr("width", width)
.attr("height", height);
const projection = d3.geoMercator()
.center([82.8, 22.5]) // approximate center of India
.scale(800) // adjust scale as needed
.translate([width / 2, height / 2]);
const path = d3.geoPath().projection(projection);
svg.selectAll("path")
.data(geoData.features)
.join("path")
.attr("d", path)
.attr("fill", "#e0e0e0")
.attr("stroke", "#333");
return svg.node();
}
{
const width = 800;
const height = 600;
const svg = d3.create("svg")
.attr("width", width)
.attr("height", height);
const path = d3.geoPath();
const projection = d3.geoIdentity()
.reflectY(true) // 🔄 Flip vertically
.fitSize([width, height], geoData);
path.projection(projection);
svg.selectAll("path")
.data(geoData.features)
.join("path")
.attr("d", path)
.attr("fill", "#e0e0e0")
.attr("stroke", "#000");
return svg.node();
}
geoData.features.map(d => d.properties.ST_NM)
mapData.map(d => d.state)
mutable selectedState = null
viewof svg = {
const width = 800;
const height = 600;
const svg = d3.create("svg")
.attr("width", width)
.attr("height", height);
const path = d3.geoPath();
const projection = d3.geoIdentity()
.reflectY(true)
.fitSize([width, height], geoData);
path.projection(projection);
const colorScale = d3.scaleSequential()
.domain([0, d3.max(mapData, d => d.value)])
.interpolator(d3.interpolateBlues);
const colorMap = Object.fromEntries(mapData.map(d => [d.state, d.value]));
svg.selectAll("path")
.data(geoData.features)
.join("path")
.attr("d", path)
.attr("fill", d => colorScale(colorMap[d.properties.ST_NM] || 0))
.attr("stroke", "#000")
.attr("cursor", "pointer")
.on("click", (event, d) => {
mutable selectedState = d.properties.ST_NM;
});
return svg.node();
}
lineChart = {
if (!viewof svg || !mutable selectedState) return;
const data = lineChartData.filter(d => d.state === mutable selectedState);
if (data.length === 0) return "No data for selected state.";
const margin = { top: 20, right: 30, bottom: 30, left: 60 },
width = 800 - margin.left - margin.right,
height = 400 - margin.top - margin.bottom;
const svg = d3.create("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom);
const g = svg.append("g").attr("transform", `translate(${margin.left},${margin.top})`);
const x = d3.scaleBand()
.domain(data.map(d => d.year))
.range([0, width])
.padding(0.1);
const y = d3.scaleLinear()
.domain([0, d3.max(data, d => d.income)]).nice()
.range([height, 0]);
g.append("g")
.call(d3.axisLeft(y));
g.append("g")
.attr("transform", `translate(0,${height})`)
.call(d3.axisBottom(x));
g.append("path")
.datum(data)
.attr("fill", "none")
.attr("stroke", "steelblue")
.attr("stroke-width", 2)
.attr("d", d3.line()
.x(d => x(d.year) + x.bandwidth() / 2)
.y(d => y(d.income))
);
return svg.node();
}
function renderMap() {
const width = 800;
const height = 800;
const svg = d3.create("svg")
.attr("width", width)
.attr("height", height);
const path = d3.geoPath();
const projection = d3.geoIdentity()
.reflectY(true)
.fitSize([width, height], geoData);
path.projection(projection);
const values = mapData.map(d => d.value);
const meanValue = d3.mean(values);
const extent = d3.extent(values);
const maxAbs = d3.max([Math.abs(extent[0] - meanValue), Math.abs(extent[1] - meanValue)]);
const colorScale = d3.scaleDiverging()
.domain([meanValue - maxAbs, meanValue, meanValue + maxAbs])
.interpolator(d3.interpolateRdBu);
const colorMap = Object.fromEntries(mapData.map(d => [d.state, d.value]));
svg.selectAll("path")
.data(geoData.features)
.join("path")
.attr("d", path)
.attr("fill", d => colorScale(colorMap[d.properties.ST_NM] || 0))
.attr("stroke", "#000")
.attr("cursor", "pointer")
.on("click", (event, d) => {
mutable selectedState = d.properties.ST_NM;
});
return svg.node();
}
function renderLineChart(state) {
const stateData = lineChartData
.filter(d => d.state === state)
.map(d => ({ ...d, year: d.year.toString() }));
const container = html`<div style="position: relative;"></div>`;
// Back button
const backBtn = html`
<button style="
position: absolute;
top: 10px;
right: 10px;
z-index: 2;
background: #eee;
padding: 6px 12px;
border-radius: 5px;
border: none;
cursor: pointer;
">
← Back to Map
</button>
`;
backBtn.onclick = () => mutable selectedState = null;
container.append(backBtn);
if (stateData.length === 0) {
container.append(html`<div style="margin-top: 60px;">No data available for <b>${state}</b>.</div>`);
return container;
}
const margin = {top: 50, right: 30, bottom: 50, left: 80};
const width = 800 - margin.left - margin.right;
const height = 500 - margin.top - margin.bottom;
const svg = d3.create("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom);
const g = svg.append("g").attr("transform", `translate(${margin.left},${margin.top})`);
const x = d3.scaleBand()
.domain(stateData.map(d => d.year))
.range([0, width])
.padding(0.1);
const y = d3.scaleLinear()
.domain([0, d3.max(stateData, d => d.value)]).nice()
.range([height, 0]);
const line = d3.line()
.x(d => x(d.year) + x.bandwidth() / 2)
.y(d => y(d.value));
g.append("path")
.datum(stateData)
.attr("fill", "none")
.attr("stroke", "steelblue")
.attr("stroke-width", 2)
.attr("d", line);
// Create tooltip div inside container
const tooltip = html`<div style="
position: absolute;
background: white;
border: 1px solid #ccc;
padding: 6px 10px;
border-radius: 4px;
pointer-events: none;
font-size: 13px;
box-shadow: 0 2px 5px rgba(0,0,0,0.2);
opacity: 0;
transition: opacity 0.3s;
z-index: 3;
"></div>`;
container.append(tooltip);
// Add dots
g.selectAll("circle")
.data(stateData)
.enter()
.append("circle")
.attr("cx", d => x(d.year) + x.bandwidth() / 2)
.attr("cy", d => y(d.value))
.attr("r", 4)
.attr("fill", "steelblue")
.on("mouseover", (event, d) => {
tooltip.style.opacity = 1;
tooltip.innerHTML = `<b>Year:</b> ${d.year}<br/><b>Value:</b> ₹${d3.format(",")(d.value)}`;
})
.on("mousemove", (event) => {
const [xPos, yPos] = d3.pointer(event);
tooltip.style.left = `${xPos + margin.left + 20}px`;
tooltip.style.top = `${yPos + margin.top}px`;
})
.on("mouseout", () => {
tooltip.style.opacity = 0;
});
g.append("g").call(d3.axisLeft(y));
g.append("g")
.attr("transform", `translate(0,${height})`)
.call(d3.axisBottom(x))
.selectAll("text")
.attr("transform", "rotate(-45)")
.style("text-anchor", "end");
svg.append("text")
.attr("x", (width + margin.left + margin.right) / 2)
.attr("y", 25)
.attr("text-anchor", "middle")
.style("font-size", "18px")
.text(`Net Income Over Years for ${state}`);
container.append(svg.node());
return container;
}
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
