A

Ajit Singh

@ajitsinghkaler·27 public vizzes

Loading thumbnail…

Selecting a year on line chart

This line chart displays world population estimates by region from 1950 to 2100, using data from the UN Population Estimates and Medium Variant datasets. A vertical line marks the currently selected year, which updates as the user moves the mouse across the chart. The visualization is built with D3 v5, using `d3.nest` to group data by region, `d3.line` with `curveBasis` for smooth paths, and `d3.axisBottom` and `d3.axisLeft` for axes. Hovering triggers `d3.mouse` and `xScale.invert` to detect the year, then re-renders the selection line.

Loading thumbnail…

Melting Data for multiple lines - new un Data

This visualization displays world population estimates from 1950 to 2100 as multiple smoothed lines, one per region, colored by category. The chart uses d3.line with curveBasis, d3.scaleTime, d3.scaleLinear, and d3.nest to group data, while a custom colorLegend function renders the ordinal color scale with SVG circles and text. Data comes from UN population estimates CSV files, melted from wide to long format.

Loading thumbnail…

Melting Data for multiple lines

This visualization shows world population estimates for different regions over time as multiple colored lines. It uses a line chart with an ordinal color scale to distinguish each region. The example loads data from CSV files, nests it by region using `d3.nest`, and renders smooth curves with `d3.line` and `curveBasis`. It also includes a custom color legend component and styled axes with grid lines.

Loading thumbnail…

Multiple line Chart

This visualization displays temperature trends over time for multiple cities, with each city represented by a distinct colored line and labeled in a legend. The lines are smoothed using `curveBasis` and data is grouped by city via `d3.nest()`, while axes and scales are built with `d3.scaleTime`, `d3.scaleLinear`, and `d3.axisBottom`/`d3.axisLeft`. The color scale uses `d3.scaleOrdinal` with `schemeCategory10`, and the SVG rendering includes styled grid lines and a title. Data is loaded as CSV from an external URL.

Loading thumbnail…

Circles on a map

This example displays a natural Earth projection world map with semi-transparent teal circles overlaid on each country, sized according to estimated 2018 population data from the UN. The map uses `d3.geoPath` and `d3.geoNaturalEarth1` to render country outlines from TopoJSON, while `d3.scaleSqrt` maps population values to circle radii. A legend with `d3.scaleSqrt` ticks and a color legend for missing data accompany the visualization, which supports zooming via `d3.zoom`.

Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot visualizes the auto-mpg dataset, allowing users to explore relationships between vehicle attributes by selecting different columns for the x- and y-axes via dropdown menus. Built with D3 v5, the visualization uses `d3.scaleLinear`, `d3.axisLeft`, and `d3.axisBottom` to render axes, while `d3.csv` loads the data. Each point animates into position using `transition.attr` with staggered delays (i * 10 milliseconds), and the SVG circles change coordinates smoothly when the selected dimensions change.

Loading thumbnail…

Interactive Chloropleath Map

This interactive choropleth map displays global economic classifications by country, with a color-coded legend that filters and highlights selected regions. The map uses D3 v5 with `geoNaturalEarth1` projection, `geoPath` for rendering SVG paths, and TopoJSON data from the world-atlas dataset. Users can click legend categories to emphasize matching countries while dimming others, and zoom/pan the map via D3’s `zoom` behavior. A spectral color scale maps ordinal economy values, with tooltips showing country names and values.

Loading thumbnail…

Chloropleath Map

This example displays a world choropleth map coloring countries by economy type, using a natural Earth projection and an ordinal color scale. It loads geographic data from the World Atlas TopoJSON and TSV files, rendering SVG paths with `d3.geoPath` and TopoJSON’s `feature`. A zoom behavior via `d3.zoom` pans and scales the map, while a custom color legend built with SVG circles and text shows the categorical values. The map also includes tooltips via appended `title` elements, with a dark blue sphere background and black country strokes.

Loading thumbnail…

Color and size legends

This example demonstrates two custom SVG legends: a color legend for ordinal data and a size legend for quantitative data. The color legend maps fruit names to distinct hues using d3.scaleOrdinal, while the size legend uses d3.scaleSqrt to translate numeric values into circle radii. Both legends are rendered as SVG groups with circles and text labels, positioned via transform attributes. The reusable functions colorLegend and sizeLegend accept configuration props like spacing and textOffset, and the size legend uses d3.scaleSqrt.ticks to generate labeled values.

