G

gabcoderboi

@gabcoderboi·20 public vizzes

Loading thumbnail…

Selecting a Year on a Line Chart

This line chart visualizes projected global population by region from 1950 to 2100, using UN population estimates and medium-variant projections. A vertical black line marks a selected year, and moving the mouse across the chart updates the selection, re-rendering the visualization. The code uses d3.scaleTime, d3.scaleLinear, d3.line with curveBasis, and d3.nest for grouping, with SVG rendering and a color legend. Data is loaded via d3.csv from two datasets and processed through a custom melt function.

Loading thumbnail…

Melting Data for Multiple Lines

This visualization shows projected population over time by region, with multiple colored lines representing different areas. The line paths are sorted by their final population values, and a categorical color legend identifies each region. The code uses D3 v5’s `nest`, `line`, `scaleTime`, `scaleLinear`, and `scaleOrdinal` APIs. Data is loaded from UN population CSV files and melted from wide to long format in `loadAndProcessData.js`, then rendered as an SVG with axis labels and a legend.

Loading thumbnail…

Line Chart - Multiple Lines

This line chart displays one week of temperature data from multiple cities, with a color legend identifying each city and a title reading “A Week of Temperature Around the World.” The visualization uses d3.scaleTime and d3.scaleLinear for axes, d3.line with curveBasis for smooth path generation, and d3.nest to group data by city. D3’s ordinal color scale assigns category colors to each line. The chart includes grid lines from axis ticks and uses SVG rendering, with data sourced from Data Canvas - Sense Your City.

Loading thumbnail…

Circle on a Map

This example visualizes global population data by overlaying semi-transparent circles on a natural Earth projection map. The circles are sized using `d3.scaleSqrt` based on 2018 population figures, and hovering over countries reveals their population via a tooltip. The visualization uses `d3.geoPath` with `geoNaturalEarth1` for map projection, `d3.zoom` for panning and zooming, and includes both a color legend and a size legend built from `d3.scaleOrdinal` and `d3.scaleSqrt`. Data is loaded from a CSV file and TopoJSON world atlas using `d3.csv` and `d3.json`.

Loading thumbnail…

Choropleth Map

This choropleth map colors countries by their economy type using a categorical color scale, with a legend showing each category. It renders world geography as SVG paths via `d3.geoPath` and the Natural Earth projection, while `d3.zoom` enables panning and zooming. The code loads TopoJSON and TSV data from the world-atlas package, mapping country IDs to economy labels, and uses `d3.scaleOrdinal` with `schemeSpectral`. Hovering highlights a country in red.

Loading thumbnail…

Scatter Plot with Menus

This scatter plot displays relationships between pairs of columns in the Auto MPG dataset from the UCI Machine Learning Repository. Two dropdown menus let users choose which columns to plot on the x and y axes. The visualization uses D3 v5, with `scaleLinear` for axes, `axisLeft` and `axisBottom` for ticks, and animated circle transitions via `transition().duration(2000).delay()`. The SVG chart redraws its axes and labels whenever a menu selection changes.

Loading thumbnail…

Choropleth Map with Interactive Filtering

A choropleth map displays world countries colored by economic classification, with an interactive legend that filters which countries remain highlighted. Users click legend categories to isolate specific economic groups, dimming non-matching countries to 10% opacity. The visualization uses d3.geoNaturalEarth1 and d3.geoPath for map projection, d3.zoom for panning, and a d3.scaleOrdinal with schemeSpectral for coloring. Data combines TopoJSON world geometry with TSV metadata from the world-atlas package. The SVG rendering supports hover effects and a legend built with custom SVG groups and circles.

Loading thumbnail…

Colour and Size Legends

This example demonstrates two custom legend components built with D3 v6: a color legend using an ordinal scale with fixed circle radii, and a size legend using a square-root scale mapped to varying circle areas. The color legend maps fruit categories to colors, while the size legend generates five ticks from the continuous scale, filtering out zero and reversing order. Both legends use SVG groups with appended circles and text elements, leveraging D3’s data join pattern with enter/merge/exit for updates. Styling comes from external CSS.

Loading thumbnail…

World Countries Tree

This interactive tree diagram displays the hierarchical structure of world countries, organized by continent and subregion, with text labels rendered at varying sizes based on depth. The visualization uses the D3.js v5 `tree` layout with a `linkHorizontal` path generator for curved connections, and implements a `zoom` behavior for panning and scaling. Data loads from a static JSON file, and the SVG rendering applies custom font styling via CSS, including Quicksand and Playfair Display typefaces.

Loading thumbnail…

Blank Canvas

