G

gilbster

@gilbster·26 public vizzes

Loading thumbnail…

Line Chart temperature

A line chart displays temperature readings in degrees Celsius across a week for multiple cities, with each city’s data drawn as a colored, smoothed path. The visualization renders in SVG with animation, using D3 v5’s `scaleTime`, `scaleLinear`, `line`, `curveBasis`, and `nest` to group data by city. A `colorLegend` component, built with `scaleOrdinal` and `schemeCategory10`, identifies each series. The data comes from the Data Canvas “Sense Your City” dataset, fetched via `d3.csv`. Axis ticks include gridlines, and the chart includes a rotating y-axis label and a title.

Loading thumbnail…

Color and Size Legends

This example demonstrates how to create separate legends for ordinal color scales and quantitative size scales using D3 v5. The color legend displays four fruit categories with distinct colored circles, while the size legend uses a square root scale to show five tick values with proportionally sized semi-transparent circles. Both legends are built with reusable functions that bind data to SVG groups, using `selection.merge` and `transition.attr` for smooth updates. The SVG output uses class-based styling for tick text and circles.

Loading thumbnail…

Line Chart with Multiple Lines

This line chart visualizes a week of temperature data in San Francisco, using D3 v5 to render an SVG. The code loads CSV data from a remote URL, parses timestamps and numeric temperatures, and scales the axes with `scaleTime` and `scaleLinear`. It draws a single smoothed line via `d3.line` with the `curveBasis` curve, and includes styled grid lines, axis labels, and a title. The line path uses a thick gray stroke, while the axis tick labels and titles are styled through CSS classes.

Loading thumbnail…

Circles on a Map

This interactive map displays global population data using proportional circles positioned over each country’s centroid, with a color-coded legend for categories and a size legend for population values. Built with D3 v5, it renders world geography via `d3.geoPath` and a Natural Earth projection, while applying `d3.zoom` for panning. Population values from a CSV are joined to TopoJSON features, and `d3.scaleSqrt` determines circle radii, with tooltips showing region names and formatted numbers. SVG elements and transitions animate legend updates.

Loading thumbnail…

Scatter Plot with menus

This interactive scatter plot lets users explore the relationship between pairs of numeric variables from the auto-mpg dataset. Dropdown menus, built with a reusable `dropdownMenu` component, dynamically switch which columns are mapped to the x- and y-axes. The visualization, rendered as an SVG, uses D3 v5 APIs such as `scaleLinear`, `extent`, and `axisBottom`/`axisLeft` to compute scales and axes. When a new column is selected, the circles animate to their new positions over two seconds using a staged `.transition().duration(2000).delay(...)` chain.

Loading thumbnail…

Choropleth Map with interactions

A choropleth map of world countries, colored by economic income group, supports interactive exploration. The map uses a natural Earth projection and is rendered as SVG. A color legend allows selection and highlighting of specific categories, while zooming and panning are enabled via d3.zoom. Data is loaded from the World Atlas TopoJSON and TSV files, and the visualization is implemented with d3.geoPath and d3.scaleOrdinal. Hovering a country displays its name and value in a tooltip.

Loading thumbnail…

Choropleth Map

This choropleth map colors countries by their economy category using a spectral color scale. The visualization loads geographic data from the World Atlas TopoJSON and TSV files, projecting it with `d3.geoNaturalEarth1` and rendering paths via `d3.geoPath`. A zoom behavior allows interactive panning on the SVG, while an animated legend updates through `transition.attr` calls. Hovering highlights individual countries, and the map includes a title tooltip showing each country’s name and economy value.

Loading thumbnail…

World Countries

This visualization presents the hierarchical structure of world countries, organized by continent and subregion, as an interactive tree diagram. The D3.js v5 code loads a JSON dataset and uses the `tree` layout with `linkHorizontal` to draw curved connecting paths. Each country name appears as text, with font size decreasing at deeper levels. Users can pan and zoom the entire diagram via the `zoom` event handler, while SVG elements render the visualization with a custom Playfair Display font.

Loading thumbnail…

Blank Canvas

