Amol Kulkarni

Circles on a map

This map uses a natural Earth projection to display countries colored by their economy type, using a spectral color scale derived from UN population estimates data. The visualization supports interactive filtering: clicking a legend item highlights countries with that selected economy while dimming others. Built with D3 v5, the code employs `geoPath` for map rendering, `scaleOrdinal` for color mapping, and SVG circles in the legend for category selection.

Jun 26, 2020

Cheap Tricks for interaction with D3.js

This example shows an interactive world map using D3.js v5 and TopoJSON data from the world-atlas and visionscarto-world-atlas packages. The map renders with a natural Earth projection and SVG paths, letting users pan and zoom via the d3.zoom API. Hovering over a country changes its fill color to red, while country names appear as tooltips via SVG title elements. The code loads geographic and name data concurrently with Promise.all, using d3.json and d3.tsv to build a lookup table.

Jun 26, 2020

Scatter plot with menus

This interactive scatter plot visualizes the Auto MPG dataset from the UCI Machine Learning Repository, showing relationships between car attributes such as horsepower, weight, and acceleration. Two dropdown menus let users select which numeric columns to plot on the x and y axes. The visualization uses d3.v5 with scales, axes, and transitions that animate circles into position when data changes. SVG rendering with gridlines and labeled axes provides clear comparison of the selected variables.

Jun 25, 2020

Choropleth map with interactive filtering

This choropleth map shows global economic data using a color-coded scale, where a legend allows users to filter countries by economy type. Clicking a legend entry dims non-matching countries and highlights those with the selected value; clicking again removes the filter. The visualization loads world country boundaries from TopoJSON and economic classifications from TSV data, then uses `d3.geoPath` with the Natural Earth projection to render the map. The interactive components are built on `d3.scaleOrdinal` for colors and a custom SVG-based legend with click handlers.

Jun 24, 2020

Choropleth map

A choropleth map colors countries according to their income group, using a spectral color scale with a natural Earth projection. The visualization includes a color legend with circles and labels, and supports zooming via d3.zoom. Data is loaded from a TSV file and TopoJSON world atlas using Promise.all, then rendered as SVG paths with d3.geoPath. Hovering highlights countries in red, and tooltips show country names and income group values.

Jun 24, 2020

Color and Size Legends

Two legend components demonstrate distinct encoding strategies in a single SVG: an ordinal color legend maps fruit names to categorical hues, while a square-root size legend scales circle radii for numeric values. The color legend animates circle radii from zero using `transition().duration(1000)`, and both use D3 v5’s `scaleOrdinal`, `scaleSqrt`, and data joins with enter/merge/exit patterns. Reusable functions `colorLegend` and `sizeLegend` render ticks with grouped `g` elements, circles, and text labels spaced via transform translations.

World Countries Tree

This interactive tree diagram visualizes the hierarchical structure of world countries, organized by continent and subregion. The visualization uses a horizontal, left-to-right layout to display the hierarchy, with country names rendered as text nodes. The code employs D3 v5's `tree`, `hierarchy`, `linkHorizontal`, and `zoom` APIs to construct and render the SVG graphic. The root node is labeled "World," with branches for continents like Asia, and subsequent subregions like "Southern Asia" or "Western Asia," leading to individual country labels.

Blank Canvas

A minimal blank SVG canvas fills the browser viewport, rendered as a rounded rectangle against a plain background. The visualization demonstrates a clean slate with no data or marks, serving as a starting point for interactive graphics. The code uses D3 v5, selecting the SVG element and setting its dimensions to the full client width and height, then appending a rect with a corner radius. Styling comes from CSS that fixes the body to the viewport edges and hides overflow.

Cheap Tricks for interaction with D3.js

Let's make a map with D3.js

This example displays a world map using a natural Earth projection, with countries rendered as light green SVG paths and oceans as a dark blue sphere. The visualization loads geographic data from the visionscarto-world-atlas TopoJSON file and uses D3 v5’s `geoPath` and `geoNaturalEarth1` to project the features. TopoJSON’s `feature` API converts the topology into GeoJSON, while SVG paths are appended dynamically to the canvas.

Bowl of Fruit - Hover to Select

Five fruit circles animate into a bowl as apples and lemons, each encoded with distinct colors and radii. Hovering highlights a fruit with a black outline and updates the selected state, while non-selected fruits lose the stroke. The example uses D3 v5 with a data join, `scaleOrdinal` for color and size, and transitions to animate entering, updating, and exiting circles. A `setSelectedFruit` callback triggers re-rendering on mouseover and mouseout, demonstrating interactive selection with animated state changes.

Bowl of Fruit - Click to Select

Five fruit circles appear in a row, with apples in red and one lemon in yellow, rendered as an SVG. Clicking any fruit highlights it with a black stroke to mark it as selected. The example uses D3 v5’s data join, `scaleOrdinal` for color and radius, and `transition` to animate enter, update, and exit states. Each fruit carries a random ID, and timed actions remove fruits or change an apple to a lemon.

