B

B Sundaresan

@bsundaresan·26 public vizzes

Loading thumbnail…

Let's make a face with D3.js

This example demonstrates how to draw a simple face using D3.js version 5 within a React framework. The code selects an SVG element and dynamically sizes it to fit the browser viewport, then appends a rounded rectangle with a black border as the face’s outline. Using `d3.select` and SVG attributes like `width`, `height`, and `rx`, it constructs the visual frame. The rendering approach relies solely on SVG shapes, with no facial features beyond the outlined rectangle, leaving the face deliberately minimal and functional as a starting point for further customization.

Loading thumbnail…

Cheap tricks for interactive maps - India

This interactive map of India shows district-level boundaries colored by state, with state outlines overlaid in black. Users can pan and zoom via the d3.zoom API, which applies a transform to the SVG group containing all map elements. The visualization loads TopoJSON data for both states and districts, then renders paths using d3.geoPath with a geoMercator projection. District colors are assigned via a d3.scaleOrdinal, and hover states change the fill through CSS.

Loading thumbnail…

Selecting a year on a line chart

This interactive line chart shows how population changes over time across world regions, with a vertical line marking the currently selected year. Users move the mouse over the chart to change the selection, which updates the line in real time. The chart is built with React and D3 v5, using `scaleTime` and `scaleLinear` for the axes, `line` for the sparklines, and a `mouse` event on a transparent rectangle to capture the cursor position. The color legend is generated with `colorLegend`, and the data comes from UN population estimates.

Loading thumbnail…

Population time-series

This example shows animated population time-series lines for world regions from 1950 to 2100, ordered by their final population values. The chart uses d3.line, d3.scaleTime, and d3.scaleLinear to render the paths, with a color legend built via d3.scaleOrdinal. Data is loaded from two CSV files and melted into tidy rows using d3.nest and d3.range, with axes formatted by d3.axisBottom and d3.axisLeft. The SVG updates through a transition on the legend circles, while the line paths use CSS mix-blend-mode for overlapping lines.

Loading thumbnail…

Temperature across cities

This example visualizes temperature variations across multiple cities over a one-week period, with each city represented as a distinct colored line. The chart displays time on the x-axis and temperature on the y-axis, and includes a color legend identifying each city. Data is loaded from a CSV file using `d3.csv`. The visualization uses `d3.line` with `curveBasis` to generate smooth paths, `d3.scaleTime` and `d3.scaleLinear` for axes, `d3.nest` to group data by city, and `d3.scaleOrdinal` with `schemeCategory10` for colors. A custom `colorLegend` component provides the interactive legend, and the rendering uses SVG with animated transitions on legend updates.

Loading thumbnail…

Map with circles

This visualization shows global population estimates for 2018 using a natural Earth projection, with circles sized proportionally to population overlaid on country boundaries. It renders in SVG with animation, combining a world map of countries from World Atlas topojson with UN population data. Using d3.geoNaturalEarth1, d3.geoPath, and d3.geoCentroid, it projects each country and draws scaled circles via d3.scaleSqrt, plus a size legend and zoom interaction via d3.zoom.

Loading thumbnail…

Menu-based automobile data summary

This interactive visualization displays a scatter plot of the classic auto-mpg dataset, with dropdown menus for selecting which numeric columns appear on the x- and y-axes. The chart uses d3.scaleLinear for both axes, d3.axisLeft and d3.axisBottom for tick marks, and d3.extent to compute domains. Selecting a new menu option triggers a re-render, where circles transition smoothly to new positions via the d3 transition method. Built with React and d3.v5, the visualization renders as SVG and includes formatted tick labels using d3.format.

Loading thumbnail…

Chloropeth Map with interactive filter

This choropleth map visualizes global economic data using a natural Earth projection, with countries colored on an ordinal red-yellow-green scale. Users can click legend items to filter the map, dimming non-matching countries and fading the sphere background. Built with React and D3 v5, it uses d3.geoPath, d3.geoNaturalEarth1, d3.zoom, and d3.scaleOrdinal, with data loaded from world-atlas TopoJSON and TSV files. The SVG rendering includes smooth transitions on legend circle updates.

Loading thumbnail…

