sailalith2000@gmail.com

@sailalith0007·10 public vizzes

question2

This chart visualizes international tourist arrivals in Thailand from 2010 to 2022 as a filled area (area chart) rendered in SVG. The y-axis shows visitor counts in millions, while the x-axis displays years. The visualization filters the source CSV data to only include Thailand, sorts records by year, and encodes the data using `d3.area()` with a band scale for years and a linear scale for visitor counts. Axes are generated with `d3.axisBottom` and `d3.axisLeft`, and the plot includes labeled axes. The data is loaded via `d3.csv` from a GitHub-hosted dataset, and the chart uses D3 v7.

Apr 10, 2025

Loading thumbnail…

Question1

This example shows the distribution of Eurovision Song Contest winners by country from 2000 to 2022, using a pie chart with a legend displaying each country’s win count. The visualization loads CSV data from a GitHub gist, counts wins per country, and renders the chart with D3 v7’s `d3.pie` and `d3.arc` generators. SVG paths are colored via `d3.scaleOrdinal` with the `schemeCategory10` palette, while labels are positioned at arc centroids using `arc.centroid`. A legend is appended as SVG groups with rectangles and text.

Apr 10, 2025

Loading thumbnail…

tutorial1

This example presents an animated scatter plot of the Iris dataset, cycling through different pairings of sepal and petal measurements on the axes. The visualization uses D3.js to load CSV data, render SVG circles colored by species, and update axis scales dynamically with a `setInterval`. It employs reusable custom modules like the `scatterPlot` function, D3 scales (`scaleLinear`), and axis generators (`axisLeft`, `axisBottom`), alongside manual SVG text elements for labels and legends. The dataset is fetched from a GitHub Gist and rendered with smooth, looping transitions.

Apr 10, 2025

Loading thumbnail…

lalith_act6-T4-Q1

This bubble chart visualizes the correlation between average horsepower, torque, and highway MPG across motorcycle makes, with each circle’s position encoding the first two variables and its radius representing fuel efficiency. The tooltip reveals the make on hover. Built with d3.v7, it uses `scaleLinear` for axes and bubble sizing, `scaleOrdinal` with `interpolateTurbo` for color, and SVG circles with mouse event handlers. A legend shows MPG values and color-coded makes. Data comes from `bubblechart.csv`.

Apr 1, 2025

Loading thumbnail…

lalith_act6-T4

This bubble chart shows the correlation between average horsepower, torque, and highway MPG for different car makes. Each bubble represents a car make, positioned by its horsepower and torque values, with the bubble size scaled to reflect its highway MPG rating, and color assigned according to make. The visualization is created using D3.js v7, rendered as an SVG, and includes an interactive tooltip that displays the car make on hover. A legend on the right explains the bubble-size scaling for MPG values, and the color scale uses `d3.interpolateTurbo` alongside `d3.scaleOrdinal` for categorical differentiation.

Apr 1, 2025

Loading thumbnail…

lalith_act6-Q3

This scatter plot visualizes movie ratings against revenue in millions of USD, with each circle colored by genre. It loads a CSV dataset from GitHub using `d3.csv` and renders an SVG with `d3.axisBottom` and `d3.axisLeft` for the axes. A `d3.scaleOrdinal` with `d3.schemeSet2` assigns genre colors, and a manual legend lists each genre. The plot filters out rows with missing numeric values and uses `d3.extent` to set the linear scales.

Apr 1, 2025

Loading thumbnail…

lalith_act6-t3.2

This example shows a scatter plot of iris flower measurements, mapping sepal length to the x-axis and petal length to the y-axis. Points are colored by species using a categorical shape scale with D3’s `scaleOrdinal` and `symbolsFill`, while a custom legend displays the distinct marker shapes. The visualization loads iris data from a GitHub-hosted CSV, parses it with `d3.csvParse`, and renders axes and marks using D3 v7’s selection joins and `symbolGenerator`. Interactivity is limited to resizing the SVG to the full viewport.

Apr 1, 2025

Loading thumbnail…

lalith_act6-t3

This D3.js (v6) scatter plot visualizes the Iris dataset, mapping petal length and width on the x- and y-axes while coloring each point by species (setosa, versicolor, virginica). The SVG rendering uses `d3.csv`, `scaleLinear`, `extent`, `axisBottom`, and `axisLeft` to position and style points, with fixed radius and custom color coding. It loads data from a GitHub-hosted CSV, showing sepal dimensions in tooltips but not in the main plot.

Apr 1, 2025

Loading thumbnail…

lalith_act6-T2-q1

This stacked horizontal bar chart displays productivity metrics across five departments, broken down by activity type such as Emails Answered and Coding Hours. Rendered as SVG using D3.js v7, the visualization employs `d3.axisLeft` for the category axis, `d3.stack` for cumulative bar segments, and `d3.scaleOrdinal` for distinct color mapping. Interactive tooltips reveal exact minute values for each segment on hover. Data is sourced from a CSV file defining department performance across five activity categories.

Apr 1, 2025

Loading thumbnail…

Lalith_act6-T2

This stacked bar chart shows the distribution of IMDb ratings across six movie genres, with each bar divided into five rating brackets from "below 5.0" to "above 8.5". The visualization uses d3.stack() and d3.scaleOrdinal() to create the color-coded segments, with d3.scaleLinear() for the percentage x-axis and d3.scaleBand() for the genre categories. Interactive tooltips display exact percentages on mouseover, and the data comes from a CSV file containing genre-specific rating proportions. The SVG rendering uses D3 v7 with a custom stylesheet for typography.

Apr 1, 2025