Skip to main content
Log in
A

adapasaidivya99@gmail.com

@SaiDivyaAdapa·16 public vizzes

Loading thumbnail…

Activity_6_Q_2

A horizontal bar chart displays the 2010 population of 20 countries, with bars ranked by country name on the y-axis and population in billions on the x-axis. The visualization uses React to render SVG elements, with D3’s `scaleBand` and `scaleLinear` for positioning and `csv` from D3 to load the dataset from a GitHub URL. Axis components generate ticks, while rectangle marks include tooltips via SVG `<title>` elements.

Nov 14, 2024
Loading thumbnail…

Activity-7

This example presents a pie chart that visualizes the distribution of cricket players by their home country, using data aggregated from top test cricket records. Built with D3 v5, the chart slices represent the player counts, with each section labeled and colored via a categorical scale. The visualization employs D3's `pie` layout, `arc` generator, and `scaleOrdinal` for color assignment, while a custom legend displays both country names and player totals. The SVG-based chart is rendered on a canvas, with a title and subtitle indicating the dataset's theme.

Nov 6, 2024
Loading thumbnail…

Area Chart

This area chart displays US cancer cases recorded annually from 2009 to 2022, using a smooth curve to highlight the overall trend in case counts over time. The visualization is built with D3 v5, employing `scaleLinear` for both axes, `area` with `curveBasis` to generate the filled path, and `axisBottom` and `axisLeft` for tick marks. Data is loaded from a CSV file via `csv`, with year and case values parsed as numbers. The SVG rendering includes styled axis labels and a filled area in a distinct color, with grid lines created through negative tick sizes.

Nov 6, 2024
Loading thumbnail…

Activity6_Q_9

This bubble chart visualizes the distribution of movie ratings across six genres, comparing the percentage of ratings in the 5.0-6.5 range (x-axis) with the 6.5-7.5 range (y-axis), while the bubble size encodes the percentage of ratings above 8.5 and color distinguishes genres. The visualization uses D3 v6 with SVG rendering, loading data from a remote CSV file via `d3.csv`. Interactive tooltips appear on hover, showing the exact numeric values for each genre, while axes and labels clarify the rating ranges being compared. The chart employs `d3.scaleLinear` for positional and radial encoding, `d3.scaleOrdinal` with `schemeCategory10` for categorical coloring, and standard D3 axes for annotation.

Oct 21, 2024
Loading thumbnail…

Activity6_Task4

This animated bubble chart visualizes the correlation between average horsepower, torque, and highway MPG across car makes using a CSV dataset. D3.js v7 renders SVG circles scaled by MPG and colored with a turbo-scaled ordinal palette. Interactive tooltips appear on mouseover, while the legend displays both bubble size reference circles and color-coded make labels. The implementation uses d3.csv, scaleLinear, scaleOrdinal, and event handlers for hover interactions.

Oct 21, 2024
Loading thumbnail…

Activity6_Q_6

This interactive scatter plot visualizes the relationship between the percentage of movie ratings in the 5.0–6.5 range and the 6.5–7.5 range, using data from a remote CSV file. It loads D3 v6 via UNPKG and filters the data by genre, with each circle colored according to its genre and showing a tooltip on hover. The visualization uses `d3.csv`, `d3.scaleLinear`, `d3.extent`, `d3.axisLeft`, and `d3.axisBottom` to render axes, labels, and circles in an SVG canvas.

Oct 21, 2024
Loading thumbnail…

Activity6_Tu_3.2

This example creates an interactive scatter plot of the Iris dataset, using sepal and petal lengths as axes and species as categorical shapes. It loads CSV data from a GitHub repository via `fetch` and `csvParse`, then renders the chart with D3 v7. The visualization includes custom axis labels, a shape legend, and uses `scaleLinear`, `scaleOrdinal`, `symbolsFill`, and `symbol` to map data points to distinct marker types. The code is modularized into separate ES6 modules for axes, scatter plot, and legend components.

Oct 21, 2024
Loading thumbnail…

Activity6_Task3

