Skip to main content
Log in
I

Immaculata-Mary Muoghalu

@trinityimma·14 public vizzes

Loading thumbnail…

Temperature in San Francisco Line Chart

This line chart displays one week of temperature data in San Francisco, with time on the x-axis and degrees Celsius on the y-axis. The visualization uses D3 v5’s `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `line` with a `curveBasis` generator to render the smooth maroon path against gridlines. Data is loaded via `csv` from a remote dataset and rendered as an SVG, with axes labeled “Time” and “Temperature.” The chart includes a title and styled ticks, drawn from the Data Canvas - Sense Your City dataset.

May 17, 2021
Loading thumbnail…

Temperatre in San Francisco Scatter Plots

This scatter plot visualizes temperature readings in Celsius over a one-week period in San Francisco, sourced from Data Canvas - Sense your City. The x-axis represents time, while the y-axis displays temperature values, with each data point depicted as a steelblue circle. The visualization is built using D3 v5, employing `scaleTime` and `scaleLinear` for axis scaling, `axisBottom` and `axisLeft` for tick marks, and SVG rendering for the plot elements.

May 16, 2021
Loading thumbnail…

Range Column Bar Chart

This range column bar chart displays the downtime periods of nine oil wells, plotting each well's start and end dates as a horizontal bar against a time axis. The visualization uses D3 v5 with SVG rendering, employing `scaleTime` for the date range and `scaleBand` for well names. Data comes from a CSV file with parsed date values, and the chart includes axes with tick marks, labels, and a title.

May 12, 2021
Loading thumbnail…

Read from Excel

This bar chart displays the top 10 most populous countries using 2018 UN population estimates, with each bar colored according to the country’s flag colors. The chart encodes population on a linear x-axis and country names on a categorical y-axis, using d3.scaleLinear, d3.scaleBand, and d3.axisLeft/axisBottom. Data is loaded from a CSV file via d3.csv, with populations multiplied by 1000, and rendered as SVG rectangles. Axis tick labels use abbreviated formatting via d3.format.

May 11, 2021
Loading thumbnail…

Customizing Axes

This bar chart displays the population of the top 10 most populous countries using 2018 UN estimates. The chart uses d3.csv, d3.scaleLinear, and d3.scaleBand to map population values to horizontal bar lengths and country names to vertical positions. Customized axes include a formatted tick label that converts large numbers to abbreviated units, horizontal grid lines, and a labeled x-axis. Each bar is colored according to a value in the data, and the chart includes a title and styled text elements.

May 11, 2021
Loading thumbnail…

Bowl of Fruit - General Update Patter

Five apples appear in a row as red circles, then one disappears when the data array shrinks, and a later apple turns yellow to become a lemon. The example demonstrates the D3 general update pattern using `selection.enter()`, `selection.exit()`, and the merge of new and existing elements. It uses `d3.scaleOrdinal` for color and radius mappings based on fruit type, with `setTimeout` calls to trigger the data changes. Rendering targets an SVG canvas via D3 v5.

Apr 22, 2021
Loading thumbnail…

World Population Area Chart

This area chart visualizes world population growth over time, using a smooth, filled curve to trace the data from historical years up to 2015. The visualization, rendered as an SVG, relies on D3.js’s `area`, `curveBasis`, `scaleTime`, and `scaleLinear` APIs to construct the chart, with axes formatted using `axisLeft` and `axisBottom`. Population values are read from a CSV file hosted on VizHub, and the title, axis labels, and tick marks are styled via a linked CSS file.

Apr 21, 2021
Loading thumbnail…

Temperature in San Francisco Area Chart

This area chart displays a week of temperature data in San Francisco, with time on the x-axis and degrees Celsius on the y-axis. The visualization uses a smooth curved area fill to emphasize temperature variation across the period, with a title and labeled axes. The code uses d3.csv to load the dataset from a CSV file, scales time and linear values with d3.scaleTime and d3.scaleLinear, and renders the area using the d3.area generator with a curveBasis interpolation. Axis elements are created with d3.axisBottom and d3.axisLeft, and the SVG output includes grid lines and styled text.

Apr 21, 2021
Loading thumbnail…

Cars Scatter Plots

This scatter plot visualizes the relationship between horsepower and acceleration for cars from the UCI Machine Learning Repository’s AUTO MPG dataset. Each semi-transparent steelblue circle represents a car, with positions determined by linear scales. The code uses D3 v5 methods like `csv`, `scaleLinear`, `extent`, `axisBottom`, and `axisLeft` to load data, compute domains, and render axes with SVG. Axis labels and a chart title are added as text elements, while grid lines are generated via tick sizes.

Apr 20, 2021
Loading thumbnail…

Scatter Plots

This scatter plot displays the population of the top 10 most populous countries using colored circles, with each country’s color reflecting its national flag. The x-axis uses a linear scale to show population values, while the y-axis orders countries with a point scale. Built with D3 v5, the visualization uses `scaleLinear`, `scalePoint`, `axisLeft`, and `axisBottom` to render SVG circles. Data comes from 2018 UN estimates, formatted in billions on the axis and sourced from the provided CSV file.

Apr 18, 2021
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. Each country’s bar is colored with a country-specific hexadecimal value from the CSV data, and population figures are multiplied by 1000 after loading. Built with D3 v5, the visualization uses `scaleLinear` for the x-axis, `scaleBand` for the categorical y-axis, and `axisLeft` and `axisBottom` to render the axes. The chart is rendered as SVG elements appended to the DOM.

Apr 17, 2021
Loading thumbnail…

Let's make a Face with D3.js

A static SVG face built with D3.js includes circles for eyes, a path for a mouth, and rectangular eyebrows, all positioned using the `arc` generator and SVG attributes. Clicking an "Eye me!" button triggers a `transition` on the eyebrows group, moving them upward and back down over two 2-second intervals. The example uses D3 v5 modules like `select`, `arc`, and `transition.attr` to animate the facial expression, demonstrating object and array handling in JavaScript.

Apr 17, 2021
Loading thumbnail…

Shapes with SVG

This example shows how to construct basic SVG shapes—circles, rectangles, lines, and a path—positioned in a group with a scale transform. It demonstrates styling shapes with inline attributes, a group-level fill and stroke, and a CSS class that adds stroke properties to lines and the path. The code uses raw SVG elements within an HTML document, with no JavaScript libraries or data binding, relying solely on static markup and a linked stylesheet for visual customization.

Apr 14, 2021
Loading thumbnail…

Cars Report

This example demonstrates a text-based report generated from a small in-memory dataset of cars, filtering and formatting entries based on price. It shows how JavaScript modules and promises structure asynchronous data loading and report generation. The page initially displays “Loading…” and then uses `getCars()` with a simulated delay to fetch parsed JSON data, followed by `generateReport()` and `formatCar` to create formatted lines. D3 v6 is included but not used, while the core logic relies on native array methods like `filter`, `map`, and `join`. The final output appears as a large custom-styled `<pre>` element.

Apr 14, 2021