S

siddharth171

@siddharth171·19 public vizzes

Loading thumbnail…

Color and Size Legends

This example demonstrates how to construct separate color and size legends for a visualization. The color legend uses a categorical ordinal scale to map fruit names to distinct colors, while the size legend uses a square-root scale to map a numeric domain to circle radii. Both legends are implemented as reusable functions that append groups of circles and text labels to an SVG canvas using D3 v5 methods like `scaleOrdinal`, `scaleSqrt`, and `selection.enter().append`. Data is encoded purely through visual channels, with no underlying dataset.

Loading thumbnail…

World Countries Tree with D3.js

This example shows a hierarchical tree of world countries, organized by continent and subregion, with each country as a leaf node. The tree is rendered as an SVG using D3.js v5, with horizontal links connecting parent nodes to their children, and text labels sized according to depth. The visualization supports pan and zoom interactions via D3's `zoom` behavior. Data is loaded from a JSON file using `d3.json` and processed with `d3.hierarchy` and `d3.tree` for layout.

Loading thumbnail…

Tree with D3.js

This visualization displays a hierarchical tree structure of world regions and countries, with the data nested from continents down to individual nations. The layout uses D3’s `tree` and `hierarchy` functions to compute node positions, while horizontal link paths are generated with `linkHorizontal`. The SVG is dynamically sized to the browser viewport, and the tree is rendered entirely as path elements connecting parent and child nodes, with country names shown as labels within the structure.

Loading thumbnail…

Blanck Canvas with D3.js

A full-screen SVG canvas is rendered with a rounded rectangle filling the entire viewport, creating a blank drawing surface for custom D3.js visualizations. The example demonstrates a minimal setup where the canvas dimensions are set dynamically from `document.body.clientWidth` and `document.body.clientHeight`, and the `select` API from D3 v5 is used to target the SVG element and append the rectangle. The code is structured for React integration with an external `bundle.js` file, and the rendering is purely vector-based using SVG attributes like `width`, `height`, and `rx` for corner rounding.

Loading thumbnail…

Map Interaction with D3.js

This example shows an interactive map of world countries that users can pan and zoom, with countries highlighted in red when hovered over. It renders a Natural Earth projection using D3’s `geoNaturalEarth1` and `geoPath` within an SVG. The map loads world geometry from TopoJSON via `world-atlas` and country names from a TSV file, merging them by ISO code. Zooming is handled with `d3.zoom` and `event.transform` on the entire map group, while each country’s `title` tooltip displays its name.

Loading thumbnail…

Map with D3.js

This map visualization displays the countries of the world in a natural Earth projection, with oceans filled in steel blue and landmasses in light green with subtle black outlines. The map uses a D3.js geoPath and geoNaturalEarth1 projection, alongside the topojson library’s feature function to convert the world-atlas TopoJSON data into GeoJSON features for rendering. Each country is drawn as an SVG path within a 960x500 canvas, and the code also generates a sphere background to represent the Earth’s surface.

Loading thumbnail…

Bowl of Fruit - Click to Select

Five apples sit in a row, rendered as red SVG circles with a single black outline around the currently selected fruit. Clicking any apple updates the selection state in React, changing the stroke to highlight the chosen item. The visualization uses React with the D3.js v5 `scaleOrdinal` for color and radius mapping, while `useState` manages the interactive selection state.

Loading thumbnail…

Bowl of Fruit - Hover to Select

A collection of five apples renders as colored circles that animate in size and position on a hover-enabled SVG. This example demonstrates data joins and transitions using D3 v5, where hovering a fruit selects it with a black stroke, and removal or replacement of data points animates smoothly via `transition().duration(1000)`. The code uses `scaleOrdinal` for color and radius mapping, and `selection.enter`, `merge`, and `exit` to manage dynamic fruit data with unique IDs.

Loading thumbnail…

Bowl of Fruit - Click to Select

A bowl of fruit demonstrates a data join pattern with D3 v5, showing how a list of apples and lemons responds to changes over time. Five apples appear in a rendered bowl, then a fruit is removed, one apple changes to a lemon, and another apple disappears. The `fruitBowl` function uses `scaleOrdinal` for color and radius, while `selection.data`, `enter`, `merge`, and `exit` manage SVG `g`, `circle`, and `text` elements, updating positions with `attr('transform')` and `transition`.

Loading thumbnail…

Bowl of Fruit General Update pattern with D3.js

This example demonstrates the General Update pattern using D3.js to render a bowl of fruit as SVG circles, initially displaying five apples in a row. The code uses D3 selections with `selectAll` and `.data()` to bind an array of fruit objects, then appends circles via `.enter()` with attributes for positioning and styling. It relies on D3 v5’s `select` and `range` utilities within a React framework, rendering the visualization inside an SVG container with explicit width and height.

