shivasaiamaravadi@gmail.com

question_1

This pie chart shows the distribution of insurance records across four regions—southeast, southwest, northeast, and northwest—using data loaded from an external CSV file. The chart uses D3 v7’s `d3.pie`, `d3.arc`, and `d3.rollups` to aggregate and visualize the counts, with a categorical color scale (`d3.scaleOrdinal`) assigning distinct colors. Each slice is labeled with its region name via arc centroids, and a legend is rendered using SVG rectangles and text elements, all positioned within a 600x600 SVG container.

Apr 22, 2024

q2

This example shows a Netflix stock-price area chart, displaying closing prices over time with a light-blue filled area beneath the line. It loads CSV data via `d3.csv`, parses dates with `d3.timeParse`, and uses `d3.scaleTime` and `d3.scaleLinear` to map data to SVG coordinates. The area is rendered as an SVG path using `d3.area`, with axes added through `d3.axisBottom` and `d3.axisLeft`, all within a manually sized SVG element.

Apr 21, 2024

task 9_q1

This example is a pie chart showing the age distribution of a population, with each slice labeled by its age bracket. The chart is rendered as an SVG using D3.js v3, drawing colored arcs for each category. The visualization uses the `d3.svg.arc` generator to define slice geometry and `d3.layout.pie` to compute the angles, while the `color` scale assigns each age group its palette color. Data is loaded from a CSV file and preprocessed by converting the population values to integers. The slices have a white stroke, and labels are positioned at each arc's centroid.

Apr 21, 2024

task 9

This animated scatter plot explores the Iris dataset, displaying sepal and petal measurements as colored circles representing three species. The visualization cycles through different measurement pairings on the x-axis at regular intervals, updating the axes and circle positions accordingly. Built with D3.js (v6), it uses scaleLinear, axisBottom, axisLeft, and CSV data loading. The SVG rendering includes a custom legend with labeled species colors and rotating axis titles, all styled via external CSS.

Apr 21, 2024

Question 4

This bubble chart visualizes the Iris dataset, plotting sepal length against sepal width, with bubble size and color representing petal length and species, respectively. It uses d3.v7’s `scaleLinear`, `scaleOrdinal`, and `axisBottom`/`axisLeft` to map data to position, radius, and categorical colors. Interactive tooltips appear on hover, showing species and sepal measurements. The SVG is rendered with D3’s selection and join operations, and a legend identifies the three species using a custom color scheme.

Question 4

This bubble chart visualizes the Iris dataset, plotting sepal length and width on the x and y axes while encoding petal length as bubble size and species as color. The D3.js code implements a color legend and hover tooltips. Using `d3.scaleLinear` for positioning and size, it maps petal length to a radius scale and species to a categorical color scheme.

activity6_task3

This scatter plot visualizes the Iris dataset, mapping petal length on the x-axis and petal width on the y-axis, with points colored by species (setosa, versicolor, and virginica). The visualization encodes sepal length and width as the rx and ry attributes of each circle, creating elliptical markers whose dimensions vary with the data. Built with D3 v6, the code uses `d3.csv` to load data from a GitHub URL, `scaleLinear` and `extent` for scaling, and `axisLeft`/`axisBottom` for axes. Data is parsed from CSV columns into numeric values before rendering as SVG circles.

Question 3

This scatter plot visualizes the relationship between BMI and insurance charges for 50 individuals, with red markers indicating smokers and blue markers for non-smokers. The code uses d3.csv to load inline CSV data, then applies d3.scaleLinear with d3.extent to map BMI and charges to screen coordinates. Axes are rendered using d3.axisLeft and d3.axisBottom, while circles are appended to an SVG canvas via d3.selectAll and data joins.

activity6_Q2

This example visualizes the distribution of product ratings across cosmetics brands. Each horizontal bar represents a brand, segmented into stacked, color-coded sections for rating percentages. The chart effectively compares the proportion of ratings falling into each category, such as below 5.0 or above 8.5, across brands. The visualization is built with D3.js v7, rendering to SVG. Data is loaded from a CSV file and processed using the `d3.stack` and `d3.scaleOrdinal` APIs. Interactivity includes a tooltip that displays a brand’s exact percentage for a rating category on hover, and axis labels and tick marks are customized.

try

A stacked horizontal bar chart displays the distribution of product ratings across six cosmetics brands, with each bar segmented into five rating categories from "below 5.0" to "above 8.5." The chart uses SVG rendering with D3 v7, employing `d3.stack()` to compute the stacked series, `d3.scaleBand` for the categorical y-axis, and `d3.scaleLinear` for the percentage x-axis. Mouseover interactions reveal tooltips with precise percentage values for each brand and rating segment. Data comes from a CSV file loaded with D3’s data parsing.

Activity6_Q3

This example demonstrates the basic structure of a VizHub project, showing how an ES6 module exports a string that is then displayed on a webpage. It imports the `select` function from D3 v5 and the `message` constant from a local `myMessage.js` module, using `select('#message').text(message)` to render the text "Hello VizHub!" into the page. The example also loads D3 via a CDN script tag and includes a stylesheet for centering the message.

try1

