William Nsambu

@william3n·10 public vizzes

FinalProject_Data_Visualization

This interactive visualization of airplane crashes since 1908 allows users to explore incidents by country and date range. It displays a clickable list of cities whose crashes meet the filter criteria, with selected city details showing each crash's date, number of crashes, and fatalities. Built with D3 v6, the code uses `d3.csv` to load data, `d3.select` for DOM manipulation, and `filterData`/`updateDetails` functions to handle filtering and detail rendering. The dataset comes from a GitHub-hosted CSV file containing airplane crash records with new features.

Apr 23, 2024

Loading thumbnail…

William_Task9_10_Area_Chart

This example shows the total purchase stock-in values for inventory products as a filled area chart, with product IDs displayed along the x-axis. The chart uses d3.area() to generate the area path and d3.scaleLinear() for both axes, rendering in SVG. Data is loaded asynchronously from a CSV file, and x-axis labels are rotated to prevent overlap. The visualization relies on d3.axisBottom and d3.axisLeft to create the tick marks and labels.

Apr 20, 2024

Loading thumbnail…

William_Task9_10

This pie chart visualizes the proportion of units sold for each product ID from an inventory CSV file. The visualization uses D3.js v7 to load the data, transform it into name-value pairs, and render a categorical pie chart. The code applies the d3.pie and d3.arc APIs to generate the pie segments and a d3.scaleOrdinal color scheme with the category10 palette. Each slice is labeled with the product ID and rendered as an SVG within a 500 by 500 pixel canvas.

Apr 20, 2024

Loading thumbnail…

Activity8_Task4

This interactive bubble chart visualizes the relationship between average horsepower, torque, and highway MPG across vehicle makes, with circle position encoding horsepower and torque on linear scales and bubble size representing MPG via a d3.scaleLinear. A tooltip displays the make on hover, while the dataset from bubblechart.csv is loaded using d3.csv. Color mapping uses d3.scaleOrdinal with d3.interpolateTurbo to distinguish manufacturers, and the SVG rendering includes custom legends for both bubble size and color categories.

Apr 13, 2024

Loading thumbnail…

Activity8_Task3.2

This example displays a scatter plot of Iris flower measurements, with sepal length on the x-axis and petal length on the y-axis. Points are colored and shaped by species, and a custom legend maps each species to a distinct symbol shape. It uses d3.csvParse to load data from a remote CSV file, d3.scaleLinear for axes, and d3.scaleOrdinal with d3.symbolsFill to assign shapes. The visualization is modular, with separate functions for drawing axes, the scatter plot, and the shape legend.

Apr 13, 2024

Loading thumbnail…

Activity8_Task3

This example visualizes the Iris dataset as a scatter plot, mapping petal length and width to the x and y axes while coloring each point by species (setosa, versicolor, virginica). It uses d3.csv to load the data, d3.scaleLinear for axes, and d3.select to build the SVG. The plot also encodes sepal length and width as the `rx` and `ry` attributes of each circle, though these do not affect the visual radius. Axis labels and legends are added via d3.axisBottom and d3.axisLeft.

Apr 13, 2024

Loading thumbnail…

Activity8_Task2

A stacked horizontal bar chart displays the distribution of IMDb movie ratings across six genres, with each bar segmented into five rating brackets from "below 5.0" to "above 8.5" and labeled with the percentage each segment represents. The visualization uses d3.stack() to compute the stacked series, d3.scaleBand() for the genre categories on the y-axis, and d3.scaleLinear() for the percentage scale on the x-axis. Interactive tooltips appear on mouseover, showing the exact percentage for a specific genre and rating bracket, with the data loaded from a CSV file and rendered as SVG elements.

Apr 13, 2024

Loading thumbnail…

Fork of Activity 8 Task 1 Q1.2

A horizontal bar chart displays the populations of twenty countries in 2010, sorted by country name. The visualization is built with React and renders SVG elements, using D3 scales (`scaleBand` and `scaleLinear`) to map data to positions. Data is loaded asynchronously from a CSV file via D3’s `csv` function, with population values converted from thousands. Axes and marks are implemented as reusable React components, and the bars include native SVG `<title>` elements for tooltips.

Apr 13, 2024

Loading thumbnail…

Activity 8 Task 1

A horizontal bar chart displays the populations of ten countries for the year 2000, sorted by country name. Built with React and D3 v5, the visualization uses `scaleBand` and `scaleLinear` to map data, while custom `AxisBottom` and `AxisLeft` components render SVG axis ticks and labels. Population values are loaded from a remote CSV file and formatted using D3's `format` function, with tooltips provided by SVG `<title>` elements. The chart highlights the green bars and blue axis ticks against a clean background.

Apr 13, 2024

Loading thumbnail…

WilliamNsambu_Task7_VizHub_Fork

The visualization displays overlapping Buddha imagery through hundreds of randomly positioned and rotated diamond-shaped polygons, rendered in bright, varied colors against a black background. Built with React and SVG, the code generates nested loops over an array to produce the shapes, using `Math.random()` for placement, sizing, and color assignment. The central Buddha path is drawn from a static SVG path definition, scaled and translated into the scene, while the background polygons create a kaleidoscopic, chaotic halo around the figure.

Mar 24, 2024