A blank SVG canvas fills the viewport, with a single rounded rectangle covering its full width and height. The code uses D3's `select` to grab the SVG element, then sets its dimensions based on `document.body.clientWidth` and `clientHeight`. A `rect` is appended with `rx` for rounded corners. The visualization demonstrates a minimal setup with D3 v5, React, and SVG, where the data is simply the viewport geometry itself.

Loading thumbnail…

Map Interactions

This example displays an interactive world map using a natural Earth projection, with countries rendered as light green SVG paths that turn teal on hover. The visualization combines world-atlas TopoJSON data with a TSV file containing country names, which are added as native SVG `<title>` tooltips. The map supports pan and zoom through d3.zoom, while d3.geoPath and d3.geoNaturalEarth1 handle geographic projections. Hover effects use CSS pseudo-classes, and the map includes a blue sphere background for context.

Loading thumbnail…

Let's Make a Map!

This example displays the world's countries on a natural Earth projection, with a dark blue sphere (ocean) and light green landmasses. The map is built using D3 v5’s `geoPath` and `geoNaturalEarth1` projection, while the TopoJSON library’s `feature` function converts country boundaries from the `world-atlas` dataset. Rendering occurs as SVG paths, with styling for country strokes and sphere fill.

Loading thumbnail…

Bowl of Fruit hover to select

Five fruit circles render in an SVG, with apples as large red circles and lemons as smaller yellow ones. Hovering over a fruit highlights it with a grey outline, and moving the mouse away removes the highlight. The example demonstrates data joins and transitions using d3-selection and `transition.attrTween`, with `scaleOrdinal` from d3-scale mapping fruit types to colors and radii. Timed updates add, remove, and change fruit types, animating circle radius and position changes over one second.

Loading thumbnail…

Bowl of Fruit Click to select

Five apples and lemons are rendered as color-coded circles in an SVG bowl, with clicks selecting a fruit by highlighting its stroke. The visualization animates fruit removal, type changes, and reordering using D3 v5’s data join and `transition().duration()` for resizing radii. Positions are set via a simple index-based scale, with ordinal scales mapping fruit types to colors and sizes.

Loading thumbnail…

Bowl of Fruit - General Update Pattern transitions

This example demonstrates the general update pattern for transitions in D3.js v5. A row of apples and lemons sits in a bowl, with items being removed or changed over time via timed JavaScript callbacks. The visualization shows how D3's `.transition().duration(1000)` animates changes to circle radius and fill color, while the `.merge()` and `.exit().remove()` methods handle entering, updating, and exiting elements. The code uses D3's `scaleOrdinal` for color and radius mapping, and `selectAll`/`enter()`/`exit()` to manage SVG groups.

Loading thumbnail…

Bowl of Fruit - General Update Pattern

A bowl of fruit demonstrates the general update pattern for data joins, animating circles in and out as the dataset changes. Apples and lemons render as colored circles using an ordinal color scale and an ordinal radius scale, with position determined by index. The example uses D3 v5 selections with `selection.data`, `enter` and `exit` transitions, and `merge` to handle updates. Three timed actions shift the data: removing an apple, swapping one apple for a lemon, and filtering out another fruit, each triggering a one-second transition on circle radius and x-coordinates.

Loading thumbnail…

Bowl of Fruit - General Update Pattern

This example demonstrates the general update pattern for dynamic data visualizations using D3 v5. A row of fruit emojis, initially five apples, changes over time as fruits are removed or replaced with lemons. The visualization uses `d3.select` and `d3.range` to manage the SVG scene, while the `fruitBowl` function applies enter, update, and exit states to circles and text labels. Color and radius are mapped through `scaleOrdinal` based on fruit type.

Loading thumbnail…

World Population Area Chart

This chart displays world population growth over time, using a filled area to emphasize the rising trend across years. The visualization is rendered in SVG with D3 v5, employing `d3.area` with `curveBasis` to create the smooth, maroon-filled shape. Time-based x-axis scaling and linear y-axis scaling handle the temporal and numerical data, with a formatted axis that abbreviates billions as "B." Data is loaded from a CSV hosted on VizHub, providing annual population figures.

Loading thumbnail…