Chloropeth Map

This choropleth map visualizes countries by their economic classification using a red-yellow-green color scale. Built with React and D3, it renders geographic boundaries via the `d3.geoPath` projection on a natural Earth base layer, with country data loaded from TopoJSON and TSV files. A color legend with animated transitions shows the ordinal scale mapping, and the map supports interactive zooming through `d3.zoom` events, while hover states provide tooltips with country names and economic values.

Loading thumbnail…

Color Size and Legends

This example demonstrates two custom legend components rendered with D3 v5 in a React framework. A categorical color legend maps fruit names to distinct colors using `scaleOrdinal`, while a separate size legend uses `scaleSqrt` to visualize numeric values through circle radii. Both legends animate their circles with a 1-second `transition`, and the code highlights reusable legend-building patterns through D3's data join and enter/merge/exit selections.

Loading thumbnail…

World Countries Hierarchy

This example visualizes the hierarchical structure of world countries, organized by continent and subregion, using a static tree layout with horizontal links. The SVG rendering uses D3 v5’s `hierarchy` and `tree` layouts, with `linkHorizontal` for the connecting paths. Node labels are sized proportionally to their depth in the hierarchy, and circles mark each country or region. The visualization supports zooming and panning through D3’s `zoom` behavior. Data is loaded from a local `data.json` file containing the nested geographic classification.

Loading thumbnail…

Art Hierarchy

This visualization displays a hierarchical tree of world geography, starting with the World root node and branching through continents and regional subdivisions down to individual countries. The tree layout renders horizontal links between parent and child nodes using SVG paths generated with d3.hierarchy, d3.tree, and d3.linkHorizontal, with the data loaded from a JSON file asynchronously. The visualization uses d3.v5 within a React framework, sizing the SVG to match the full browser viewport dimensions.

Loading thumbnail…

Let's make a map with D3.js

This example renders a world map using D3.js and the Natural Earth projection via `d3.geoNaturalEarth1`. It constructs an SVG with a blue sphere background and green country paths using `d3.geoPath` and `topojson.feature`. The map is built from the world-atlas countries-110m JSON dataset, and the code handles path generation for both the sphere and country shapes.

Loading thumbnail…

Cheap tricks for interactive maps

This example demonstrates interactive zoom and pan on a world map rendered with SVG. It uses the Natural Earth projection via d3.geoNaturalEarth1 and d3.geoPath to draw country boundaries and a blue sphere background. The map loads GeoJSON data from the world-atlas TopoJSON file on CDN, with country names supplied by the data’s properties. Hovering changes country fill color via CSS, while d3.zoom applies event-driven transforms to the map group. The visualization relies on D3 v5 and TopoJSON client libraries.

Loading thumbnail…

Bowl of fruit - General Update Pattern - With Text

Five circles representing apples are drawn in a row, then one is removed, a lemon replaces an apple, and another apple is deleted, demonstrating the General Update Pattern with text labels. The visualization uses d3.scaleOrdinal for color and radius scales, and d3.select with SVG groups, circles, and text elements. Transitions animate the radius changes and removals over 1000 milliseconds. The React-based example uses d3.v5 and renders to SVG with animation.

Loading thumbnail…

Bowl of fruit - Hover to select

Five fruit circles are rendered in an SVG, initially all apples, with a black stroke appearing on whichever fruit the mouse hovers over. The code uses a React-style render function with d3 selections and the `scaleOrdinal` color and radius scales to map fruit types to visuals. Updates occur via timed transitions: an apple is removed, a lemon replaces one apple, and another apple is filtered out. The `fruitBowl` function handles enter, update, and exit selections with `.transition().duration(1000)` for animated changes, while mouseover triggers `setSelected` to update the selection state.

Loading thumbnail…

Bowl of fruit - Click to select

Five circles representing apples animate into a horizontal row, with clicking one highlighting it with a black stroke. Over time, an apple is removed, another changes into a lemon, and a second apple is deleted, demonstrating enter, update, and exit transitions. Built with React and D3 v5, the visualization uses `d3.scaleOrdinal` for color and radius mappings, while `selection.merge` and chained `transition` calls animate circle attributes based on bound fruit data.

