Deekshitha Annreddy

Activity 7.1-1

This example shows a pie chart of car sales by brand, using a dataset loaded from a GitHub-hosted CSV file. It aggregates the raw data with d3.rollup and d3.sum to compute total units sold per brand, then renders the slices with d3.pie and d3.arc in an SVG. Each brand receives a distinct color from a predefined map, and a legend displays the brand names alongside their corresponding sales totals. The visualization also logs intermediate data to the console for debugging.

Nov 6, 2024

Activity 7

This example shows a pie chart representing car sales by brand, aggregated from a CSV dataset. It uses D3 v7’s `d3.pie` layout and `d3.arc` to generate SVG paths for each slice, while `d3.rollup` sums the `Units_Sold` values per `Car_Brand`. A custom color mapping assigns distinct hues to Toyota, Honda, Ford, and Chevrolet, with an HTML legend displaying each brand’s name and total units. The SVG is centered within a 500×500 pixel viewport.

Nov 6, 2024

Activity6_Question4

This visualization shows the correlation between number of mentions, engagement rate, and reach for various social media hashtags. Each circle’s x-axis position corresponds to mentions, its y-axis to reach, and its radius to engagement rate. The code uses D3 v7 with `d3.csv` to load data, `scaleLinear` for axes, and a custom tooltip via mouseover events. SVG rendering includes a legend, axis labels, and a color scale using `d3.scaleOrdinal`. Data is loaded from the provided `bubblechart.csv` file.

Activity6_Question4

This bubble chart visualizes the relationship between three variables from the Iris dataset: sepal length, sepal width, and species. The position of each circle encodes the sepal dimensions along the x- and y-axes, while the size of each circle represents petal length. The visualization uses a tooltip that displays the species information for each data point upon mouseover. The chart is rendered as an SVG using D3 v7, with scales defined by `d3.scaleLinear` for positioning and sizing, and `d3.schemeCategory10` for categorical color encoding by species.

Activity6_Task4

This bubble chart visualizes the correlation between average horsepower, torque, and highway MPG across different car makes. Each circle represents a car make, with its x-axis position indicating horsepower, y-axis position indicating torque, and radius representing highway MPG. Color encodes the car make, and hover interactions reveal the make name via a tooltip. Built with D3 v7 and React, the chart uses `scaleLinear` for axes and bubble size, `scaleOrdinal` with `interpolateTurbo` for color mapping, and SVG for rendering with animation.

Activity 6_Question3

This scatter plot visualizes the relationship between Value X and Value Y across eight categories (A–H) using a dataset loaded from a CSV file. The visualization employs D3.js scales and axes to map data points, with each circle colored by category using `d3.scaleOrdinal` and `d3.schemeCategory10`. The SVG rendering includes labeled axes for both dimensions, with point positions determined by `d3.scaleLinear` domains. Data is loaded asynchronously via `d3.csv` with `d3.autoType`, and the chart updates its scales after data retrieval.

Activity6_Question3

This bubble chart plots car makes by average horsepower against torque, with point size encoding highway fuel efficiency. The visualization uses D3.js’s `select` API to update a text message, while a separate local module `myMessage` supplies content. Data for each make (e.g., Scion, Lamborghini) comes from the CSV file `bubblechart.csv`, which lists horsepower, torque, and highway MPG values. The chart reveals performance and efficiency trade-offs across brands, with luxury marques like Maybach and Bentley showing higher power and torque but lower MPG.

Activity6_Task3.2

This example demonstrates a scatter plot of the Iris dataset, encoding sepal length on the x-axis, petal length on the y-axis, and species as symbol shapes (circles, triangles, and squares) with a custom legend. It uses d3.scaleLinear for axes, d3.scaleOrdinal with d3.symbolsFill for shape mapping, and d3.axisLeft/axisBottom via a reusable axes module. The data loads asynchronously as CSV from a GitHub repository and is parsed with d3.csvParse. The visualization builds its SVG using d3.select and join patterns, with local ES6 modules for modular structure.

Fork of Activity6_task1.1

This example displays a horizontal bar chart comparing population figures for ten countries in the year 2000. The React application loads CSV data via `useData` and D3’s `csv` function, then renders SVG bars using `scaleBand` and `scaleLinear`. Axes are built with custom `AxisBottom` and `AxisLeft` components, while tooltips appear through SVG `<title>` elements using a D3 `format` tick formatter.

Activity 6_Task1.2

This example displays a horizontal bar chart of population figures for 20 countries in 2010, with countries on the y-axis and population on the x-axis. It loads CSV data from a GitHub repository using d3.csv and renders the chart as SVG elements within a React component. The visualization uses d3.scaleBand and d3.scaleLinear to map data to coordinates, along with custom axis components and bars colored light green, with tooltips showing population values in billions.

Activity6_Task3

This example renders a scatter plot of the classic Iris dataset, showing petal length against petal width for three species of iris flowers, colored skyblue, lightgreen, and orange. It uses D3 v6’s `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` APIs to map the data, and the `csv` function to load the data from a remote GitHub URL. The visualization is drawn as SVG circles within an HTML page that imports D3 via UNPKG, and the code also demonstrates local ES6 module imports.

