R

Rubens

@rubens2005·62 public vizzes

Loading thumbnail…

PNP - Projetos no Prazo

A data-visualization example shows the geometric composition of a project-management chart titled "PNP - Projetos no Prazo," using only basic SVG shapes: a dark blue triangle for the main indicator, four purple vertical pillars, and orange and green horizontal rectangles as foundations. The visualization uses React to render SVG elements, with d3.v5 loaded for potential utility but no explicit D3 API calls. The code defines reusable components for each shape, with colors from a separate cores module and fixed dimensions.

Loading thumbnail…

PNP - Projetos no Prazo

This visualization shows a project management framework called "PNP - Projetos no Prazo," combining a triangular header for the main metric with four vertical pillars labeled Estrutura, Duração, Simulação, and Priorização, sitting on a base of supporting fundamentals like Análise, Qualidade, Gerenciamento do Cronograma, and Estatística. Built with React 16.12 and D3 v5, it renders entirely as SVG, using reusable React components for each structural layer. The layout uses computed gaps and fixed pillar widths to distribute elements evenly across the 320-pixel-wide composition.

Loading thumbnail…

The Face - Part V

A smiling face composed of a yellow circle, two eyes, and an arc-shaped mouth is rendered in SVG, centered within a 960 by 500 viewport. React 16.12 components structure the drawing, while D3 v5’s `arc` function generates the mouth path. The background circle uses a thick black stroke, and all elements are positioned via a single SVG translation.

Loading thumbnail…

PNP - Projetos no Prazo

This example presents a static SVG bar chart titled “Projetos no Prazo” (Projects on Schedule), built with React and rendered using D3 v5. It visualizes a project management process divided into four categories—Estrutura, Duração, Simulação, and Priorização—shown as green vertical bars above a gray base layer. The base contains two yellow horizontal segments labeled “Análise” and “Qualidade.” The chart is hardcoded with fixed coordinates and dimensions, using SVG `rect`, `path`, and `text` elements, with no interactive or dynamic data-binding logic applied.

Loading thumbnail…

Loading and Parsing CSV Data

This example demonstrates how to fetch and parse data from a remote URL using JavaScript. It uses the Fetch API to request a webpage from Alura, a Brazilian educational platform, and then logs the response text to the console. The code chains a promise to handle the asynchronous response, first retrieving the raw text before printing it. No visualization is rendered; the focus is solely on the initial data-loading step, making it a minimal foundation for later charting with libraries like D3.js.

Loading thumbnail…

Path Animation

This visualization charts personal body weight measurements over time, showing a single person’s weight fluctuations from 2008 to 2011 in kilograms. A slider input animates two small circles along the rendered weight paths, with each circle tracing a separate line. The chart uses d3.scaleTime and d3.scaleLinear for axes, d3.line with curveBasis for smoothing, and d3.nest to group data by person. The slider controls circle positions via the SVG path’s `getPointAtLength` method, while a color legend and gridlines are added using d3.scaleOrdinal and axis components.

Loading thumbnail…

Line Chart with Multiples Lines

This line chart tracks personal body weight over time, plotting individual weight measurements taken from June 2008 onward. The chart uses multiple lines to represent different people, though only one person ("Rub") appears in the dataset. It uses D3.js with a time-scaled x-axis and linear y-axis, rendering smooth curves via `d3.curveBasis`. A color-coded legend, generated by a custom `colorLegend` function, identifies each person's line.

Loading thumbnail…

Drag & Drop

A drag-and-drop interaction demonstrates how a single image square can be moved between a series of grid cells using the native HTML5 Drag and Drop API. The example uses a random Unsplash image as the draggable fill element, which gains a highlighted border while held and a dashed outline on hoverable empty containers. JavaScript event listeners handle `dragstart`, `dragend`, `dragover`, `dragenter`, `dragleave`, and `drop` to manage state changes and reposition the image, with CSS controlling the visual feedback for dragging and hovering states.

Loading thumbnail…

Hello Graphviz

This example displays a minimal directed graph in which the node "Hello" points to two nodes, "Graphviz" and "VizHub". It renders the graph using the `d3-graphviz` library, which converts the DOT language text specification into an SVG visualization. The code creates the graph by calling `select("#graph").graphviz().renderDot(dotText)`, with fade animations disabled. The DOT source string is also injected into the page as text via `select('#dotText').html()`, allowing a side-by-side view of the graph and its defining code.

