N

nsadath

@nsadath·25 public vizzes

Loading thumbnail…

Color Legend

This example demonstrates two types of legends for mapping data to visual encodings: a color legend for categorical values and a size legend for quantitative values. The color legend displays circles colored via a d3.scaleOrdinal mapping fruit names to colors, while the size legend uses d3.scaleSqrt to represent numeric ticks as varying circle radii. Both legends are rendered as SVG groups with d3-selection, using join patterns to update circle and text elements. The code is built with React and D3 v6, with the legends generated procedurally from scales rather than external data.

Loading thumbnail…

Art Tree

This visualization displays a hierarchical tree of world regions and countries, rendered as an SVG with branching paths and size-scaled labels that shrink with depth. Built with D3 v6 in React, it loads hierarchical JSON data and uses `d3.tree()` with `d3.hierarchy()` to compute the layout, while `d3.linkHorizontal()` generates curved edges. Pan and zoom interactions are enabled via `d3.zoom()`, and text elements are positioned along the tree with depth-based font sizing.

Loading thumbnail…

Art Tree

This visualization displays a hierarchical tree of world regions and countries, rendered as an SVG with branching paths and size-scaled labels that shrink with depth. Built with D3 v6 in React, it loads hierarchical JSON data and uses `d3.tree()` with `d3.hierarchy()` to compute the layout, while `d3.linkHorizontal()` generates curved edges. Pan and zoom interactions are enabled via `d3.zoom()`, and text elements are positioned along the tree with depth-based font sizing.

Loading thumbnail…

World Countries Tree

This example visualizes the hierarchical structure of world countries, grouped by continent and subregion, as a tree diagram. The layout uses d3.tree and d3.hierarchy to compute node positions, while d3.linkHorizontal generates the curved paths connecting parent and child nodes. The data is loaded from a JSON file and rendered as SVG paths on the full viewport.

Loading thumbnail…

Cheap tricks for interaction

This example demonstrates a world map with zoom and hover interactions. Using D3’s `geoNaturalEarth1` projection and `geoPath`, it renders country boundaries from TopoJSON world-atlas data, with country names loaded via TSV. A D3 zoom behavior on the SVG applies a transform to the map group, enabling pan and scale. Hovering over a country changes its fill to red via CSS, highlighting the selected region.

Loading thumbnail…

Cheap tricks for interaction

This example demonstrates a world map with zoom and hover interactions. Using D3’s `geoNaturalEarth1` projection and `geoPath`, it renders country boundaries from TopoJSON world-atlas data, with country names loaded via TSV. A D3 zoom behavior on the SVG applies a transform to the map group, enabling pan and scale. Hovering over a country changes its fill to red via CSS, highlighting the selected region.

Loading thumbnail…

Map

This example displays a world map using a natural Earth projection, with countries shown as light green shapes against a dark blue sphere background. The visualization is rendered as SVG paths derived from TopoJSON data loaded from the world-atlas package, with each country’s boundaries drawn using D3’s geoPath and geoNaturalEarth1 projection. The code utilizes D3 v6 for data binding and selection, while TopoJSON’s feature function converts the encoded topology into GeoJSON features for rendering.

Loading thumbnail…

Bowl of Fruit - Click to select

This example shows an interactive bowl of fruit where circles represent apples and lemons, colored red and yellow via a d3.scaleOrdinal. Clicking a fruit selects it, logging the ID. The visualization uses d3 transitions to animate circles entering with radius 0, growing to size based on fruit type, and exiting by shrinking. Data changes occur over time: a fruit is removed, an apple transforms into a lemon, and another is filtered out, all rendering through a React-based d3 data join with keyed selection on fruit IDs.

Loading thumbnail…

Bowl of Fruit - General Update Pattern

This example demonstrates the general update pattern in D3, showing how a bowl of fruit changes as apples are removed and replaced with lemons over timed intervals. The visualization renders SVG circles and text labels using D3’s data join with enter, update, and exit selections. The code uses `scaleOrdinal` for mapping fruit types to colors and radii, with `selection.data()`, `merge()`, and `exit().remove()` to handle dynamic updates. React composes the `fruitBowl` function, which updates the scene based on the `fruits` array.

Loading thumbnail…

World population by year 2015

This chart displays world population from 1960 to 2015 as a filled area plot, with time on the x-axis and population on the y-axis. The data comes from a CSV file loaded via `d3.csv` and rendered as an SVG path using `d3.area` with a basis curve. Axes are generated with `d3.axisBottom` and `d3.axisLeft`, while scales use `d3.scaleTime` and `d3.scaleLinear`.

Loading thumbnail…

World population by year 2015

This visualization shows world population trends over time, with an area chart depicting population growth from historical data through 2015. The x-axis represents time in years, while the y-axis displays population counts formatted in billions. Built with React and D3 v6, the code uses `scaleTime`, `scaleLinear`, and the `area` generator with `curveBasis` to render the smooth filled path in SVG. Axes are created via `axisBottom` and `axisLeft`, with data loaded from a CSV file and parsed in the `csv` callback.

Loading thumbnail…

Temperature in San Francisco Line Chart

This visualization shows a week of temperature readings in San Francisco, with time on the x-axis and temperature on the y-axis, displayed as a smooth area chart filled in maroon. The chart includes labeled axes with grid lines and a title, using a time scale for timestamps and a linear scale for temperatures. The code loads CSV data from a remote dataset, parses timestamps with `new Date`, and renders the chart with D3 v6 in an SVG, employing `scaleTime`, `scaleLinear`, `area`, `curveBasis`, and `axisBottom`/`axisLeft`.

Loading thumbnail…

Temperature in San Francisco Line Chart

