M

Matthew Rubino

@mattrrubino·27 public vizzes

Loading thumbnail…

Selecting a Year on a Line Chart

This visualization displays global population trends over time as a multi-line chart, with each line representing a different country and colored via `d3.scaleOrdinal`. Users hover over the chart to select a year, which triggers a vertical line and updates the visualization through a `mousemove` event using `d3.pointer` and `xScale.invert`. The chart renders with SVG, uses `d3.scaleTime` and `d3.scaleLinear` for axes, and generates paths with `d3.line` and `d3.curveBasis`. Data comes from UN population estimates processed through `d3.csv` and `topojson`.

Loading thumbnail…

Melting Data for Multiple Lines

This example visualizes population trends for multiple countries over time as a series of colored lines, using a legend to identify each country. The chart displays time on the x-axis and population on the y-axis, with a title and axis labels. The code uses `d3.csv` to load data from a UN population estimates dataset, which is then "melted" from wide to long format to create individual line paths. It leverages D3 v6 APIs including `scaleTime`, `scaleLinear`, `scaleOrdinal`, `line`, `curveBasis`, `axisLeft`, `axisBottom`, and `group`, rendering the final visualization as an SVG.

Loading thumbnail…

Temperatures of Cities

This visualization displays temperature measurements from cities around the world over a one-week period. Multicolored line paths represent each city's temperature fluctuation over time, with a color legend positioned at the right identifying each city. The chart includes gridlines and labeled time and temperature axes. Built with React and D3 v6, the example uses `scaleTime` and `scaleLinear` for scaling, `line` with `curveBasis` for path generation, and `scaleOrdinal` with `schemeCategory10` for colors. Data originates from a CSV file loaded via `csv()`, and the SVG rendering employs the declarative selection API.

Loading thumbnail…

Fork of Fork of Cars Scatterplot

This example shows the temperature in San Francisco over time as a smooth line chart, with a grid of horizontal and vertical lines. It uses D3 v6 to load CSV data, create time and linear scales, and render axes with `axisLeft` and `axisBottom`. The line path is generated with `line` and a `curveBasis` interpolation. The visualization also includes axis labels and a title, all drawn as SVG elements within a React-based setup.

Loading thumbnail…

Circles on a Map

This visualization displays a natural Earth projection map with circles sized by 2018 population estimates at country centroids, colored by income group. It uses d3.geoPath and d3.geoNaturalEarth1 for map rendering, d3.scaleSqrt for circle sizing, and d3.scaleOrdinal with schemeCategory10 for color encoding. Hovering highlights countries, while zoom interactions are handled via d3.zoom. Population data comes from a UN dataset merged with TopoJSON country boundaries, rendered as SVG with additional size and color legends.

Loading thumbnail…

Scatterplot with Menus

This interactive scatterplot lets users explore the relationship between any two columns in the auto-mpg dataset by selecting the X and Y axes from dropdown menus. Built with React and D3 v6, it renders an SVG featuring animated transitions between selections, with circles smoothly adjusting to new positions. The example demonstrates reusable components for dropdown menus and scatter plots, utilizing D3’s scaleLinear, extent, axisBottom, and axisLeft APIs alongside the transition system for animation.

Loading thumbnail…

Choropleth Map with Interactive Filtering

This example presents an interactive choropleth map of the world, coloring countries according to their income group using an ordinal color scale. Users can click a legend item to filter the map, dimming all countries that do not match the selected income group, and click again to clear the filter. The visualization uses D3’s `geoNaturalEarth1` projection and `geoPath` for rendering map shapes, with zooming enabled via the `zoom` API. Data is loaded from the World Atlas TopoJSON and TSV files, processed using the `topojson` library, and rendered as SVG in a React-based workflow.

Loading thumbnail…

Choropleth Map

This choropleth map visualizes global income groups by coloring each country according to its `income_grp` attribute, using a spectral color scale (`d3.schemeSpectral`). The map shows a natural Earth projection rendered with `d3.geoPath`, with hover interactions highlighting countries in red. Built with React and D3 v6, it loads world boundary data from the `world-atlas` package via TopoJSON and TSV files, and includes a custom color legend component. The visualization supports zooming through a zoom behavior API.

Loading thumbnail…

Color and Size Legends

