jakeh311@yahoo.com

@jakeh311·6 public vizzes

Assignment 9

This example shows a pie chart built from CSV data fetched from a remote GitHub gist. The code uses `d3.csvParse` to convert the fetched text into tabular data, then passes it to `d3.pie()` with a value accessor, which computes arc angles for each segment. A `d3.arc()` generator with zero inner radius creates the pie slices, which are colored using `d3.scaleOrdinal` with `d3.schemeCategory10`. The chart is rendered as SVG inside a pre-existing `<svg>` element, though the arcs are appended but never actually drawn in the provided code.

Apr 23, 2024

Loading thumbnail…

activity 6_Task 3

This example demonstrates the basic setup and functionality of a VizHub project, showing how to load D3 v5 via UNPKG and use it to manipulate HTML content. The visualization displays the text "Hello VizHub!" in a large, centered format using CSS styling. The code imports the `select` function from D3 and a custom message from a local ES6 module, then applies that message to a DOM element through D3's selection API. It also includes examples of local CSS imports and ES6 module usage within the project structure.

Apr 14, 2024

Loading thumbnail…

activity 6_Task 2

This visualization shows the distribution of star ratings (1 to 5) for different sports, displayed as a stacked horizontal bar chart where each bar represents a sport and segments show the proportion of each rating. The data comes from a CSV file with ratings for six sports, and the chart uses D3 v7 with SVG rendering. The code builds the stacked layout using `d3.stack()`, scales data with `d3.scaleLinear` and `d3.scaleBand`, colors segments via `d3.scaleOrdinal`, and includes interactive tooltips on mouseover that display the exact percentage for each rating segment.

Apr 14, 2024

Loading thumbnail…

activity 6_Task 2

This example shows a clustered force-directed network of nodes and links, with each cluster assigned a distinct color and labeled by a numeric ID. It uses `d3.forceSimulation` with `d3.forceLink`, `d3.forceManyBody`, and `d3.forceCenter` to position the nodes, while `d3.drag` enables interactive node movement. The labels are rendered as SVG text elements, and the visualization reads its data from a remote JSON source. Node positions update continuously through the simulation’s `tick` event, redrawing both the connected links and the labeled nodes.

Apr 13, 2024

Loading thumbnail…

activity 6_Task 1

This bar chart displays the populations of the top 20 countries in 2010, using horizontal bars and a logarithmic-like axis format that abbreviates large numbers (e.g., "B" for billions). Rendered as an SVG in React, the visualization uses D3 v5 modules such as `scaleBand` for the categorical y-axis and `scaleLinear` for the x-axis, with a tooltip on each bar showing the exact value. Data is loaded from a CSV via D3’s `csv` function.

Apr 13, 2024

Loading thumbnail…

Fork of Fork of Fork of Fork of Fork of Buddha in colors -overlapping Buddha

This visualization displays a chaotic, overlapping arrangement of Buddha-like path shapes, rendered in vibrant, randomized colors against a black background. The composition is built from a React component that generates a dense grid of rotated polygons, each with semi-transparent fills and randomized positioning. The main Buddha figure is drawn using a large SVG `<path>` element, transformed and scaled within the scene. The code relies on React and ReactDOM for rendering, with ECMAScript array mapping and `Math.random` to produce the generative pattern.

Mar 24, 2024