dandudivya98@gmail.com

@DivyaSreeDandu·23 public vizzes

Project AQI vs PM2.5

This scatter plot visualizes the relationship between AQI Value and PM2.5 AQI Value, with each point colored by country (India, USA, Australia, etc.). It uses D3.js v7 to read CSV data, create linear scales, render SVG axes and circles, and display a categorical legend. The chart includes axis labels and a title.

Apr 24, 2024

Loading thumbnail…

Project AQI vs NO

This scatter plot displays the relationship between AQI values and NO2 AQI values across different countries, with each point colored by its country of origin and accompanied by a legend. The visualization uses D3.js v7 to load data from a CSV file hosted as a GitHub gist, then constructs an SVG chart with linear scales, axes, axis labels, and circles positioned via `d3.scaleLinear`. The code creates a scatter plot with `d3.csv`, `d3.axisBottom`, and `d3.axisLeft`, while styling points using a country-to-color mapping and adding a legend with SVG rectangles and text elements.

Apr 24, 2024

Loading thumbnail…

Project AQI vs Ozone

This scatter plot pairs each country’s AQI value with its corresponding Ozone AQI value, using colored circles to distinguish ten countries. Rendered as an SVG via D3.js v7, the chart loads CSV data from a GitHub gist and maps the numeric columns to linear axes. D3’s `scaleLinear`, `axisBottom`, and `axisLeft` APIs build the scales and tick marks, while `selection.append` creates the circles and a manual color-keyed legend from a JavaScript object.

Apr 24, 2024

Loading thumbnail…

Project AQI vs CO

This scatter plot compares AQI values against CO AQI values, with each point colored by country. The chart uses D3.js v7 to render an SVG graphic, with linear scales for both axes and a legend mapping ten countries to distinct colors. Data is loaded from a CSV file via `d3.csv`, and the visualization includes axis labels and a title. The code demonstrates importing modules from D3 and local ES6 modules within the VizHub framework.

Apr 24, 2024

Loading thumbnail…

AQI vs Forest

This scatter plot visualizes the relationship between AQI and forest area across geographic coordinates, using circle size to encode AQI values and color intensity to represent forest percentage. The visualization loads CSV data via d3.csv, maps longitude and latitude to linear scales for axes, and employs d3.scaleSqrt for radius encoding and d3.scaleLinear with a light-to-dark green color range. A tooltip displays country, AQI, and forest area details on mouseover, while SVG circles with opacity and white strokes render the data points.

Apr 23, 2024

Loading thumbnail…

Assignment 2 - Area Chart

