sumanthnaidu213@gmail.com

Activity 9&10

Fork of Reusable Scatter plot Activity 8

Activity-9&10

Activity-9&10

This example demonstrates VizHub’s core workflow for building and sharing D3-based visualizations. It shows how to load D3 v5 from a CDN and use ES6 module imports for both external libraries and local JavaScript files. The code uses `import { select } from 'd3'` to update the text of an HTML div and imports a custom string from `./myMessage`. A simple `styles.css` file handles the large centered typography, while the README documents the template’s capabilities for prototyping interactive data applications.

Fork of Piechart ICE7

Fork of Piechart ICE7

This pie chart displays the number of vehicles seized across different states in America, sourced from a raw CSV file on GitHub. The chart uses D3 v5’s `pie` and `arc` functions to generate the slices, with `scaleOrdinal` assigning colors to each state segment. Value labels are added using `arcGenerator.centroid`, and a legend with state names and totals is included. The visualization is rendered as an SVG with a flexible, reusable code structure.

1Activity 9&1

Activity 9&10

This interactive visualization cycles through different iris flower measurements on a scatter plot, using the D3.js library. Each species is color-coded, with points transitioning between sepal and petal dimensions at regular intervals. The code from `scatterPlot.js` uses D3 scales, axes, and data joins to render the animated plot, updating the x-axis labels and title accordingly. Data comes from a CSV file containing iris flower measurements, and the animation is driven by `setInterval`.

Activity 9&10

This interactive scatter plot displays the Iris dataset, cycling through different feature pairs on the x-axis (petal width, sepal width, petal length, and sepal length) every few seconds while the y-axis remains sepal length. Data points are colored by species (setosa, versicolor, virginica) using D3.js to render the SVG visualization, with custom axis labels, a legend, and a title. The code leverages D3's `scaleLinear`, `axisLeft`, and `axisBottom` APIs within a reusable scatter plot module, and uses `setInterval` to animate the changing axes. Data is loaded via D3's `csv` function from a remote GitHub Gist.

Activity 9&10

This animated scatter plot cycles through different pairwise combinations of the Iris dataset’s four measurements, using petal width, sepal width, petal length, and sepal length as alternating axes. It uses D3’s `csv` loader and `scaleLinear`, `axisLeft`, `axisBottom`, and `select` to render circles colored by species (setosa, versicolor, virginica) with a legend. A `setInterval` timer updates the x-axis mapping, and the SVG output includes styled labels, a title, and explicit legend markers.

Activity 9&10

Activity 9&10

This animated scatter plot cycles through different Iris flower measurements, displaying four distinct species separated by color on a dynamically updating x- and y-axis. The visualization uses D3.js version 6.7.0 to load a CSV dataset, scale the axes with `scaleLinear`, and render circles via `.join()`. A `setInterval` timer triggers periodic updates to the x-axis variable, rotating through petal width, sepal width, petal length, and sepal length. The SVG rendering includes custom-styled axes, a color legend, and a title, all animated to show relationships between the flower's attributes.

Activity 9&10

This animated scatter plot cycles through different pairings of Iris flower measurements, showing petal width, sepal width, petal length, and sepal length on the x-axis while sepal length remains on the y-axis. The visualization uses D3.js to load the Iris dataset from a GitHub gist and renders colored circles representing three species (setosa, versicolor, and virginica) with a custom legend. The reusable scatterPlot module employs D3 scales, axes, and data joins to update the plot at regular intervals.

Activity 9&10

Activity 9&10

This example demonstrates how to structure a VizHub project with ES6 modules and D3.js. It loads D3 via UNPKG and uses the `select` function from the `d3` import to set the text content of a message `div`. The code also imports a local message from `./myMessage` and defines unused variables and a regular expression, though these do not affect the visible output. The visualization simply displays a large, centered message on the page, styled entirely through CSS.

Activity6_Task4.1

Activity6_Task4.1

Activity6_Task4.1

This bubble chart displays the correlation between average horsepower, torque, and highway MPG across 31 car makes, with each circle’s position encoding the first two variables and its size representing fuel efficiency. The visualization uses d3.v7 with SVG rendering and includes interactive tooltips that show the car make on hover. Color mapping via `d3.scaleOrdinal` and `d3.interpolateTurbo` distinguishes makes, while a legend explains the bubble size scale. Data is loaded from a CSV file, and the implementation uses standard D3 scales (`d3.scaleLinear`) and axes.

Activity6_Task4

Activity6_Task4

This example demonstrates a bubble chart that visualizes the relationship between average horsepower, torque, and highway MPG across different car makes. The data comes from a CSV file and is rendered as circles, with each make represented by a bubble positioned according to its horsepower and torque values. The visualization uses a dataset processing approach to aggregate the raw data into average values per make. The chart likely employs D3.js for data binding and SVG rendering, though the provided code only shows a simple “Hello World” text output with an adjustable font size.

Activity6_Task3.3

Activity3_Task3.2

Activity6_Task3.2

Activity6_Task3

