Hema Tummapala

ACtivity_7_DV_q2

This example visualizes the monthly evolution of mobile device screen time using an area chart, highlighting usage hours from January through June, then dynamically loads a remote CSV dataset to populate the chart with a blue filled line. The visualization is built with Chart.js, leveraging its line chart type with the fill property, and fetches data from a GitHub-hosted CSV file before parsing it in JavaScript. The canvas-rendered chart displays months on the x-axis and hours on the y-axis, with custom styling for the line, points, and legend.

Nov 5, 2024

Activity6_Task2_q2_3

This stacked bar chart displays the proportion of sales for five product categories across five rating ranges, from "less than 5" to "greater than 8.5". The visualization uses `d3.stack` to create stacked bars, with `d3.scaleBand` for the categorical y-axis and `d3.scaleLinear` for the numeric x-axis. Interactive tooltips appear on mouseover, showing the specific rating range and sales proportion. The chart reads data from a local CSV file and renders with SVG elements, animated transitions, and a legend using `d3.scaleOrdinal` for color assignment.

Oct 25, 2024

Activity6_Task4_Q4_9

This bubble chart visualizes the relationship between daily coding hours, coffee consumption, and age range for a group of respondents from Lebanon. Each circle represents a person, positioned by their reported hours and coffee cups per day, with size scaled to coffee intake and color indicating age group. The visualization uses D3.js loaded via CDN, employing `d3.select`, `d3.scaleLinear`, `d3.scaleOrdinal`, and `d3.csvParse` to process inline data. Hovering reveals a tooltip with detailed information, rendered as an SVG with animated chart elements.

Activity 7 Scatter Plot_Q3_6

This scatter plot analyzes student performance by visualizing the relationship between total discussion posts and the average of five classroom skill scores. Each point represents a student, with the fill color indicating whether their work was approved. The visualization, rendered as SVG using D3.js version 7.8.5, employs linear scales for both axes. The code parses raw classroom data strings containing comma-separated values, averaging them to compute skill metrics, and includes interactive hover effects that highlight individual data points.

Activity6_Task2

This visualization shows the proportion of IMDb movie ratings across six genres, with each genre displayed as a horizontal stacked bar chart. The bars are segmented by five rating categories, from "below 5.0" to "above 8.5", allowing comparison of rating distributions between genres. The chart uses D3.js v7 to load CSV data, stack the percentage values via `d3.stack()`, and render the visualization as SVG. Hovering over a segment triggers a tooltip showing the exact percentage for that rating category. The code employs `d3.scaleLinear`, `d3.scaleBand`, and `d3.axisBottom` for scales and axes, with colors assigned via a categorical scale.

Fork of Activity6_Task2_q2_3

This stacked bar chart displays finance data over time, breaking down totals into Revenue, Expenses, and Profit segments. Each date shows three colored bars stacked vertically, with a red, blue, and green palette. The code uses d3.csv to load data from a GitHub-hosted Finance_data.csv file. It employs d3.stack() to structure the data, d3.scaleBand for the x-axis, d3.scaleLinear for the y-axis, and d3.axisBottom and d3.axisLeft to render the axes.

Activity6_Task4

This interactive bubble chart visualizes the relationship between average horsepower, torque, and highway MPG across 31 car makes. Each circle’s position encodes horsepower and torque on the x- and y-axes, while its radius represents highway MPG and its color distinguishes automotive brands. Built with D3 v7 and SVG, the chart includes hover tooltips that display the make name, plus legends for both bubble size and color categories. The visualization loads data from a CSV file and uses d3.scaleLinear, d3.scaleOrdinal, and d3.interpolateTurbo for encoding.

Activity6_T3.2

A scatter plot visualizes the Iris dataset, with sepal length on the x-axis and petal length on the y-axis. The chart uses D3 v7 scales and axes to map the quantitative variables, while a shape legend distinguishes the three iris species using symbols. The visualization employs a modular architecture with local ES6 modules, including a reusable scatterPlot component and a custom shapeLegend, and loads data asynchronously from a CSV file via a fetch request.

Activity6_Task3

This example visualizes the Iris dataset as a scatter plot, mapping petal length and width to the x- and y-axes while coloring each point by species (setosa, versicolor, or virginica). The code uses d3.csv to load the data, d3.scaleLinear with d3.extent for scales, and d3.axisLeft and d3.axisBottom to render the axes. Circles are drawn with SVG attributes set via d3 joins, and each point’s fill color is assigned through a switch statement. The visualization reads data from a remote gist URL and renders entirely within an SVG canvas, with axis labels styled in green and a red title displayed above the plot.

Fork of Fork of Activity_6_TASK1_DV_Q1.2

This visualization displays the population of 20 countries in 2010 using horizontal bars, with countries listed along the vertical axis and population values on the horizontal axis. The chart renders as an SVG using React components, with D3 scaleBand and scaleLinear functions managing the layout. Data loads from a CSV file via d3.csv, and the x-axis uses d3’s format function to abbreviate large numbers (e.g., converting billions to “B”). Bar marks include tooltips showing the precise formatted population value, while axis ticks and labels are generated using custom React components.

Fork of Fork of Activity_6_TASK1_DV_Q1.2