Loading thumbnail…

Hello GraphViz

This example shows a minimal directed graph with two nodes, "Hello" and "Graphviz", connected by an edge. It displays the Graphviz DOT source code in plain text above the rendered graph. The page uses the Viz.js library, which compiles Graphviz to JavaScript via Emscripten, to convert the DOT string into an SVG diagram. The `Viz` function is called directly in JavaScript to generate the graph output.

Loading thumbnail…

Growing Circle

A growing circle demonstrates interactive radius adjustment in a React and D3.js visualization. The example renders a single steelblue SVG circle centered on a 960x500 canvas, with buttons to increment or decrement its radius by 20 pixels. The code uses ReactDOM to mount the initial SVG, while D3's `select` API targets the circle by ID to update the `r` attribute, with a minimum radius constraint preventing negative values.

Loading thumbnail…

A

This example draws a stylized red six-pointed star with an inner white triangular star, rendered as static SVG paths. The code uses React to create the SVG elements and defines two `path` elements with explicit coordinate strings for the outer and inner shapes. It runs within a React component, uses D3 v5 for no data processing, and renders via the `react-dom` render method into the `#root` element. The drawing is positioned within a fixed 960 by 500 viewBox, with a black stroke and specified stroke width.

Loading thumbnail…

SVG Path

This example demonstrates SVG path drawing primitives by rendering a grid of vertical and horizontal lines using D3 v5. It creates a 10x5 lattice of green strokes on an SVG canvas with a viewBox of 100x50 units. The code uses `d3.select` to append the SVG element and `d3.range` to generate data arrays, then appends path elements whose `d` attribute strings are constructed with template literals for `M` (moveto), `V` (vertical line), and `H` (horizontal line) commands. The rendering relies entirely on SVG path syntax without additional geometry libraries.

Loading thumbnail…

Line Chart with Multiples Lines - By Year

The visualization displays personal body weight measurements over time, segmented into individual annual series that are overlaid on a single chart. Each year's data forms a separate multi-hued line, allowing year-over-year comparison of weight fluctuations. Built with D3 v5, the code uses `scaleTime` and `scaleLinear` for the axes, `nest()` to group entries by person and year, and `line()` with `curveBasis` to generate smooth paths. The data is parsed from a CSV and rendered as SVG, with a categorical color legend for each year.

Loading thumbnail…

The Face

Built with React and D3 v5, this example renders a smiley face as an SVG graphic. It uses D3's `arc` generator to create the mouth shape, while the head and eyes are simple SVG circles. The face is centered with a yellow head, black stroke, and positioned features defined by fixed pixel offsets. The configuration sets a stroke width, eye radius, and mouth dimensions, resulting in a static composition that is halfway to a complete smile.

Loading thumbnail…

The Face - Part IV

Built with D3 v5 and React, this SVG visualization depicts a yellow smiley face with black stroke outlines, including two eyes and an upward-curving mouth arc drawn using `d3.arc`. The head is a circle with a radius derived from the viewport height, while each eye is a separate SVG circle positioned via absolute offsets. The code defines reusable React components for the head and eye, composing them inside a translated group element, with the mouth path generated from an arc generator’s start and end angles. No interactive behavior or data binding is present; the example purely demonstrates static geometric composition.

Loading thumbnail…

Crazy Face

A cartoon face composed of layered SVG shapes—circles, ellipses, rectangles, and an arc—appears centered on a 960×500 canvas. The code uses React to render the SVG elements and d3.arc from D3 v5 to generate the mouth’s path. Each facial feature is positioned via fixed coordinate offsets, with the head, eyes, nose, and mouth filled in blue, yellow, and orange tones. The example demonstrates combining React’s declarative component structure with D3’s geometric utilities for static, data-free visual composition.

Loading thumbnail…

Let's make a face with d3.js!

A smiling cartoon face is drawn on a light blue SVG canvas as a green circle with dark blue eyes, eyebrows, and an arc-shaped mouth. The eyebrows perform a quick up-and-down transition animation. Built with D3 v5, the example selects the SVG element and uses the `arc()` generator to create the mouth path. Eyebrow motion relies on chained `transition()` calls that adjust the group’s transform attribute over 1.5 seconds, with no external data source.