Bowl of Fruit - General Update Pattern

This example demonstrates the D3 general update pattern for dynamic data binding. A row of fruit-shaped circles transitions between states as apples are removed, replaced with lemons, or filtered out over timed intervals. The visualization uses d3.scaleOrdinal for color and radius mappings, while enter, merge, and exit selections handle animated circle updates. SVG transitions with duration 1000 animate circle positions and radii, with exit elements shrinking to zero before removal.

Bowl of Fruit - General Update Pattern

Bowl of Fruit - General Update Pattern without transition

Five apples appear in a row, then one is removed, one changes to a lemon, and another is removed in sequence. The example demonstrates D3’s general update pattern without transitions, using `selection.data`, `enter`, `merge`, and `exit` to handle changes. It renders SVG circles with `scaleOrdinal` for fruit color and radius, and uses `setTimeout` to trigger state updates. The data is generated in `index.js` with `range` and `Math.random` IDs.

World Population Area Chart

This area chart visualizes world population growth over time, with the x-axis representing years and the y-axis showing population counts. The chart uses a smooth, curved area fill to emphasize the overall trend of population increase. Built with D3 v5, it employs `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and the `area` generator with `curveBasis` for the smoothed path. The data, loaded from a CSV via `d3.csv` and mapped to `Date` and numeric values, is rendered as an SVG.

Temperature in San Francisco

This visualization displays a week of temperature readings in San Francisco as an area chart, with time on the x-axis and temperature in degrees Celsius on the y-axis. The data comes from the UCI Machine Learning Repository’s Auto MPG dataset, loaded via `d3.csv`. The chart uses `d3.scaleTime` and `d3.scaleLinear` for axes, an `area` generator with `curveBasis` for the filled path, and `d3.axisLeft` and `d3.axisBottom` with gridlines. The SVG is rendered with a margin-based layout, including rotated axis labels and a title.

Temperature in San Francisco

A line chart displays one week of hourly temperature readings in San Francisco, with time on the x-axis and degrees Celsius on the y-axis. The visualization uses D3 v5 to load CSV data via `d3.csv`, scales with `scaleTime` and `scaleLinear`, and generates a smoothed curve using `d3.line` with `curveBasis`. The SVG rendering includes gridlines from axis ticks and a titled plot, with the data sourced from the UCI Machine Learning Repository's Auto MPG dataset.

Cars Scatter Plot

This scatter plot visualizes the relationship between horsepower and weight for cars from the UCI Machine Learning Repository’s Auto MPG dataset. Each red semi-transparent circle represents a car, with axes labeled and a title displayed. The visualization uses D3 v5 with SVG rendering, employing `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to construct the chart. Data is loaded via `csv` from a remote URL, and numeric fields are coerced with the unary plus operator before rendering.

Jun 21, 2020

Customizing axes

This bar chart displays the intelligence stat for eight heroes from the HeroWars game, with values scaled to thousands and a custom tick format that converts large numbers into abbreviated forms like “G” for billions. The visualization uses D3 v5’s `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` APIs, along with custom tick sizes to draw gridlines. Data is loaded from a CSV file and rendered as SVG rectangles, with axes customized by removing domain paths and adding a rotated axis label.

Jun 21, 2020

Bar Chart

This bar chart displays the Intelligence attribute for nine heroes from the HeroWars game, with each hero’s name on the y-axis and a steelblue rectangle representing their intelligence value on the x-axis. The chart uses D3 v5 with the `csv` method to load the data, `scaleLinear` for the x-axis, `scaleBand` for the y-axis, and `axisLeft` and `axisBottom` to render the axes as SVG. The code explicitly parses the Intelligence column as numeric before drawing the rectangles.

Jun 21, 2020

Shapes with SVG and CSS

This example demonstrates basic SVG shapes styled with CSS and inline attributes, rendered in a React application. It shows circles, rectangles, lines, and a path, with fill colors, stroke widths, and a grouped transform applied via scale and translate. The SVG markup uses React’s JSX syntax, and styles are defined in an external stylesheet targeting the `.lines` class. The code directly uses SVG elements like `<circle>`, `<rect>`, `<line>`, and `<path>`, with CSS properties such as `stroke-linejoin` and `stroke-width` controlling appearance.

Jun 19, 2020

HTML Cars Report

This example displays a simple car price report as a bulleted list, highlighting the first vehicle in red. The visualization is built using plain HTML and external CSS styling, with the page structure defined in `index.html` and visual rules in `styles.css`. A monospace font and enlarged text size create a terminal-like aesthetic, while the `.highlighted` class applies the red color to the 2012 Nissan Leaf. The data is hardcoded into the HTML markup rather than loaded from an external source.

Jun 19, 2020