thoutunikhitha@gmail.com

Activity7-Q1

This pie chart visualizes world population distribution across continents, using a pastel color scheme and displaying population values in crores directly within each slice. A legend on the right pairs each continent with its corresponding color and population figure. Built with D3.js v5, the visualization uses d3.pie, d3.arc, and d3.scaleOrdinal to generate the SVG chart, while d3.csv loads the remote dataset and d3.format handles population value formatting.

Apr 11, 2025

Activity6-Q4

This bubble chart visualizes coffee production data from a CSV file, showing yield (kg per hectare) on the x-axis, area harvested (hectares) on the y-axis, and production volume (kg) encoded by bubble size and color. The visualization uses d3.csv for data loading, d3.scaleLinear and d3.scaleSqrt for scaling axes and bubble radii, and d3.scaleSequential with d3.interpolateTurbo for color mapping. Interactive tooltips appear on mouseover, displaying each country’s production details. The chart also includes a bubble-size legend (500k, 1M, 2M kg) and is rendered with SVG elements and animation-ready transition support.

Activity6-Task4

This bubble chart visualizes the correlation between average horsepower, torque, and highway MPG across various car makes. Each circle’s position encodes horsepower on the x-axis and torque on the y-axis, while its radius and color represent highway MPG and car make, respectively. Built with D3 v7, the SVG animation includes interactive tooltips on hover, a custom legend for MPG bubble sizes, and a color-coded legend for makes. Data is loaded from a CSV file, with scales defined via d3.scaleLinear and colors assigned using d3.scaleOrdinal with d3.interpolateTurbo.

Activity6-Task4

This example displays a centered greeting message using the D3.js library. The visualization is created by applying the `select` function from D3 to target the `#message` div element in the HTML document, then setting its text content. The code imports the `select` API from D3 and also imports a local ES6 module called `myMessage`, which exports the string 'Hello VizHub!'. The message is rendered with large, centered font styling defined in the accompanying CSS file, and the D3 library is loaded via a CDN link in the HTML structure.

Activity6_Task4

A scatter plot visualizes the relationship between horsepower and acceleration for ten cars, encoding the categorical model field (A, B, C) with three distinct SVG shapes: circles in steelblue for model A, green squares for model B, and orange triangles for model C. The chart uses linear scales for both axes with labeled ticks, rendering all marks through manually appended SVG primitives. The code defines the dataset inline and employs D3 v7 methods like `d3.scaleLinear`, `d3.axisBottom`, `d3.axisLeft`, and `d3.path` to construct the shapes and axes.

Activity6_Q-3

This scatter plot displays the relationship between horsepower and acceleration for ten cars, with each point’s shape and color indicating the car model (A, B, or C). The visualization uses D3.js v7 to map data to SVG shapes, with circles, squares, and triangles drawn using `d3.select`, `d3.scaleLinear`, and `d3.path`. Axes are generated with `d3.axisBottom` and `d3.axisLeft`, and labeled via appended SVG text elements. The dataset is hardcoded in the script, and the plot is rendered entirely on an SVG canvas.

Activity6_Task 3.1

This scatter plot visualizes the Iris dataset, showing petal dimensions with points colored by species: sky blue for setosa, light green for versicolor, and orange for virginica. Built with D3 v6, the visualization maps sepal length and width to the x and y axes, and encodes petal dimensions in the circle's rx and ry attributes. The code uses d3.csv to load remote data, d3.scaleLinear for axis scaling, d3.extent for domain calculation, and d3.axisLeft and d3.axisBottom for axis rendering, with the SVG output filling the browser window.

Activity6_Task 3.2

This example displays a scatter plot of the Iris dataset, mapping sepal length on the x-axis against petal length on the y-axis. Points are colored and shaped according to species, with a legend indicating the mapping. The visualization is built using D3 version 7, leveraging the `scaleLinear`, `scaleOrdinal`, `symbol`, and `symbolsFill` APIs for scales and glyphs, along with custom axis and legend modules. Data is loaded from a remote CSV file and parsed with `csvParse`.

Apr 5, 2025

Activity6_Q-2.3

This stacked bar chart shows the proportion of global internet users across six regions—Africa, Asia, Europe, North America, South America, and Oceania—from 2015 to 2019. Using d3.v7 and SVG, it stacks yearly percentage values per region via `d3.stack()`, with bars colored by year through `d3.scaleOrdinal()`. The visualization includes axes generated by `d3.axisBottom()` and `d3.axisLeft()` with percentage formatting, plus a clickable legend. Data comes from the included `internet-users.csv` file, and clicking a bar alerts the region, year, and percentage.

Activity6_Task2

This stacked bar chart from D3 v7 visualizes the distribution of IMDb ratings across six movie genres, using d3.stack and d3.scaleOrdinal for color encoding. Each horizontal bar represents a genre, segmented into five rating categories from “below 5.0” to “above 8.5,” with segment lengths proportional to the percentage of films in that rating band. The chart employs d3.axisBottom for the percentage scale and d3.scaleBand for the categorical genre axis. Hovering over a segment triggers an HTML tooltip via mouseover events, displaying the exact percentage for that rating level within the selected genre, with all values summing to 100%. The data comes from a local CSV file.

Activity-6_Q1.2

A horizontal bar chart displays the populations of 20 countries in 2010, sorted alphabetically by country name. The bars are rendered as SVG rectangles using React components, with D3 v5's `scaleBand` for the categorical y-axis and `scaleLinear` for the quantitative x-axis. Population values are loaded from a CSV file via `d3.csv`, formatted with `d3.format` to abbreviate large numbers (e.g., "1.2B"), and each bar includes a tooltip showing the exact value.

Activity-6_Q1.1

This horizontal bar chart displays the populations of ten countries in the year 2000, sorted from largest to smallest. The chart uses React components to render SVG marks, with d3.scaleBand and d3.scaleLinear handling the y and x axes respectively. Data is loaded from a CSV file using d3.csv, and population values are formatted with d3.format for the axis tick labels, which use a compact notation (e.g., "B" for billions).

Activity-6_Task 1

This horizontal bar chart displays the 2020 populations of 30 countries, ordered from largest at the top to smallest at the bottom. Each bar’s length represents population in billions, with a labeled x-axis and country names on the y-axis. The visualization loads CSV data via d3.csv, scales it using d3.scaleBand and d3.scaleLinear, and renders SVG rectangles through React components. D3’s format function abbreviates large numbers, while the code also defines reusable AxisBottom, AxisLeft, and Marks components.