N

Nitin Vadhiya

@nitin714·23 public vizzes

Loading thumbnail…

Choropleth Map with Interactive Filtering

This choropleth map colors countries by economy category and lets users click color legend items to filter the map, dimming non-matching countries and highlighting the selected category. Built with D3 v5, it uses d3.geoNaturalEarth1 and d3.geoPath to project the map from TopoJSON data loaded via d3.json, with d3.scaleOrdinal and d3.schemeSpectral for the color scale. The legend and map are rendered as SVG, with pan and zoom handled by d3.zoom and hover tooltips via SVG `<title>` elements.

Loading thumbnail…

Choropleth Map

A choropleth map colors world countries by their economy classification, using a categorical ordinal color scale. The visualization loads geographic data from the world-atlas TopoJSON and TSV files, then renders the map via d3.geoPath with a natural Earth projection. Zooming is enabled through d3.zoom, and countries highlight red on hover. A custom color legend displays the economy categories as colored circles, while the map also shows a blue sphere background. The code uses d3.scaleOrdinal with schemeSpectral ranges to assign colors.

Loading thumbnail…

Color and Size Legends

This example demonstrates two types of legends for a D3.js SVG visualization. The first legend uses a categorical color scale (`scaleOrdinal`) to map fruit names to specific colors, with circles and text labels generated by a custom `colorLegend` function. The second legend uses a square-root size scale (`scaleSqrt`) to map numeric values from 0 to 10 to varying circle radii, with ticks and labels created by a `sizeLegend` function. Both legends are built by appending groups and elements to the SVG, using D3's selection and merge methods to handle updates.

Loading thumbnail…

World Countries Tree

This visualization displays the hierarchical structure of world countries, organized by continent and subregion, using a horizontal tree layout rendered as SVG. The code employs D3 v5’s `tree`, `hierarchy`, and `linkHorizontal` to compute positions and draw curved links, with each node labeled by its region or country name. Users can pan and zoom via `d3.zoom`, with font sizes scaling by node depth. Data comes from a static `data.json` file, and text styling uses the Playfair Display font with white shadows for legibility.

Loading thumbnail…

Cheap Tricks for Interaction

This example shows a world map rendered with D3 v5 using the `geoNaturalEarth1` projection and `geoPath` to draw country boundaries from TopoJSON data. The visualization highlights how simple CSS hover effects can create interactivity, with countries turning red on mouseover. Pan and zoom interaction is implemented via `d3.zoom`, which applies a transform to the map group. The map uses data from the World Atlas TopoJSON and TSV files, with country names added as tooltips through SVG `title` elements.

Loading thumbnail…

Let's make a map with D3.js!

This example demonstrates how to create a world map using D3.js v5, rendering country boundaries as light green SVG paths on a blue sphere. It shows a natural Earth projection with subtle black stroke outlines for each country. The visualization loads GeoJSON data from the world-atlas TopoJSON file using `d3.json`, then converts it to geographic features with `topojson.feature`. The code applies `d3.geoPath` with a `geoNaturalEarth1` projection to draw both the sphere background and individual country shapes onto the SVG canvas.

Loading thumbnail…

Bowl of Fruit - Hover to Select

Five apples animate into a row on an SVG canvas, each scaling up to its assigned radius and color through D3 ordinal scales. Hovering highlights a fruit with a black stroke, updating a selected state via mouseover and mouseout events. D3's data join and transitions handle entering, updating, and exiting elements as the dataset changes over time.

Loading thumbnail…

Bowl of Fruit - Click to Select

Five apples sit in a row on a light background. Clicking any fruit selects it, highlighting it with a black outline while the others remain unselected. Built with React and D3 v5, the visualization maps fruit type to ordinal color and radius scales, rendering each as an SVG circle. The app uses React’s `useState` hook to track the selected fruit’s ID and passes click handlers down to the `FruitBowl` component. Initial data is generated with `d3.range` and random IDs.

Loading thumbnail…

Bowl of Fruit - General Update Pattern Special Cases

This example demonstrates the general update pattern in D3.js by animating a bowl of fruit through several state changes: removing apples, replacing one with a lemon, and filtering another. It shows how enter, update, and exit selections handle circles and text elements across these transitions. The code uses D3 v5 with `scaleOrdinal` for colors and radii, plus selection methods like `.merge()` and `.exit().remove()`. Rendered as SVG, the fruit bowl visualizes state changes through a timed sequence of data mutations.

Loading thumbnail…

Bowl of Fruit - Animated Transitions

A series of fruit-shaped circles animates through add, remove, and type-change transitions as apples are eaten and replaced by lemons. The visualization uses D3 v5’s data join with key functions and `transition().duration()` to morph circle radii and positions over one-second intervals. SVG rendering relies on ordinal scales for color and radius, while `Math.random()` generates unique fruit IDs to track elements across state updates. The code imports `scaleOrdinal`, `select`, and `range` from D3 modules to orchestrate the enter, update, and exit selections.

Loading thumbnail…

Bowl of Fruit - General Update Pattern

Five fruit circles enter an SVG bowl as apples. The example demonstrates the D3 general update pattern, using `selection.enter`, `merge`, and `exit` to handle changes. A `setTimeout` sequence removes an apple, mutates one apple into a lemon, and filters out another, with `d3.scaleOrdinal` mapping fruit types to colors and radii.

Loading thumbnail…

Customizing Axes

