V

vemulasai306@gmail.com

@vemulasai306·18 public vizzes

Loading thumbnail…

Electric Vehicle Adoption Trends

This dashboard animates the adoption of electric vehicles across multiple countries, visualizing annual sales of Battery Electric Vehicles (BEV) versus Plug-in Hybrid Electric Vehicles (PHEV). It presents the data through three coordinated SVG charts: a bubble chart where bubble size encodes sales volume, a grouped bar chart comparing powertrains by year, and a heatmap showing the same data with color intensity. Interactive tooltips display precise year, powertrain, and sales figures on hover. The visualization uses D3 v7 APIs such as `d3.scaleLinear`, `d3.scaleBand`, `d3.scaleOrdinal`, `d3.scaleSqrt`, and `d3.groups` to process and render the CSV data.

Loading thumbnail…

Activity 7 Question 2

This area chart displays global average temperature over time, with the year on the x-axis and temperature in degrees Celsius on the y-axis. The chart is rendered as an SVG using the D3 v7 library, loading data from a CSV file provided via a GitHub gist URL. The code uses `d3.scaleLinear` for both axes, `d3.area` to create the filled area path, and `d3.axisBottom` and `d3.axisLeft` for tick marks. The area is filled with a semi-transparent steelblue color, and the chart includes labeled axes and a title.

Loading thumbnail…

Activity 7 Question 1

This example visualizes the distribution of grocery item prices by category as a pie chart, with a text legend displaying each category’s total dollar value. It loads a CSV dataset from a GitHub gist, aggregates prices per category using `d3.rollup` and `d3.sum`, and renders the chart with `d3.pie`, `d3.arc`, and an ordinal color scale (`d3.scaleOrdinal`). The SVG is drawn via D3 v6, and the legend is built as styled HTML divs, with data fetched asynchronously through `d3.csv`.

Loading thumbnail…

Activity6_Task4 Question 4

This bubble chart visualizes nutritional data for fruits, plotting weight in grams on the x-axis against calories on the y-axis, with bubble radius encoding sugar content. Each circle is labeled with the fruit name, and its size reflects the square-root-scaled sugar value. The visualization uses D3 v7 with SVG rendering, d3.scaleLinear for axes, d3.scaleSqrt for bubble sizing, and d3.csv to load the fruits.csv data file. Standard d3.axisBottom and d3.axisLeft calls generate the axes.

Loading thumbnail…

Activity6_Task4 Question 4

This interactive bubble chart visualizes correlations between average horsepower, torque, and highway MPG across 31 car makes. Each circle’s x-position maps to horsepower, y-position to torque, while radius encodes highway MPG and color distinguishes manufacturers. The visualization uses D3 v7 with `d3.scaleLinear` for axes and bubble sizing, `d3.scaleOrdinal` with `d3.interpolateTurbo` for categorical colors, and SVG tooltips on mouseover. A legend with circles and labels explains the MPG encoding. Data is loaded from a local CSV file.

Loading thumbnail…

Activity6_Task4

This example uses D3 v7 to render an animated SVG bubble chart exploring the relationship between average horsepower, torque, and highway MPG across car makes. It imports data from a local CSV file and uses linear scales for axes, an ordinal color scale with interpolateTurbo, and a size scale. Interactive tooltips appear on mouseover, while a legend encodes bubble size for highway MPG values. The visualization also includes axis labels and a title.

Loading thumbnail…

Activity6_Task3 Question 3

A scatter plot displays the relationship between house size (in square feet) and house price (in USD), with points colored by neighborhood category (red, green, blue). It loads a CSV from a GitHub URL using `d3.csv`, parses numeric fields, and scales the axes with `d3.scaleLinear` and `d3.extent`. The SVG chart is rendered via D3 v6, using `d3.axisLeft` and `d3.axisBottom` for labeled axes, with circles positioned through joins on the selection.

Loading thumbnail…

Activity6_Task3.2

This example visualizes the Iris dataset as a scatter plot showing sepal length versus petal length, with species encoded by point shape and a legend. It demonstrates modular D3 code organization: a scatterPlot module manages scaling and marks, while axes and shapeLegend modules add labeled axes and a symbol legend. Data loads from a remote CSV file using d3.csvParse. The code separates visualization logic into reusable ES6 modules and uses d3.scaleLinear, d3.scaleOrdinal, d3.symbol, and d3.axisLeft/axisBottom.

Loading thumbnail…

Activity6_Task3.1

This scatter plot visualizes the Iris dataset, mapping petal length and petal width as x and y coordinates while coloring each point by species (setosa, versicolor, or virginica). It loads CSV data from a GitHub URL and renders circles with D3 v6, using `d3.csv`, `scaleLinear`, `extent`, and `axisLeft`/`axisBottom` to construct axes. The SVG-based visualization labels both axes and includes a fixed point radius, with species-specific colors applied via a switch statement.