Loading thumbnail…

Bowl of Fruit - Click to Select

This interactive visualization presents a bowl of fruit as five SVG circles, each colored red for apples or yellow for lemons using D3's scaleOrdinal color scheme. Clicking any circle selects it, applying a black outline via a stroke property based on the current selection state. The React-based implementation uses D3's radiusScale to vary circle sizes and manages selection through React's useState hook, with the index.js file generating random fruit types and the FruitBowl component rendering the clickable SVG elements.

Loading thumbnail…

Average Circle Overlaped

This interactive visualization compares project schedule risk distributions using overlapping circles. A dropdown menu selects among three probability distributions—triangular, bootstrap, and bootstrap-rate—derived from a fictitious schedule simulation dataset. For each selection, 1,000 duration values are plotted as concentric circles scaled by the square root of each value using `d3.scaleLinear`, with transitions animating radius changes via `transition.duration`. A red circle highlights the mean duration for the chosen distribution. The SVG rendering uses D3 v5 data joins and the custom `dropDownMenu` module.

Loading thumbnail…

Average Circle

The visualization shows failure times for air-conditioning equipment in two aircraft, presented as concentric circles radiating from the center of an SVG canvas. A dropdown menu lets viewers switch between the first and second aircraft datasets, triggering animated transitions where each circle’s radius scales proportionally to the square root of its value. A persistent yellow circle highlights the mean failure time, while white circles represent individual data points. Built with D3 v5, the code uses `scaleLinear`, `transition`, and custom `dropDownMenu` logic to handle the interactive updates. Data comes from Proschan (1993) as cited in Davison and Hinkley (1997).

Loading thumbnail…

Project Schedule Visualization

This visualization shows a project schedule as a network of activities and their dependencies, with each circular node representing a task and light-blue links representing finish-to-start relationships. The data comes from the RanGen project management dataset, stored as JSON. Using d3.forceSimulation with forceX, forceY, forceCollide, and forceManyBody forces, the code positions nodes on a canvas and redraws the network on every simulation tick via the Canvas API.

Loading thumbnail…

Canvas Force Tutorial

This example demonstrates a force-directed network graph of social connections, rendered on a Canvas element using D3 v5’s `forceSimulation` API. It shows nodes (people) connected by weighted links, with positions updated each tick via `update()`. The simulation applies `forceManyBody`, `forceLink`, `forceCollide`, and `forceX`/`forceY` forces to arrange the graph, reading node and edge data from a CSV file.

Loading thumbnail…

Project Report

This example renders a text-based project report from JSON data about project activities. It uses JavaScript promises and DOM manipulation to load the data and display a filtered list of activities with durations of 80 days or less. The code filters activities, formats each one with its ID, name, duration, and critical status, then inserts the result into an HTML page styled with Ubuntu font. The visualization demonstrates a simple data-processing pipeline using standard JavaScript APIs rather than specialized visualization libraries.

Loading thumbnail…

HTML Activities Report

This example presents a static HTML activities report, listing seven numbered project items (A1 through A7) alongside their associated progress counts. It highlights three items—A1, A2, and A3—as critical by applying a red CSS class. The rendering uses plain HTML with an unordered list, styled by an external stylesheet (`styles.css`) that sets a monospace font at 2em, while the `.highlighted` class colors critical entries red. No JavaScript or interactive libraries are involved; the visualization relies solely on semantic markup and CSS for its visual hierarchy.

Loading thumbnail…

Blank Canvas

This example displays an empty, rounded rectangle that fills the entire browser window, providing a blank canvas for potential visualization content. The SVG is dynamically sized to match the viewport dimensions using `document.body.clientWidth` and `document.body.clientHeight`. The code then attempts to fetch and parse an external HTML page using D3 v5's `d3.html()` method, logging the downloaded document to the console, though the result is not yet rendered visually.

Loading thumbnail…

Song's Note: Start & End - With choice

This interactive D3 visualization explores a MIDI song by displaying each track's notes as horizontal bars, with x-position indicating start time and bar width representing duration. A color legend for MIDI files lets viewers select which song to examine, while a second legend filters individual tracks. The scatter plot uses `d3.scaleLinear` for axes and `d3.scaleOrdinal` with `d3.interpolateViridis` for note colors, with `transition.duration` and `.delay` animating the bars. Data comes from the Million Song Dataset, rendered as SVG.