This example shows a horizontal bar chart of population figures for ten countries in the year 2000, with each bar’s length proportional to its population value. The visualization uses React to render SVG elements, with D3’s `scaleBand` and `scaleLinear` for positioning and scaling, and D3’s `csv` loader to fetch data from a GitHub-hosted CSV file. Bar rectangles are generated via a custom `Marks` component, while `AxisBottom` and `AxisLeft` use D3’s tick generation to draw axes. Population values are formatted with D3’s `format` function, converting numbers to abbreviated strings like “B” for billions.

Fork of Fork of Activity_6_TASK1_DV_Q1.2

This example shows a horizontal bar chart of population figures for ten countries in the year 2000, with each bar’s length proportional to its population value. The visualization uses React to render SVG elements, with D3’s `scaleBand` and `scaleLinear` for positioning and scaling, and D3’s `csv` loader to fetch data from a GitHub-hosted CSV file. Bar rectangles are generated via a custom `Marks` component, while `AxisBottom` and `AxisLeft` use D3’s tick generation to draw axes. Population values are formatted with D3’s `format` function, converting numbers to abbreviated strings like “B” for billions.

Fork of Fork of Activity_6_TASK1_DV_Q1.2

This example shows a horizontal bar chart of population figures for ten countries in the year 2000, with each bar’s length proportional to its population value. The visualization uses React to render SVG elements, with D3’s `scaleBand` and `scaleLinear` for positioning and scaling, and D3’s `csv` loader to fetch data from a GitHub-hosted CSV file. Bar rectangles are generated via a custom `Marks` component, while `AxisBottom` and `AxisLeft` use D3’s tick generation to draw axes. Population values are formatted with D3’s `format` function, converting numbers to abbreviated strings like “B” for billions.

Fork of Fork of Activity_6_TASK1_DV_Q1.2

This example shows a horizontal bar chart of population figures for ten countries in the year 2000, with each bar’s length proportional to its population value. The visualization uses React to render SVG elements, with D3’s `scaleBand` and `scaleLinear` for positioning and scaling, and D3’s `csv` loader to fetch data from a GitHub-hosted CSV file. Bar rectangles are generated via a custom `Marks` component, while `AxisBottom` and `AxisLeft` use D3’s tick generation to draw axes. Population values are formatted with D3’s `format` function, converting numbers to abbreviated strings like “B” for billions.

Fork of Activity_6_TASK1_DV_Q1

This example shows a horizontal bar chart comparing the populations of ten countries in the year 2000, with country names on the y-axis and population values on the x-axis. The chart uses React with D3 v5 APIs, specifically `scaleBand` for the categorical y-axis, `scaleLinear` for the numeric x-axis, and SVG `<rect>` elements for bars. Data is loaded via `d3.csv` from a GitHub-hosted CSV file, with population values converted from thousands and formatted using `d3.format` to display values in billions.

Activity_6_TASK1_DV

A horizontal bar chart displays the populations of 30 countries for the year 2020, sorted by country name along the y-axis. The chart uses React with D3 v5 to render SVG elements, employing `scaleBand` for the categorical y-axis and `scaleLinear` for the quantitative x-axis. Population values are loaded from a remote CSV, formatted with D3's `format` function to abbreviate large numbers (e.g., billions as "B"), and bars are colored light green. The visualization includes labeled axes and a native SVG tooltip on each bar.

Activity_6_Task_1

This example displays a horizontal bar chart of population estimates for 30 countries in 2020, sourced from a CSV file. The visualization uses React to render SVG elements and D3 v5 scale functions (`scaleBand`, `scaleLinear`, `max`, `format`) to map country names and population values to positions and bar lengths. Axes are drawn by custom components that generate ticks, and hovering over a bar reveals its formatted population value via a native SVG `<title>` element. The chart is styled with a light green fill and a blue axis color scheme.

6 reflections of buddha without background

A Buddha silhouette rendered in SVG appears six times without a background, each instance colored through a nested map of randomly generated circles. The code uses React to create JSX elements, mapping arrays to produce circles with random positions, radii, and RGB fill values. The Buddha paths are drawn using SVG path data, scaled and translated via transform attributes. The visualization runs on a black background, with a minimal React setup loading React and ReactDOM from CDN.

Oct 19, 2024

6 Reflections of Budhha

Six reflections of a Buddha silhouette overlap in a vertical column, each rendered as a violet SVG path on a decorative flower background. The paths are drawn from a single hardcoded path definition reused six times, with each instance translated and scaled via SVG group transforms. The React component defines a 960×1000 canvas, and the code sets stroke and fill values, though the final stroke appears white. The visualization relies on React and ReactDOM with SVG markup, including a flower background image.

Oct 19, 2024

Buddha 5 Reflections

A dense field of small colored polygons on a black background forms an abstract, meditative visual. The code generates these shapes using nested loops over an array, with random values for position, color, and rotation. The visualization also includes a large, intricate SVG path, likely representing a Buddha figure, rendered in white. Built with React, the SVG is composed dynamically via `polygon` elements, creating a layered, reflective effect that ties the geometric forms to the central iconographic shape.

Oct 19, 2024