Area Chart

This area chart visualizes a week of temperature data for San Francisco, with time on the x-axis and degrees Celsius on the y-axis. The data is loaded from a CSV hosted on VizHub using `d3.csv`. The SVG rendering uses `d3.scaleTime` and `d3.scaleLinear` for scales, `d3.axisBottom` and `d3.axisLeft` for labeled axes, and an `d3.area` generator with `curveBasis` to create the smooth maroon filled region. The visualization includes axis tick lines, padded ticks, and a title, with axis labels rotated for legibility.

Loading thumbnail…

Line Chart

A line chart displays temperature readings in degrees Celsius for one week in San Francisco, using a time-based x-axis and a linear y-axis. The chart is rendered as an SVG within an HTML page, with grid lines, labeled axes, and a smoothed curve drawn using D3's `line` and `curveBasis` functions. Data is loaded from a CSV file hosted at vizhub.com, parsed to convert timestamps to `Date` objects and temperatures to numbers, then scaled with `scaleTime` and `scaleLinear`.

Loading thumbnail…

Cars Scatter Plot

A scatter plot displays temperature readings taken throughout a week in San Francisco, plotting each timestamp on the x-axis against its corresponding temperature on the y-axis. The visualization loads CSV data, converts timestamps to date objects, and uses d3.scaleTime and d3.scaleLinear to map data to SVG coordinates. d3.axisBottom and d3.axisLeft generate the axes with gridlines, while semi-transparent steelblue circles render each data point. The chart includes labeled axes and a title, with margins defining the plotting area.

Loading thumbnail…

Scatter Plot

This scatter plot displays the population of the top 10 most populous countries, with countries on the y-axis and population on the x-axis using circular markers. The code uses D3 v5’s `csv` to load data, `scaleLinear` and `scalePoint` for positioning, and `axisBottom` with a custom tick formatter to abbreviate numbers. SVG rendering occurs within a React starter template, with axes drawn using `axisLeft` and gridlines via tick sizes.

Loading thumbnail…

Customizing Axes

This example demonstrates how to customize axes in a bar chart visualizing the top 10 most populous countries, using data from a CSV file. The chart displays population values on the x-axis and country names on the y-axis, with custom formatting that converts large numbers to a readable scale. The code employs D3's `scaleLinear`, `scaleBand`, `axisBottom`, and `axisLeft` to construct the axes, while removing default tick lines and domain paths to achieve a clean design. The visualization also uses `format` to abbreviate numbers, replacing "G" with "B" for billions, and applies custom styling through CSS classes.

Loading thumbnail…

Making a Bar Chart

This example shows a horizontal bar chart of the world’s ten most populous countries, with each bar’s length proportional to population in thousands. The React app uses D3 v5’s `csv`, `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to load data and render axes, while SVG `rect` elements are bound to the data via selections.

Loading thumbnail…

Let's Make a Face with D3.js!

A smiling face built from basic SVG shapes animates its eyebrows up and down over four seconds. The example uses D3.js v5 with the `select` and `arc` APIs to construct circles for eyes, rectangles for brows, and an arc-shaped mouth on a yellow head. React does not appear in the code; the visualization relies on D3 transitions to repeat the eyebrow motion, rendering entirely in SVG.

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates a variety of SVG shapes—circles, rectangles, lines, and paths—styled with CSS and grouped using SVG transforms. It shows how presentation attributes like fill and stroke can be overridden by CSS rules, such as the `.lines` class applying stroke width and color. The visualization uses raw SVG elements within a React-compatible HTML page, with a scale transform applied to enlarge the content. No data is involved; the focus is purely on SVG syntax and cascading style behavior.

Loading thumbnail…

Cars Report

This example displays a text-based report of cars priced under $2,000, listing each vehicle’s year, make, model, and price. The page initially shows a “Loading...” message, then uses a JavaScript Promise to simulate a two-second delay before fetching a hardcoded JSON array of five cars. The `generateReport` function filters the data by price, formats each entry with a custom `formatCar` helper, and joins the results into a multi-line string rendered inside an HTML `<pre>` element via the browser’s DOM manipulation API.