mayasuedorman@gmail.com

Activity 7 Tutorial

A reusable scatter plot example demonstrates D3.js modular chart construction with local ES6 imports and a data-driven API. It loads NFL injury data from a GitHub gist, using `d3.scaleLinear`, `d3.extent`, `d3.axisLeft`, and `d3.axisBottom` to render points. The chart’s width, height, margin, and radius are configurable via function methods. A companion area chart illustrates yearly injury totals with `d3.rollup`, `d3.area`, and gridlines, while a pie chart displays injury-type percentages using `d3.pie` and `d3.arc` with a legend. The examples show multiple visualization patterns within a single tutorial.

Activity6_Task3

This example demonstrates how to load D3 from a CDN and use ES6 modules to structure a minimal web page. It shows a single text message, “Hello VizHub!”, displayed in the center of the screen and styled with a large font size. The code imports the `select` function from D3 and a string from a local `myMessage.js` module, then uses `select` to set the text content of a `div` element. The setup highlights the integration of external libraries with local modular JavaScript code.

Activity 6 -- Task 2

A stacked bar chart displays regional sales across appliance, home, clothing, and shoe departments, with each region’s total sales determining the horizontal axis scale. The visualization uses D3 v7’s `d3.stack` to aggregate the CSV data, `d3.scaleBand` for the categorical y-axis, and `d3.scaleOrdinal` to assign colors. SVG rendering places grouped bars and a legend, while axes are formatted with `d3.axisBottom` and `d3.axisLeft`. A custom color palette and bold tick styling from the linked stylesheet enhance readability.

Activity 6

Fork of Activity 7

This horizontal bar chart displays the top 30 countries by 2020 population, with green bars extending from a shared baseline and blue tick marks along the axes. Built with React, the visualization uses D3 v5’s `scaleBand`, `scaleLinear`, and `format` utilities to map country names and population values to SVG rectangles, while the `csv` loader fetches data from a GitHub-hosted CSV file. Axis components render tick lines and labels, and hover tooltips reveal formatted population values via SVG `<title>` elements.

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

A single Buddha silhouette is repeated six times with overlapping translations and scales, creating a dense, layered composition in violet, white, and green against a floral background image. The React app renders each copy as an SVG path using raw path data, with transforms applied via JSX attributes. The design relies on CSS for page styling, including a background image, while the SVG paths are drawn from hardcoded coordinate strings, and the `stroke` and `fill` properties control the visual weight.

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

Randomly generated overlapping polygons form a dense, colorful abstract field, with a large Buddha silhouette layered on top using SVG paths. The polygons, rendered via React's `map` method, use randomly assigned fill colors, opacity, and rotation transforms. The artwork combines procedural geometry with a fixed vector illustration, all rendered within a single SVG canvas using React and ReactDOM.