This stacked bar chart displays the estimated religious composition of the 20 most populous countries in 2010, with each bar representing a country’s population in millions segmented by religion. Hovering over the legend highlights the corresponding religion across all countries while fading others. The visualization uses D3’s `scaleOrdinal`, `stack`, and `scaleBand`, with interactive legend handling via `mouseenter` and `mouseleave` events. Data comes from a Pew Research report on the global religious landscape.

activity6_task 2

This stacked bar chart illustrates the percentage distribution of IMDb movie ratings across six genres, with each genre’s bars broken into five rating categories from “below 5.0” to “above 8.5.” The visualization uses a horizontal layout, with genres on the y-axis and the percentage scale on the x-axis, totaling 1. Hovering over any segment reveals a tooltip with the precise percentage for that rating category within the genre. The chart is rendered as SVG using D3 v7, leveraging `d3.stack`, `d3.scaleOrdinal`, and `d3.axisLeft`/`d3.axisBottom` to build the stacked bars and axes, with data loaded from a CSV file.

Activity 6_Q3

This example demonstrates a minimal VizHub template that initializes a D3.js visualization, displaying the text “Hello VizHub!” centered on the page. The code imports the `select` function from the D3 library to target the `#message` div and sets its text content from a local ES6 module named `myMessage`. The page layout is styled via an external CSS file, and the example highlights the use of UNPKG to load D3 v5, as well as the integration of local JavaScript modules for modular code organization.

activity 6_Q2

This visualization shows the distribution of customer ratings across six cosmetic brands, using horizontal stacked bar charts to compare the proportion of ratings in five percentage ranges from below 5.0 to above 8.5. Each bar segment is colored by rating category, with a tooltip revealing the exact percentage for each brand and rating range on hover. The chart uses d3.stack() to compute the stacked data, d3.scaleLinear and d3.scaleBand for positioning, and d3.axisBottom with tick lines for the percentage scale. Data comes from a CSV file, rendered as SVG elements with mouseover events that adjust opacity and display tooltip information.

Activity6_task 2

This example demonstrates loading D3 from a CDN and using ES6 module imports to display a centered message. The code uses `select` from D3 to target a `<div>` and set its text from a separate local module, `myMessage.js`. It also defines a numeric constant and a regular expression, though neither is applied to visual output. The page’s styling, including large font size and centered text, comes from an external CSS file. The example primarily showcases VizHub’s support for modular JavaScript and external library integration.

activity 6_task 4

This bubble chart displays the correlation between average horsepower (x-axis), average torque (y-axis), and highway MPG (bubble size) for various car makes. The color of each bubble represents the car manufacturer. The chart includes axes with labels, a legend for the bubble size scale indicating highway MPG values, and a color legend for the makes. Hovering over a bubble reveals a tooltip showing the car make. The visualization is built with D3.js (v7), using its scaling and selection APIs, and renders as an SVG with animated transitions for the tooltip's opacity.

activity 6_task 4

This example demonstrates how to build a minimal D3.js visualization using ES6 modules. It imports the `select` function from D3 and a custom `message` string from a local module, then updates the text content of a `div` in the HTML. The page loads D3 v5 from a CDN and relies on a bundled JavaScript file for execution. The example also includes a CSS stylesheet that centers the displayed message with a large font size, but it does not render any data-driven graphics.

activity 6_task 3.2

This interactive scatter plot visualizes iris flower measurements, mapping sepal length and petal length on the x- and y-axes while using distinct symbols to encode the three species. The chart loads CSV data from a GitHub repository and parses it with `d3.csvParse`, then renders marks via `d3.symbol` and `symbolsFill`. A custom legend built with `scaleOrdinal` and `schemeCategory10` identifies each species, while reusable axis and legend modules handle the layout.

activity 6_task 3.2

This example demonstrates a minimal VizHub project that displays a centered "Hello VizHub!" message using D3.js v5. The visualization shows how to load D3 via UNPKG and combine it with local ES6 modules, importing the `select` function from D3 and a custom `message` constant from `myMessage.js`. The message text is set using D3’s `select` method on the `#message` div, styled with a 12em font size from the linked CSS file.

Fork of activity6_task3

This example demonstrates a minimal VizHub project that loads D3 via UNPKG and uses local ES6 modules. It imports the `select` function from D3 to set the text of a `#message` div to "Hello VizHub!", showing how to combine library imports with custom module code. The page uses a simple CSS stylesheet to center and enlarge the text, and includes a regular expression constant. The code shows the basic structure of importing from both D3 and a local file, with the message rendered using `select('#message').text(message)`.

activity6_task3

This example demonstrates how to combine D3.js with ECMAScript modules to create a minimal interactive page. It shows a text message displayed prominently in the browser, with D3’s `select` function used to target the `#message` div and update its content. The code imports a local ES6 module `myMessage` to supply the string, and includes a global D3 script loaded via CDN from UNPKG. The styling is handled by a linked stylesheet, and the visualization uses no data or rendering, serving as a template for modular D3 projects.

activity6_Task1

This bar chart displays the population of 20 countries in 2010, with countries on the y-axis and population values on the x-axis. The visualization uses React to render SVG elements, with D3 v5 providing scales, margins, and tick formatting via `scaleBand`, `scaleLinear`, and `format`. Data is loaded as CSV from a GitHub repository and converted to numeric population values. Axes and marks are built as React components, with bars colored green and a hover tooltip showing the formatted population value.