Loading thumbnail…

Activity6_Task2 Question 2

This stacked bar chart visualizes the macronutrient breakdown—carbohydrates, fats, and proteins—across six food categories using data from a local CSV file. The chart uses `d3.stack()` to generate stacked series and `d3.scaleOrdinal` for color mapping, with bars rendered as SVG rectangles. Axes are built with `d3.axisBottom` and `d3.axisLeft`, while a legend is manually appended as colored rectangles and text labels. The visualization highlights proportional differences in nutrient composition, such as fruits being nearly all carbohydrates.

Loading thumbnail…

Activity6_Task2 Question 1

This example shows a stacked horizontal bar chart comparing IMDb rating distributions across six movie genres, with each bar segment colored by rating category and labeled with percentages in a tooltip. The visualization uses D3 v7 with SVG rendering to encode genre on a band scale and proportions on a linear scale, applying `d3.stack`, `d3.scaleOrdinal`, and `d3.axisBottom`. Data comes from a CSV file containing genre-specific percentage values for five rating buckets. Interactive mouseover events update a DOM-based tooltip to display the precise percentage for each segment.

Loading thumbnail…

Activity6_Task2

A stacked bar chart visualizes the distribution of IMDb movie ratings across six genres, with each bar segmented by five rating ranges from "below 5.0" to "above 8.5" as percentages. The visualization uses D3 v7 to load CSV data, applies `d3.stack()` to create stacked series, and renders SVG rectangles with `d3.scaleOrdinal` for color encoding. Interactive tooltips, implemented via mouse events, display the exact percentage for each rating segment on hover, while axes are generated using `d3.axisLeft` and `d3.axisBottom`.

Loading thumbnail…

Activity 6_Task1 Question1.2

This example shows a horizontal bar chart of population data for 20 countries in 2010. The chart uses a linear scale for population values on the x-axis and a band scale for country names on the y-axis, with bars colored light green. The visualization loads data from a CSV file via d3.csv and renders using React with SVG elements. Axis components are created with d3.scaleBand and d3.scaleLinear, while d3.format applies SI-prefix formatting to tick labels, replacing "G" with "B" for billions.

Loading thumbnail…

Activity 6_Task1 Question1.1

This visualization displays a horizontal bar chart comparing the populations of ten countries in the year 2000, with each bar labeled by country name on the y-axis and population values formatted in billions along the x-axis. The chart uses a green fill for the bars and includes axis labels for "COUNTRY NAME" and "POPULATION-2000". Built with React and D3 v5, the code leverages `scaleBand` and `scaleLinear` for scaling, custom SVG components for axes and marks, and loads data from a CSV file via D3's `csv` function.

Loading thumbnail…

activity 6_Task 1

This example displays a horizontal bar chart of the 2020 populations for 30 countries, using a green fill for each bar. The chart is rendered as an SVG via React, with D3 v5 handling the data loading through `csv` and the linear and band scales for the axes. Axis ticks are generated manually with custom components, and D3's `format` function converts large numbers into abbreviated labels like "B" for billions.

Loading thumbnail…

Question3

This example displays an intricate, hand-drawn Buddha silhouette composed of numerous overlapping SVG circles, set against a background image of flowers. The visualization is built with React and renders to SVG, using the `ReactDOM` API to generate the elements. The code creates a grid of semi-transparent, randomly colored circles and overlays a complex path defining the Buddha figure, with randomized positions and colors for each point.

Loading thumbnail…

Intoroduction to D3.js

This example uses React and SVG to render a dense, abstract visualization of overlapping polygons. The code generates a grid of rotated diamond shapes using nested `Array.map` calls over an array of numbers, assigning random coordinates and fill colors via `Math.random()` and `rgb()` values. A large, complex path of the Buddha is also included in black with a semibold frame, creating a contrast against the colorful geometric background. The visualization uses React components and applies inline SVG transformations with `rotate` and `scale` to compose the layered design.

Loading thumbnail…

Intoroduction to D3.js

This example demonstrates a layered Buddha visualization rendered as a dense cluster of overlapping colored circles atop a large SVG path. The composition merges generative randomness with a fixed geometric form, using React to declare hundreds of semi-transparent circles with randomized positions and RGB fill values, while a single detailed path traces the Buddha’s outline with a heavy stroke. The code relies on React’s JSX for SVG rendering, native array mapping for repetition, and the `Math.random()` API for variation, creating an abstract, colorful interpretation of the sacred figure against a black background.