Loading thumbnail…

Update and Enter - Another Take

A sequence of blue circles enters, shifts to green, and updates to orange as the dataset grows and shrinks over time; circles removed from the data turn red before disappearing. This animation demonstrates how D3 v5’s `selectAll`, `exit`, and `enter` selections handle data changes, using svg transitions with a 700-millisecond duration for updates and 500-millisecond for exits. The underlying data is a simple array of x-coordinates, rendered as SVG circles with a fixed y-coordinate and radius, driven by timed `render` calls in a static HTML page.

Loading thumbnail…

The top 10 most populous countries

This bar chart displays the 2018 population estimates for the ten most populous countries, sourced from the UN World Population Prospects. The visualization uses D3 v5 to create an SVG chart with dark blue bars, employing `scaleLinear` for the x-axis, `scaleBand` for the y-axis, and `axisLeft`/`axisBottom` for tick marks. The code loads the CSV data, multiplies population values by 1000, and renders the chart with a light blue background.

Loading thumbnail…

Updatable D3.js Charts.

Two updatable bar charts demonstrate how D3.js v5 charts can be modified after initial rendering. The example uses JavaScript closures to create reusable chart functions, with `select` and `max` imported from D3. The charts display arrays of running miles and temperature data, rendered as SVG rectangles with animated transitions. The `transition().duration(900)` API animates updates to data, width, and fill color, while `.data()` and `.fillColor()` methods allow property changes at runtime.

Loading thumbnail…

Legend Interaction

Two interactive color legends let users select a MIDI file and then one of its tracks from a local dataset. The legends use d3.scaleOrdinal and d3.schemeSpectral for the file palette, while tracks use a scale with a numeric range. Clicking a legend item highlights it at full opacity, dims unselected items to 0.2 opacity, and triggers callbacks to re-render both legends. The code imports colorLegend from a separate module and renders SVG text and circles into groups.

Loading thumbnail…

Bowl of Fruit - Click to Select and to Deselect

Five fruit circles appear in a row, initially all apples, then one changes to a lemon and two apples are removed over time. Clicking a fruit selects it with a dark blue stroke, and clicking the selected fruit again deselects it. The visualization uses D3 v5 with a data join pattern, `scaleOrdinal` for color and radius, and `transition().duration(1000)` to animate enter, update, and exit states.

Loading thumbnail…

Notes Frequency of a Song

This bar chart shows the frequency of each musical note in a MIDI song, "Poor Little Fool," from the Million Song Dataset, specifically track #12. The data is loaded via `d3.csv` and processed with a custom module that sorts notes by octave and pitch. The visualization uses `d3.scaleBand` for the y-axis, `d3.scaleLinear` for the x-axis, and renders SVG rectangles with a warm orange fill on a peach background. The chart includes axes generated with `d3.axisLeft` and `d3.axisBottom`.

Loading thumbnail…

Song's Note Scatter Plot

A scatter plot maps MIDI tick time along the x-axis against musical note pitch on the y-axis, visualizing the note sequence of track #12 from the Million Song Dataset's "Poor Little Fool." Each circle represents a note event, with opacity creating density effects. The visualization uses d3.csv to load data, d3.scaleLinear and d3.scaleBand for scales, and d3.axisLeft/axisBottom with tick lines for grid rendering. Note ordering is computed via a custom helper that sorts notes by octave and pitch class.

Loading thumbnail…

Song's Note Zoom Scatter Plot

This zoomable scatter plot visualizes the individual music notes from a MIDI song track, plotting each note’s start time in Midi ticks along the x-axis against its pitch class and octave on the y-axis. The data, sourced from the Million Song Dataset, is rendered as semi-transparent circles using SVG. The visualization uses D3 v5’s `scaleLinear`, `scaleBand`, `axisBottom`, `axisLeft`, and a `zoom` behavior to enable panning and scaling. Notes are ordered using a custom helper function that sorts by octave and chromatic pitch.

Loading thumbnail…

Song's Note: Start & End

