pnamitha46@gmail.com

Activity 7.1 -Q1

This pie chart visualizes the distribution of car classes in a dataset, showing the proportion of each category as a percentage label on each slice. The visualization uses D3.js to load CSV data, compute class counts, and generate an SVG pie chart with a custom color scale and a legend displaying class names with their raw counts. The chart is rendered in an SVG container with styled slices and labels.

Nov 5, 2024

q1

This example shows how movie genres are distributed across rating categories using a pie chart, with each slice sized according to the percentage of movies in a particular genre. It loads D3 v7 via UNPKG and uses the `d3.pie` and `d3.arc` APIs to generate the chart, with `d3.scaleOrdinal` for color encoding and `d3.select` for DOM manipulation. Interactive tooltips appear on mouseover, displaying the genre name and percentage, while text labels inside each slice show the computed percentage values. A legend is built dynamically using D3's selection and data-binding methods.

Nov 5, 2024

Activity 7.1 - Q1

This pie chart visualizes the distribution of movie ratings across six genres, showing the proportion of each genre falling into various rating bands. The chart uses a D3.js pie chart with an ordinal color scale, and interactive tooltips that appear on mouseover. A legend displays the genre-color mapping. The visualization is implemented with `d3.pie`, `d3.arc`, and `d3.scaleOrdinal`, rendering as SVG with D3 v7. Genre data is sourced from a static array within the code.

Nov 4, 2024

Q4

This bubble chart explores the correlation between movie rating ranges across six genres, using the percentage of ratings in the 5.0–6.5 range on the x-axis, the 7.5–8.5 range on the y-axis, and the 6.5–7.5 range as bubble size. The D3 v7 visualization uses SVG circles with a tooltip, ordinal color scaling, and linear scales for position and size. Axes are formatted as percentages, with data loaded from an inline array.

Oct 22, 2024

Q3

A bubble chart displays average horsepower and highway MPG for car makes from a CSV dataset, with each bubble color-coded by category (Luxury, Sports, Economy, Other) using D3.js v7’s scaleOrdinal and Papa Parse for data loading. The chart uses SVG circles for marks and a legend to map categories to colors, while axes and labels are drawn with d3.axisBottom and d3.axisLeft.

Oct 21, 2024

Q2

A horizontal stacked bar chart displays average horsepower, torque, and highway MPG for 31 car makes, sorted by combined performance. Each bar segment is colored by metric, with light pink for horsepower, light blue for torque, and turquoise for highway MPG. The chart is built with Chart.js using a canvas element, parsing the bubblechart.csv file via PapaParse. Data is grouped and averaged per make before rendering, with tooltips showing precise values to two decimal places.

Activity6_Task4

This bubble chart shows the correlation between average horsepower, torque, and highway MPG for various car makes. Each circle represents a make, positioned by horsepower on the x-axis and torque on the y-axis, with circle size encoding highway MPG and color differentiating make. The visualization uses d3.v7 to render SVG elements, with d3.scaleLinear for axes and bubble sizing, and d3.scaleOrdinal with interpolateTurbo for color mapping. A custom tooltip displays the make on hover, and legend circles indicate MPG values. Data comes from the CSV file bubblechart.csv.

Tutorial 3.2

This scatter plot visualizes the Iris dataset, showing the relationship between sepal and petal length for three species. The d3.js code uses `scaleLinear` for the x- and y-axes, and `scaleOrdinal` with `symbolsFill` to distinguish species by shape (circles, squares, and other symbols). A custom legend component displays the symbol-to-species mapping, while the `axes` module renders labeled axes using `axisBottom` and `axisLeft`. Data is loaded asynchronously from a CSV file and parsed with `csvParse`.

Activity6_Task3

This scatter plot visualizes the Iris dataset, displaying petal length on the x-axis and petal width on the y-axis. Points are colored by species (setosa, versicolor, virginica) using skyblue, lightgreen, and orange. The visualization uses D3 v6 APIs including `csv`, `scaleLinear`, `extent`, `axisLeft`, and `axisBottom`, with data loaded from a GitHub Gist. The SVG rendering is responsive, sized to the window dimensions.

Activity6_Task3

This example displays a centered, large-scale “Hello VizHub!” message using D3.js to manipulate the DOM. The code imports D3’s `select` function and a local ES6 module, demonstrating modular JavaScript and library integration. It also includes a regular expression and a constant variable, though these have no visual output. The styling is handled via an external CSS file, setting the text alignment and font size. The rendering approach is a simple static text update, with D3 loading from UNPKG in the HTML.

Activity 6

A horizontal bar chart displays the 2020 populations of thirty countries, with bars sorted by country name and tooltips showing the population value. The visualization is rendered as SVG through React, using D3's `scaleBand` for the categorical y-axis, `scaleLinear` for the numeric x-axis, and the `format` function to abbreviate large numbers. Data is loaded from an external CSV file via D3's `csv` utility.

Activity6_Task2

This example visualizes the distribution of IMDb movie ratings across six genres using a stacked horizontal bar chart. Each bar segment represents the percentage of movies within a rating range (e.g., below 5.0, 5.0–6.5), with a legend on the right. Built with D3 v7, it uses `d3.stack`, `d3.scaleOrdinal`, `d3.scaleBand`, and `d3.scaleLinear` to structure the data, while mouse events and a custom tooltip display exact percentages on hover. The chart is rendered as SVG with a CSV data source.

Q1-2

This example displays a horizontal bar chart comparing the populations of 20 countries in 2010, sorted by country name along the vertical axis. The chart uses a linear scale for population values and a band scale for countries, with green bars that include tooltips showing the formatted population in billions. Built with React and D3 v5, the visualization loads CSV data via `d3.csv`, renders SVG elements through React components, and formats axis ticks using `d3.format`. The code demonstrates local ES6 module imports and reusable axis and mark components.

Q1-1

This horizontal bar chart ranks the ten most populous countries in the year 2000, with population values formatted in billions via a custom SI-prefix function. Built with React and D3 v5, it uses `scaleBand` for the categorical y-axis and `scaleLinear` for the quantitative x-axis. SVG rectangles render the bars, while `AxisBottom` and `AxisLeft` generate the ticks and labels, and hover tooltips display each value. Population data is loaded from a remote CSV using D3’s `csv` parser.

Q1-2

This example demonstrates the "Hello World" starting point for the VizHub V3 Runtime Environment, displaying the text "Hello World!" at a fixed font size of 217 pixels inside a container DIV. The code exports a `main` function that receives the container element and sets its inner HTML with inline styling. It highlights the simplified entry-point pattern of VizHub V3, where no `index.html` file is needed, and supports continuous hot reloading through interactive widgets for real-time adjustments.

6 Buddhas

Six Buddhas overlap in a colorful, chaotic SVG composition rendered on a flower-patterned background. The visualization uses React with ReactDOM to render an SVG canvas, where multiple nested array maps generate random colored rectangles with varying opacity. Each Buddha is drawn using a complex SVG path, scaled and positioned via transform attributes. The code includes a nested loop structure that creates a dense field of semi-transparent colored squares behind the overlapping Buddha figures.

Oct 18, 2024

6 Buddhas

Oct 18, 2024

6 Buddhas

A generative SVG composition depicts a chaotic field of small, randomly positioned and colored polygons, overlaid with a large, detailed vector path of a Buddha figure. Built with React, the piece uses nested `map` operations to generate and position the abstract shapes, while the figurative element is rendered as an SVG `<path>`. The work contrasts algorithmic randomness with a precise, hand-authored contour.

Oct 17, 2024