Loading thumbnail…

World Countries Tree-labels

This example shows a hierarchical tree layout of world countries, organized by continent and subregion, with each country name displayed as a text label. The visualization uses D3 v6’s `tree` layout and `linkHorizontal` path generator to draw curved links between parent and child nodes. Labels are rendered as SVG `<text>` elements with font sizes decreasing by depth, and a D3 `zoom` behavior enables panning and scaling. The data is loaded from a local JSON file, and white text shadows improve readability over the drawn paths.

Loading thumbnail…

Tricks for interactions

This example demonstrates interactive zooming and hover highlighting on a world map rendered with SVG. The map uses D3’s `geoNaturalEarth1` projection and `geoPath` to draw countries from TopoJSON data enriched with country names from a TSV file. A zoom behavior updates the map’s transform on pan and zoom events, while CSS hover states turn countries red. The code relies on D3 v5 and the TopoJSON library to load and convert geographic features.

Loading thumbnail…

World Countries Tree

This visualization displays a hierarchical tree of world countries, organized by continent and subregion. The code uses D3.js version 6 to load a JSON data file, compute a tree layout, and render the connections between nodes as horizontal links using SVG paths. The implementation relies on D3's `tree`, `hierarchy`, and `linkHorizontal` functions to generate and draw the structure onto a full-window SVG canvas.

Loading thumbnail…

Blank Canvas

This example demonstrates an empty SVG canvas that fills the browser window and displays a rounded rectangle as its only visual element. The code uses d3.select to target the SVG element and sets its width and height to match the available viewport dimensions, then appends a rect with a corner radius. The D3 v6 select method and attribute chaining handle the SVG drawing, while the fixed CSS positioning ensures the canvas remains anchored to the viewport.

Loading thumbnail…

Make a map with D3 js

This example shows a natural Earth projection map of the world, with countries rendered as light green SVG paths on a dark blue sphere. The visualization loads world-atlas TopoJSON data via `d3.json`, converts it to GeoJSON using `topojson.feature`, and draws the map with `d3.geoPath` and `d3.geoNaturalEarth1`. The sphere background is a separate path generated from a generic sphere object, while country boundaries appear with semi-transparent black strokes.

Loading thumbnail…

Bowl of Fruit: Hover to select

A bowl of fruit demonstrates animated SVG transitions and mouse interaction. Five circles, initially apples, move, resize, and change color over time; one apple becomes a lemon, and fruits are removed. Hovering over any circle highlights it with a black stroke and updates a `selectedFruit` state, triggering a re-render. The example uses D3 v5's `select`, `scaleOrdinal`, and `transition` APIs, rendering with SVG and animating circle radius, color, and position over one-second durations.

Loading thumbnail…

Bowl of Fruit: Click to select

Five apples and a lemon appear as colored circles in an SVG bowl, where clicking any fruit selects it with a black stroke outline. The example demonstrates animated data joins with D3 v5, using `scaleOrdinal` for color and radius mappings, `transition.attr` for smooth enter/exit animations, and event handlers on merged selections to update the selected fruit state.

Loading thumbnail…

Nested Elements

This example demonstrates nested SVG elements by rendering a bowl of fruit as circles within groups. It shows how to manage enter, update, and exit selections with D3 v5, using `scaleOrdinal` for color and radius mapping. The visualization updates over time via `setTimeout`, removing fruits, changing an apple to a lemon, and filtering the data array. Rectangles anchor the bowl, while groups position each circle and its corresponding text label.

Loading thumbnail…

Learn Selection

A fruit bowl of five circles transitions through a sequence of changes: one circle shrinks and disappears, a circle changes from red (apple) to yellow (lemon), and another is removed. The example demonstrates D3's selection API with `selectAll`, `.enter()`, `.merge()`, and `.exit()`, using `.transition().duration()` to animate position, fill, and radius. It uses `scaleOrdinal` for color and radius mapping, and `range` to generate initial data.

Loading thumbnail…

World Population: Area Chart

