ravularasesh3102@gmail.com

task9 question2

This visualization displays a heart disease dataset as an area chart, plotting age against resting blood pressure across the patient records. The chart uses D3 v7's `d3.area()` generator with linear scales for both axes, rendering an SVG path with a semi-transparent steelblue fill. The code loads data from a CSV file via `d3.csv()`, sorts records by age, and includes labeled x- and y-axes formatted with `d3.axisBottom()` and `d3.axisLeft()`.

Apr 21, 2024

task9_question1

This example displays a pie chart of Netflix genres, with slices sized by the count of titles in each genre and a color-coded legend alongside the chart. It loads the dataset via `d3.csv` from a GitHub raw URL, aggregates genre counts using `d3.rollup`, and generates the pie layout with `d3.pie` and `d3.arc`. The SVG rendering applies a categorical `d3.scaleOrdinal` with `d3.schemeCategory10` for slice fills, while legend items are positioned manually within the chart container.

Apr 21, 2024

task9

This animated scatter plot explores the Iris dataset, cycling through different combinations of sepal and petal measurements on the x-axis while keeping petal width on the y-axis. Using D3.js and its `scaleLinear`, `axisLeft`, and `axisBottom` utilities, the visualization encodes species via color (skyblue, lightgreen, orange) and adds an animated legend. The SVG rendering updates at intervals, shifting the x-axis attribute and redrawing axis labels. The static y-axis label remains fixed, while the title and legend are drawn directly onto the SVG canvas.

Apr 21, 2024

Fork of ACTIVITY8_TASK1

This example displays horizontal bars for the populations of 30 countries from a CSV file, using a green fill on a rotated horizontal bar chart. The SVG renders through a React component that imports utilities from D3. The code creates a band scale for the y-axis and a linear scale for the x-axis, with axes drawn from imported modules. Tooltips on each bar show the formatted population value, using D3's `format` function to present numbers in billions.

act8_question4

This bubble chart compares beverage manufacturers based on glucose levels and ratings, with bubble size representing calorie content and color indicating the brand. Loaded from a CSV file, the visualization uses D3 v7 scales (`d3.scaleLinear`, `d3.scaleOrdinal`) to map data to x/y positions, bubble radius, and color. The SVG rendering includes axes, labels, interactive tooltips on mouseover, and legends for both calorie size and brand color.

act8_question4

This visualization presents a bubble chart comparing beverage manufacturers based on their glucose levels and ratings, with bubble size encoding calorie count and color indicating the brand. The chart features an animated tooltip displaying exact calorie and glucose values upon hover. Built with D3.js (v7), the visualization uses `d3.scaleLinear` for axes and bubble sizing, `d3.scaleOrdinal` for color assignment, and SVG rendering for all graphical elements. Data is loaded from a CSV file, and the right-side legends clarify both the calorie size scale and brand color coding.

act8_task4

This bubble chart shows the correlation between average horsepower, torque, and highway MPG across 31 car makes. Each circle’s position maps horsepower on the x-axis and torque on the y-axis, while circle radius encodes highway MPG and color distinguishes make. The visualization uses D3 v7 with SVG rendering, including a tooltip on mouseover, a legend for bubble size, and color-coded dots. Data is loaded from a CSV file and mapped through d3.scaleLinear and d3.scaleOrdinal scales.

act8_task4

This visualization uses a bubble chart to show the correlation between average horsepower, torque, and highway MPG for various car makes, with bubble size encoding MPG and color distinguishing makes. The code leverages d3.v7 with an SVG rendering approach, using d3.csv to load data, d3.scaleLinear for positioning and sizing, and d3.scaleOrdinal with d3.interpolateTurbo for coloring. Interactive tooltips appear on mouseover via d3 event handling. A legend displays the MPG bubble-size scale and a color-coded list of car makes.

act8_task4

act8_question2

A horizontal stacked bar chart displays the percentage distribution of six food categories across seven rating bands, from “Below 4” to “Above 8.” Each bar represents a category, with colored segments showing the proportion of ratings in each band. The visualization uses D3 v7’s `d3.stack` to aggregate the data, `d3.scaleOrdinal` for color mapping, and `d3.scaleLinear` and `d3.scaleBand` for axes. Interactive tooltips appear on mouseover, displaying the exact percentage for each segment. Data is loaded from a CSV file.

