bhavanasruthikakarlapudi@gmail.com

@BhavanaSruthi02·14 public vizzes

Question 2

This interactive D3.js visualization displays PM2.5 air pollution levels in India, separated by year. The SVG chart animates a line and area graph of pollutant concentrations, with color-coded bands indicating air quality categories from "Good" to "Hazardous." Users select years via clickable buttons, triggering a transition that redraws the data. The tooltip reveals exact values and health status on hover, with data loaded from a CSV file hosted on GitHub Gist.

Apr 6, 2025

Loading thumbnail…

Question 1

This visualization displays the distribution of chocolate sales by product as a donut-style pie chart rendered with SVG via D3.js v7. The chart shows sales percentages as labels on each slice, with a legend on the right indicating each product’s share. The code loads a CSV dataset from a GitHub gist, parses the monetary amounts, and groups the data by product using `d3.rollups` and `d3.sum`. It uses `d3.pie`, `d3.arc`, and `d3.scaleOrdinal` with the `d3.schemeCategory10` color palette.

Apr 6, 2025

Loading thumbnail…

activity 6_Task Q1.1

This horizontal bar chart shows the top 10 countries by population in 2020, using a green fill for each bar and red axis ticks. The chart sorts countries along the y-axis using d3.scaleBand, while d3.scaleLinear maps population values to bar widths, with tick labels formatted via d3.format. Data is loaded as CSV from a GitHub URL and rendered as SVG elements within a React component structure. The visualization uses React hooks like useEffect and useState to fetch and process the data before displaying it.

Apr 3, 2025

Loading thumbnail…

Activity6_Task 4 Q1

This bubble chart visualizes the relationship between income per person, internet usage rate, and urbanization across countries, with each bubble sized by urban rate and colored by geographic region. It uses d3.csv to load Gapminder data, applies a log scale to the x-axis and linear scale to the y-axis, and renders SVG circles with tooltips on hover. The chart includes axis labels, tick formatting for currency and percentages, and a legend for regional color coding.

Apr 2, 2025

Loading thumbnail…

Activity6_Task 4

This visualization shows the correlation between average horsepower, torque, and highway MPG across different car makes, with each bubble representing a vehicle make. The chart uses a bubble chart where x-position maps horsepower, y-position maps torque, and bubble size encodes highway MPG, while color distinguishes different car brands. The visualization includes animated bubble growth using D3 transitions, interactive tooltips on hover, and a color-coded legend for vehicle classes. It loads data from a CSV file and uses D3 v7's scaleLinear, scaleOrdinal, and schemeTableau10 for the color palette.

Apr 2, 2025

Loading thumbnail…

Activity6_Task 3 Q1

This scatter plot visualizes the relationship between city and highway MPG for individual cars, with each point colored by vehicle class and tooltips identifying make, model, and year. The code loads CSV data from a GitHub repository, uses d3.scaleLinear for both axes, and d3.scaleOrdinal with schemeCategory10 for color encoding. SVG circles are rendered with d3 selection joins, while axisLeft and axisBottom generate the labeled axes. A legend maps class names to colors, and an HTML title supports the chart.

Apr 2, 2025

Loading thumbnail…

Activity6_Task3.2

This example visualizes the Iris dataset with a scatter plot comparing sepal length against petal length for three species (`setosa`, `versicolor`, and `virginica`). Each species is distinguished by a unique geometric symbol—circles, squares, and triangles—and assigned a distinct color (red, blue, and green). The visualization renders in SVG using D3 v7, with `d3.axisBottom` and `d3.axisLeft` for axes, `d3.scaleLinear` for positioning, and `d3.symbol` to generate the point shapes. Data is loaded from a remote CSV file, with a legend displaying each species’ shape and color.

Apr 2, 2025

Loading thumbnail…

Activity6_Task3.1

This D3.js scatter plot visualizes the Iris dataset, mapping petal length on the x-axis and petal width on the y-axis, with each point colored by species (setosa, versicolor, virginica). The plot uses SVG circles with a fixed radius, while the data also includes sepal measurements. Built with D3 v6, it leverages `d3.csv` for data loading, `scaleLinear` for scaling, and `axisBottom`/`axisLeft` for axes, rendering interactively within a full-window viewport.

Apr 2, 2025

Loading thumbnail…

Activity6_Task2

This horizontal stacked bar chart displays the percentage distribution of fruit prices across five ranges, from below 1.0 to above 4.0. Each bar is divided into color-coded segments representing price ranges, with white percentage labels shown for wider segments. The visualization uses D3.js v7 with a stacked bar layout, employing d3.stack and d3.stackOffsetExpand to normalize all bars to full width. The chart includes axes with percentage formatting, a legend for price ranges, and tooltips showing exact segment percentages.

Apr 2, 2025

Loading thumbnail…

Activity6_Task2

This visualization presents a horizontal bar chart comparing the top 20 countries by population in 2010. It is built with React and renders SVG elements, using D3.js v5 functions for data processing, specifically `csv`, `scaleBand`, `scaleLinear`, and `max`. The chart displays population values as green bars, with red tick lines on the bottom axis and formatted tick labels converting values to billions. The data is loaded from a remote CSV file and the visualization includes a tooltip showing precise population values on hover.

Apr 2, 2025

Loading thumbnail…

activity 6_Task Q1.2

This chart displays the top 20 countries by population in 2010 as a horizontal bar chart, with the country name on the y-axis and the population count on the x-axis. It uses React to render an SVG, leveraging D3 v5’s `scaleBand` and `scaleLinear` for axes and scales. The data is loaded from a remote CSV file, and each bar includes a tooltip via a `<title>` element format using D3’s `format` function. Styling is applied via CSS, with red tick lines and green bars.

Apr 2, 2025

Loading thumbnail…

activity 6_Task 1

This horizontal bar chart displays the top 30 countries by population in 2020, sourced from a CSV file. The chart uses React to render SVG elements and the d3.scaleBand and d3.scaleLinear APIs for layout, with d3.format providing abbreviations. Marks are drawn as rectangles, and tooltips show the full population values.

Apr 2, 2025

Loading thumbnail…

activity 6_Task 1

This bar chart displays the top 30 countries by population in 2020, using horizontal bars sorted by country name. Built with React and D3 v5, it uses `scaleBand` for the y-axis, `scaleLinear` for the x-axis, and SVG rendering for the marks. Data is loaded via `csv` from a GitHub-hosted dataset, with population values multiplied by 1000. The chart includes custom axis components and formats tick labels using D3's `format` with SI prefixes, converting "G" to "B" for billions.

Apr 2, 2025

Loading thumbnail…

activity 6_Task 1

This example presents a horizontal bar chart of the top 30 most populated countries in 2020, using Chart.js to render the visualization on a Canvas element. Country names are placed on the y-axis, with population counts shown in thousands on the x-axis, colored uniformly in blue. The chart is built by mapping hard-coded population data into labels and values, then passing them to the Chart.js configuration with an inverted indexing axis for horizontal orientation. The visualization uses the `chart.js` library from a CDN, with the x-axis scaled from zero and axis titles provided.

Apr 2, 2025