This example visualizes a week of temperature measurements in San Francisco as a smooth line chart, with time on the x-axis and temperature on the y-axis, along with labeled axes and a title. The data is loaded from a CSV file using `d3.csv`, parsed into `Date` objects and numeric values, and rendered as an SVG. The visualization uses `d3.scaleTime` and `d3.scaleLinear` for scales, `d3.line` with `curveBasis` for the path, and `d3.axisBottom` and `d3.axisLeft` for the axes, all styled via CSS.

Loading thumbnail…

Temperature in San Francisco Line Chart

A line chart displays temperature readings over a one-week period in San Francisco. Time is mapped to the x-axis and temperature to the y-axis, with steel-blue circles marking each hourly observation. The chart is rendered as an SVG using D3 v6, importing functions such as `scaleTime`, `scaleLinear`, `axisBottom`, and `axisLeft`. Data is loaded from a CSV file via `csv`, with axes and labels customized through a styling layer that uses `select` and chained attribute assignments.

Loading thumbnail…

Temperature in San Francisco Line Chart

A line chart displays temperature readings from San Francisco over a week, with time on the x-axis and temperature on the y-axis, using circular dots to mark each data point. The visualization is rendered as an SVG within a React framework, loading data from a CSV file via d3.csv. The code uses d3.scaleTime and d3.scaleLinear for the axes, d3.axisBottom and d3.axisLeft for tick marks, and d3.extent to compute domains, with a title and axis labels added as text elements.

Loading thumbnail…

Temperature in San Francisco Scatter Plot

This scatter plot displays a week of temperature readings in San Francisco, with time on the x-axis and temperature on the y-axis. The visualization uses D3 v6’s `scaleTime` and `scaleLinear` to map data, `axisBottom` and `axisLeft` for labeled axes, and SVG circles to render each observation. Data is loaded from a CSV file via `csv()`, with timestamps parsed into Date objects and temperatures converted to numbers before plotting.

Loading thumbnail…

Scatter Plot

This scatter plot displays the relationship between miles per gallon and horsepower for various car models, with each point representing a vehicle. The visualization uses D3.js v6 within a React framework to scale and position circles on an SVG canvas. The code employs `scaleLinear`, `axisLeft`, and `axisBottom` to construct axes and plot the data, which is loaded from a CSV file. The visualization also includes axis labels, a title, and a semi-transparent steelblue fill for the circles.

Loading thumbnail…

Customising Axis

This example displays a horizontal bar chart of the top 10 most populous countries, with population values formatted in billions using the `d3.format` API. The chart customizes both axes by removing default domain lines and tick marks, adding a label for the population axis, and using a `scaleBand` for countries and a `scaleLinear` for populations. Data is loaded from a CSV file and rendered as SVG elements, with axis ticks styled through CSS.

Loading thumbnail…

Lets make a face with D3 js!

This example displays a horizontal bar chart of population data for the ten most populous countries, using a linear scale for population values and a band scale for country names. The visualization is rendered as SVG within a React framework, with D3 v6 handling data loading via `csv`, scales via `scaleLinear` and `scaleBand`, and axes via `axisLeft` and `axisBottom`. The bars are styled with steelblue fill, and the chart includes margins and a padded band scale to separate each bar.

Loading thumbnail…

Lets make a face with D3 js!

This example builds a simple cartoon face from SVG primitives using D3.js. Yellow circles form the head and eyes, while rectangles serve as eyebrows and an arc generator creates a mouth. The eyebrows animate through a chained `transition().duration()` sequence, moving up and down repeatedly. The code uses `select`, `arc`, and `attr` to position shapes on an SVG canvas within a React framework.

Loading thumbnail…

Cars report

This example displays a single large text message, “test”, centered on the page. The visualization is rendered using plain HTML and CSS within the `index.html` file, which sets the body font size to 13 em and aligns the content. The message is contained in a `div` element with the ID `message-element`, and the page loads a JavaScript bundle via a script tag. The project uses the React framework and is built using the v3 source, with the author being nsadath. No additional data sources or charting libraries are employed in this minimal demonstration.

Loading thumbnail…

HTML Starter

This example displays the text "Hello HTML" in the center of the page, styled with large 13em font size via CSS. It demonstrates a minimal HTML document structure that combines embedded CSS for presentation and JavaScript for console output. The JavaScript code logs the message 'Hello JavaScript!' to the browser’s developer console using the `console.log` API, showing the basic integration of these three web technologies.

Loading thumbnail…

Cars report

This example shows a text-based report of Honda Accord models, displaying each car’s year, make, model, and price after a simulated two-second data-loading delay. It formats a list of cars from an embedded JSON array, filtering out models newer than a specified year. The code uses ES6 modules, JavaScript Promises via `setTimeout`, and DOM manipulation with `getElementById` to update the page’s message element from “Loading…” to the final report.

Loading thumbnail…

Cars report

This example displays the word “Honda” in enormous type, extracted from the first entry of a four-record JSON array of car data. The code stores the car data as a template literal in `cars.js`, parses it with `JSON.parse`, and exports it as a module. React `index.js` imports the array, accesses the `make` property of the first car, and sets it as the text content of a `div` element in the HTML. The page uses plain CSS for centering and a large font size, with no visualization library involved.

Loading thumbnail…

Cars report

This example displays a report of car entries, filtering the data to show only vehicles priced under $1000 and formatting each as a line of text. The code uses React for the project structure, with `index.js` importing car data from `cars.js` and applying a filter and `map` to generate the report. The result is rendered into the DOM by setting the `textContent` of a `message-element` div, while the page styling is defined in `index.html`. The data is a static JSON array embedded in the source.