Skip to main content
Log in
N

Nikhil Prakash

@Nix07·9 public vizzes

Loading thumbnail…

Map of India

A choropleth map of Tunisia displays each delegation as a colored polygon, using a paired color scheme to differentiate regions and a hover effect that turns polygons maroon. The visualization is rendered with SVG via d3.geoPath and a d3.geoMercator projection, loading TopoJSON data from a remote GitHub repository. Interactive zooming is enabled through d3.zoom, which applies transforms to the map group, and tooltips appear via appended title elements.

Mar 18, 2021
Loading thumbnail…

Choropleth Map

This choropleth map colors countries by economic classification using an ordinal color scale with a spectral scheme. The visualization renders world geography as SVG paths projected with the Natural Earth projection, with zoom and pan interactions enabled through d3.zoom. Data loads from the World Atlas TopoJSON and TSV files, which are joined by ISO country codes to populate map features. Hovering highlights individual countries in maroon, while tooltip titles display each country’s name and economy type.

Mar 18, 2021
Loading thumbnail…

Interactive Filtering

This interactive choropleth map visualizes country-level economic data from the World Atlas, rendered as SVG projections using D3’s `geoNaturalEarth1` and `geoPath` APIs. Users click countries to highlight them, which dims all others, and adjust the categorical color legend to filter which economies appear vivid. A color scale from `scaleOrdinal` with `schemeSpectral` maps economy types, while pan and zoom controls rely on D3’s `zoom` event. Country data combines TSV attributes with TopoJSON geometry via `topojson.feature`.

Mar 17, 2021
Loading thumbnail…

World map

This interactive world map displays country boundaries using a natural Earth projection, with hover tooltips showing country names and zoom/pan controls for exploration. It loads geographic data from the world-atlas TopoJSON and TSV files, then renders countries with D3’s `geoPath` and `geoNaturalEarth1`. The visualization uses `d3.zoom` for interaction and `topojson.feature` to convert TopoJSON geometry, with hover effects styled via CSS.

Mar 17, 2021
Loading thumbnail…

General Update Patte with Interactivity

Five circles representing fruit transition smoothly between three states using the general update pattern. D3's selection merging and `.transition()` animate enter, update, and exit phases over 1-second durations, while click events toggle a selected fruit’s stroke color. The demo uses `scaleOrdinal` for color and radius mappings, with `setTimeout` driving sequential data changes.

Mar 16, 2021
Loading thumbnail…

General Update Patte

This example demonstrates the D3 general update pattern by animating a row of fruit-shaped circles as apples are added, removed, or changed into lemons over timed intervals. The visualization uses SVG circles with ordinal color and radius scales, and relies on D3 version 6’s `selection.data`, `enter`/`exit` selections, and `transition` to smoothly update position, size, and color over one-second durations. Data is generated client-side with random IDs, and three subsequent updates trigger the transitions.

Mar 15, 2021
Loading thumbnail…

Fork of D3 Starter

This scatterplot compares vehicle horsepower and weight using data from the auto-mpg dataset, loading CSV data via `d3.csv` and rendering with SVG circles. The chart uses `d3.scaleLinear` for both axes, `d3.extent` to set domains, and `d3.axisLeft`/`d3.axisBottom` with gridlines. The title and axis labels are added as SVG text elements, and the visualization is built with D3 v6 in a simple HTML page.

Mar 15, 2021
Loading thumbnail…

Fork of Cars Scatter Plot

This scatter plot visualizes the relationship between horsepower and weight for cars from the UCI Auto MPG dataset. Red semi-transparent circles represent individual vehicles, with axes labeled "Horsepower" and "Weight" and a title at the top. The visualization is built with D3 version 5 using `select`, `csv`, `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` APIs, rendered as SVG. The code includes a video embed in the README and styles text using CSS classes for tick labels, axis labels, and the title.

Mar 15, 2021
Loading thumbnail…

Bar Chart Example

This bar chart displays population figures for five countries using steelblue circles positioned by a linear x-axis and point-scale y-axis. The React-based visualization loads data from a CSV file and renders as SVG using D3’s `scaleLinear`, `scalePoint`, `axisBottom`, and `axisLeft` APIs. Grid lines extend across the plot area, and x-axis tick labels abbreviate large numbers using `format('.2s')`.

Mar 13, 2021