This area chart visualizes world population growth from 1950 to 2015, using a smooth curved line to trace rising population values over time. The visualization is built with D3 v5, employing `d3.area` with `curveBasis` to generate the filled path, alongside `scaleTime` and `scaleLinear` for axes. The code loads CSV data from VizHub, applies axis tick formatting to abbreviate large numbers, and includes gridlines and labeled axes. The chart is rendered as SVG within an HTML page, with styling handled by an external CSS file.

Loading thumbnail…

Temprature in San Fransisco: Area Chart

This area chart visualizes temperature measurements in San Francisco over time, using a smooth, curved line to connect the data points and filling the space beneath with a steel-blue color. The chart includes labeled axes for time and temperature, a title, and a grid of tick lines. Built with D3.js v5, the visualization uses the `area` and `curveBasis` functions to generate the path, `scaleTime` and `scaleLinear` for coordinate mapping, and `axisLeft` and `axisBottom` for the axes. Data is loaded from a remote CSV file containing timestamps and temperature values, with grid lines and tick labels styled via CSS.

Loading thumbnail…

Temprature in San Fransisco: Line Chart

This line chart shows temperature trends in San Francisco over time, with the x-axis representing time and the y-axis representing temperature. The visualization is rendered as an SVG using D3 v5 and the `d3.select`, `d3.scaleTime`, `d3.scaleLinear`, `d3.axisBottom`, `d3.axisLeft`, and `d3.line` APIs. Data is loaded from a CSV file, and the line is smoothed using `curveBasis`. Axis grid lines are styled, and titles and labels are added.

Loading thumbnail…

Temprature in San Fransisco

This example visualizes temperature readings in San Francisco over time, plotting each data point as a semi-transparent purple circle on a scatterplot. The chart uses D3 v5’s `scaleTime` and `scaleLinear` for the axes, with `axisBottom` and `axisLeft` generating gridlines and tick marks. The data is loaded via `d3.csv` from a remote dataset, parsed into `Date` objects and numeric temperatures, then rendered as SVG circles. The visualization also includes axis labels and a title, with margins and a fixed SVG canvas size of 960 by 500 pixels.

Loading thumbnail…

Auto Mpg Scatter plot

This scatter plot displays the relationship between weight and horsepower for cars from the auto-mpg dataset. The visualization uses purple, semi-transparent circles to represent individual data points, with labeled axes and gridlines for readability. The code employs d3.csv to load the data, d3.scaleLinear, d3.extent, d3.axisLeft, and d3.axisBottom for scales and axes, and appends SVG circles to render the plot.

Loading thumbnail…

Scatter Plot

This scatter plot displays the population of the top 10 most populous countries, with each country’s name on the y-axis and its population on the x-axis. The visualization uses D3 v5’s `csv`, `scaleLinear`, `scalePoint`, `axisLeft`, and `axisBottom` APIs to load data, scale positions, and render axes. SVG circles represent each country, colored steelblue, with a formatted x-axis showing billions. Data comes from a local CSV file, and margins are applied to position the chart within the SVG canvas.

Loading thumbnail…

Bar Chart Axes

This example shows a horizontal bar chart ranking the ten most populous countries, with population values formatted in billions and a labeled x-axis. Built with D3 v5, it uses `scaleLinear` and `scaleBand` to map population and country names, while `axisBottom` and `axisLeft` generate the axes. The chart reads from a CSV file, renders as SVG, and removes default axis domain lines for a cleaner look.

Loading thumbnail…

Creating a bar Chart

This example shows a horizontal bar chart ranking the populations of ten countries from a CSV file, using rectangular bars scaled to population values on an x-axis. It relies on D3 v5 modules including `csv`, `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to load the data, map values, and render axes. The SVG is drawn with a margin-based layout, where bands represent countries on the y-axis and bar widths reflect population sizes. The visualization demonstrates a basic, reusable pattern for building bar charts with D3's data-join and SVG rendering.

Loading thumbnail…

Learn to draw smile with d3

An animated smiley face drawn with SVG demonstrates reusable D3 features. Yellow circle, black-outlined head, and eyes are static shapes, while the eyebrows animate through chained `transition.attr` calls that move them up and down over 500ms intervals. The mouth uses the `d3.arc` generator, with a semicircular path defined by inner/outer radii and start/end angles. Coordinates rely on explicit SVG attributes, and the face is centered via a `translate` transform on a group element.