A rounded, full-viewport rectangle fills the browser window, rendered as a single SVG `<rect>` with no data mapped to it. The example demonstrates a minimal blank canvas using D3 v6's `select` and `attr` methods to set the SVG's width and height from the document body's client dimensions. The rectangle's `rx` attribute softens its corners, while CSS fixes the body to prevent scrolling. The visualization shows only this simple geometric form, with no axes, marks, or interaction beyond the static shape.

Loading thumbnail…

World Map

This world map uses a natural Earth projection to display country boundaries, with a dark blue ocean sphere and light green landmasses. Hovering over a country turns it red and reveals its name via a tooltip. The visualization supports zooming and panning through d3.zoom, with geographic paths rendered using d3.geoPath. It loads world country geometries from TopoJSON and country names from a TSV file, both sourced from the world-atlas package.

Loading thumbnail…

Bowl of Fruit - Hover to Select

Five pieces of fruit sit in a row, rendered as circles that scale to their type: apples are large and red, lemons are small and yellow. Hovering over a circle highlights it with a black outline, and a click-free selection updates a variable that triggers an animated re-render via the custom `fruitBowl` module. The visualization uses D3 v5's `select`, `scaleOrdinal`, and `.transition().duration(1000)` methods to animate entering, exiting, and updating circles. An external script drives the scene by removing fruits and mutating an apple into a lemon after timed delays.

Loading thumbnail…

Face with Transitions

A yellow circle face with black-outlined eyes, animated rectangular eyebrows, and a curved mouth rendered as an SVG path. The eyebrows move vertically through a chain of two-second `transition` calls, shifting down then returning to their original position. Built with React and D3 v6, the visualization uses `select` to manipulate the SVG and `arc` for the mouth shape.

Loading thumbnail…

Cars Report

This example shows a simple car inventory report with three vehicles listed by model and price, where the 2012 Nissan Leaf is visually emphasized. It applies React starter code to render static HTML content, while the styling uses CSS to set a large monospace font and highlight the highlighted list item in red. The report relies on basic DOM elements and a linked stylesheet rather than any data-visualization library or interactive rendering.

Loading thumbnail…

Fruit Bowl

This example shows a fruit bowl where five apples shrink and disappear over time, with one apple turning into a lemon. The data-driven update pattern uses D3’s data joins to handle enter, update, and exit selections for SVG circles and text labels. The code relies on `scaleOrdinal` for color and radius mappings, and `selection.merge` to apply shared attributes across entering and updating elements. The React starter structure wraps the D3 logic in a reusable `fruitBowl` function, rendering to an `<svg>` element with fixed dimensions.

Loading thumbnail…

Draw face with D3.js

A smiling face drawn with D3.js appears as a yellow circle with black-outlined eyes, animated eyebrows, and a crescent mouth. The SVG-based visualization uses D3 selections to append shapes, including rect elements for eyebrows that transition vertically over two-second intervals. The mouth is rendered with d3.arc(), while circle positioning and transforms center the face within an SVG. D3 v6 powers the animation and shape construction in this React-free starter example.

Loading thumbnail…

Temperatre in San Francisco Scatter Plot

This scatter plot visualizes temperature changes in San Francisco over a week, using time on the x-axis and temperature on the y-axis. The visualization combines circles for individual data points with a smoothed line path generated via d3.line and curveBasis. It uses d3.scaleTime and d3.scaleLinear for scaling, with d3.axisBottom and d3.axisLeft for labeled axes. Data comes from a CSV file loaded using d3.csv, rendered as SVG with a margin-based layout.

Loading thumbnail…

Cars Scatter Plot

This visualization shows the relationship between horsepower and weight for cars, with each circle representing an individual vehicle from the auto-mpg dataset. The scatter plot uses d3.csv to load the data and d3.scaleLinear with d3.extent to map the values, while d3.axisBottom and d3.axisLeft render the labeled axes. Circles are appended as SVG elements, styled with steelblue fill and 50% opacity, and the plot includes a title and rotated axis labels. Data originates from the Machine Learning Repository and is parsed as numeric values before rendering.

Loading thumbnail…

Scatter Plot of African Populations

This scatter plot shows the population of African countries in 2019, with each circle representing a country positioned along a linear population scale and a point scale for country names. Data comes from the United Nations World Population Prospects 2019, with values multiplied by 1,000. The visualization uses d3.csv to load data, d3.scaleLinear for the x-axis, d3.scalePoint for the y-axis, and d3.axisBottom and d3.axisLeft to render the axes, with tick labels formatted using d3.format.

Loading thumbnail…

African Populations

This horizontal bar chart displays the population of African countries in 2019, sorted by country name. The visualization uses D3 v5 with SVG rendering, employing `scaleLinear` for the x-axis and `scaleBand` for the y-axis. Population values from the United Nations World Population Prospects are loaded via `csv` and formatted with `format('.3s')`, replacing 'G' with 'B' for billions. The chart includes axis labels, gridlines, and a title, with bars filled in steelblue.