Skip to main content
Log in
K

Kaustav Sen

@kaustavSen·21 public vizzes

Loading thumbnail…

scatter plot transition

This animated scatter plot shows the relationship between 13th and 61st month persistency rates for Indian life insurance companies from 2016 to 2021. A dropdown menu allows selection of a specific year, triggering smooth transitions where data points move to their new positions via D3's `transition()` and `duration()`. The visualization uses D3 v7 with SVG rendering, `d3.csv` for data loading, and scales from `d3.scaleLinear`. Each circle represents a company, positioned by x and y axes with grid lines and labeled axis titles.

Apr 23, 2022
Loading thumbnail…

animating flexbox

A button labeled "Remove blocks" triggers a two-stage animation that collapses four square divs within a flexbox container. The example demonstrates how D3.js transitions sequence opacity changes and dimensional resizing, with the divs first fading out over 300 milliseconds, then shrinking their width and margins to zero over 700 milliseconds. The animation toggles between the original and collapsed states with each button click, showcasing the interplay between CSS flexbox layout and D3's transition API for managing HTML elements.

Mar 16, 2022
Loading thumbnail…

D3 Layouts - Stacked area chart

A stacked area chart shows monthly U.S. electric vehicle sales from December 2010 to June 2013, with each category rendered as a filled layer. The code uses `d3.stack` with descending order and `d3.area` to generate SVG paths, colored via `d3.schemeCategory10`. It parses dates with `d3.timeParse` and scales axes with `d3.scaleTime` and `d3.scaleLinear`. Data comes from a remote CSV file, and axes are drawn using `d3.axisBottom` and `d3.axisRight`. The chart is fixed at 800×350 pixels.

Jul 8, 2021
Loading thumbnail…

D3 Layouts - Stacked bar chart

This example shows a stacked bar chart built with D3.js, using the `d3.stack` API to arrange three categories—apples, oranges, and grapes—into cumulative segments for five data groups. The visualization renders directly to an SVG element, with each stacked segment colored via `d3.scaleOrdinal` and the `d3.schemeCategory10` palette. A band scale positions the bars horizontally, while a linear scale maps the cumulative totals to the chart’s height, with the stacking order sorted descending. The input dataset is a hardcoded array of objects.

Jul 7, 2021
Loading thumbnail…

D3 Layouts - Pie charts

This example shows a donut-shaped pie chart that visualizes a small dataset of six numeric values. The chart is rendered as an SVG, with each value displayed as a white label at the centroid of its corresponding arc. The code uses D3’s `pie` layout generator to compute the arc segments, `d3.arc` to define the ring’s inner and outer radii, and `d3.scaleOrdinal` with `d3.schemeCategory10` to assign categorical colors. The chart is drawn using D3’s select/append API on a blank HTML page.

Jul 6, 2021
Loading thumbnail…

D3 "each" custom filtering

A scatterplot of 200 random points in a 1000x1000 space demonstrates D3's `each` method for per-element operations. Clicking a button toggles between a "freak out" state where circles change color and grow, and a normal state where they return to black and small size, all with staggered elastic transitions. The example uses D3 7.0.0 with `scaleLinear`, `axisBottom`, `axisLeft`, and `schemeSet3` for color selection. SVG rendering with animation is achieved through `transition`, `delay`, `duration`, and `easeElasticOut`.

Jul 4, 2021
Loading thumbnail…

D3 complex filtering

An interactive scatterplot demonstrates dynamic filtering of 200 random points using radio buttons to select preset filter modes: none, center, edges, or quadrants. Built with D3 v7, it uses scaleLinear for axes and axisBottom/axisLeft for rendering. Clicking a radio button applies a transition to recolor points based on geometric conditions relative to the midpoint (500, 500), highlighting central clusters, edge outliers, or quadrant-specific groups with schemeCategory10 colors, while rendering via SVG circles.

Jul 4, 2021
Loading thumbnail…

D3 Radio buttons

This example shows a scatterplot of 200 randomly generated points, with radio buttons that filter points by their x-value. Selecting a threshold highlights points above that value in red while leaving the rest black. The code uses D3 v7 to create the SVG, scales, and axes, and attaches click handlers to the radio inputs. The transition method animates the fill color change over 500 milliseconds.

Jul 1, 2021
Loading thumbnail…

D3 sliders

This example shows an interactive bar chart of a small dataset where dragging a vertical HTML range slider recolors bars below a threshold value from light blue to dark blue. The chart uses D3 version 7 scales (`scaleBand` and `scaleLinear`) to position and size SVG rectangles, and React is mentioned as the framework context. The slider’s `change` event triggers a D3 transition over 500 milliseconds to animate the fill color change, demonstrating linked interaction between an HTML input and D3-managed SVG elements.

Jul 1, 2021
Loading thumbnail…

D3 selections

This example demonstrates D3’s selection and data-join mechanism. It maps an array of five numbers to paragraph elements, appending each value as text. Paragraphs whose data values exceed 15 are then filtered and styled with red, bold text using D3's `.filter()` method. The code uses `d3.select`, `.selectAll`, `.data`, `.enter()`, and `.append()` to bind the array and create the DOM nodes, with styling applied via `.style()`.

Jun 27, 2021
Loading thumbnail…

Analysis using scatterplots - Applying suggestions