This visualization displays the iris dataset as a scatter plot, mapping petal length on the x-axis and petal width on the y-axis, with each point colored by species (setosa in blue, versicolor in skyblue, and virginica in purple). It loads the data from a CSV file via d3.csv, parses numeric columns, and renders circles using d3.scaleLinear for both axes. The axes are drawn with d3.axisLeft and d3.axisBottom, while circle positions and colors are set via D3’s data join and selection methods on SVG elements.

Activity6_Task3

This interactive scatter plot visualizes the Iris dataset, mapping petal length and width on the x- and y-axes. Each point is colored by species—sky blue for setosa, light green for versicolor, and orange for virginica. The visualization uses D3 v6 to load CSV data via `d3.csv`, create scales with `d3.scaleLinear`, and render SVG circles. Axes are added with `d3.axisLeft` and `d3.axisBottom`, styled with a red title and green axis labels.

Activity6_Task2.1

This example shows a stacked horizontal bar chart comparing the percentage distribution of vegetable ratings across six categories, from “below 4.0” to “above 8.0.” The visualization uses D3 v7’s `d3.stack()` to compute the stacked segments, with `d3.scaleOrdinal()` for color mapping and `d3.scaleBand()` for the vegetable categories. Each bar segment displays a tooltip on mouseover, showing the exact rating percentage. The chart loads data from a CSV file and renders as SVG, with axes and labels styled via external CSS.

Activity6_Task2

This example visualizes the distribution of IMDb movie ratings across six genres using a stacked horizontal bar chart. The chart displays the percentage of movies falling into five rating categories, from below 5.0 to above 8.5, with each genre represented as a single bar composed of color-coded segments. The visualization uses d3.stack to transform the data, d3.scaleOrdinal for coloring, and d3.scaleBand and d3.scaleLinear for positioning. Interactive tooltips appear on mouseover, revealing exact percentages for each rating segment within a genre. Data comes from a CSV file loaded via d3.csv.

Activity6_Task2

Activity6_Task2

This example demonstrates the “Hello World” starter template for the VizHub V3 Runtime Environment. Interactive widgets in the browser enable continuous hot reloading, allowing live updates to a simple text display. The JavaScript code directly sets the HTML container’s innerHTML, using an inline style with a font-size of 221 pixels. No external visualization libraries are used; the focus is purely on the minimal runtime setup.

Activity6_Task2

activity 6_Task 1.2

A horizontal bar chart displays the populations of 20 countries for 2020, sorted by country name. The visualization uses React with D3 v5 APIs including `scaleBand`, `scaleLinear`, and `max` to compute scales, while SVG `rect` elements render the bars. Data is loaded from a CSV file via `d3.csv` and formatted using `d3.format`. The chart includes labeled axes with tick marks and a tooltip showing formatted population values.

activity 6_Task 1.1

This example shows a horizontal bar chart of population values for the top ten countries in the year 2000. The visualization uses React with D3 v5, rendering SVG elements via reusable components for axes and marks. It loads data from a remote CSV file using `d3.csv`, applies a linear scale for the population axis and a band scale for country names, and formats tick labels with `d3.format`. Tooltips display the formatted population value on hover.

activity 6_Task 1

This horizontal bar chart displays the population of 30 countries in 2020, sorted by country name along the y-axis and scaled proportionally along the x-axis. Built with React and D3 v5, it uses `scaleBand` and `scaleLinear` to map the data, with axes rendered by custom `AxisBottom` and `AxisLeft` components. The visualization reads CSV data from a GitHub repository, formats population values in billions using D3's `format`, and renders marks as SVG rectangles with tooltips.

activity 6_Task 1.1

This example shows a horizontal bar chart of the top ten most populous countries or regions, comparing their populations in the year 2000. Built with React and D3 v5, it renders an SVG with styled tick marks, axes, and bars. The code uses `scaleBand` and `scaleLinear` from D3 to map data to coordinates, and a custom `Marks` component creates the rectangles, with tooltips formatted via D3’s `format` function. Data is loaded from a CSV file using D3’s `csv` loader.

activity 6_Task 1

This visualization shows the population of 30 countries in 2020 as horizontal bars, sorted from largest to smallest. The chart uses React with D3 v5's `scaleBand` and `scaleLinear` to position bars, while `AxisBottom` and `AxisLeft` render tick marks and labels. The data is loaded via `d3.csv` from a GitHub repository, with population values converted from strings to numbers. Hovering over a bar reveals its value through an SVG `<title>` element.

activity 6_Task 1

Fork of 5 Buddhas

A grid of overlapping, semi-transparent diamond polygons renders on a black background, each filled with a randomly generated RGB color. The polygons are positioned and rotated using JavaScript array mapping and the Math.random function, creating a dense, chaotic field of shapes. A separate Buddha path is then drawn and scaled on top of the SVG. The visualization is built with React and ReactDOM, rendering SVG elements directly through JSX, with random values determining coordinates, sizes, and colors for each polygon.

5 Buddhas

Five Buddhas overlap in a dark SVG scene, each rendered as a complex path filled with a random hue. The code uses React to map nested arrays, generating hundreds of semi-transparent diamond-shaped polygons that scatter across the canvas, while the main Buddha silhouette is drawn from a detailed path definition. React and ReactDOM render the composition, with the SVG elements dynamically colored via inline `rgb()` values and rotated through transforms. A single large Buddha path dominates the center, surrounded by the chaotic polygon field.