Lakshanya Sirigiri

@anya-siri·12 public vizzes

Activity7.2

This area chart displays monthly revenue across five months, from October to February, with a single trend line for the "Revenue by Product Line" dataset. The visualization uses the Chart.js library, creating a canvas-based line chart with filled area styling, smoothed curves, and interactive tooltips that track values across the x-axis. The chart is rendered on an HTML5 canvas element and includes gridlines and labeled axes, with data points represented as a continuous line for easy trend analysis.

Apr 11, 2025

Loading thumbnail…

Activity7.1

A pie chart displays sales amounts across five product categories: electronic devices, furniture, clothing, toys, and groceries, with values ranging from 23.78 to 89.43. The Chart.js library renders the visualization on a canvas element, using fixed background colors for each slice and a hover offset effect. The chart includes a legend at the top and a title, with responsive sizing set to half the page width. Data is hardcoded in the script, and the chart updates dynamically through Chart.js's configuration object.

Apr 11, 2025

Loading thumbnail…

Activity7

This interactive scatterplot animates through the four Iris flower measurements—petal width, sepal width, petal length, and sepal length—using a rotating axis system. It displays the classic Iris dataset, with points colored by species (setosa, versicolor, virginica) as skyblue, lightgreen, or orange. Built with D3 v6, it uses `csv` loading, `scaleLinear` for axes, and `setInterval` to cycle the x-axis measurement every few seconds. The SVG rendering includes labeled axes, a legend, and a styled title.

Apr 11, 2025

Loading thumbnail…

Activity7

This animated scatter plot displays Iris flower measurements, cycling through four feature pairs—petal width, sepal width, petal length, and sepal length—on the axes. The visualization uses D3.js version 6.7, loading the Iris dataset via `d3.csv` and rendering with SVG. Data points are color-coded by species, and the plot updates every interval by re-scaling axes and circles through a custom `scatterPlot` function. The code also includes a legend, axis labels, and uses `setInterval` to animate the changing dimension combinations.

Apr 11, 2025

Loading thumbnail…

Activity6_Question4

This bubble chart visualizes the correlation between average horsepower, torque, and highway MPG for different car makes. Each circle represents a make, positioned by horsepower and torque, with its size scaled by highway MPG and colored by make. The visualization includes a legend for bubble size and interactive tooltips on hover. Built with D3 v7, it uses SVG elements and linear scales to map the data from the provided CSV file.

Apr 6, 2025

Loading thumbnail…

Activity6_Tutorial4

This bubble chart visualizes the correlation between average horsepower, torque, and highway MPG for various car makes. Each circle’s position encodes horsepower and torque on the x- and y-axes, while its radius and color represent highway MPG and manufacturer, respectively. The chart uses d3.csv to load the dataset, d3.scaleLinear for axes and bubble sizing, and d3.scaleOrdinal with interpolateTurbo for color mapping. Interactive tooltips appear on mouseover, and legends for MPG and car makes are rendered alongside the SVG animation.

Apr 6, 2025

Loading thumbnail…

Activity6_Question3

This scatter plot visualizes the relationship between bill length and bill depth for three penguin species, using the Palmer Penguins dataset loaded via d3.csv. It renders an SVG chart with d3.scaleLinear axes, d3.axisBottom and d3.axisLeft, and colors each point by species using d3.scaleOrdinal with a custom purple, teal, and crimson palette. A legend is appended using SVG rectangles and text. The plot filters missing values and maps numeric fields before drawing circles with 0.7 opacity.

Apr 6, 2025

Loading thumbnail…

Activity6_Task3.2

This scatter plot maps iris flower sepal length against petal length, with each point’s shape encoding the species category. A custom shape legend identifies the three species symbols. The visualization uses D3 v7’s `scaleLinear`, `scaleOrdinal`, and `symbol` generators to position and style the marks. Data is loaded as CSV from a remote gist and parsed with `csvParse`, with numeric columns coerced to numbers before rendering.

Apr 6, 2025

Loading thumbnail…

Activity6_Task3.2

This scatter plot visualizes the relationship between sepal length and petal length in the Iris dataset, with species distinguished by different filled symbols. The visualization uses d3.scaleLinear for axes scaling and d3.scaleOrdinal with d3.symbolsFill to map species to shapes. A custom shape legend displays the species-to-symbol mapping. The data is loaded from a remote CSV file using d3.csvParse, with coordinates plotted as SVG paths via d3.symbol.

Apr 6, 2025

Loading thumbnail…

Activity6_Task3

This example visualizes the classic Iris dataset as a scatter plot, mapping petal length and petal width onto the x- and y-axes while coloring each point by species (setosa, versicolor, virginica) using distinct fill colors. The visualization is built with D3 version 6, specifically leveraging modules such as `scaleLinear`, `extent`, `axisLeft`, `axisBottom`, and the `csv` loader to fetch and parse the dataset from a remote gist. Data points are rendered as SVG circles, with the axes and labels styled via D3’s low-level selection and appending methods. The chart dynamically sizes to the browser window using `window.innerWidth` and `window.innerHeight`.

Apr 6, 2025

Loading thumbnail…

Activity6_Task3.2

Apr 6, 2025

Loading thumbnail…

Activity 6_Task1

This interactive bar chart displays the populations of 30 countries for the year 2020, sourced from a GitHub-hosted CSV file. Each bar represents a country, with the length of the bar proportional to its population. The visualization is rendered using React and D3 v5, with a light green fill for the bars and blue tick lines for the axes. Tooltips, shown via `<title>` elements within the SVG `<rect>`s, provide formatted population values. The code utilities include D3's `scaleBand` and `scaleLinear` for coordinate mapping, `format` for tick labels, and `csv` for data loading.

Apr 5, 2025