Mannava Priyanka Chowdary

Activity7_Que2

This area chart visualizes the daily popularity of the song “Shape of You” from a Spotify dataset, showing how it trends over time with a maroon filled area. The visualization uses D3 v7 APIs including `scaleTime`, `scaleLinear`, `area`, `curveBasis`, and `axisBottom`/`axisLeft` to render an SVG with labeled axes and gridlines. The code filters out January 2018 data and manually prepends a January 2017 point before generating the smooth curve.

Nov 5, 2024

Activity7_Que1

This pie chart visualizes the fares of the first ten passengers from a Titanic dataset, labeling each slice with its dollar amount and listing passenger names in a color-coded legend. Built with D3 v6, it loads CSV data via `d3.csv`, converts fares to numbers, and uses `d3.pie` and `d3.arc` to generate SVG paths. A sequential `d3.scaleOrdinal` with `d3.schemeCategory10` assigns colors, while labels and legends are positioned using arc centroids and SVG text elements.

Nov 5, 2024

Activity7_Que1

This pie chart visualizes the distribution of survival outcomes among Titanic passengers, separating data into "Survived" and "Did Not Survive" categories. Using D3 v6, the code loads a CSV file, aggregates records by the `Survived` attribute, and renders the result with `d3.pie` and `d3.arc`. Each slice is colored via `d3.scaleOrdinal` and labeled directly on the chart.

Nov 5, 2024

Activity 7

This animated scatterplot cycles through four Iris flower measurements—petal width, sepal width, petal length, and sepal length—on the x-axis while keeping sepal length on the y-axis. It uses D3’s `csv`, `scaleLinear`, `axisLeft`, and `axisBottom` to load and render the Iris dataset, with `setInterval` driving the axis transitions. Species are color-coded via a custom marker function, and a legend with labels is drawn directly in SVG. The visualization demonstrates a reusable scatter plot module built through a chained configuration pattern.

Nov 4, 2024

Fork of Hello VizHub

The visualization greets its audience with a massive, centered “Hello VizHub!” message, rendered as plain text on a white background. It demonstrates the core workflow of the VizHub platform by importing D3’s `select` function to target the `#message` div and apply the text, while a local ES6 module exports the message string. The page loads D3 v5 via UNPKG and uses a custom CSS file to style the oversized typography, highlighting how external libraries and local modules integrate within a simple HTML shell.

Nov 4, 2024

Activity 6_Q 4

A bubble chart visualizes the correlation between horsepower, weight, and MPG for the first 27 vehicles from the auto-mpg dataset. Each circle’s position encodes its horsepower and weight, while its radius and color represent MPG and car name, respectively, using a turbo color scale. The SVG rendering includes axes, labels, a tooltip on hover, and a legend, all built with D3 v7’s scales, axis generators, and event handlers.

Activity 6_Task 4

This bubble chart visualizes the correlation between average horsepower, torque, and highway MPG for 30 car makes, using circle size to encode fuel efficiency and color to distinguish brands. It loads data from a CSV and renders SVG circles positioned by linear scales, with tooltips showing the make on hover. The visualization uses D3 v7 APIs like `d3.csv`, `scaleLinear`, `scaleOrdinal`, `axisBottom`, `axisLeft`, and `interpolateTurbo` for the color palette, alongside a legend for bubble sizes and brand colors.

Activity 6_Q 3

A scatter plot visualizes the relationship between flipper length and body mass for three penguin species (Adelie, Chinstrap, Gentoo), using colors to distinguish species and a custom legend. The code loads CSV data via `d3.csv`, parses numeric values, and draws circles with `d3.selectAll` and `append`. Axes are created with `d3.axisBottom` and `d3.axisLeft`, while scales use `d3.scaleLinear` and `d3.scaleOrdinal` for color mapping. The SVG canvas fills the viewport, with labels rotated and positioned through D3 attributes.

Activity 6_Task 3.2

This scatter plot displays the Iris flower dataset, showing sepal length against petal length with distinct symbols for each species. It uses D3.v7 modules including `scaleLinear`, `scaleOrdinal`, `symbolsFill`, and `symbol` to render marks and a custom shape legend. The visualization loads data from a GitHub gist, parses it with `csvParse`, and incorporates reusable local modules for axes and legend components.

Activity 6_Task 3