A bar chart displays the population of seven countries, sorted by country name along the vertical axis and population count on the horizontal axis. The chart uses `d3.scaleBand` for the categorical y-axis and `d3.scaleLinear` for the numeric x-axis, with axes drawn via `d3.axisLeft` and `d3.axisBottom`. Tick labels on the x-axis are formatted with `d3.format` to abbreviate numbers, and grid lines extend across the plot. Data loads from a CSV file, and the title and axis labels are added as SVG text elements.

Loading thumbnail…

Temperature in San Francisco Area Chart

This area chart visualizes a week of temperature data in San Francisco, using time on the x-axis and temperature on the y-axis. The chart is rendered as a smooth filled region beneath a curved line, created with D3 v5’s `area` and `curveBasis` functions. The SVG graphic includes labeled axes with gridlines, a title, and data pulled from an external CSV file. Axes are generated using `scaleTime`, `scaleLinear`, `axisBottom`, and `axisLeft`, with all elements positioned via margins and transforms.

Loading thumbnail…

Temperature in San Francisco Scatter Plot

This scatter plot visualizes a week of temperature readings in San Francisco, with time on the x-axis and temperature on the y-axis. The chart overlays a smooth blue line (generated with `d3.line` and `curveBasis`) on circular points, using `d3.scaleTime` and `d3.scaleLinear` for the axes. Data is loaded via `d3.csv` from a remote dataset, and the SVG rendering leverages `d3.axisBottom`, `d3.axisLeft`, and `extent` for domain calculations.

Loading thumbnail…

Cars Scatter Plot

A scatter plot displays the relationship between horsepower and weight for a collection of cars from the auto-mpg dataset. Each red, semi-transparent circle represents a vehicle, with its position determined by the scaled values. The visualization includes labeled axes for both variables, a title, and grid lines. Built with D3 v5, the code uses `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to construct the scales and axes, rendering the output as SVG.

Loading thumbnail…

Scatter Plot

This scatter plot visualizes the populations of the seven most populous countries using a horizontal dot chart. Each circle’s x-position reflects population on a linear scale, while the y-axis lists country names. The visualization uses D3 v5 with `scaleLinear` for the x-axis, `scalePoint` for categorical y-positions, and SVG rendering. Data is loaded from a CSV via `d3.csv`, with population values multiplied by 1,000. Axis ticks use `d3.axisBottom` and `d3.axisLeft`, with gridlines and formatted tick labels (e.g., “1.4B”) created through `d3.format`.

Loading thumbnail…

Making a Bar chart using D3.js

This example shows a horizontal bar chart of country populations using D3.js v5, with each bar’s length scaled linearly to the population value and country names on the y-axis. The SVG rendering uses `d3.scaleLinear` for the x-axis, `d3.scaleBand` for the categorical y-axis, and `d3.axisBottom` and `d3.axisLeft` to draw the axes. Data is loaded asynchronously from a CSV file, with population values converted from thousands to raw counts. Bars are appended as `rect` elements and styled with steelblue fill via CSS.

Loading thumbnail…

Loading Data with React & D3

A React app loads a CSV of CSS named colors with d3.csv and maps each color to a one-pixel-high div styled by its RGB hex value, forming a stacked color spectrum. While loading, it displays a “Loading…” message. The d3.csvFormat utility formats the dataset to calculate file size, row count, and column count for a status message, showing React hooks and D3 v5 utilities working together.

Loading thumbnail…

Loading Data with React & D3

A radial burst of CSS named colors loads from a remote CSV file using the D3 `csv` fetch utility, then renders each color as a pie slice via React. The SVG visualization, centered on a 960×500 canvas, uses the `d3.arc` and `d3.pie` APIs to compute arcs, with each slice’s fill set from the row’s RGB hex value. A loading placeholder appears while the data is pending.

Loading thumbnail…

Lets make a face with D3.js

A yellow circle with black outlines forms a face, featuring two eyes and a mouth drawn as an arc. D3.js v5 uses `select` and `arc` to build the SVG elements, with the eyebrows animating via `transition().duration(2000)` to move up and down repeatedly. The face is centered using a translated `<g>` group, and all shapes are rendered as scalable vector graphics.

Loading thumbnail…

Lets make a face. Smiley :)

A grid of randomized smiley faces demonstrates parameterized SVG composition with React and D3. Each face combines a yellow background circle, two eyes, and a mouth, with properties like stroke width, eye offset, and eye radius randomly varied per instance. The code uses D3's `arc` generator to create the mouth path and `range` for iteration, while React components (Face, BackgroundCircle, Eyes, Mouth) assemble the SVG elements within a transformed group. The rendering is ultimately displayed in an HTML page via ReactDOM.

Loading thumbnail…

Loading and Parsing CSV Data

This example demonstrates how to load and parse CSV data from a remote URL using D3.js version 5. The page displays a summary of the dataset—showing file size in kilobytes, row count, and column count—using the `d3.csv` method with a Promise-based `then` callback. The data comes from a GitHub gist containing CSS named colors. An alternative commented-out approach using `fetch`, `async`/`await`, and `d3.csvParse` is also provided, highlighting both modern JavaScript patterns for handling asynchronous data loading.

Loading thumbnail…

Mouse Follower

A smiley face rendered as an SVG circle follows the mouse cursor across the full window. React state tracks the pointer position via an `onMouseMove` handler, and the circle’s `cx` and `cy` attributes update accordingly. The implementation uses React 16.9 with hooks (`useState`, `useCallback`) and renders directly to SVG, with the viewport size set from `window.innerWidth` and `window.innerHeight`.