This interactive scatter plot visualizes the Iris dataset, distinguishing three flower species by color: setosa in skyblue, versicolor in lightgreen, and virginica in orange. It maps petal length and petal width to the x and y axes, respectively, while using the sepal length and width as circle radius properties. The visualization loads data from a GitHub CSV file using D3 v6’s `csv` method, then applies `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to render the SVG chart. Circles are appended via a data join, with axes and labels added for clarity.

Oct 21, 2024
Loading thumbnail…

Activity6_Q_3

This stacked bar chart displays the combined ratings of horsepower, torque, and highway MPG for various car makes, with each make represented as a horizontal bar segmented by metric. Built with D3 v7, the visualization uses `d3.stack()` to prepare the data and a `d3.scaleOrdinal()` color scale to distinguish the three metrics. Tooltips appear on mouseover, showing the specific metric value for each segment. The data is loaded from a local `bubblechart.csv` file and rendered as SVG.

Oct 21, 2024
Loading thumbnail…

Activity6_Task2

This example displays a stacked horizontal bar chart of IMDb movie ratings across six genres, with each bar segmented into five rating ranges from "below 5.0" to "above 8.5" as percentages. The chart uses D3 v7’s `d3.stack` to aggregate genre data, `d3.scaleLinear` for the percentage axis, and `d3.scaleBand` for genre categories. Interactive tooltips appear on hover, showing the exact percentage for each rating segment, while bars reduce opacity for visual feedback.

Oct 21, 2024
Loading thumbnail…

Activity6_Task2

This example displays a simple "Hello VizHub!" message centered on the page. The visualization uses D3’s `select` function to target the `#message` div and assign the text from a local ES6 module. The project demonstrates how to import both D3 via UNPKG and custom modules, with styling handled by an external CSS file. The code includes a declared variable and regex but does not visibly use them in the output.

Oct 21, 2024
Loading thumbnail…

Activity_6_Q_1

A horizontal bar chart displays the population of ten countries in the year 2000, using green rectangles with country names on the y-axis and population values on the x-axis. The visualization loads data from a CSV file via d3.csv, scales the population values with d3.scaleLinear, and positions bars using d3.scaleBand. React components render the SVG elements, while d3.format converts population numbers into abbreviated labels like "B" for billions. Native SVG `<title>` elements provide tooltips showing exact formatted values on hover.

Oct 21, 2024
Loading thumbnail…

activity 6_Task 1

This visualization is a horizontal bar chart that displays the population of up to 30 countries for the year 2020, sorted in descending order. The chart uses React and SVG rendering, with D3.js (v5) providing the scaling and layout via `scaleBand` and `scaleLinear`. Data is fetched from a remote CSV file using D3’s `csv` function, and the bars are styled as light green rectangles. The x-axis is formatted to display values in billions, with tick marks and labels generated by custom React components.

Oct 21, 2024
Loading thumbnail…

Buddha-6 reflections

A grid of six Buddha images is displayed over a floral background photograph, with each image scaling on hover. The visualization is built with React and rendered as SVG, using a nested `map` loop to generate decorative circles with randomized positions and colors. The background is applied via CSS, and the Buddha silhouettes are drawn from embedded SVG path data.

Oct 19, 2024
Loading thumbnail…

Fork of Buddha in colors

A Buddha silhouette emerges from a dense field of overlapping, randomly-colored SVG polygons. Each polygon is generated through nested arrays and positioned with random coordinates, creating a chaotic, vibrant background. The Buddha figure itself is drawn as a single detailed SVG path, layered atop this colorful mosaic. The visualization is built with React, using ReactDOM to render SVG elements to the canvas.

Oct 17, 2024
Loading thumbnail…

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

The visualization displays a dense field of overlapping, randomly generated polygons rendered in vibrant, shifting colors, with a single Buddha silhouette path placed prominently on top. Built with React and SVG, the code uses nested `map` loops to create hundreds of polygons, each with randomized coordinates, `fill` values based on `Math.random()`, and a fixed rotation. The Buddha path is drawn from a long SVG `d` attribute, scaled and translated into position, creating a layered, abstract composition against a green background.

Oct 13, 2024