NIIPUNNREDDY00@GMAIL.COM

@Niipunn·21 public vizzes

Activity7_Answer2

This visualization displays the average horsepower for different vehicle types using an area chart with a monotone curve. The SVG chart is rendered with D3.js v7, which loads CSV data from a GitHub repository via `d3.csv`. The code computes group averages through `d3.rollup` and `d3.mean`, then scales the x-axis with `d3.scalePoint` and the y-axis with `d3.scaleLinear`. The filled area path is generated with the `d3.area` API, and axes are added using `d3.axisBottom` and `d3.axisLeft`.

Apr 10, 2025

Loading thumbnail…

Activity 7_Answer 1_D3.JS

This pie chart shows the distribution of vehicle types in a dataset, with each slice colored and paired with a legend. The visualization is built using D3.js v7 and rendered as SVG, with the pie geometry computed by `d3.pie()` and drawn using `d3.arc()`. Data is loaded from a remote CSV file, aggregated with `d3.rollup()`, and colored using `d3.scaleOrdinal(d3.schemeTableau10)`. The chart includes axis labels and hover tooltips, though the code erroneously mislabels the categorical pie slices as X and Y axes.

Apr 10, 2025

Loading thumbnail…

Activity 6_Answers 9 10 11_NRS

This bubble chart visualizes the correlation between processor speed, RAM, and battery life for 20 smartphone brands. Each circle’s x-position maps to processor speed, its y-position to RAM, and its radius encodes battery life hours, with color distinguishing brands. The visualization uses D3.js v7 with SVG rendering, employing `d3.scaleLinear` for axes and bubble size, `d3.scaleOrdinal` with `schemeCategory10` for colors, and `d3.axisBottom` and `d3.axisLeft` for axes. Data is loaded from a CSV file, and a legend identifies each brand.

Mar 30, 2025

Loading thumbnail…

Activity6_Task 4_NRS

This bubble chart visualizes the correlation between average horsepower, torque, and highway MPG across 31 car makes using CSV data. Each circle’s position encodes horsepower (x-axis) and torque (y-axis), while its radius and color represent highway MPG, with a color legend identifying brands. Built with d3.v7, it uses d3.scaleLinear for axes and bubble size, d3.scaleOrdinal with interpolateTurbo for colors, and SVG rendering. Interactive hover tooltips display the make name, while a legend shows MPG values and car brand markers.

Mar 30, 2025

Loading thumbnail…

Activity 6_Answers 6 7 8_NRS

This scatterplot explores the relationship between engine size and fuel efficiency for various vehicle types, with each point’s radius encoding horsepower and its color representing the vehicle’s category. The visualization is built using D3 v6’s `select`, `scaleLinear`, `scaleOrdinal`, `csv`, and `axisBottom`/`axisLeft` APIs, rendering as an SVG in the browser. Data is loaded from a remote CSV hosted on GitHub, with all numeric fields parsed before being plotted.

Mar 30, 2025

Loading thumbnail…

Activity 6_Tutorial 3.1_NRS

This example visualizes the Iris dataset as a scatterplot of petal length versus petal width, with each point colored by species (setosa, versicolor, or virginica). The code uses d3.csv to load the data, d3.scaleLinear for the x and y axes, and d3.axisLeft/axisBottom to render ticks. Circles are drawn with SVG, and each point also stores sepal length and width values as unused rx and ry attributes. The plot fills the browser window, with axis labels in green and a 20px tick font.

Mar 30, 2025

Loading thumbnail…

Activity6_Tutorial 3.2_NRS

This scatter plot visualizes the Iris dataset, showing sepal length on the x-axis and petal length on the y-axis, with each of the three iris species represented by a distinct symbol. A legend identifies the species by their unique shapes. The visualization is built using D3.js v7, leveraging its modular APIs for data parsing, linear scaling, ordinal shape encoding, and axis rendering. The chart draws data points as SVG paths, with axes and labels generated programmatically to provide a clear and interactive view of the dataset's distribution.

Mar 30, 2025

Loading thumbnail…

Activity 6_Tutotrial 3.1_NRS

This example displays a minimal text message centered on a blank page. It uses a D3 selection to target the `#message` div and update its text content with a string imported from a separate ES6 module. The message is styled with large font sizing via CSS, demonstrating a basic integration of D3, local module imports, and external styling. The visualization serves as a simple Hello World template for starting chart projects in the VizHub environment.

Mar 30, 2025

Loading thumbnail…

Activity 6_Answer 3 4 5_NRS

This stacked bar chart shows the distribution of movie performance categories—Super Hit, Hit, Budget Break-Even, Flop, and Utter Flop—across ten film studios, using normalized percentages. Each horizontal bar represents a studio’s portfolio, colored segments indicate category shares, and hovering reveals exact values via a tooltip. Built with D3 v7, the visualization uses `d3.stack()` for stacking, `d3.scaleOrdinal` for colors, and `d3.axisBottom` with percentage formatting. Data comes from a CSV file, rendered as SVG with mouseover interactions for detailed inspection.

Mar 30, 2025

Loading thumbnail…

Activity 6_Task 2_NRS

A stacked bar chart shows the distribution of movie ratings across six genres, with each bar divided into five rating categories from "below 5.0" to "above 8.5" as percentages. The visualization uses D3 v7 with SVG rendering, employing `d3.stack()` to compute stacked series, `d3.scaleOrdinal` for color mapping, and `d3.scaleBand` for the categorical axis. Interactive tooltips display exact percentages on mouseover. Data comes from a CSV file with genre and rating proportion columns.

