J

Joseph Popoola

@JosephPopoola·19 public vizzes

Loading thumbnail…

Multi-line chart

This example visualizes the changing temperature across multiple cities over a week, using time on the x-axis and temperature on the y-axis. Each city is represented by a distinct colored line, with a legend identifying each city. Built with React and D3.v5, the chart renders as an SVG using `line` and `curveBasis` for smooth paths, `scaleTime` and `scaleLinear` for axes, and `scaleOrdinal` with `schemeCategory10` for colors. Data is loaded via `csv` from a remote source, and the legend is generated using a custom `colourLegend` function.

Loading thumbnail…

Temparature in San Francisco line chart

This visualization shows a week of temperature fluctuations in San Francisco, plotted as a smooth curving line chart against time on the x-axis and temperature on the y-axis. The chart uses React for the interface and D3 v5 for SVG rendering, specifically employing scaleTime, scaleLinear, axisBottom, axisLeft, and the line generator with curveBasis. Data is loaded via csv from a local dataset, with timestamps parsed as dates and temperatures converted to numbers.

Loading thumbnail…

Scatter plot with menus

This interactive scatter plot explores relationships between attributes of classic automobiles, drawing from the auto-mpg dataset. Two dropdown menus allow users to select which columns appear on the x- and y-axes, triggering a smooth animated transition of the points. Built with D3 v5, the example uses `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to construct the axes, while the points are animated using `.transition().duration().delay()`. The chart is rendered as SVG, with a reusable dropdown module and a separate scatterplot module handling the visualization logic.

Loading thumbnail…

Choropleth Map - with interactive filtering

This choropleth map displays global economic classifications, coloring each country with an ordinal spectral scale based on its economy attribute. The visualization includes an interactive legend where clicking a category filters the map, dimming non-matching countries and highlighting selected ones. Built with React and D3 v5, it uses `geoPath` and `geoNaturalEarth1` for map projections, supports zooming via the `zoom` API, and loads country boundaries and data from the world-atlas package. The legend is interactive, with click handlers and animated transitions.

Loading thumbnail…

Choropleth Map

A choropleth map colors world countries by economic classification using an ordinal color scale derived from d3.scaleOrdinal and d3.schemeSpectral, with a legend rendered via a custom colourLegend component. Geographic shapes are drawn with d3.geoPath and a Natural Earth projection, while data loads from World Atlas TopoJSON and TSV files. Hovering highlights countries, and d3.zoom enables panning and zooming with animated transitions on the legend circles.

Loading thumbnail…

Colour and Size Legends

This example demonstrates two kinds of legends side by side: a color legend mapping ordinal categories to distinct hues, and a size legend using a square-root scale to encode quantitative values. Both legends animate their circle radii over one second using D3’s `transition`. The code uses `d3.scaleOrdinal`, `d3.scaleSqrt`, `selection.call`, and React is loaded for the framework, while all rendering is done via SVG. The size legend uses `sizeScale.ticks` to generate labeled values, excluding zero.

Loading thumbnail…

Blank Canvas

A blank, rounded rectangle fills the entire viewport, offering an empty SVG canvas with no data or marks rendered. The visualization uses React to manage the page structure and D3 v5 to select the SVG element, dynamically sizing it to the browser’s client dimensions. The code imports the `select` and `arc` functions from D3, though only `select` is used, and appends a single rectangle with a 40-pixel corner radius. The rectangular area remains completely empty, presenting a minimalist starting point for potential charting.

Loading thumbnail…

Lets build a map with interactions!

This example shows an interactive world map rendered with SVG, where each country displays its name as a tooltip on hover. The visualization uses D3 v5 to load TopoJSON and TSV data from the world-atlas package, projecting the geographic features with `d3.geoNaturalEarth1` and drawing paths via `d3.geoPath`. Zooming and panning are enabled through `d3.zoom` with an event listener that applies transforms to the map group. Countries are styled with CSS, turning grey on hover, while a fixed blue sphere represents the globe's background. React manages the page structure, though D3 handles all data binding and interactions.

Loading thumbnail…

Lets build a map

This example visualizes the world’s countries as a natural Earth projection map. The visualization renders the globe’s sphere as a blue backdrop, then overlays each country as a light green SVG path with a dark green stroke. It uses d3.geoNaturalEarth1, d3.geoPath, and d3.json, along with the topojson feature function to convert the world-atlas GeoJSON Topology into map geometries. The map is drawn into an SVG canvas, with the sphere and country paths styled via CSS classes.

Loading thumbnail…

Hover a fruit

Five fruit shapes animate smoothly as apples are eaten and one becomes a lemon. Hovering produces a black outline around the selected fruit. Built with React and D3 v5, the visualization uses SVG circles with ordinal color and size scales. D3 transitions (`transition().duration(1000)`) handle position, radius, and exit animations, while React state manages the hovered fruit selection.

Loading thumbnail…

Select a fruit

Five fruit circles render in an SVG, each an apple or lemon represented by color and size. Clicking a circle selects it, adding a black stroke. D3 transitions animate the fruit entering, exiting, and changing type over time. The React framework manages state for selection and fruit data, while the D3 `scaleOrdinal` maps fruit types to colors and radii, and `data` joins drive the update pattern.

Loading thumbnail…

Bowl of fruit - General update pattern

Five circles represent apples in a row, rendered as SVG via React and D3 v5. The visualization demonstrates D3's general update pattern: new fruit enters, existing fruit updates its position and color, and removed fruit exits with a shrink animation. Timed JavaScript events modify the fruit array, triggering transitions that move circles horizontally, change an apple to a lemon, and delete items. The code uses D3's selection, merge, and exit methods with a one-second transition duration for all changes.

Loading thumbnail…

World Population Area chart

This area chart shows world population growth over time, using a smooth curved path to emphasize the upward trend. The visualization loads CSV data and renders it as an SVG, leveraging React for the page structure and D3 v5’s `scaleTime`, `scaleLinear`, `area`, and `curveBasis` to generate the filled region. Axes are added with `axisBottom` and `axisLeft`, with tick formatting converting billions to compact labels. The chart uses a maroon fill for the area and includes labeled axes and a title.

Loading thumbnail…

Temparature in San Francisco Area chart

An area chart visualizes a week of temperature readings in San Francisco, using a smooth curved path to show the daily temperature trend over time. The visualization renders temperature on the y-axis and timestamps on the x-axis, with axis labels and a titled chart. The code uses d3.scaleTime, d3.scaleLinear, d3.area, and d3.curveBasis to generate the SVG path, while React manages the component structure. Data is loaded via d3.csv from a remote dataset, and axes are drawn with d3.axisLeft and d3.axisBottom.

Loading thumbnail…

Temparature in San Francisco Scatter plot

This scatter plot displays temperature readings over a week in San Francisco, with each circle representing a data point. The visualization uses D3.js v5 within a React framework, rendering to an SVG element. It employs `csv` to load data from a VizHub dataset, `scaleTime` and `scaleLinear` for axes, and `axisBottom`/`axisLeft` for tick marks. The plot includes labeled axes for time and temperature, a title, and semi-transparent steelblue circles.

Loading thumbnail…

Scatter plot

A scatter plot displays the population of the top 10 most populous countries, with each country positioned along the y-axis and its population along the x-axis. Using React and D3 v5, the visualization loads data from a CSV file and renders SVG circles. It employs `d3.scaleLinear` for the x-axis, `d3.scalePoint` for the y-axis, and `d3.axisLeft` and `d3.axisBottom` for axes, with the x-axis formatted using `d3.format`.

Loading thumbnail…

Customising Axes

This example displays a horizontal bar chart of the top 10 most populous countries, with populations from a CSV file. It customizes the axes by removing domain lines and tick lines from the y-axis, while the x-axis uses a tick format that abbreviates large numbers and converts 'G' to 'B'. The code uses d3.scaleLinear, d3.scaleBand, d3.axisLeft, d3.axisBottom, and d3.format within a React framework, rendering to SVG. The chart also includes axis labels and a title, with a steelblue fill for bars.

Loading thumbnail…

Making A Bar Chart

This example shows a horizontal bar chart of population by country, with ranks from China to Mexico. It renders in SVG and uses React for the page structure while D3 v5 handles the visualization logic. The code loads data from a CSV file, scales population values with `scaleLinear`, positions bars with `scaleBand`, and adds axes using `axisLeft` and `axisBottom`. Bar heights derive from the band scale’s bandwidth, and styling is applied via CSS.

Loading thumbnail…

Smiley Face

A yellow smiley face is drawn with SVG using D3.js and React. The face includes a circle for the head, two eyes, and an arc-based mouth created with the `d3.arc` API. The eyebrows are animated vertically using D3 transitions, moving up and down over 1.5-second intervals. The code uses D3 selections to append and transform SVG elements, with all positions calculated from the SVG’s width and height attributes.