ayeshamanzoor111798@gmail.com

@ayeshastarstar·17 public vizzes

Activity7.1_question1

This example shows an animated pie chart that cycles through four numeric attributes of Palmer Penguins data—culmen length, culmen depth, flipper length, and body mass—updating the visualization every two seconds. The chart uses d3.pie and d3.arc to generate slices, d3.scaleOrdinal with schemeCategory10 for species-based coloring, and a legend built with SVG rects and text elements. An attribute label at the top updates with each cycle, while the underlying data comes from a CSV file loaded via d3.csv.

Nov 5, 2024

Loading thumbnail…

Activity7.1_question2

This visualization cycles through four numerical attributes of a penguin dataset, rendering each as an area chart where the x-axis shows species and the y-axis scales to the selected attribute. The chart updates every two seconds, clearing the previous SVG elements and redrawing with the next attribute in rotation. Built with D3 v6, the code uses `scaleLinear`, `scaleBand`, and the `area` generator, with axes created via `axisLeft` and `axisBottom`. Data comes from a remote CSV file containing penguin measurements, rendered as animated SVG in the browser.

Nov 5, 2024

Loading thumbnail…

Activity7.1_tutorial

This animated scatter plot visualizes penguin size measurements from a CSV dataset, dynamically cycling through different x-axis variables including body mass, culmen measurements, and flipper length. The visualization uses D3.js v6 to render SVG circles colored by penguin species, with a reusable `scatterPlot()` function that handles scaling, axes, and data binding. The animation rotates through four measurement columns using `setInterval`, updating the x-axis and re-rendering the plot while maintaining a consistent legend and axis labels.

Nov 5, 2024

Loading thumbnail…

Activity6_Question4

This interactive bubble chart visualizes the correlation between battery life, camera megapixels, and weight for 20 smartphone brands. Each bubble’s x-position maps battery life, y-position maps camera resolution, and its radius encodes weight. The visualization uses d3.csv to load data, d3.scaleLinear for axes and bubble sizing, and d3.scaleOrdinal with d3.interpolateTurbo to assign brand colors. Hovering triggers a custom tooltip showing the brand name, while red circles and lines provide legends for weight and color-coded brands.

Oct 25, 2024

Loading thumbnail…

Activity6_Question1-2

This example shows the top 20 countries by 2010 population as a horizontal bar chart, with country names on the y-axis and population totals formatted in billions along the x-axis. Built with React and D3 v5, it uses `scaleBand` for the categorical y-axis, `scaleLinear` for the numeric x-axis, and SVG `<rect>` elements to render each bar. The data is loaded from a CSV file via `d3.csv`, and the chart includes custom axis components and a tooltip showing the formatted population value on hover.

Oct 25, 2024

Loading thumbnail…

Activity6_Question1-1

This example displays a horizontal bar chart of the populations of the top ten countries in the year 2000. The visualization uses D3 v5 scale functions, specifically `scaleBand` for the categorical y-axis and `scaleLinear` for the quantitative x-axis, all rendered as SVG via React components. Data is loaded from a remote CSV using D3's `csv` function and formatted with the `format` API for axis labels. The chart includes custom tick marks and axis labels, with interaction provided through SVG `<title>` tooltips.

Oct 25, 2024

Loading thumbnail…

Activity6_4

A D3.js bubble chart correlates average torque, horsepower, and highway MPG for 31 car makes. Each bubble's position encodes horsepower (x-axis) and torque (y-axis), while its radius scales with MPG and its color distinguishes the brand. The visualization includes interactive tooltips showing the make on hover, a legend for MPG sizes, and a categorical color legend, all rendered as SVG with d3.scaleLinear and d3.scaleOrdinal.

Oct 25, 2024

Loading thumbnail…

Activity6_Question3

This interactive scatter plot visualizes the relationship between BMI and height, with each point colored by the individual's category (adult, teenager, child). The code uses D3 v6 to load the CSV dataset from a GitHub repository, scales the axes with `scaleLinear`, and renders the circles as SVG elements. The chart incorporates `axisLeft` and `axisBottom` for numeric axes, with custom labels in green, all sized to the browser window.

Oct 25, 2024

Loading thumbnail…

Activity6_Task3

This scatter plot visualizes the Iris dataset, showing petal length against petal width, with each circle colored by species (skyblue for setosa, lightgreen for versicolor, orange for virginica). The D3 v6 code loads CSV data from a GitHub repository, uses scaleLinear and extent to establish scales, and renders circles as SVG marks with attributes for position and fill. Axis labels appear for both dimensions, and the chart fills the entire window.