Loading thumbnail…

Bowl of fruit - General Update Pattern

This example demonstrates the D3 general update pattern with animated transitions of fruit circles in an SVG bowl. A row of apples shrinks and disappears when removed, changes type to a lemon with a color and radius shift, and filters out middle elements. The code uses d3.scaleOrdinal for color and radius mappings, selection.merge, and transition().duration() to animate entering, updating, and exiting circles. Data is managed with random IDs, rendered in React-compatible D3 v5.

Loading thumbnail…

World Population Area Chart

This visualization shows global population trends over time as a filled area chart, with the area beneath the curve shaded in steel blue. The code uses D3 v5’s `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `area` generator with a `curveBasis` smoothing. Data is loaded via `csv` from a remote world-population-by-year dataset and rendered as SVG, with axis labels, tick formatting, and a chart title styled through CSS.

Loading thumbnail…

Temperature in San Francisco

This example visualizes temperature readings in San Francisco over time as a smooth, filled area chart. The SVG rendering uses D3.js v5’s `scaleTime` and `scaleLinear` for the axes, with `area()` and `curveBasis` to generate the smoothed, filled path. Grid lines are drawn via `axisLeft` and `axisBottom` with negative tick sizes, and the data is loaded from a remote CSV file. The chart includes labeled axes and a title, with styling applied through an external CSS file.

Loading thumbnail…

Automobile data summary

This scatterplot visualizes the relationship between automobile weight and acceleration, with each car represented as a semi-transparent blue circle. The data is loaded from a remote CSV file and rendered as an SVG using D3 v5. The chart employs `scaleLinear` for both axes, `axisBottom` and `axisLeft` for grid lines and tick labels, and includes a rotated y-axis label. The code uses `csv` to parse the dataset and `extent` to determine the scale domains.

Loading thumbnail…

Let's make a scatterplot with D3.js

This example uses D3.js v5 within a React framework to render an SVG scatterplot of the top 10 countries by population. The code leverages `d3.select`, `d3.csv`, `d3.scaleLinear`, `d3.scalePoint`, `d3.axisBottom`, and `d3.axisLeft` to map country names to the y-axis and population values to the x-axis. It formats x-axis tick labels with `d3.format` to abbreviate large numbers, and includes grid lines and a chart title. Data is loaded from a CSV file.

Loading thumbnail…

Expenditure of ministries in 2018-19 on Internet Ads

This chart shows the comparative expenditure of Indian ministries on internet ads for the fiscal year 2018–19, highlighting the Finance ministry’s dominant spend. It is a horizontal bar chart rendered as SVG, using D3 v5’s `scaleBand`, `scaleLinear`, and `axisLeft`/`axisBottom` within a React starter template. Data is loaded via `d3.csv` from a local file, and bar widths map to the `amount` column. Grey reference lines behind the bars aid magnitude comparison, while axis labels are formatted with `format` to show compact units.

Loading thumbnail…

Let's make a barchart with D3.js

This example shows a bar chart of the top 10 countries by population, using a linear scale for the x-axis and a band scale for the y-axis. The chart renders population values with tick labels formatted in billions (B) and includes a title and axis label. Built with React and D3 v5, it loads data from a CSV file and draws SVG rectangles, using `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to construct the visualization.

Loading thumbnail…

Shapes with SVG

This example demonstrates a static SVG composition of geometric shapes, including circles and rectangles with varying fill colors, a transformed group, and line and path elements styled through CSS. The page also loads an asynchronous data set of cars, filtering and formatting those under $2000 into a bulleted report using custom JavaScript functions. Rendered in React with raw SVG markup, the visualization pairs basic vector graphics with a practical coding exercise in data processing.

Loading thumbnail…

HTML Cars Report

This example presents a simple report of used cars, filtered by price and displayed as a list. It fetches car data from a simulated asynchronous source, uses JavaScript's `Promise` and `setTimeout` to introduce a delay, and then filters the array with `Array.filter`. The report generates a text summary using the `formatCar` function and renders it into a bulleted list within an HTML page, populated via `innerHTML`. The page uses plain HTML, CSS, and React-free JavaScript, with the data embedded as a JSON string.