saikarthiknimmagadda@gmail.com

act7_q1piechart

This pie chart visualizes the distribution of flower species from a CSV dataset, displaying the proportion of each species with colored slices and labels. The chart is built with D3.js v7, using `d3.pie()` to compute arc angles and `d3.arc()` to generate SVG paths, with an ordinal color scale assigning light green, blue, and orange to species groups. A legend on the right side, rendered as SVG rectangles and text, maps each color to its corresponding species, while `d3.rollups` aggregates the raw data into species counts before drawing.

Apr 9, 2025

act7_karthiktutorialt1

Animated scatter plot of the Iris dataset cycles through four feature pairs (petal/sepal width and length), coloring points by species (setosa, versicolor, virginica). Built with D3.js 6.7, it uses `csv()` loading, linear scales, and axis helpers (`axisLeft`, `axisBottom`), redrawing circles and axes on a `setInterval` timer. The SVG output includes a custom legend, styled labels, and a title, with the dataset loaded from a GitHub gist.

Apr 9, 2025

activity6_Task1.2

This bar chart displays the population figures for the top 20 countries in 2020, presented in descending order along a horizontal axis. Each country is represented by a light green rectangle, with the population values read from a CSV dataset hosted on GitHub. The visualization is built using D3.js v7, leveraging `d3.scaleLinear` for the x-axis and `d3.scaleBand` for the categorical y-axis. The axes are rendered via `d3.axisBottom` and `d3.axisLeft`, with custom tick formatting that abbreviates large numbers using suffixes like "B" for billions.

Apr 5, 2025

activity6_Task3.2 karthik

This scatter plot displays the Iris dataset, mapping sepal length against petal length, with each point's shape indicating the species of iris. The visualization uses D3 v7 functions including `scaleLinear`, `scaleOrdinal`, `symbolsFill`, and `symbol` to generate the marks. A custom `shapeLegend` ES6 module renders a legend for the species categories, while the `axes` module creates labeled axes for both dimensions. Data is loaded from a remote CSV file and parsed using `csvParse`.

Apr 5, 2025

Fork of activity6_Task4

This bubble chart shows the correlation between a vehicle's average horsepower (x-axis), average torque (y-axis), and highway MPG (bubble size and color). Each bubble represents a car make, with color mapping to the specific brand and size scaled to its highway fuel efficiency rating. The visualization uses D3.js v7 to render SVG elements, with a tooltip that appears on mouseover. The chart includes an interactive legend for bubble size and a color legend, with data loaded from a CSV file.

activity6_Task4

This example displays the text “Hello VizHub!” centered on a blank page. It uses D3.js to select the HTML element with the ID `message` and set its text content. The page’s styling is defined in a separate CSS file, which sets the text alignment, font size, and color. The code demonstrates a basic D3 workflow: importing D3 functions, using `d3.select()` to target a DOM element, and updating its content dynamically. The example runs in a simple HTML structure that loads D3 from a CDN and includes a JavaScript bundle.

activity6_Task4

This example displays the text “Hello VizHub!” centered on a blank page. It uses D3.js to select the HTML element with the ID `message` and set its text content. The page’s styling is defined in a separate CSS file, which sets the text alignment, font size, and color. The code demonstrates a basic D3 workflow: importing D3 functions, using `d3.select()` to target a DOM element, and updating its content dynamically. The example runs in a simple HTML structure that loads D3 from a CDN and includes a JavaScript bundle.

activity6_Task4

This example displays the text “Hello VizHub!” centered on a blank page. It uses D3.js to select the HTML element with the ID `message` and set its text content. The page’s styling is defined in a separate CSS file, which sets the text alignment, font size, and color. The code demonstrates a basic D3 workflow: importing D3 functions, using `d3.select()` to target a DOM element, and updating its content dynamically. The example runs in a simple HTML structure that loads D3 from a CDN and includes a JavaScript bundle.

activity6_Task4

This example displays the text “Hello VizHub!” centered on a blank page. It uses D3.js to select the HTML element with the ID `message` and set its text content. The page’s styling is defined in a separate CSS file, which sets the text alignment, font size, and color. The code demonstrates a basic D3 workflow: importing D3 functions, using `d3.select()` to target a DOM element, and updating its content dynamically. The example runs in a simple HTML structure that loads D3 from a CDN and includes a JavaScript bundle.

activity6_Task4

This example displays the text “Hello VizHub!” centered on a blank page. It uses D3.js to select the HTML element with the ID `message` and set its text content. The page’s styling is defined in a separate CSS file, which sets the text alignment, font size, and color. The code demonstrates a basic D3 workflow: importing D3 functions, using `d3.select()` to target a DOM element, and updating its content dynamically. The example runs in a simple HTML structure that loads D3 from a CDN and includes a JavaScript bundle.

activity6_Task4

This example displays the text “Hello VizHub!” centered on a blank page. It uses D3.js to select the HTML element with the ID `message` and set its text content. The page’s styling is defined in a separate CSS file, which sets the text alignment, font size, and color. The code demonstrates a basic D3 workflow: importing D3 functions, using `d3.select()` to target a DOM element, and updating its content dynamically. The example runs in a simple HTML structure that loads D3 from a CDN and includes a JavaScript bundle.

activity6_Task4