Loading thumbnail…

World Population Area Chart with D3.js

This area chart displays world population trends over time, with a filled maroon curve and labeled axes for year and population. The visualization uses D3 v5’s `scaleTime`, `scaleLinear`, `area`, and `curveBasis` to generate the SVG path, with `axisBottom` and `axisLeft` providing tick marks and gridlines. Population data is loaded as CSV from a remote dataset and parsed by converting year strings to `Date` objects and populations to numbers. The chart’s title and axis labels are styled via CSS classes.

Loading thumbnail…

Temperature in San Fransisco Area Chart with D3.js

This area chart displays temperature measurements in San Francisco over time, using a filled orange region beneath a smooth curve to emphasize variation across the timeline. The visualization loads data from a CSV file, parses timestamps and numeric temperatures, and renders an SVG with D3.js v5. It uses `d3.scaleTime`, `d3.scaleLinear`, `d3.axisBottom`, `d3.axisLeft`, and the `d3.area` generator with `curveBasis`. A title and labels for time and temperature axes are included, with gridlines and rotated axis text styled via CSS.

Loading thumbnail…

Temperature in San Fransisco Line Chart with D3.js

This visualization displays the temperature in San Francisco over time using a line chart rendered with SVG. The x-axis maps timestamps using a time scale, while the y-axis maps temperature values with a linear scale, both created via `d3.scaleTime` and `d3.scaleLinear`. The line is generated by `d3.line()` with a basis curve, and axes are drawn using `d3.axisBottom` and `d3.axisLeft`. Data is loaded asynchronously from a CSV file using `d3.csv`, with timestamps parsed into `Date` objects and temperatures converted to numbers.

Loading thumbnail…

Cars Scatter Plot with D3.js

This scatter plot visualizes the relationship between horsepower and weight for cars from the auto-mpg dataset, with each circle representing a vehicle. The SVG rendering uses D3.js v5 scaleLinear functions to map data values to screen coordinates, while axisBottom and axisLeft generate the labeled axes with custom tick formatting. Data loads asynchronously via csv(), with a brief transition from the same library’s styling. The chart encodes the two continuous variables directly, using opacity-red circles to reveal density patterns.

Loading thumbnail…

Scatter Plot with D3.js

This scatter plot visualizes the top 10 most populous countries, with each circle’s horizontal position encoding population count and vertical position indicating country name. The chart uses a linear scale for population and a point scale for countries, with grid lines extending across the plot. Built with D3.js (v5), the code loads data from a CSV file, formats axis tick labels using `format('.3s')`, and renders the visualization as SVG elements. The title and axis labels are styled through CSS, and the axes are customized using `axisBottom` and `axisLeft`.

Loading thumbnail…

Customizing Axes with D3.js

This example shows a horizontal bar chart of the populations of the top 10 most populous countries, sourced from a CSV file. The visualization uses D3.js v5 APIs including `d3.csv`, `scaleLinear`, `scaleBand`, `axisBottom`, and `axisLeft` to render SVG bars. It customizes axes by removing domain lines, adding tick marks across the chart, formatting population values with abbreviations (e.g., "1.41B"), and appending custom axis and title labels via D3 selections.

Loading thumbnail…

Making a Bar Chart with D3.js and SVG

This example shows a horizontal bar chart of the populations of ten countries, ordered from largest to smallest, using data from a local CSV file. The visualization renders as an SVG graphic, with the chart’s axes and bars generated through D3.js v5 functions like `scaleLinear` and `scaleBand`, and draws the axis ticks with `axisLeft` and `axisBottom`.

Loading thumbnail…

Let's make a face with D3.js

This example shows how to construct a face using basic SVG shapes—circles, rectangles, lines, and paths—in a static composition. The code uses plain D3.js v3 with SVG rendering, applying SVG `transform` attributes to scale and translate groups of elements. The face is built from a pink circle for the head, green rectangles for eyes, and a light green path with orange stroke for the mouth. The `style.css` file defines stroke properties for the line and path elements, while the HTML provides the SVG container with a fixed width and height.

Loading thumbnail…

HTML Starter

This example displays the make of the first car in a hardcoded JSON dataset by writing it into a page element. It imports the parsed `cars` array from a separate module, accesses `cars[0].make`, and sets it as the text content of a `<pre>` element using the DOM API’s `textContent` property. The page includes a minimal HTML structure with a placeholder element and loads the bundled JavaScript.