Dee (@drusya-github), VizHub

Activity7_Question1_PieChart

This pie chart visualizes chocolate sales by product for March, sourced from a CSV file hosted on GitHub. It uses D3.js to load and filter the data, calculating total sales per product with `d3.rollup` and `d3.sum`. The chart is drawn with `d3.pie()` and `d3.arc()`, while an ordinal color scale maps product names to a blue interpolated palette. A custom legend displays each product alongside its percentage of total sales, rendered as an SVG with a flexible HTML layout.

Apr 10, 2025

act7 forrkkkk

A pie chart visualizes fruit sweetness by summing sweetness values for each fruit type from a CSV dataset. The d3.pie generator and d3.arc create the slices, colored via scaleOrdinal with schemeCategory10. A manually positioned legend displays each fruit category with its corresponding color. The SVG renders with a separate group for the chart and legend, while a bold title labels the visualization.

Apr 9, 2025

fork_scatterplot_act8

This interactive scatterplot visualizes the Iris dataset, showing petal width against sepal length with points colored by species. Using D3.js and SVG, the plot animates through different variable combinations every few seconds, cycling through all four flower measurements as axes. The visualization updates axes and scales dynamically via `setInterval`, while a legend identifies the three species with distinct colors. Built with `d3.csv`, `d3.scaleLinear`, and axis components, it demonstrates a reusable scatterplot module with real-time data exploration.

Apr 9, 2025

Activity6_Question4

This interactive bubble chart visualizes chocolate brands by cocoa percentage, sugar content, and popularity index, with bubble size encoding popularity and color representing brand identity. The SVG visualization uses d3.scaleLinear for x/y axes, d3.scaleOrdinal with d3.interpolateTurbo for color mapping, and d3.csv to load the dataset. Hovering over a bubble triggers tooltip HTML showing the brand name. The chart also includes legends for bubble size and brand colors, rendered with d3 selections and animated transitions on mouseover and mouseleave.

Apr 5, 2025

A6_T4

This interactive bubble chart visualizes the correlation between average horsepower, torque, and highway MPG for various car makes. Each bubble’s x-position encodes horsepower, the y-axis represents torque, and the circle’s radius scales with highway MPG, while color distinguishes the manufacturer. Implemented with D3 v7, the chart renders as SVG with animated transitions and tooltips on hover, using `d3.scaleLinear`, `d3.scaleOrdinal`, and `d3.interpolateTurbo` for color mapping. A legend displays the MPG scale and make colors. Data is loaded from a local CSV via `d3.csv`.

Apr 5, 2025

Activity6_Task4

This visualization is a bubble chart that explores the relationship between average horsepower (x-axis), average torque (y-axis), and highway MPG (bubble size) for various car makes. Each bubble represents a car make, with its position determined by horsepower and torque, while its radius and color correspond to fuel efficiency and make, respectively. The chart uses D3.js v7's `scaleLinear`, `scaleOrdinal`, `interpolateTurbo`, `axisBottom`, and `axisLeft` APIs to render the SVG. Interactive tooltips reveal the car make on hover, and a legend explains the MPG scale. Data comes from a CSV file.

Apr 5, 2025

Activity6_Question3

This scatter plot visualizes fruit classification based on two continuous attributes, sweetness and crunchiness, each rated on a 0–10 scale. The visualization distinguishes three fruit types—Apple, Banana, and Grape—using distinct marker shapes (circle, square, triangle) and colors, generated via d3.symbol(). The plot is rendered as an SVG using D3 v7, with axes drawn via d3.axisBottom and d3.axisLeft, and data loaded from a remote CSV using d3.csv. A custom shape legend maps fruit types to their symbols.

Activity6_Task3.2

A scatter plot visualizes the relationship between sweetness and crunchiness for fruit samples, with each point colored and shaped by fruit type (apple, banana, grape) via an SVG path. The D3 v7 code maps data from a remote CSV, uses a linear scale for both axes, and renders the chart with SVG. A separate shape legend uses D3 symbols, and a custom HTML legend indicates fruit types.

Activity6_Question3

This scatter plot visualizes penguin species by mapping culmen length and depth to the x- and y-axes. Each species is distinguished by a unique symbol shape and color, with data loaded from a CSV file and rendered as SVG paths. The visualization uses d3.scaleLinear for axes, d3.symbol for shapes, and a custom shapeLegend function to display the species key. Axis labels and ticks are generated with d3.axisBottom and d3.axisLeft, while data cleaning removes entries with missing or invalid measurements.

dupeeeeee

This D3.js (v7) scatter plot visualizes the Iris dataset, plotting sepal length against petal length for three species. The chart distinguishes species through both color and geometric shapes—diamonds for setosa, squares for versicolor, and triangles for virginica—using d3.symbol and d3.axisBottom/axisLeft. A custom shape legend explains the symbol mapping. Data loads from a remote CSV file via d3.csv, with points rendered as SVG paths within a standard margin-based chart layout.

fork of scatterplot with shape