This scatter plot visualizes the Iris dataset, showing the relationship between petal length and width for three species of iris flowers. The visualization uses D3.js v6 to load data from a GitHub-hosted CSV file and render circles as SVG elements. Circles are color-coded by species (setosa in sky blue, versicolor in light green, and virginica in orange), with axis labels displaying the measured attributes. The chart employs D3’s `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` functions to map data values to screen coordinates and generate axes.

Activity 6

This example demonstrates a stacked bar chart that visualizes how three categorical data fields (AM, AZ, FD) contribute to a total for each of five discrete IDs. The chart uses D3.js v7 and SVG rendering, with d3.stack() to process the data into layers, d3.scaleBand() for the x-axis, and d3.scaleLinear() for the y-axis. The bars are colored using d3.schemeCategory10 and drawn with semi-transparent rectangles.

Activity 6_Q 2.1

This stacked bar plot displays the distribution of People, Process, and Technology scores across five departments, using horizontal bars segmented by category. Built with D3 v7, the visualization employs `d3.stack()` for data transformation, `d3.scaleOrdinal` for color encoding, and SVG rendering. Interactive tooltips reveal exact category counts on hover, while a legend identifies each segment. Data originates from a CSV file containing department-level metrics.

Activity 6

A stacked bar plot displays the distribution of three categories—Process, People, and Technology—across five company departments, with horizontal bars scaled by the number of employees. Hovering over a segment highlights it and shows a tooltip with the exact category and count. Built with D3 v7, the visualization uses `d3.stack`, `d3.scaleBand`, and `d3.scaleLinear` to position rectangles within an SVG, while an ordinal color scheme assigns distinct hues. Data is loaded from a local CSV file, and the chart includes labeled axes and a legend.

Activity 6_Task 2

This example shows the distribution of IMDb movie ratings across six genres, with horizontal stacked bars displaying the percentage of movies in five rating categories from below 5.0 to above 8.5. The visualization uses d3.stack() to compute the stacked series, d3.scaleBand() and d3.scaleLinear() for positioning, and d3.scaleOrdinal() for color mapping. Interactive tooltips appear on mouseover via d3.select and event listeners, displaying the exact percentage for each genre-rating combination. The data comes from a CSV file loaded with d3.csv, rendered as SVG elements.

Activity 6_Q 1.1

This example presents a horizontal bar chart ranking the ten most populous countries in the year 2000, sourced from a CSV file of global population data. Using D3 v5, it loads the data via `d3.csv`, scales the bars with `scaleLinear` and `scaleBand`, and renders the visualization as SVG elements. The chart includes customized axes with tick formatting and labeled titles, with bars sorted by population in descending order to highlight country rankings.

Activity 6_Task 1

This chart displays the 2020 population of 30 countries as a horizontal bar chart. Each bar’s length is proportional to population, with country names on the vertical axis and a formatted population scale on the horizontal axis. Built with React and D3 v5, the visualization uses `scaleBand` for the categorical y-axis, `scaleLinear` for the numeric x-axis, and SVG `<rect>` elements for the bars. Data is loaded from a remote CSV file using D3’s `csv` function.

Activity 6_Task 1

This horizontal bar chart visualizes the 2020 populations of 30 countries. Built with React and rendered as SVG, it uses D3’s `scaleBand` for the categorical y-axis and `scaleLinear` for the quantitative x-axis. The `Marks` component draws rectangles whose widths correspond to population values, with tooltips formatted via D3’s `format` function. Axis tick labels are formatted with the `.2s` specifier to show values in billions, and data is loaded from a remote CSV using D3’s `csv` function within a custom `useData` hook.

Activity 6_Task 1

Activity 6_Task 1

Activity 6

This example demonstrates how to set up a minimal VizHub project using D3.js and ES6 modules. It shows a simple "Hello VizHub!" message displayed in the center of the page using the `select` function from D3’s API. The code imports D3 via UNPKG, imports a local ES6 module containing the message string, and applies styling through an external CSS file. The rendering is static, with no data source or interactive elements.

6 Buddhas

Six overlapping Buddha silhouettes form a colorful, layered mandala-like composition on a floral background. Each figure is rendered as a single SVG path filled with a distinct hue, repeated with varying translucency and scale to create depth. Built with React and ReactDOM, the visualization maps an array of coordinates to generate the paths, applying random color values and rotations. The code uses nested loops and the `polygon` element, though the primary visual relies on static SVG path data.

Oct 19, 2024