This example displays the text “Hello VizHub!” centered on a blank page. It uses D3.js to select the HTML element with the ID `message` and set its text content. The page’s styling is defined in a separate CSS file, which sets the text alignment, font size, and color. The code demonstrates a basic D3 workflow: importing D3 functions, using `d3.select()` to target a DOM element, and updating its content dynamically. The example runs in a simple HTML structure that loads D3 from a CDN and includes a JavaScript bundle.

activity6_Task4

This example displays the text “Hello VizHub!” centered on a blank page. It uses D3.js to select the HTML element with the ID `message` and set its text content. The page’s styling is defined in a separate CSS file, which sets the text alignment, font size, and color. The code demonstrates a basic D3 workflow: importing D3 functions, using `d3.select()` to target a DOM element, and updating its content dynamically. The example runs in a simple HTML structure that loads D3 from a CDN and includes a JavaScript bundle.

activity6_Task4

This example displays the text “Hello VizHub!” centered on a blank page. It uses D3.js to select the HTML element with the ID `message` and set its text content. The page’s styling is defined in a separate CSS file, which sets the text alignment, font size, and color. The code demonstrates a basic D3 workflow: importing D3 functions, using `d3.select()` to target a DOM element, and updating its content dynamically. The example runs in a simple HTML structure that loads D3 from a CDN and includes a JavaScript bundle.

activity6_Task4

This example displays the text “Hello VizHub!” centered on a blank page. It uses D3.js to select the HTML element with the ID `message` and set its text content. The page’s styling is defined in a separate CSS file, which sets the text alignment, font size, and color. The code demonstrates a basic D3 workflow: importing D3 functions, using `d3.select()` to target a DOM element, and updating its content dynamically. The example runs in a simple HTML structure that loads D3 from a CDN and includes a JavaScript bundle.

activity6_Task3.1

This scatter plot visualizes the relationship between petal length and petal width for synthetic flower data, with each circle colored by species (florida, tropica, montana) using a d3.scaleOrdinal color scale. The chart uses d3.dsv to load tab-separated data from a hosted CSV file, then maps the numeric attributes to a 960x600 SVG canvas via d3.scaleLinear scales for the x and y axes. Axis labels are added using d3.axisBottom and d3.axisLeft, and circles are rendered with a fixed radius and 80% opacity.

activity6_Task2

This stacked bar chart compares the distribution of game ratings across eight gaming platforms, with each colored segment representing the proportion of games falling into a specific rating range from below 5.0 to above 8.5. The visualization uses d3.stack to transform the raw percentage data, d3.scaleBand for the categorical platform axis, and d3.scaleLinear for the percentage scale. The chart is rendered as SVG elements with a custom ordinal color scale differentiating the five rating categories, making it easy to compare the rating profiles of platforms like Steam and PlayStation.

activity6_Task1.1

This horizontal bar chart displays the population of ten countries in the year 2000, with light green bars extending from a left-aligned y-axis of country names to an x-axis of population values. The visualization uses D3 v7 to load CSV data via `d3.csv`, scale the values with `scaleLinear` and `scaleBand`, and render axes with `d3.axisBottom` and `d3.axisLeft`. Axis labels are annotated, and the bottom axis formats population values using `d3.format`, abbreviating millions as "B".

Activity 6_Task 1

This example displays a simple message in the browser. It uses D3.js (d3.v6) to select a DOM element with `select('#message')` and set its text content to the string "Hello VizHub!" imported from a local ES6 module. The page is styled with CSS, setting the text alignment to center and a large font size. The visualization is minimal, demonstrating basic DOM manipulation with D3 and modular JavaScript imports.

Activity 6_Task 1

This example displays a simple message in the browser. It uses D3.js (d3.v6) to select a DOM element with `select('#message')` and set its text content to the string "Hello VizHub!" imported from a local ES6 module. The page is styled with CSS, setting the text alignment to center and a large font size. The visualization is minimal, demonstrating basic DOM manipulation with D3 and modular JavaScript imports.

Activity 6_Task 1

This visualization displays a scatter plot of data points rendered as green circles, with blue tick marks along the axes and gray axis labels. The chart is built using React for the user interface and D3.js (v5) for the SVG rendering, leveraging D3's selection and scale APIs. The visualization is embedded in an HTML page that loads React, ReactDOM, and D3 from a CDN, with the chart drawn from a bundled JavaScript file. The dataset originates from source v3, though the specific data values are not visible in the provided code.

Activity 6

This example displays a simple text message, "Hello VizHub!", centered on the page. It demonstrates the basic setup of a D3.js project using ES6 modules and local CSS. The code imports the `select` function from D3 and a message string from a separate module, then sets the text content of a div element. The styling is applied through an external stylesheet.

Fork of Hello VizHub

This example shows the text "Hello VizHub!" rendered in the center of the page with large, left-aligned styling. It demonstrates a minimal D3.js setup where the `select` function targets a div element by its ID and sets its text content. The code imports a string from a separate ES6 module, `myMessage.js`, and uses D3 v6 from a CDN. The project's structure highlights local CSS imports and modular JavaScript organization within a simple HTML page.

question 3 buddha

This visualization, titled "Six Reflection Buddha," displays a stylized, colorful Buddha figure composed of layered geometric polygon shapes on a floral background image. The scene uses randomly positioned and rotated polygons with varying opacity to construct the figure. Built with React and ReactDOM, the rendering leverages inline SVG elements and JavaScript’s `Math.random()` to generate dynamic polygon points, fill colors, and transformations. The code includes a hardcoded SVG path for the Buddha silhouette, combining procedural generation with a static vector shape.

Mar 14, 2025