This example shows an Iris dataset scatter plot of sepal length against petal length, with points colored and shaped by species. A legend on the right maps each species to its corresponding symbol shape. The visualization is built using D3 v7, employing `scaleLinear` for the axes, `scaleOrdinal` with `symbolsFill` for shape encoding, and `symbol` to generate the point markers. Data is loaded asynchronously from a GitHub-hosted CSV and parsed with `csvParse`.

Activity6_Task3

This scatter plot visualizes the Iris dataset, encoding petal length on the x-axis, petal width on the y-axis, and species via point color (skyblue, lightgreen, and blue). It uses D3 v6 with `csv`, `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to load data, map scales, and render SVG circles and axes. The code parses numeric measurements from the CSV and applies a custom color function per species, with axis labels styled in green.

Activity6_Task3

This example presents a simple, centered text display in the browser using D3.js. The page shows the message “Hello VizHub!” in large type, styled via CSS. The code imports the `select` function from D3 and a custom ES6 module to set the text content of a `<div>` element. It demonstrates a minimal D3 setup with a local stylesheet and an external library loaded from a CDN.

Apr 2, 2025

Activity6_2

This stacked horizontal bar chart displays customer satisfaction ratings for six product categories, with segments representing the percentage of ratings falling into five ranges from below 2.0 to above 4.5. The visualization uses D3 v7 to load CSV data and render SVG elements. Categories appear on the y-axis, while a linear x-axis shows the proportion for each rating band. An ordinal color scale distinguishes rating levels, and interactive tooltips display the exact percentage for each segment on hover. The chart includes axis labels, a title, and a legend.

Mar 31, 2025

Activity6_Q1B

This example shows a horizontal bar chart ranking the top 20 countries by population in 2010, with country names on the y-axis and population values in millions on the x-axis. The chart loads data from a CSV file using `d3.csv` and renders bars as SVG `<rect>` elements sized by a `d3.scaleLinear` x-scale and positioned by a `d3.scaleBand` y-scale. Custom tick components generate labeled axes, and the React code manages state and effects to fetch and sort the data in descending order.

Mar 31, 2025

Activity6_Q1A

A horizontal bar chart displays the top 10 countries by population in the year 2000, using red bars sorted in descending order. The visualization is built with React and D3 v7, rendering as SVG via ReactDOM. It employs d3.scaleLinear for the x-axis and d3.scaleBand for the y-axis, with population data parsed from a CSV file fetched via d3.csvParse and fallback sample data.

Mar 31, 2025

activity 5 - 6 buddhas

A React SVG visualization renders a large, intricate path of the sixth Buddha as a single continuous line. The code defines an array of numbers and a cube function, though the primary visual is this detailed path drawing. A flower background image is set via CSS on the body, filling the full viewport, while the Buddha path is scaled and positioned using SVG transform. The visualization uses React’s `ReactDOM` to mount the component and displays the path with no additional data mapping or interaction.

activity 5 - 6 buddhas

A React SVG visualization renders a large, intricate path of the sixth Buddha as a single continuous line. The code defines an array of numbers and a cube function, though the primary visual is this detailed path drawing. A flower background image is set via CSS on the body, filling the full viewport, while the Buddha path is scaled and positioned using SVG transform. The visualization uses React’s `ReactDOM` to mount the component and displays the path with no additional data mapping or interaction.

5 Buddhas

Five colorful diamond shapes overlap atop a dense network of small, randomly positioned polygons, all rendered on a black background. The piece generates a chaotic abstract composition from nested array maps, using React to create SVG polygon elements with random coordinates and fill colors. The central Buddha path is drawn with an SVG `<path>` element and transformed and scaled into place, mixing generative randomization with a fixed figurative illustration.

5 Buddhas

Five Buddhas appear as nested scatterplots of small colored circles, each built from a single shared path dataset repeated across three nested array maps. The React application renders an SVG scene with randomly positioned circles layered over a black background, while the Buddha silhouette itself is drawn from a detailed SVG path scaled and translated into five positions. The code uses React’s `ReactDOM` to mount the component and maps arrays to generate both the circle clusters and the path geometries, with random color and opacity values creating a vibrant, overlapping composition.

5 Buddhas

Five Buddhas appear as nested scatterplots of small colored circles, each built from a single shared path dataset repeated across three nested array maps. The React application renders an SVG scene with randomly positioned circles layered over a black background, while the Buddha silhouette itself is drawn from a detailed SVG path scaled and translated into five positions. The code uses React’s `ReactDOM` to mount the component and maps arrays to generate both the circle clusters and the path geometries, with random color and opacity values creating a vibrant, overlapping composition.

5 Buddhas

Five Buddhas appear as nested scatterplots of small colored circles, each built from a single shared path dataset repeated across three nested array maps. The React application renders an SVG scene with randomly positioned circles layered over a black background, while the Buddha silhouette itself is drawn from a detailed SVG path scaled and translated into five positions. The code uses React’s `ReactDOM` to mount the component and maps arrays to generate both the circle clusters and the path geometries, with random color and opacity values creating a vibrant, overlapping composition.