Mar 30, 2025

Loading thumbnail…

Activity 6_Task 2_NRS

This example displays a simple text message, “Hello VizHub!”, centered on the page. The visualization uses D3.js to select the `#message` div and update its content with a string imported from a separate ES6 module. The text is styled with CSS, setting a large font size and centered alignment. The code demonstrates a minimal integration of D3’s `select` API with modular JavaScript, though it does not include any data-driven or interactive visual elements.

Mar 30, 2025

Loading thumbnail…

activity 6_Task 1_NRS

This horizontal bar chart displays the top 30 countries by 2020 population, with countries on the y-axis and population on the x-axis. The visualization uses D3 v7 to create an SVG render, with a linear scale for population and a band scale for country categories. Data is loaded from a CSV via `d3.csv`, then rendered using custom axis and mark modules that leverage `d3.axisBottom`, `d3.axisLeft`, and SVG `rect` elements.

Mar 30, 2025

Loading thumbnail…

Activity 6_Answer 2_NRS

This example visualizes the 2010 population of 20 countries using a horizontal bar chart, with country names on the y-axis and population on a linear scale. The chart uses D3 v7 with SVG rendering, employing `d3.scaleBand` for the categorical y-axis and `d3.scaleLinear` for the population values, plus `d3.axisBottom` and `d3.axisLeft` for axes with custom labels. Population data comes from a CSV hosted on GitHub, loaded asynchronously via `d3.csv`, and the bars are drawn with light green rectangles. The visualization includes a title and styled tick lines and text.

Mar 30, 2025

Loading thumbnail…

activity6_Ans1_NRS

This visualization displays a horizontal bar chart of the top 10 most populous countries in the year 2000, with countries sorted in descending order along the y-axis and population values on the x-axis. The chart uses D3 v7’s scaleBand and scaleLinear to position bars, which are rendered as SVG rectangles filled with light green. Axis labels are added via the d3.axisBottom and d3.axisLeft APIs, with custom tick formatting converting values from millions to billions. The data is loaded asynchronously from a CSV file hosted on GitHub using d3.csv, then filtered and sorted to extract the top 10 entries.

Mar 30, 2025

Loading thumbnail…

Fork of activity6_task3

This scatter plot visualizes the Iris dataset, showing the relationship between petal length and petal width, with each point colored by species (setosa, versicolor, or virginica). The code loads CSV data from a GitHub gist and parses it with D3’s `csv` function. It uses `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to position circles in an SVG, while also including unused sepal measurements as attributes. The visualization highlights species clusters through distinct fill colors applied via a switch statement.

Mar 30, 2025

Loading thumbnail…

Fork of Activity6_Task2

A fork of Activity6_Task2 displays tabular population data for several countries from 1950 to 2020 in a plain text format. The visualization uses D3 v6 to select a DOM element and assign a message string via the `select` and `text` methods. The code imports a message from a local ES6 module, demonstrating modular JavaScript within a minimal HTML page that loads D3 from a CDN. No chart or graphical rendering is present; the example focuses on basic data integration and text output.

Mar 30, 2025

Loading thumbnail…

Fork of Activity 6_Task 1

This fork of Activity 6_Task 1 renders a simple greeting using a minimal D3 setup. The index.html file defines the page structure, while index.js uses `d3.select` to target a `#message` div and set its text content. The text itself comes from an imported ES6 module, `myMessage.js`, which exports the string “Hello VizHub!”. Global CSS in styles.css centers the text and sets its font size to 12em. No additional data or interactive behavior is present beyond this static textual display.

Mar 30, 2025

Loading thumbnail…

activity 6_Task 1_NRS

This example displays the text “Hello VizHub!” prominently in the center of the page. It demonstrates a minimal setup combining an HTML document, a CSS stylesheet, and a JavaScript module. The code uses D3.js version 6, importing the `select` function to target the HTML element with the id `message` and set its text content. The text and styling are defined in separate local files, including a custom ES6 module that exports the message string.

Mar 30, 2025

Loading thumbnail…

Fork of Six Buddhas

A fork of the “Six Buddhas” visualization renders five overlapping Buddha silhouettes in violet, outlined in white, against a photographic flower background. The React app uses SVG path elements, scaled and translated via transform attributes to create the layered composition. The code includes a cubic function and array generation, though these utilities do not visibly affect the final rendered output.

Mar 15, 2025

Loading thumbnail…

Fork of Five Buddhas

Five overlapping Buddha silhouettes, each filled with violet and outlined in white, stack and drift across a black canvas. The composition repeats the same intricate path data five times, with each copy scaled and translated to create a rhythmic, layered mandala effect. The visualization is built with React and rendered as SVG paths, using hardcoded coordinate data for the Buddha outlines. The code imports React and ReactDOM, creates an array of numbers, and applies a cubic function to a sample value before defining the SVG container.

Mar 15, 2025

Loading thumbnail…

Five Buddhas

A neon-like SVG portrait of the Buddha is rendered in React, composed of overlapping translucent circles scattered across a black background. The circles are positioned randomly using `Math.random()` within a nested triple-loop, producing a dense, colorful pointillist texture. Five repeating Buddha path outlines are layered on top, each drawn from embedded SVG path data and scaled via `transform` attributes. The visualization uses React 16.10 and ReactDOM, with no external data source or animation, relying purely on static SVG elements and randomized RGB fill colors.

Mar 15, 2025