Siddhardha

@siddhardha99·15 public vizzes

Activity 7.1 question 2

This example visualizes the distribution of petal length across iris species using a stacked area chart. It loads CSV data from a GitHub gist via D3’s `csv` method, then applies `scaleBand` for species categories and `scaleLinear` for petal length values. The chart uses `stack` and `area` generators to render a single filled area, with `axisBottom` and `axisLeft` for axes, and a title annotation. SVG output is produced through D3 selections.

Nov 8, 2024

Loading thumbnail…

Activity7.1 Q2

This example shows two distinct data visualizations in one page: an area chart tracking monthly salaries across 2023, and a pie chart displaying browser market shares. The area chart uses D3’s `d3.area` generator with time-scaled axes and explicit axis labels, while the pie chart loads CSV data via `d3.csv`, applies a `d3.pie` layout, and renders arcs with `d3.arc` and a color scale. Both visualizations rely on SVG rendering and D3 v6, with the pie chart adding an interactive legend.

Nov 7, 2024

Loading thumbnail…

Activity7.1

A pie chart displays the share of browser usage from a CSV dataset, with each slice labeled by its percentage. The chart uses D3 v7 to load CSV data asynchronously, applies `d3.pie`, `d3.arc`, and `d3.scaleOrdinal` with the Tableau10 color scheme, and renders via SVG. A legend on the right maps color swatches to browser names, while slice texts show the corresponding usage values. The example demonstrates handling remote CSV data, SVG path generation, and legend construction with D3's `select` and `append` methods.

Nov 5, 2024

Loading thumbnail…

Task 4 Questions

A bubble chart visualizes company metrics from a CSV file, plotting Revenue on the x-axis and ProfitMargin on the y-axis, with bubble size encoding EmployeeSatisfaction. Built with D3 v6, it uses `d3.csv` to load data and `d3.axisBottom`/`d3.axisLeft` for axes. A Tableau10 color scale via `d3.schemeTableau10` distinguishes companies, with a legend generated using `d3.scaleOrdinal`. Circles use `d3.scaleSqrt` for radius and are rendered as SVG with 70% opacity and black strokes.

Oct 23, 2024

Loading thumbnail…

Activity6_Task4

This interactive bubble chart visualizes the relationship between average horsepower, torque, and highway MPG across multiple car makes. Each bubble represents a vehicle make, positioned by horsepower and torque on the x and y axes, with bubble size scaled by highway MPG and color differentiating makes. Built with D3 v7, the visualization includes axis labels, a legend for MPG values and makes, and tooltips that appear on hover. The code reads from a CSV file and uses D3's scaleLinear, scaleOrdinal, axisBottom, axisLeft, and interpolateTurbo functions to construct the chart.

Oct 23, 2024

Loading thumbnail…

Task 3 Questions

This scatter plot maps customer satisfaction scores to monthly spending, using color to distinguish satisfied customers (green) from dissatisfied ones (red). Each circle represents a customer, positioned along the x-axis for satisfaction and the y-axis for spending. The visualization uses D3 v7 with `d3.scaleLinear` for axes, `d3.scaleThreshold` for the two-color grouping, and a legend built from `invertExtent`. A tooltip appears on hover, and the chart is rendered as SVG with manual axis labels and margins.

Oct 23, 2024

Loading thumbnail…

Activity6_Task3.2

This visualization is a scatter plot of the Iris dataset, displaying sepal length on the x-axis and petal length on the y-axis, with points shaped according to species. It loads data from a remote CSV file and parses it with `d3.csvParse`. The chart uses D3 v7 APIs including `scaleLinear` for axes, `scaleOrdinal` with `symbolsFill` for shapes, `axisLeft`, `axisBottom`, and a custom shape legend built with `d3.symbol`. Data is mapped using numeric conversions for petal and sepal measurements.

Oct 23, 2024

Loading thumbnail…

Activity6_Task3