act8_task2

This example presents a stacked horizontal bar chart of movie ratings by genre, with each genre row segmented proportionally across categories like Action, Comedy, and Drama. Hovering over a segment reveals a tooltip with the exact percentage. Built with D3 v7, the visualization uses `d3.stack`, `d3.scaleOrdinal` for the categorical color scheme, and `d3.axisLeft` and `d3.axisBottom` for axes. Data is loaded from a CSV file, and all rendering is done to an SVG canvas.

act8_task4

This interactive bubble chart visualizes the correlation between average horsepower, torque, and highway MPG across 31 car makes. Each bubble’s position encodes horsepower along the x-axis and torque along the y-axis, while its radius scales with highway MPG. The visualization uses d3.csv to load data, d3.scaleLinear for axes and bubble sizing, and d3.scaleOrdinal with interpolateTurbo color mapping for categorical makes. Hovering reveals a tooltip showing the car make. A legend displays MPG reference circles and color-coded dots for each brand. The SVG rendering includes animated hover transitions.

act8_task4

A bubble chart shows the relationship between average horsepower, torque, and highway MPG across 31 car makes. Each circle’s position encodes horsepower and torque on the x- and y-axes, while its radius represents highway MPG and its color distinguishes the manufacturer. Built with D3 v7, the chart uses `d3.scaleLinear` for axes and sizing, `d3.scaleOrdinal` with `d3.interpolateTurbo` for color, and includes an interactive tooltip on mouseover plus a legend for MPG values. Data comes from a local CSV file.

act8_task4

This bubble chart visualizes the relationship between average horsepower, torque, and highway MPG across various car makes. Each bubble's x-position maps to horsepower, its y-position to torque, while its size and color represent highway MPG and the car manufacturer, respectively. The visualization includes a tooltip on hover, a legend for MPG values, and a color-coded legend for makes. Built with D3 v7, the code uses `d3.scaleLinear`, `d3.scaleOrdinal`, and `d3.interpolateTurbo` to render interactive SVG elements from the provided CSV data.

act3_task4

This example combines a D3.js v7 bubble chart with an animated smiley face to demonstrate DOM manipulation. The bubble chart visualizes the correlation between average horsepower, torque, and highway MPG for various car makes, using `d3.scaleLinear` for axes and bubble size, `d3.scaleOrdinal` with `d3.interpolateTurbo` for color, and interactive tooltips on circle hover. The smiley face uses `d3.select` and `transition` to animate its eyebrows up and down. The chart loads data from a CSV file, while the face is built entirely with SVG shapes.

act8_task4

question3

This scatter plot visualizes the relationship between height and weight, with data points colored by category (A, B, or C) from the IRIS dataset, which is loaded via `d3.csv`. It uses `d3.scaleLinear` for the x- and y-axes, rendered using `axisBottom` and `axisLeft` in an SVG. Points are drawn as circles positioned using `cx` and `cy` attributes, colored by a custom marker function. Axis labels are styled with CSS, and the chart fills the browser window with margins for the title and axes.

act8task3.2

This scatter plot shows the relationship between sepal length and petal length for three iris species, with each species represented by a distinct symbol and a corresponding legend. The visualization uses D3 version 7, leveraging `scaleLinear` for axes, `scaleOrdinal` with `symbolsFill` for shape encoding, and custom modules for axes and legend rendering. Data is loaded asynchronously from a CSV file containing iris measurements, which are parsed and converted to numeric values before plotting.

act8task3

This scatter plot visualizes the Iris dataset, showing petal length against petal width, with each point colored by species (setosa, versicolor, or virginica). The SVG rendering uses d3.v6, including `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` for axes and scaling. Data is loaded via `d3.csv` from a GitHub gist, and circles are bound and joined using `selectAll` and `join`. While the plot maps petal dimensions on the axes, the code also stores sepal measurements for each mark, though they are not directly plotted.

act8_t2

A stacked horizontal bar chart visualizes the proportion of ratings across food categories, with each bar segmented by rating ranges from "Below 4" to "Above 8." The chart uses d3.stack to compute stacked series and d3.scaleBand for categorical positioning. An ordinal color scale distinguishes rating bands, while interactive tooltips display exact percentages on hover, built with D3 event handlers and HTML div elements. The SVG rendering includes custom axes with gridlines and a legend.