Activity6_Task 2.1

This stacked bar chart displays the percentage distribution of four iris flower measurements—sepal length, sepal width, petal length, and petal width—across the three iris species in the classic iris dataset. The visualization uses D3 v7 to load and parse the CSV data, then renders the stacked bars in SVG using d3.stack() and d3.scaleBand() for the categorical species axis. A d3.scaleLinear() maps the percentage values, and mouseover interactions trigger tooltips showing exact percentages via d3.format().

Oct 23, 2024

Activity6_task2

This stacked bar chart shows the distribution of IMDb movie ratings across six genres, with each bar segment representing the percentage of films falling into one of five rating brackets. The visualization uses d3.stack() to compute the stacking layout, d3.scaleBand() for the categorical y-axis, and d3.scaleLinear() for the percentage x-axis. Interactive tooltips display the exact percentage for each genre-rating combination on mouseover. The data is loaded from a CSV file and rendered as SVG elements with an ordinal color scale.

Oct 23, 2024

Activity6_task2

Activity6_task2

This example demonstrates the basic structure of a VizHub project, showing how to load D3 via a CDN and use ES6 modules for local code organization. The index.html file includes the D3 library from UNPKG and links to a stylesheet, while index.js imports the select function from d3 and a custom message from myMessage.js. The code sets the text content of a div element with the ID “message” to display “Hello VizHub!”, styled with large centered text via CSS. The data.csv file is included but not referenced in the visualization logic.

Activity 6_Task1.2

This example displays a horizontal bar chart comparing the 2010 population of twenty countries, sourced from a remote CSV file. It uses React to render an SVG visualization with D3’s scale functions, including `scaleBand` for the categorical country axis and `scaleLinear` for the continuous population axis. The chart includes custom axis components and tooltips that format population values in abbreviated SI units.

Activity6_task1.1

A horizontal bar chart displays the top ten countries by population in the year 2000, using a dataset loaded via the `d3.csv` method from a GitHub-hosted CSV file. The visualization renders as an SVG in a React app, with bars drawn as `rect` elements positioned by `d3.scaleBand` for the categorical country axis and `d3.scaleLinear` for the population value axis. Custom React components generate the axes and marks, while `d3.format` styles tick labels in billions. A native SVG `title` element provides a tooltip showing each bar’s exact value.

Activity6_Task1.1

This example shows a horizontal bar chart of population data for 20 countries in 2010, using a linear scale for population values and a band scale for country names. The visualization renders as SVG through React components, with D3 v5 handling data loading via `d3.csv` and scale generation through `scaleLinear` and `scaleBand`. The code defines reusable React components for the bottom and left axes plus marks, and formats population values using D3's `format` function. Data comes from a GitHub-hosted CSV file, with each bar including a native SVG tooltip showing the formatted population value.

Activity6

This visualization shows the population of 30 countries in 2020 as horizontal bars, sorted by country name along the y-axis with population values extending along the x-axis. Each bar includes a native SVG tooltip displaying the formatted population value. The chart is built with React components that render SVG elements, using D3 v5’s `scaleBand` for the categorical y-axis and `scaleLinear` for the quantitative x-axis. Population data is loaded as CSV from a GitHub repository and formatted with D3’s `format('.2s')` to abbreviate large numbers.

Activity6_Task1

This example demonstrates a minimal VizHub template that renders the text "Hello VizHub!" centered on the page. It loads D3 v5 from UNPKG and uses the `select` API to target the `#message` div, setting its text content. The code also showcases importing local ES6 modules, specifically a `myMessage.js` file that exports the message string, and includes CSS styling for large centered text.

Activity6

This example demonstrates basic D3.js setup and ES6 module usage within a VizHub template. It loads D3 v5 from UNPKG and uses the `select` function from the `"d3"` import to update the text content of a `#message` div with a string exported from a local module. The page renders a large, centered “Hello VizHub!” message styled via CSS, showing how to combine external libraries, local imports, and styles in a single visualization harness.

6 Buddhas

Six overlapping Buddha silhouettes form a kaleidoscopic mandala atop a photographic flower background. Each path uses a violet fill with a white stroke, creating a layered, stained-glass effect. Rendered with React and SVG, the visualization maps a static array of coordinates through JSX transforms. The image element imports a nature photograph, while the Buddha paths are positioned using translate and scale operations within the React component tree.

Oct 18, 2024

Fork of 5 Buddhas

This visualization renders a chaotic layered composition of diamond-shaped polygons in randomized colors, generated through nested React array maps and transformed with rotations and scaling. A large SVG path outlines a Buddha figure, drawn from intricate coordinate data, and is overlapped by the scattered polygons. The code uses React and ReactDOM for rendering, with SVG elements like `<polygon>` and `<path>`, and relies on JavaScript Math functions for random positioning and color values. The black background and overlapping elements create a dense, abstract collage effect.

Oct 18, 2024