This scatter plot visualizes the start and end points of each music note in a MIDI track, using the note's name on the y-axis and MIDI tick time on the x-axis. Rectangles encode the duration of each note, while the SVG rendering is powered by D3 v5’s `scaleLinear`, `scaleBand`, `axisBottom`, and `axisLeft`. The data comes from the Million Song Dataset and is loaded via `csv`, with labels ordered by a custom note–octave sorting function. The chart supports zooming through the d3 `zoom` event.

Loading thumbnail…

Song List

This visualization displays a summary of a dataset from the Million Song Dataset, showing the row count, column count, and size in kilobytes, followed by the first ten rows as JSON. It loads the data using `d3.json` from a CSV hosted on VizHub, then prints the results as text in a terminal-style layout with green monospace text on a black background. The code uses D3 v5’s `select`, `json`, and `csvFormat` to fetch and format the data, appending `<pre>` and `<hr>` elements to the body.

Loading thumbnail…

Project and Activity List

This example displays a plain-text summary of a tabular dataset about real projects. It loads two TSV files, `projects.tsv` and `activities.tsv`, using D3’s `tsv` function, then renders a report to the page via `select('body')`. The report shows the number of rows, columns, and size in kilobytes for each table, followed by a JSON-formatted preview of the first ten rows. The console output is styled with a black background and green monospace text.

Loading thumbnail…

Structuring D3 code with ES6 classes

Two interactive line charts show monthly data points, with buttons to change the line color or regenerate random data. Built with D3 v5, the example structures chart logic as an ES6 `Chart` class that handles scales, axes, and rendering. The code uses `d3.scaleTime`, `d3.scaleLinear`, `d3.axisBottom`, `d3.axisLeft`, and `d3.line` to draw SVG paths, and demonstrates public methods like `setColor` and `setData` for updating the visualization.

Loading thumbnail…

Hello Sound!

This example uses the Web Audio API to play two sawtooth tones a major third apart, each triggered sequentially after a one-second pause. The code converts MIDI note numbers to frequencies using a mathematical formula, then creates and starts an oscillator through an AudioContext. Oscillator lifecycle events schedule the second note, while a biquad filter is instantiated but not connected. The page itself displays only a static message, with styling handled by CSS and no D3 visualization logic present despite the D3 library being loaded.

Loading thumbnail…

Coding Challenge #114: Bubble Sort Visualization

A bubble sort visualization renders 30 random-height vertical bars as SVG line elements on a light green background. The code uses d3-selection’s `selectAll`, `enter`, `merge`, and `exit` to update the bars. After one second, the values are sorted descending via native JavaScript `Array.sort`, swapping the bar heights in place. D3 v5’s `attr` setter maps each line’s x-position from its index and y2 from its value.

Loading thumbnail…

Double Diamond - Design Thinking

This example visualizes the Double Diamond design-thinking process as a series of connected, red polygon outlines. The code draws five distinct diamond shapes across the SVG canvas, each built from hardcoded coordinate arrays and rendered as closed line loops. Using D3 v5’s `select` and `range` modules, it maps raw coordinates to scaled positions before generating line elements via the `enter()` method. The visualization focuses on the geometric progression of the diamonds, representing divergent and convergent phases without animation or interactivity.

Loading thumbnail…

Pentagon

This visualization displays a pentagon composed of purple lines, with a central point connected to each of the five vertices by spokes, alongside the pentagon’s edges. The shape is generated mathematically using D3’s `range` function to compute five evenly spaced angles, then calculating vertex coordinates with sine and cosine. The code uses `svg.selectAll('line').data(lines)` to bind the line data and appends SVG `line` elements with attributes for position and stroke styling. All rendering is done with D3 v5 in an SVG container.

Loading thumbnail…

Color and Size Legends

This example demonstrates two distinct legend techniques for encoding data values. The color legend maps ordinal categories like "apple" and "lemon" to distinct colors using `d3.scaleOrdinal`. The size legend uses `d3.scaleSqrt` to translate a continuous numeric range from 0 to 10 into proportional circle radii, with tick labels derived from the scale's `.ticks()` method. Both legends are built as custom SVG components that render groups of circles and text, with the size legend's circles using a semi-transparent fill. The code relies on D3 v5's selection and merge APIs, and the `d3.select` function, to efficiently create and update the SVG elements.

Loading thumbnail…

Let's make a map with D3.js!