This example displays a scatter plot of the Iris dataset, plotting petal length on the x-axis and petal width on the y-axis, with each point colored by species (skyblue, lightgreen, or orange). It also encodes sepal length and width as the horizontal and vertical radii of each circle, creating an elliptical marker for each observation. The visualization loads CSV data from a GitHub gist using `d3.csv` and renders SVG circles via D3 v6 selections with `join`. Axes are generated using `d3.axisLeft` and `d3.axisBottom`, while scales are created with `d3.scaleLinear` and domains from `d3.extent`.

Oct 23, 2024

Loading thumbnail…

Task 2 Questions

A stacked bar chart displays survey responses for social media usage across six age groups, with each bar segmented by platform (Facebook, Instagram, Twitter, Snapchat, LinkedIn). The visualization uses D3.js version 7 to load CSV data via `d3.csv`, prepares the data with `data.columns` and `d3.sum`, and employs `d3.stack` to compute stacked series. Bars are rendered as SVG `<rect>` elements with colors from `d3.scaleOrdinal` and `d3.schemeCategory10`. Interactive tooltips appear on mouseover, showing the percentage for the hovered platform, while axes are generated with `d3.axisBottom` and `d3.axisLeft`.

Oct 23, 2024

Loading thumbnail…

Activity6_Task2

This example shows the distribution of IMDb movie ratings across six genres, with horizontal stacked bars dividing each genre into five rating categories from “below 5.0” to “above 8.5.” The chart includes a color-coded legend, axes, and an interactive tooltip that displays the exact percentage for a hovered segment. The visualization uses D3 v7 with stacked bar layout via `d3.stack()`, scales from `d3.scaleLinear` and `d3.scaleBand`, and an ordinal color scale. Data is loaded from a CSV file and rendered as SVG elements.

Oct 23, 2024

Loading thumbnail…

activity 6_Task 1

Three horizontally stacked bar charts compare population by country across the years 2000, 2010, and 2020. The visualization uses a React and D3.v5 setup with SVG rendering, employing `scaleBand` and `scaleLinear` to map country categories and population values. Data is loaded from a CSV file via D3's `csv` function, and the charts are titled with their respective years, with tooltips showing formatted population values. The code implements custom `AxisBottom` and `AxisLeft` components for tick rendering.

Oct 23, 2024

Loading thumbnail…

Lotus 6 Buddhas

The visualization displays six overlapping Buddha silhouettes, arranged in a circular motif, against a photographic background of flowers and a decorative patterned border. Built with React and ReactDOM, the piece renders the Buddha images as SVG paths within a 1000x1000 canvas. The code generates a grid of randomized, semi-transparent colored squares as a subtle overlay, while each Buddha path is scaled and positioned using SVG transformations. This example leverages React's component-based structure to manage the SVG elements, with the background loaded via a CSS `url()` reference.

Oct 18, 2024

Loading thumbnail…

5 Buddhas

Five Buddhas overlap as semi-transparent, randomly colored polygons arranged in a diamond lattice across a black background, creating an abstract, kaleidoscopic mandala effect. Built with React and rendered as SVG, the visualization maps nested loops over an array of numbers to generate over 8,000 rotated polygon points. The code uses React’s `createElement` and `ReactDOM` to render the SVG, with fill colors and coordinate positions driven by `Math.random()` calls. A large embedded Buddha path adds a figurative anchor beneath the generative geometric pattern.

Oct 14, 2024

Loading thumbnail…

12

This visualization displays a dense, chaotic field of semi-transparent, randomly rotated and colored polygons overlaid on a large Buddha-shaped path, all rendered on a green background. The code uses React to render SVG elements, mapping over a numeric array to generate hundreds of `polygon` elements with random coordinates, `rgb` fill values, and rotation transforms. The Buddha figure is a detailed `path` element scaled and translated into place, creating a layered, overlapping composition against the generative polygon scatter.

Oct 14, 2024

Loading thumbnail…

Hanumanth

This example presents an interactive dashboard for exploring air pollution data across Indian states. It uses D3.js (v6) with SVG rendering to display multi-line charts tracking yearly levels of pollutants like SO2, NO2, RSPM, and SPM for a selected state via a dropdown menu. It also renders bar charts using `d3.rollups` and `d3.mean` to compare average pollutant concentrations across states. The data is loaded from a CSV file using `d3.csv`.

Apr 25, 2024