Asmabee Khan

@asmabee07·8 public vizzes

Count + Percent

This example demonstrates a dual-axis chart combining bar and line representations. Gray bars show raw counts by year on a steelblue left axis, while a steelblue line with points displays percentage data on a crimson right axis. The visualization uses D3 v4 with SVG rendering, employing `d3.scaleBand` for the categorical x-axis, `d3.scaleLinear` for both y-axes, and `d3.axisBottom`, `d3.axisLeft`, and `d3.axisRight` to generate the axes. Data is loaded from a local CSV file.

Jan 12, 2022

Loading thumbnail…

Plotly Line Chart Absolute

This chart shows monthly HMIS live births in Kerala from April 2017 to March 2020, comparing total births against urban and rural totals using three spline line series with markers. The visualization uses Plotly’s `Plotly.newPlot` with `Plotly.d3.csv` to load and parse the CSV data. The x-axis is formatted as dates with a `%b %Y` tick format, the y-axis starts at zero, and a horizontal legend sits above the plot. The chart highlights seasonal patterns and the persistent divide between rural and urban birth volumes over the three-year period.

Sep 22, 2021

Loading thumbnail…

Plotly Line Chart Percent

This example shows seasonal trends in live births across Odisha, India, by plotting monthly percentages for total, rural, and urban births from April 2017 to March 2020. Three spline-connected line traces with markers distinguish the categories, and a red dashed horizontal reference line marks a baseline value. The visualization is built with Plotly.js, loading data from a CSV file via `Plotly.d3.csv` and constructing the chart with `Plotly.newPlot`. The x-axis uses date formatting for month and year, while the layout includes a titled legend and custom tick styling.

Sep 22, 2021

Loading thumbnail…

level 1 with all features

This interactive map shows nutritional indicators (stunting, wasting, and underweight prevalence) across administrative regions in Palghar district, India, for three months. A dropdown menu and range slider let users select different health metrics and adjust color thresholds, while hovering reveals tooltips with region names and percentages. Built with D3 v5, the visualization uses `d3.geoPath` with a Mercator projection to render GeoJSON boundaries at the block and project levels. Animated transitions update fill colors when selections change, and the map supports zooming through D3's zoom behavior. Data comes from monthly CSV files.

Mar 3, 2020

Loading thumbnail…

Pie Charts

This pie chart visualizes population distribution across rural areas using data loaded from a CSV file. Each slice represents an area with its total population, labeled with the area name. The chart is rendered with SVG and animated using D3 v4’s transition.attrTween to grow the arcs from zero to their final angles. Colors are assigned via d3.scaleOrdinal, and the pie and arc generators (d3.pie, d3.arc) compute the geometry. Labels are positioned using labelArc.centroid.

Feb 22, 2020

Loading thumbnail…

Height and Weight Measurement Efficiency for Block-wise Data

This example visualizes the efficiency of height and weight measurements across different administrative blocks and months, using a data table with interactive sorting capabilities. The visualization displays raw counts and calculated percentages for children measured by weight, height, or both, allowing comparison across regions like Dahanu and Palghar. The code uses React for the table structure, Bootstrap for styling, and d3.js for data manipulation and SVG rendering. D3’s scale functions and interpolation libraries are applied to handle dynamic data representation, while the table supports sorting via column headers.

Feb 22, 2020

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.

Feb 9, 2020

Loading thumbnail…

D3 World Map

This example displays a world map rendered as black countries with white borders on an SVG canvas. It uses D3.js version 5 and the `d3.geoMercator()` projection to transform geographic coordinates, with `d3.geoPath()` drawing the country boundaries. The map data is loaded from a GeoServer WFS endpoint as GeoJSON, which is then converted to TopoJSON via the `topojson` library to structure the geometries for rendering. The visualization showcases D3’s ability to handle geographic data through its projection and path APIs.

Jan 6, 2020