Oct 25, 2024

Loading thumbnail…

Activity6_Task3-2

This scatter plot visualizes Iris flower measurements, mapping sepal length to the x-axis and petal length to the y-axis. Each flower is rendered as a D3 symbol, with species distinguished by distinct shapes (circles, crosses, and diamonds) via d3.scaleOrdinal and d3.symbolsFill. The visualization includes labeled axes and a custom shape legend, with data fetched from a remote CSV file and parsed using d3.csvParse. The code uses d3.scaleLinear for positioning and d3.axisLeft/axisBottom for tick rendering.

Oct 25, 2024

Loading thumbnail…

Activity6_Question2

This stacked bar chart visualizes the distribution of five personality traits—Sarcastic, Funny, Stylish, Moody, and Attractive—among six Friends characters. Each bar represents a character, with segments proportionally sized to sum to 100% per character. Hovering over a segment triggers a tooltip displaying the precise percentage. The visualization uses D3 v7 with `d3.stack()`, `d3.scaleBand()`, and `d3.scaleLinear()` to compute and render the stacked layout as SVG rectangles, with a custom color scale for each trait.

Oct 25, 2024

Loading thumbnail…

Activity6_Task2

This stacked bar chart shows the distribution of IMDb movie ratings across six genres, revealing how documentary and action films differ in their rating profiles. Each horizontal bar represents a genre, segmented into five rating levels from below 5.0 to above 8.5, with hover tooltips displaying exact percentages. The visualization uses D3 v7’s `d3.stack()` and `d3.scaleBand()` to generate the SVG rendering, with `d3.scaleOrdinal()` assigning colors and mouse events triggering the tooltip updates. Data comes from a CSV file containing aggregated rating percentages that sum to 1 for each genre.

Oct 25, 2024

Loading thumbnail…

Activity6_Task2

This stacked bar chart shows the percentage distribution of five IMDb rating categories across six movie genres, revealing how genre influences audience ratings. Each horizontal bar represents a genre, with colored segments corresponding to rating bands from below 5.0 to above 8.5. Hovering over a segment displays a tooltip with the exact percentage for that rating level within the genre. The visualization uses d3.stack() to compute the stacked layout, d3.scaleBand() for the genre axis, and d3.scaleLinear() for percentages, rendering as SVG with interactive mouse events. Data comes from a CSV file with pre-aggregated proportions.

Oct 25, 2024

Loading thumbnail…

Activity6_Question2

This example demonstrates the fundamental workflow of a VizHub project, loading D3 v5 through a CDN and importing both D3 functions and local ES6 modules. It shows how D3’s `select` function targets a DOM element to set text content, while a separate local module supplies the displayed message. The code also includes a CSS rule for centering and scaling the text, and initializes a numeric constant and a regular expression. The page renders a simple, large-format greeting.

Oct 23, 2024

Loading thumbnail…

Activity6_Task1

This bar chart displays the 2020 population estimates for 30 countries, sorted along a categorical y-axis. The visualization uses D3 v5 to load CSV data from a GitHub repository and React to manage the SVG rendering. The chart applies a linear scale for population counts, a band scale for country names, and a custom tick formatter that abbreviates large numbers (e.g., converting gigabytes to billions). Tooltips, provided via SVG `<title>` elements, show the formatted population values on hover.

Oct 23, 2024

Loading thumbnail…

6 Buddhas

Six overlapping Buddha silhouettes, each drawn as a single SVG path, layer against a flower-background image. The visualization React renders 960-by-1000 pixel SVG, transforming a shared path with different translate and scale values to create a stacked, color-saturated composition. The code also includes commented-out random polygon generation attempts, suggesting an exploration of geometric shapes versus the final organic path-based design. The flower image comes from an external URL applied via CSS background properties.

Oct 19, 2024

Loading thumbnail…

5 Buddhas

This visualization shows a black screen filled with hundreds of semi-transparent, randomly positioned, rotated diamond polygons in vibrant colors, layered over a complex SVG path depicting a seated Buddha figure. The geometric shapes are generated through triple‑nested React `map` functions that compute polygon points and fill colors using `Math.random()`. The Buddha illustration is rendered as an SVG `path` with a long, detailed coordinate string, scaled and translated via a `transform`. React manages the component structure, while the SVG elements are rendered directly in the browser using the React DOM library.

Oct 13, 2024