This interactive visualization displays median family wealth in the US from 1983 to 2016, broken down by race. A scatterplot with animated circles overlays a bar chart, and a dropdown menu lets users switch between White, Black, and Hispanic households. The code uses D3.js v6 with `scaleLinear`, `transition`, and custom reusable chart functions (`scatterPlot`, `barPlot`, `menu`) to handle data filtering and smooth updates. Data comes from the Urban Institute and US Census via the TidyTuesday project, normalized to 2016 dollars.

Jun 21, 2021
Loading thumbnail…

Analysis using scatterplots

A scatterplot and bar chart analysis of median family wealth in the US from 1983 to 2016, split by race. Users can switch between White, Black, and Hispanic via a menu. Data from the Urban Institute and US Census is normalized to 2016 rates. The visualization uses D3.js for SVG rendering and animated transitions when changing race, revealing wealth disparity and trends.

Jun 20, 2021
Loading thumbnail…

Fork of Animated Scatter Plot with Menus

This example visualizes the Iris dataset as an animated scatter plot with interactive dropdown menus for selecting the X and Y dimensions. The code uses d3.csv to load data, d3.scaleLinear and d3.scalePoint for scaling, and d3.axisBottom and d3.axisLeft for axes. Circles animate transitions when dimensions change, with d3.transition and selection.join handling enter, update, and exit states. Hovering triggers tooltips and enlarges points via d3.select and transition.

Jun 12, 2021
Loading thumbnail…

Animated Scatter Plot with Menus

This example presents an animated scatter plot of the Iris dataset, where users can select which quantitative attributes to map to the x- and y-axes via interactive dropdown menus. The visualization uses D3 v6 with SVG rendering, and employs the `selection.join` pattern to smoothly transition circles between positions as axis mappings change. Axes are updated using `d3.axisLeft` and `d3.axisBottom`, with `d3.transition` providing a 1000-millisecond animation effect on circle repositioning and radius growth.

May 31, 2021
Loading thumbnail…

A simple Bar Chart

A simple bar chart displays a dataset of numeric values as vertical bars, with each bar labeled by its value. The chart updates dynamically when the user clicks text prompts to add or remove a data point, animating the bars and labels to reflect the new data. Built with D3 v6, the visualization uses `scaleBand` and `scaleLinear` for scaling, `transition` for smooth animations, and SVG `rect` and `text` elements for rendering. The initial data is hardcoded in the script, and new values are randomly generated.

May 31, 2021
Loading thumbnail…

D3 Selections

Two autonomous SVG panels animate circles whose positions and radii shift continuously via a sinusoidal data generator. Each frame, `setInterval` updates data arrays produced by `makeData`, while `vizDraw` uses D3 selections and the `join` method to bind and redraw circles. The upper panel renders black circles on white, the lower white circles on black, driven by sine and cosine functions with a time-stepped parameter. Both SVGs redraw at 60 frames per second.

May 26, 2021
Loading thumbnail…

Datasaurus Dozen D3 Scatter Plot

This visualization cycles through the twelve datasets of the Datasaurus Dozen, revealing how datasets with nearly identical summary statistics can have wildly different distributions. Each dataset is displayed as a scatter plot for three seconds before transitioning to the next using a joined circle transition. The code uses d3.scaleLinear, d3.axisLeft, d3.axisBottom, and d3.transition to animate the points, axes, and plot title. Data is loaded from the TidyTuesday GitHub repository via d3.csv, with SVG rendering and opacity set on each circle.

May 25, 2021
Loading thumbnail…

Animated Reusable D3 Scatter Plot

This animated scatter plot cycles through the numeric columns of the Iris dataset, updating the x-axis to display each variable while the y-axis remains fixed on the final column. Rendered as SVG, the visualization uses D3’s scaleLinear, axisBottom, axisLeft, and transition APIs to animate circle positions and axis titles every three seconds. The reusable scatterPlot component applies a staggered enter and update transition to the marks.

May 23, 2021
Loading thumbnail…

Reusable D3 Scatter Plot

This example presents a reusable scatter plot built with D3 and React, visualizing the classic Iris dataset. It demonstrates how a modular chart component can be configured with data, axis titles, and margins. The code uses `d3.scaleLinear`, `d3.extent`, `d3.axisLeft`, and `d3.axisBottom` to map data to SVG coordinates, and renders circles with a fixed radius. The chart is driven by an asynchronous fetch of a CSV file, parsed into numeric columns, and displayed using the SVG rendering approach.

May 23, 2021
Loading thumbnail…

D3 Scatter Plot

This D3 scatter plot visualizes the Iris dataset, mapping petal length on the x-axis and sepal width on the y-axis. Each flower is rendered as an SVG circle, with axes and titles added via `d3.select`, `d3.csv`, `d3.scaleLinear`, `d3.extent`, `d3.axisLeft`, and `d3.axisBottom`. The chart fills the browser window and uses custom fonts for tick labels and axis titles.

May 23, 2021
Loading thumbnail…

Episode 4: Sol LeWitt Reproduction with D3

This piece reproduces a Sol LeWitt wall drawing by dividing the viewport into four quadrants, each displaying a distinct pattern of narrow black lines: horizontal, vertical, and two diagonal sets. The design uses D3 selections and masks to clip these lines into separate square regions. The code creates SVG rectangles via `selectAll` and `join`, with each quadrant’s pattern masked using SVG `<mask>` elements. The example relies on D3 v6 and renders purely as SVG, without external data, highlighting the minimal geometry of LeWitt’s original work.

May 15, 2021