Tomisin Owolabi

@Teetomania·13 public vizzes

Let's make a map with D3.js!

This example demonstrates how to create a world map using D3.js. It loads geographic data from the World Atlas TopoJSON file and projects country boundaries with a spherical Mercator projection. The visualization uses `d3.geoPath` and `d3.geoMercator` to convert GeoJSON features into SVG paths, with the TopoJSON library’s `feature` method extracting country polygons. The resulting map renders as simple filled paths on a blank SVG canvas, showing the continents and country outlines.

Apr 20, 2020

Loading thumbnail…

Bowl of fruit : Hover to select

Interactive fruit bowl shows a row of apples and lemons rendered as SVG circles, where hovering highlights a fruit with a black outline. The example uses D3 v5’s data join with `merge` and `exit` to animate size and position changes via `transition`. Color and radius are mapped by fruit type using `scaleOrdinal`, while mouseover and mouseout events update a selected fruit ID, re-rendering the visualization.

Apr 20, 2020

Loading thumbnail…

Bowl of fruit : Click to select

Five apples appear in a row, each as a colored circle that expands to its full radius over one second. A click selects a fruit, outlining it in black. Animations, including apple removal and type changes, demonstrate D3's enter, merge, and exit transitions, using a modular selection API and ordinal scales for color and radius.

Apr 18, 2020

Loading thumbnail…

Bowl of fruit : General Update pattern

Five apples and a lemon appear in a bowl, with a recurring animation removing a fruit, replacing an apple with a lemon, and then filtering out another apple. This example demonstrates the general update pattern in D3 v5, using `selection.enter`, `selection.merge`, and `selection.exit` to handle data changes. The SVG rendering uses `scaleOrdinal` for fruit color and radius, with shapes drawn as circles and text labels.

Apr 17, 2020

Loading thumbnail…

Bowl of fruit : General Update pattern

A bowl of five apples demonstrates the D3 General Update pattern, where entering, updating, and exiting circles animate smoothly as the data changes. Over time, apples are removed, one apple transforms into a lemon, and another is filtered out, with each transition using `transition().duration(1000)` to adjust radius and position. The example uses d3.scaleOrdinal for color and radius scales, and d3-selection’s `data` with a key function on fruit IDs to manage DOM elements. Rendered as SVG via d3.v5.

Apr 17, 2020

Loading thumbnail…

World Population Area Chart

This area chart visualizes global population change over time, sourced from a CSV of world population by year. The visualization uses D3 v5’s `scaleTime` and `scaleLinear` to map the temporal and population axes, while an `area` generator with `curveBasis` renders the filled path. Axis labels and tick formatting, including converting values to billions, are handled via `axisLeft`, `axisBottom`, and D3’s `format` function.

Apr 14, 2020

Loading thumbnail…

Temprature in San francisco Line Chart

This line chart visualizes a week of temperature data in San Francisco, showing the change over time with a smooth, filled area beneath the line. The x-axis represents time in hours, while the y-axis displays temperature values. The visualization is built with D3 v5, using `scaleTime` and `scaleLinear` for the axes, along with the `area` generator and `curveBasis` interpolation to create the shaded curve. Data is loaded from a CSV file hosted on VizHub and rendered as SVG.

Apr 14, 2020

Loading thumbnail…

Temprature in San francisco Line Chart

This line chart visualizes temperature fluctuations in San Francisco over a week, with time on the x-axis and temperature on the y-axis. The data is loaded from a CSV file at VizHub. The chart is rendered as an SVG using D3 v5, leveraging `scaleTime` and `scaleLinear` for the axes and the `line` generator with `curveBasis` to create a smooth path. Grid lines are drawn by customizing axis ticks, and the chart includes labels for both axes and a title.

Apr 14, 2020

Loading thumbnail…

Temprature in San francisco Scatter Plot

This scatter plot displays a week of temperature readings in San Francisco, with time on the x-axis and temperature on the y-axis, using a blue dot for each recorded observation. The visualization is built with D3 v5, employing `scaleTime` and `scaleLinear` for axes, and `axisBottom` and `axisLeft` to generate gridlines and labels. Data is loaded as CSV from a Vizhub dataset, parsed with `new Date()` and `+d.temperature`, and rendered as SVG circles within a margin-based layout.

Apr 14, 2020

Loading thumbnail…

Cars Scatter Plot

This scatter plot visualizes the relationship between horsepower and weight for cars from the UCI Machine Learning Repository’s Auto MPG dataset. Each red, semi-transparent circle represents a vehicle, with positions determined by linear scales mapping those two numeric attributes. The visualization uses D3 v5 APIs such as `select`, `csv`, `scaleLinear`, `extent`, `axisLeft`, and `axisBottom`, rendering axes and circles as SVG elements. Axis labels and a title are appended as text, while tick marks and gridlines are styled via CSS.

Apr 13, 2020

Loading thumbnail…

Making a Bar Chart

A horizontal bar chart displays the top 10 most populous countries, using 2018 estimates from the United Nations World Population Prospects 2017. The chart uses D3 v5’s `scaleLinear` and `scaleBand` to map population and country names, with `axisBottom` and `axisLeft` for customized axes. Population values are formatted with `d3.format`, and the SVG bars are rendered from a CSV file.

Apr 13, 2020

Loading thumbnail…

Making a bar Chart with D3.js!

This example shows a blank SVG canvas with a fixed width and height, ready for drawing a bar chart. The code imports the `select` function from D3.js and uses it to grab the SVG element, then reads its dimensions via `attr`. The dataset and rendering logic are not yet implemented, leaving the visualization as an empty stage. It uses D3 v5 and renders through SVG, with a minimal stylesheet that removes body margins and hides overflow.

Apr 11, 2020

Loading thumbnail…

Let's make a face with D3.js!

A yellow circle becomes a smiley face as D3.js SVG drawing primitives add eyes, eyebrows, and an arc-shaped mouth. The eyebrows animate by chaining two `transition().duration()` calls that translate their group down and back up over four seconds. The example demonstrates fundamental DOM manipulation via `select` and `append`, using D3's `arc` helper to generate the mouth path.

Apr 10, 2020