This example displays a world map rendered as SVG paths, with countries in light green and the ocean in blue. It uses D3.js v5’s `geoNaturalEarth1` projection and `geoPath` to generate geographic shapes, while the TopoJSON library’s `feature` function converts the world-atlas 110m GeoJSON data into features. A sphere outline and country boundaries are drawn with stroke styling, and the map is projected onto a 960 by 500 canvas.

Loading thumbnail…

Bowl of Fruit - General Update Pattern

This example demonstrates the general update pattern in D3, showing how data joins handle entering, updating, and exiting elements. A row of apples transitions as fruits are removed and one apple changes into a lemon. Using D3 v5 with SVG animations, the code applies ordinal scales for color and radius, while `selection.data`, `enter`, `merge`, and `exit` manage lifecycle transitions over one-second durations.

Loading thumbnail…

Cheap Tricks for Interaction

This example shows an interactive world map rendered with SVG, where country boundaries appear in light green and turn red on hover, with a blue sphere background. It uses `d3.geoNaturalEarth1` for projection and `d3.geoPath` to draw geographic features from TopoJSON data loaded via `d3.json`. Country names come from a TSV file accessed with `d3.tsv`. The map supports pan and zoom through `d3.zoom`, applying the current transform to a group element containing all countries.

Loading thumbnail…

World Countries Tree

This visualization displays the hierarchical structure of world countries, organized by continent and subregion, as a horizontal tree diagram rendered with SVG. The layout is generated using `d3.tree` and `d3.hierarchy`, with links drawn via `d3.linkHorizontal`. The data, sourced from `data.json`, is loaded using `d3.json`, and the tree layout is sized to fill the browser window based on `document.body.clientWidth` and `clientHeight`.

Loading thumbnail…

Art Tree

This tree visualization displays the hierarchical structure of world regions and countries, using a horizontal layout that expands from left to right. Each node represents a geographic classification, from continents down to individual nations. The visualization uses D3 v5’s `tree` layout to compute node positions, `hierarchy` to structure the JSON data, and `linkHorizontal` to draw the connecting paths as SVG elements. The data is loaded from an external `data.json` file, and the rendered paths are appended to an SVG canvas sized to the full browser window.

Loading thumbnail…

Bowl of Fruit - Click to Select

Five fruit circles enter as apples, with two later replaced by a lemon or removed entirely, demonstrating D3's data join. Clicking any fruit toggles a dark blue selection stroke, triggering a re-render via the `fruitBowl` module. The code uses `d3.scaleOrdinal` for color and radius, `selection.merge`, and `transition` for animated position and size changes over one second. SVG rendering with `d3.select` and `setTimeout` drives the scripted state updates.

Loading thumbnail…

Bowl of Fruit - Hover to Select

Five pieces of fruit—apples and a lemon—appear in a row, and hovering over any fruit selects it with a dark blue outline while moving the mouse away deselects it. Using d3.v5, the fruitBowl function manages enter, update, and exit selections with circle elements, applying ordinal color and radius scales, and animating transitions via `.transition().duration(1000)`. The code includes a timed sequence that removes an apple, replaces one with a lemon, and filters out another, demonstrating dynamic data binding. SVG rendering and mouseover/mouseout event handlers drive the interaction.

Loading thumbnail…

Looping Transitions Example - Ft. Rubiana

A stylized cartoon face with an orange elliptical head, purple eyes, white pupils, black eyebrows, and a curved mouth uses D3 transitions to create a looping eyebrow-raising animation. The code imports `select` and `arc` from D3 v5, builds the SVG elements programmatically, and defines a recursive `repeat` function that chains `transition().duration()` calls to continuously move the eyebrows up and down. This example is built from a fork of existing face visualizations.

Loading thumbnail…

Temperature in San Francisco Scatter Plot

This scatter plot visualizes one week of temperature data in San Francisco, sourced from Data Canvas. The x-axis tracks time in ticks, while the y-axis displays ordinal note values. Built with D3 v5, the code uses `scaleLinear` and `scaleOrdinal` to map data, and `axisBottom` and `axisLeft` to render the axes. Each temperature reading appears as a steel-blue circle, with axis labels and a title displayed via SVG text. The data is loaded asynchronously from a CSV file using `d3.csv`.

Loading thumbnail…

World Population Area Chart