The chart displays household monthly expenses as a blue area chart with a line overlay, showing spending trends across months on a time-series axis. It uses D3 v5 APIs including `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, `line`, `area`, and `curveBasis` to generate the smoothed curve and filled region. The SVG rendering includes styled gridlines, axis labels, and a title, with data loaded from a remote CSV file containing date and spending values.

Apr 13, 2024

Loading thumbnail…

Assignment 2 - Pie Chart

This pie chart visualizes vehicle registration counts by type, with each slice labeled with its value in thousands and accompanied by a color-coded legend. The visualization uses D3 v5’s `d3.pie` and `d3.arc` to generate the chart, `d3.scaleOrdinal` for slice colors, and `d3.format` for tick labels. Data is loaded asynchronously from a CSV file via `d3.csv`, and the chart is rendered as SVG with custom styling for text and legends.

Apr 13, 2024

Loading thumbnail…

Fork of pie chart

A fork of a pie chart example visualizes COVID-19 case data from a CSV file, showing three categories (Infected, Recovered, Died) as colored slices with proportional labels and a legend. The D3 v5 code uses `d3.csv` to load the data, `d3.pie` to compute arc segments, and `d3.arc` with an inner radius of zero to generate the paths. Slice colors come from `d3.scaleOrdinal` with a manual range, and text labels are positioned using the arc’s centroid method. The SVG output is centered within a 980×550 canvas.

Apr 12, 2024

Loading thumbnail…

Activity 6

This animated scatter plot explores the classic Iris dataset, cycling through different flower measurements on the x-axis—petal width, sepal width, petal length, and sepal length—against sepal length on the y-axis. The code loads data via D3's `csv` function and builds a reusable scatter plot using `scaleLinear`, `axisLeft`, and `axisBottom`. Each species (setosa, versicolor, virginica) receives a distinct color, and a legend with labeled circles updates alongside the axes. The visualization repeats its axis transitions every few seconds using `setInterval`, with SVG elements rendered directly to the page.

Apr 12, 2024

Loading thumbnail…

Activity6_Question2

This example shows the weight of recycled office materials—Office Paper, OCC, and Single-Stream—across twelve months, displayed as horizontal stacked bars. Each bar represents one material type, divided into monthly segments colored by month. The visualization uses d3.stack to compute the stacked series, d3.scaleBand for the categorical y-axis, and d3.scaleLinear for the x-axis. Hovering over a segment reveals a tooltip with the precise weight for that month. Data is loaded from a CSV file and rendered as SVG.

Apr 5, 2024

Loading thumbnail…

Activity6_Question3

A scatter plot displays cricket player statistics, showing matches played on the x-axis and total runs on the y-axis. Each circle represents a player, with colors assigned based on country using `d3.scaleOrdinal` and `d3.schemeCategory10`. The visualization loads CSV data via `d3.csv`, uses `d3.scaleLinear`, `axisBottom`, and `axisLeft` for scales and axes, and renders circles as SVG elements with fill opacity for readability.

Apr 5, 2024

Loading thumbnail…

Activity6_Tutorial3.1

This scatter plot visualizes the Iris dataset, mapping petal length and width on the x- and y-axes while coloring each point by species (setosa, versicolor, virginica). The visualization uses D3 v6 and SVG rendering, loading data from a remote CSV via `d3.csv` and scaling coordinates with `d3.scaleLinear`. Circles are drawn with `selectAll` and `join`, with axes generated by `d3.axisLeft` and `d3.axisBottom`, accompanied by rotated axis labels.

Apr 5, 2024

Loading thumbnail…

Activity6_Tutorial3.2

This scatter plot visualizes the Iris dataset, showing the relationship between sepal length and petal length for three iris species. Each data point is rendered as a distinct shape (circle, square, or triangle) using the d3.symbol API, with a legend mapping shapes to species. The visualization is built with d3.scaleLinear for axes, d3.scaleOrdinal for the shape encoding, and d3.axisLeft/axisBottom for labeled axes. Data is loaded asynchronously from a remote CSV file using d3.csvParse. The chart updates dynamically via the d3.select and join operations.

Apr 5, 2024

Loading thumbnail…

Activity6_Tutorial2

This chart shows the distribution of IMDb movie ratings across six genres, displayed as a horizontal stacked bar chart where each bar represents a genre and each colored segment corresponds to a rating range from "below 5.0" to "above 8.5". The proportions are normalized to percentages, making it easy to compare how ratings concentrate within each genre. The visualization uses D3 v7 with a `d3.stack()` operation to create the stacked bars, `d3.scaleOrdinal` for color mapping, and `d3.scaleBand` for the y-axis categories. An SVG canvas renders the chart, and mouse events trigger tooltips that display the exact percentage for each segment, using data from the included CSV file.

Apr 5, 2024

Loading thumbnail…

Activity6_Question1.1

A horizontal bar chart displays the populations of ten countries in the year 2000, with countries listed on the y-axis and population values on the x-axis. The visualization uses React to render SVG elements, with D3 v5 providing the `scaleBand`, `scaleLinear`, and `max` functions for chart construction. Data is loaded via `d3.csv` from a GitHub-hosted CSV file, and each bar shows a hover tooltip with the formatted population count. The bottom axis labels use D3's `format` to convert values from billions to abbreviated strings.

Apr 5, 2024

Loading thumbnail…

Activity6_Question1.2

A horizontal bar chart displays the 2010 population of twenty countries, ordered by country name, using green bars on an SVG canvas. The chart is built with React and D3 v5, employing `scaleBand` for the categorical y-axis and `scaleLinear` for the numeric x-axis. Axis components are modular ES6 files, with bottom ticks formatted using `format`. Data is loaded asynchronously via `csv` from a GitHub-hosted dataset, and interactive tooltips show population values on hover.

Apr 5, 2024

Loading thumbnail…

Activity6_Tutorial1

A horizontal bar chart displays the 2020 population estimates for the top 30 countries, ranked by country name along the y-axis and population along the x-axis. Built with React and D3 v5, the visualization uses `scaleBand` and `scaleLinear` for axes, with SVG `rect` marks fetching data from a CSV file. A tooltip shows the formatted population value on hover.

Apr 5, 2024

Loading thumbnail…

Activity6_Question4

This interactive bubble chart displays the relationship between fertility rate and life expectancy for ten countries in 2010, with bubble size representing population and color encoding geographical region. Hovering over a bubble reveals a tooltip with the country name, region, and population. The visualization uses D3 v7's `scaleLinear` for axes, `scaleOrdinal` with `schemeCategory10` for regional coloring, and `axisBottom`/`axisLeft` for tick marks, loading data from a local CSV file into an SVG rendered through D3's selection API.

Apr 5, 2024

Loading thumbnail…

Activity6_Question4

This interactive D3.js bubble chart visualizes fertility rate against life expectancy for ten countries, with bubble size representing population and color distinguishing geographic regions. The visualization uses an SVG-based rendering with d3.scaleLinear for axes and bubble sizing, and d3.scaleOrdinal with interpolated turbo colors for regional categorization. Hovering over any circle triggers a tooltip displaying the region name, implemented through mouse event handlers. The chart includes a size legend and a color-coded category legend. Data is loaded from a CSV file, and the visualization demonstrates animated transitions for tooltip opacity changes.

Apr 5, 2024

Loading thumbnail…

Activity6_Tutorial4

This bubble chart displays the correlation between average horsepower, torque, and highway MPG across various car manufacturers. Each circle represents a make, positioned by horsepower (x-axis) and torque (y-axis), with the circle's radius encoding highway MPG and its color distinguishing the manufacturer. The visualization uses D3.js (v7) to render SVG elements and includes interactive tooltips on hover. A legend shows the mapping of circle size to MPG values. Data is loaded from a CSV file.

Apr 5, 2024

Loading thumbnail…

6 Buddhas

A mosaic of six Buddha figures rendered in SVG, each constructed from thousands of randomly colored rectangular primitives generated through React’s `map` iteration and assigned semi-transparent fills via the `rgb()` function. The composition layers the repeated `<path>` Buddha silhouettes at varying scales and positions, with a photographic flower background set through CSS `background-image`. The visualization uses React 16.10’s `ReactDOM` to mount the component, which renders the SVG canvas with dimensions of 960 by 1000 pixels, creating an overlapping, abstract effect.

Apr 5, 2024

Loading thumbnail…

Fork of Fork of Fork of Fork of Fork of Buddha in colors -overlapping Buddha

This visualization generates an overlapping, colorful Buddha silhouette by layering numerous semi-transparent SVG paths. Built with React and rendered as SVG, the code uses nested `A.map` iterations with random coordinates and `fill` colors to create a scattered, abstract effect. The primary image is a single complex path representing the Buddha, transformed with translation and scaling, drawing from a predefined dataset. The black background and red message text frame the composition, showcasing the React and ReactDOM libraries for rendering.

Apr 5, 2024

Loading thumbnail…

5 buddhas

Five overlapping Buddha silhouettes appear as a stack of connected, multi-colored geometric forms against a black background, with each shape composed of small rotated diamond-like polygons. The visualization uses React to render an SVG scene, generating thousands of diamond polygons with randomized positions, colors, and rotation transformations via nested array mappings. The Buddha path data is drawn from a static SVG path, scaled and positioned within the composition, while the background styling and Unicode text elements come from the React-generated DOM.

Apr 5, 2024