Meghana Sadhu

@meghanasadhu·13 public vizzes

Activity7.1_Q2

This area chart displays total monthly electronic sales from September 2023 to September 2024, with the x-axis showing months and the y-axis showing sales in USD. The chart uses a steelblue filled area to represent sales trends over time. Built with D3 v6, the code loads CSV data from a GitHub repository, groups and sums sales by month using `d3.rollups` and `d3.timeMonth`, and renders the area with `d3.area`. Axes are generated using `d3.axisBottom` and `d3.axisLeft`, with custom monthly tick formatting and rotated labels.

Apr 5, 2025

Loading thumbnail…

Activity7_Q1

This pie chart visualizes the distribution of star categories, with each slice labeled by its percentage of the total. Built with D3 v6, the code loads a CSV from a GitHub repository, aggregates counts using `d3.rollup`, and renders SVG arcs via `d3.pie` and `d3.arc`. A categorical color scale and a manually positioned legend identify each star type.

Apr 5, 2025

Loading thumbnail…

Activity6_Q4

This bubble chart visualizes the relationship between product price, quantity in stock, and ratings. Each circle’s position encodes price and stock quantity, while its size reflects the product’s rating and its color indicates the product category. The visualization uses D3.js v7 to load data from a CSV file and render an SVG. Interactive tooltips appear on hover, showing product names, and a legend illustrates the rating scale. The chart also implements margin conventions and custom color scales for categorical data.

Mar 30, 2025

Loading thumbnail…

Activity6_Task4

This bubble chart shows the correlation between average horsepower, torque, and highway MPG for various car makes. Each circle represents a car make, positioned by its horsepower and torque values, with the circle’s size encoding highway MPG. The color of each bubble distinguishes the car manufacturer. Built with D3 v7, the visualization uses `d3.scaleLinear` for axes and bubble sizing, `d3.scaleOrdinal` for color mapping, and includes interactive tooltips on mouseover. The SVG rendering includes a legend for bubble size and a color key for makes.

Mar 30, 2025

Loading thumbnail…

Activity6_Q3.6

This interactive scatter plot visualizes the Palmer Penguins dataset, showing the relationship between bill length and bill depth for three penguin species: Adelie, Chinstrap, and Gentoo. Each point represents a penguin, colored by species with a legend identifying the categories. The visualization uses D3 v6’s `csv` loader to fetch data from GitHub, `scaleLinear` for continuous axes, and `scaleOrdinal` for categorical colors. Grid lines are rendered using `axisBottom` and `axisLeft` with custom tick sizes, while SVG circles depict the data points with black strokes and 0.8 opacity.

Mar 30, 2025

Loading thumbnail…

Activity6_Task3.2

This scatter plot visualizes Iris flower measurements, plotting sepal length against petal length while using distinct symbols to encode species. The code uses d3.scaleLinear for both axes, d3.scaleOrdinal with symbolsFill to map species to shapes, and d3.axisLeft and axisBottom for the axes. A custom legend shows the shape-species mapping. Data is loaded asynchronously from a remote CSV using d3.csvParse and rendered with d3.v7 selections.

Mar 30, 2025

Loading thumbnail…

Activity6_Task3.2

This visualization shows the classic Iris dataset as a scatter plot, mapping sepal length on the x-axis against petal length on the y-axis. Each of the three species—setosa, versicolor, and virginica—is distinguished by a unique symbol shape: circles, crosses, and diamonds, all rendered in black. The plot uses D3 v6 scales and axes, with a custom legend displaying each species symbol. The data is loaded as CSV from a GitHub repository, and the rendering relies on d3.scaleLinear, d3.scaleOrdinal, d3.symbol, and d3.axisBottom/axisLeft.

Mar 30, 2025

Loading thumbnail…

Activity6_Task3

This scatter plot visualizes the Iris dataset, plotting petal length on the x-axis and petal width on the y-axis, with each point colored by species (setosa, versicolor, or virginica). The chart uses D3 v6 with SVG rendering, employing `d3.csv` for data loading, `scaleLinear` for scales, and `axisBottom`/`axisLeft` for axes. The code also references sepal measurements for potential alternate encoding, though only petal dimensions are displayed with circles. Data is sourced from a GitHub-hosted CSV file.

Mar 30, 2025

Loading thumbnail…

Activity6_Q2.3

This stacked bar chart visualizes the distribution of smartphone sales across five price categories for ten brands, with each bar normalized to show proportions of total sales. The D3.js v7 code loads data from a CSV file and renders an SVG visualization, using `d3.stack()` to create stacked segments, `d3.scaleOrdinal()` for color mapping, and `d3.axisBottom()` with percentage tick formatting. Interactive tooltips display the exact percentage for each segment on hover, while a legend identifies the color-coded categories.

Mar 30, 2025

Loading thumbnail…

Activity6_Task2

This stacked bar chart illustrates how the percentage of IMDb ratings varies across six movie genres, such as Documentary and Action, with each bar segmented into five rating brackets from “below 5.0” to “above 8.5.” Built with D3 v7, the visualization uses `d3.stack` to compute the stacked series and `d3.scaleOrdinal` for categorical coloring. Hovering over a segment triggers a custom tooltip that displays the exact percentage for that rating level within the genre, updating via mouse event handlers. The chart relies on SVG rendering and uses `d3.axisBottom` and `d3.scaleBand` for the percentage and genre axes respectively.

Mar 30, 2025

Loading thumbnail…

Activity6_Task1_Q1.2

A horizontal bar chart shows the populations of 20 countries in 2010, sorted by country name, with each bar’s length scaled linearly by population and labeled with a shortened numeric format that converts millions to billions. The chart uses D3 v7’s `d3.scaleLinear`, `d3.scaleBand`, `d3.axisBottom`, and `d3.axisLeft` to construct the axes and marks, with SVG rectangles drawn via `Marks.js` and data loaded from a remote CSV using `d3.csv`. The visualization highlights the relative population magnitudes across countries with a light green fill and blue tick lines.

Mar 30, 2025

Loading thumbnail…

Activity6_Task1_Q1.1

A horizontal bar chart displays the population of the ten most populous countries in the year 2000, sorted in descending order. The visualization uses D3 v7 with an SVG rendering approach, employing `d3.scaleLinear` for the x-axis and `d3.scaleBand` for the categorical y-axis. Data is loaded asynchronously via `d3.csv` from a GitHub-hosted CSV file, then filtered and sorted client-side. The chart includes labeled axes, tick marks, and a title, with light green bars representing population values in billions.

Mar 30, 2025

Loading thumbnail…

Activity6_Task1

This horizontal bar chart displays the population of the top 30 countries in 2020, using a linear scale for population values and a band scale for country names. Each bar is rendered as an SVG rectangle with a lightgreen fill, while the axes include formatted tick labels that abbreviate millions as "M" and billions as "B". The visualization loads data from a remote CSV file using `d3.csv`, and constructs the chart with `d3.scaleLinear`, `d3.scaleBand`, `d3.axisBottom`, and `d3.axisLeft` within a 900x500 SVG canvas.

Mar 30, 2025