This example demonstrates how to create separate color and size legends using D3 v6 in a React application, rendering with SVG. The color legend uses `d3.scaleOrdinal` to map fruit names to colors, while the size legend uses `d3.scaleSqrt` to represent numerical values through circle radii. Both legends are built with reusable functions that append groups, circles, and text elements, highlighting the pattern of entering and merging selections for dynamic updates.

Loading thumbnail…

World Countries Hierarchy

This example presents the hierarchical structure of world countries using a tree diagram. The visualization organizes countries by continent and sub-region, displaying the data from `data.json` as horizontally laid-out nodes connected by link paths. Rendered as an SVG, the code utilizes the d3 library's `hierarchy`, `tree`, and `linkHorizontal` APIs to compute the layout and draw the connections. Text labels, styled with a Roboto font, are positioned using the nodes' calculated coordinates, and a zoom interaction is enabled via the `zoom` API.

Loading thumbnail…

Blank Canvas

A blank SVG canvas fills the browser window, framed by a single rounded rectangle. The example demonstrates a minimal setup for web-based visualization, using D3 v6 to select the SVG element and set its dimensions based on the viewport. The code imports `select` and `arc` from D3, though only `select` is used to append the background shape. Styling is handled externally via CSS, which fixes the body and hides overflow to ensure the canvas remains visually clean and uncluttered.

Loading thumbnail…

Making a Bar Chart

This bar chart displays population estimates for ten countries, with horizontal bars ranked by population size from largest to smallest. Rendered as SVG, the visualization uses D3 v6 scales to map population values to bar lengths and country names to bar positions. Its axes come from D3’s `axisLeft` and `axisBottom`, while bar heights rely on `scaleBand`’s bandwidth. Hovering over a bar turns it dark blue. The data loads from a CSV file via `d3.csv` and is preprocessed by multiplying each population value by 1,000, reflecting the source’s units in thousands.

Loading thumbnail…

Make a Map

This example renders an interactive world map using the Natural Earth dataset from world-atlas, displaying country boundaries with hover highlighting. The visualization uses D3’s geoNaturalEarth1 projection and geoPath to draw SVG paths, with topojson’s feature method converting TopoJSON to GeoJSON. Countries are colored green, turning red on mouseover, while the ocean sphere is light blue. The map supports pan and zoom through d3.zoom, which applies a transform to the map’s group element.

Loading thumbnail…

Fork of Bowl of Fruit - Hover to Select

This example demonstrates an interactive fruit bowl visualization where users hover over apples and lemons to select them, highlighting the chosen fruit with a thicker stroke. The fruit transitions in and out of the bowl with animated scaling. Built with React and D3 v6, it uses `scaleOrdinal` for color and radius mapping, and SVG `transition().duration()` for smooth updates. The code manages dynamic data changes—removing fruits and swapping types—via D3’s data join pattern.

Loading thumbnail…

Bowl of Fruit - Click to Select

This example demonstrates a dynamic bowl of fruit where clicking an apple or lemon selects it, highlighted by a thicker black stroke. Five apples render initially, then change over time: one is eaten, a second becomes a lemon, and another disappears. The visualization uses React with D3 v6, employing `scaleOrdinal` for color and radius, SVG transitions for smooth movement, and click handlers to update the selected fruit state.

Loading thumbnail…

Bowl of Fruit - General Update Pattern

This example demonstrates the D3 general update pattern, showing how fruit in a bowl transitions between states: apples disappear, an apple changes to a lemon, and another apple is removed. It renders SVG circles and text labels inside a rounded rectangle, using `scaleOrdinal` for color and radius mappings. The code uses `selection.data()`, `.enter()`, `.merge()`, and `.exit()` with `transition().duration(1000)` to animate entering, updating, and exiting elements, including shrinking exit circles to zero radius before removal.

Loading thumbnail…

World Population Area Chart

This area chart shows world population growth by year, using a smooth filled curve to emphasize the upward trend. It loads data from a CSV and renders to SVG with D3 v6, using `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and the `area` generator with `curveBasis`. Grid lines are drawn via axis tick sizes, and population labels are formatted using the `format` function to convert billions. The chart includes a rotated y-axis label and a title, styled with CSS.

Loading thumbnail…

Area Chart

This area chart visualizes temperature readings in San Francisco over time, using a smooth curved path filled with maroon to highlight the trend. The visualization relies on D3 v6 APIs including `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `area` with `curveBasis` to generate the SVG path. Data is loaded from a CSV file via `csv()`, with timestamps parsed as dates and temperatures as numbers. Grid lines extend across the chart, and axis labels and a title are rendered as SVG text elements.