act8

This example displays a stacked bar chart of movie ratings by genre, sourced from a local CSV file. The visualization uses React and D3 v7 to render SVG bars, with scales for linear percentages and categorical genres. It employs `d3.stack`, `scaleBand`, and `scaleLinear` to compose the bars, while a color scale distinguishes categories. Interactive tooltips, built with D3 selectors, reveal percentage values on hover.

act8_task2

This horizontal stacked bar chart visualizes the proportional distribution of movie ratings across genres, with each bar divided into colored segments for action, comedy, drama, thriller, and horror. Built with D3 v7 and rendered as SVG, the chart uses d3.stack(), d3.scaleBand(), and d3.scaleLinear() to position segments, while d3.axisBottom with gridlines and custom tooltips display exact percentages on hover. Data comes from a static CSV file loaded locally.

act8_task2

This visualization presents a horizontal stacked bar chart showing the distribution of movie ratings across six genres, from Documentary to Action. The chart uses D3.js v5 with SVG rendering, employing a band scale for genres and a linear scale for percentage values. Interactive tooltips display exact percentages on hover. The code demonstrates D3's stack, scaleOrdinal, and axisBottom APIs, along with custom styling via the Yanone Kaffeesatz font.

act8_task2

This example shows the distribution of IMDb movie ratings across six genres, using a horizontal stacked bar chart where each bar segment represents the proportion of movies within rating brackets below 5.0, 5.0-6.5, 6.5-7.5, 7.5-8.5, and above 8.5. It loads D3 v7 via UNPKG and uses `d3.stack`, `d3.scaleLinear`, `d3.scaleBand`, `d3.axisBottom`, and `d3.axisLeft` to render the SVG. Hovering over a segment displays a tooltip with the exact percentage for that genre and rating bracket.

Fork of Activity6_population_question1

This example demonstrates how to load D3 via UNPKG and use ES6 module imports to structure a visualization project. It renders a static text message, “Hello VizHub!”, into a div using the `d3.select` API. The code also imports a local ES6 module to supply the message string and sets the styling through a linked CSS file. The example highlights the basic setup for a VizHub project, including a D3 import, local module usage, and DOM manipulation.

Task-8

This visualization shows Olympic medal counts by country using an interactive stacked bar chart. Hovering over the color legend highlights the corresponding medal category and dims the others. The chart uses D3’s `scaleLinear`, `scaleBand`, and `stack` to create bars, with a `flatRollup` grouping data by country and medal type. A custom `colorLegend` module handles mouse interactions, adjusting opacity and stroke width. The data source is `transformedData` from an external module, rendered responsively with `observeResize`.

Task8_tutorial1

This visualization demonstrates how to load and style a chart using D3.js within a React environment, setting axis tick colors to blue and marking points with a light green fill. The example shows the minimal wiring needed for a VizHub project, including importing the `select` function from D3 and a local ES6 module for a message. It relies on D3 v5 loaded via UNPKG and React 16.9, with all rendering handled through the `bundle.js` script. The data file is a CSV hosted externally, referenced via a stylesheet link in the HTML.

Fork of Activity 7

This fork of Activity 7 presents a horizontal bar chart of population data for 30 countries in 2020, sorted by country name. The chart uses React to render SVG elements, with D3 scales (scaleBand and scaleLinear) and format utilities computing positions and tick labels. The graph displays axis lines and text in blue and gray, with green bars that include tooltips showing formatted population values. Data is loaded asynchronously from a GitHub-hosted CSV file using d3.csv, and the visualization updates after the data fetch completes.

Task-8_tutorial1

This example demonstrates how VizHub integrates D3.js with local ES6 modules to render a simple, centered text message. The visualization loads D3 via UNPKG and uses the `select` API from D3 to target an HTML element by ID, setting its content with `.text()`. The message text originates from a separate local module (`myMessage.js`) exported as a constant. Styling is applied through an external CSS file, while the code also includes regular expressions and a variable assignment. The example shows basic D3 DOM manipulation within a modular project structure.