Adeola Oni

@oneil213·13 public vizzes

Bowl of fruit general update pattern

A growing and changing bowl of fruit demonstrates the D3 general update pattern. Apples appear in red circles, and lemons appear in yellow, with position and size driven by a scaleOrdinal for color and radius. The code in index.js orchestrates timed updates using setTimeout, removing, replacing, and filtering data arrays, while fruitBowl.js uses selection.enter, merge, and exit to handle entering, updating, and exiting SVG groups. The example renders with d3.v5 and SVG.

Apr 3, 2020

Loading thumbnail…

Bowl of fruit general update pattern

A bowl of fruit demonstrates D3's general update pattern with three apple and lemon circles transitioning in size and position over four seconds. The animation shows an apple disappearing, a lemon being swapped in, and a second apple being removed, with all circles smoothly resizing via `transition().duration(1000)`. The code uses D3 v5's `scaleOrdinal` for color and radius mapping, `selectAll('circle').data()` for data binding, and `enter()`, `merge()`, and `exit()` to handle state changes, rendering as SVG with hardcoded fruit objects generated via `range(5).map()`.

Apr 3, 2020

Loading thumbnail…

World population

This area chart shows world population over time, with the x-axis mapping years and the y-axis displaying population in billions, using a filled path with a smooth curve. The data comes from a CSV file loaded via `d3.csv`, and the visualization leverages `d3.scaleTime`, `d3.scaleLinear`, `d3.area`, and `d3.axisBottom`/`d3.axisLeft` to render an SVG. A custom tick formatter converts values from billions to a shorter notation, while grid lines and axis labels are styled through CSS.

Apr 2, 2020

Loading thumbnail…

Temprature in San Francisco Scattered Plot

This visualization displays a week of temperature data in San Francisco as a scatter plot, with each point representing a temperature reading over time. The chart uses d3.scaleTime and d3.scaleLinear to map timestamps and temperatures to positions, while d3.axisBottom and d3.axisLeft render the axes with gridlines. The data is loaded via d3.csv from a temperature dataset, and the scatter points are rendered as SVG circles with a steelblue fill. The chart includes axis labels and a title, with margins and dimensions defined in the code.

Apr 2, 2020

Loading thumbnail…

Temprature in San Francisco Scattered Plot

A scatter plot of a week's temperatures in San Francisco shows individual readings as steel blue circles with a maroon trend line, plotted over time on the x-axis and degrees Celsius on the y-axis. The visualization uses d3's `select`, `csv`, `scaleTime`, `scaleLinear`, `axisLeft`, `axisBottom`, and `line` with `curveBasis` to render the SVG, pulling data from a CSV file hosted on VizHub.

Apr 2, 2020

Loading thumbnail…

Temprature in San Francisco Scattered Plot

This scatter plot visualizes one week of temperature readings in San Francisco, with time on the x-axis and temperature in degrees Celsius on the y-axis. Each circle represents a single temperature measurement, revealing daily fluctuations over the period. The visualization uses D3 v5 with `scaleTime` and `scaleLinear` for axes, and `axisBottom` and `axisLeft` for tick rendering. Data is loaded from a CSV file via `d3.csv` and rendered as an SVG. The chart includes labeled axes, a title, and gridlines created with `tickSize`.

Apr 2, 2020

Loading thumbnail…

Scattered 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 car, with its position determined by its horsepower (x-axis) and weight (y-axis). The code uses d3.csv to load the data, d3.scaleLinear for both axes, and d3.axisBottom and d3.axisLeft to render the labeled scales. The SVG rendering includes styled axis ticks, labels, and a title, with circles appended to a grouped element translated by calculated margins.

Apr 2, 2020

Loading thumbnail…

Scattered Plot

This scatter plot displays the population of the top 10 most populous countries using a 2018 United Nations estimate, with each circle representing a country. The visualization uses D3 v5’s `scaleLinear` for the population axis and `scalePoint` for the country categories, along with `axisBottom` and `axisLeft` to render the axes. Circles are positioned via `cx` and `cy` attributes, with data loaded from CSV using `d3.csv`. Styling is applied through SVG and CSS for visual clarity.

Apr 2, 2020

Loading thumbnail…

Customising Axis

This bar chart displays the population of the top 10 most populous countries, using 2018 estimates from the United Nations World Population Prospects. The visualization customizes both D3 axes: the left axis has all domain lines and tick lines removed, while the bottom axis uses a tick format that converts values from billions to a compact "B" suffix and extends tick lines across the plot. The chart applies a steelblue fill to all bars and uses custom font styles for ticks, labels, and the title. Data is loaded from a CSV file and scaled using `scaleLinear` and `scaleBand`.

Apr 2, 2020

Loading thumbnail…

Making a bar chart

This bar chart displays the population of the top 10 most populous countries, using 2018 estimates from the United Nations World Population Prospects. The chart uses D3 v5 with SVG rendering, employing `d3.scaleLinear` for the x-axis and `d3.scaleBand` for the y-axis. Axes are customized via `d3.axisLeft` and `d3.axisBottom`, with population values scaled by 1000.

Apr 2, 2020

Loading thumbnail…

Lets make a face with D3.js!

A yellow circle with black outlines forms a face, complete with two eyes, animated eyebrows that move up and down, and a curved smile drawn using D3's `arc` generator. The SVG elements are positioned relative to a centered group, with the eyebrows animating through chained `transition` calls that alter the group's transform over two-second intervals. This example uses D3 v5's `select` and `arc` functions to build and animate the face entirely in the browser.

Apr 1, 2020

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates how SVG shapes can be styled and grouped using both inline attributes and Cascading Style Sheets (CSS). It renders circles, rectangles, a line, and a path directly within an SVG element. The shapes use inline properties like `fill`, `stroke`, and `stroke-width`, while the `.lines` CSS class applies red strokes to the line and path elements. The `path` is further styled with a green stroke and rounded line joins via `.lines path`, showing how SVG presentation attributes can complement and override CSS rules.

Apr 1, 2020

Loading thumbnail…

Cars Report

This example demonstrates a text-based report of used cars, filtering a hardcoded JSON array and displaying formatted entries under a price threshold. The page initially shows a “Loading...” message, then generates the report after a simulated two-second delay via a JavaScript Promise. It uses standard JavaScript object destructuring, array filtering, and the `map` and `join` methods to construct the output, which is rendered into a `<pre>` element with enlarged font size. The report omits any car priced at or above the $4,000 cutoff, showing only the year, make, model, and price for each qualifying vehicle.

Apr 1, 2020