Loading thumbnail…

Fork of Cars Scatterplot

This visualization shows the temperature in San Francisco over time, with a smooth line chart mapping dates to temperature values. The data is loaded from a CSV file and rendered as an SVG. The code uses d3.scaleTime and d3.scaleLinear to create scales, d3.axisBottom and d3.axisLeft for the axes, and d3.line with curveBasis to generate the curved line path. The chart includes axis labels and a title, while grid lines are drawn using tick sizes.

Loading thumbnail…

Cars Scatterplot

This scatterplot displays the relationship between horsepower and weight for a dataset of cars, with each point representing an individual vehicle. The visualization uses D3 v6’s `scaleLinear`, `axisBottom`, and `axisLeft` to construct axes with gridlines, while circles are rendered via SVG. Data is loaded as CSV from an external dataset and parsed into numeric values before being plotted. The chart includes labeled axes, a title, and semi-transparent steelblue points to reveal overlapping data density, with margins and tick padding configured for clarity.

Loading thumbnail…

Scatterplot

This scatterplot visualizes the populations of the top 10 most populous countries, with countries plotted along the y-axis and population (in millions) along the x-axis. The chart uses D3 v6’s `scaleLinear` for the x-axis, `scalePoint` for the y-axis, and `axisBottom` and `axisLeft` to render tick marks. Population values from a CSV file are read, multiplied by 1000, and drawn as steelblue circles in an SVG, with labeled axes and a title.

Loading thumbnail…

Customizing Axes

This example shows a horizontal bar chart of the top 10 most populous countries, using a dataset loaded from a CSV file. The chart customizes both axes: the y-axis displays country names with tick lines removed, while the x-axis uses a custom tick format that abbreviates large numbers and replaces "G" with "B" for billions. Rendered as an SVG using React and D3 v6, the code employs `scaleLinear`, `scaleBand`, `axisBottom`, and `axisLeft`, with margins and axis labels styled via CSS.

Loading thumbnail…

Face Time

A stylized face rendered as SVG animates its nose and eyebrows with chained `transition` calls, while the mouth stays fixed using a `d3.arc` path. The circular yellow head and black stroke frame the components, and the nose bounces horizontally in a repeating loop triggered by `setTimeout`. The code uses `d3.select`, `d3.arc`, and attribute transitions, with dimensions parsed from the SVG via `parseFloat`. The brows move vertically in a two-second cycle, creating a simple, playful expression.

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates a collection of basic SVG shapes, including circles, rectangles, paths, and lines, composed within a single SVG canvas. The shapes are styled using both inline presentation attributes and an external CSS stylesheet, which defines a class for the line group to apply stroke properties. The SVG elements are nested within a `<g>` group that applies a scaling and translation transform. The rendering approach uses raw SVG markup within an HTML page, with no JavaScript libraries or data sources involved.

Loading thumbnail…

HTML Cars Report

This example shows a simple car report listing three vehicles with their prices, highlighting the first entry in red and bold to draw attention. The page is built with basic HTML structure and styled using CSS, where the `font-size` and `font-family` are set on the body and a `.highlighted` class applies the color and weight changes. The data is hardcoded directly in the HTML markup rather than fetched dynamically, and no JavaScript or additional libraries are used beyond the core HTML and CSS files referenced in the project.

Loading thumbnail…

Fork of Hello VizHub

This example demonstrates a simple text output using D3.js. It displays the message "Hello VizHub!" combined with the result of a squaring function, shown in large centered text. The visualization loads D3 via UNPKG CDN and uses the `select` API to target the message div. The code imports a local ES6 module for the message and another for the square function, showcasing module imports within VizHub's framework.

Loading thumbnail…

Cars Report

This example presents a simple report of two cars, displaying each car's year, make, model, and price in a large, preformatted text block on an HTML page. The report is generated by parsing a hardcoded JSON array of car objects and mapping over the data to format each entry. The implementation relies on JavaScript's native `JSON.parse` and a custom `formatCar` function, with the resulting output injected into the DOM via `textContent` on the `message-element`.