This chart displays world population growth from historical data, plotting population counts against years as a smooth filled area. The visualization uses an SVG rendered with d3.v5, employing `d3.scaleTime`, `d3.scaleLinear`, and `d3.area` with a basis curve to create the area shape. Axis ticks and labels are generated via `d3.axisBottom` and `d3.axisLeft`, with population formatted to billions. Data comes from a CSV loaded via `d3.csv`, mapping years to JavaScript dates before rendering. The maroon area fills the space below the population trend line.

Loading thumbnail…

Temperature in San Francisco Area Chart

This area chart visualizes one week of temperature data in San Francisco, with time on the x-axis and degrees Celsius on the y-axis. The chart includes axis labels, a title, and shaded area fill. Built with D3 v5, the code uses `d3.csv` to load data, `scaleTime` and `scaleLinear` for scales, and `area` with `curveBasis` to generate the smooth path. SVG rendering draws the area, gridlines, and text elements. Data originates from Data Canva’s temperature sensor project.

Loading thumbnail…

Temperature in San Francisco Line Chart

This line chart visualizes one week of temperature data in San Francisco, with time on the x-axis and degrees Celsius on the y-axis. The code uses d3.csv to load the dataset and d3.scaleTime and d3.scaleLinear to map the data, while d3.line with curveBasis generates a smooth maroon path through the points. Axis labels and a title are added via d3.axisLeft, d3.axisBottom, and SVG text elements. The rendering is done as an SVG, with the data sourced from Gray Area’s Data Canva project.

Loading thumbnail…

Bowl of Fruit - General Update Pattern

A bowl of fruit demonstrates the D3 general update pattern as apples and lemons appear, disappear, and change type over time. The visualization uses D3 v5’s `selectAll`, `enter`, `merge`, and `exit` methods to handle data joins, with `scaleOrdinal` mapping fruit types to colors and radii. SVG circles and text elements within groups are updated, while a static rectangle represents the bowl. State changes trigger re-renders via `setTimeout`, showing how joins manage dynamic datasets.

Loading thumbnail…

Cars Scatter Plot

This scatter plot visualizes the relationship between horsepower and weight for 398 cars from the UCI Auto MPG dataset. Each red, semi-transparent circle represents a car, with the x-axis showing horsepower and the y-axis showing weight. The visualization uses D3’s `scaleLinear`, `axisLeft`, and `axisBottom` APIs to construct the axes and map data values to SVG coordinates. The data is loaded via `csv` from a remote URL and parsed into numeric fields before rendering.

Loading thumbnail…

Scatter Plot

This scatter plot shows the population of the top 10 most populous countries, based on 2018 estimates from the United Nations World Population Prospects. The code uses D3 v5 with scaleLinear for the x-axis, scalePoint for the categorical y-axis, and axisBottom and axisLeft to draw the chart. Population values are multiplied by 1000 for display, with the x-axis formatted as billions using d3.format. The visualization renders circles in an SVG, with a title and axis label appended programmatically.

Loading thumbnail…

Custominzing Axes

This bar chart displays the population of the top 10 most populous countries in 2018, based on United Nations data. It uses a linear x-scale for population and a banded y-scale for country names. The code employs D3 v5’s `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` APIs to render axes, with tick labels formatted using `format(".3s")` and a custom replacement of 'G' with 'B' for billions. Grid lines are drawn via `tickSize(-innerHeight)`, and the chart is rendered as SVG.

Loading thumbnail…

Shapes with SVG and CSS

A set of basic SVG shapes—circles, rectangles, lines, and a polyline path—is drawn on a 960×500 canvas, with styling applied through both inline attributes and an external CSS stylesheet. The examples demonstrate how presentation properties like fill and stroke can be set directly on SVG elements, inherited from a parent `<g>` group, or overridden via CSS classes such as `.lines`. The code uses raw SVG markup and CSS, with no JavaScript libraries, and includes a horizontal scale transform to stretch the shapes.

Loading thumbnail…

Hello JS

This example demonstrates the simplest possible D3.js program: it sets the text content of a single HTML element, displaying the string “Hello JS!” prominently on a light green background. Using d3.select and the .text() method, it injects a message exported from a separate ES6 module. The page is styled entirely through CSS, including large font size and centered alignment, while D3 v5 is loaded from a CDN.