charishmakalyanapu@gmail.com

activity 7 question 1

This example shows a pie chart of car sales, with each slice representing a car model and its sales volume in thousands. The chart displays model labels directly on each slice and includes a color-coded legend on the right for identification. It loads a CSV file from a GitHub Gist and processes the data using D3 v6, specifically applying the `d3.pie` and `d3.arc` APIs to generate the pie geometry. The visualization renders as an SVG, using `d3.scaleOrdinal` with `d3.schemeCategory10` for slice colors.

Nov 6, 2024

Activity6_Question4

This bubble chart plots the relationship between February and March average temperatures. Each circle represents a year, with its x-position showing the February temperature and y-position showing the March temperature. The bubble’s radius scales with March temperature, while color encodes the Punxsutawney Phil prediction: red for “Full Shadow” and green for “No Shadow.” The visualization uses D3.js (v7) with SVG rendering, employing `d3.scaleLinear` for axes and radius, `d3.axisBottom` and `d3.axisLeft` for axes, and `d3.select` and `.enter()` to append circles. Data is drawn from the embedded `data.csv` subset covering years 2002–2007.

Activity6_Task4

This bubble chart visualizes the correlation between average horsepower, torque, and highway MPG for various car makes. Each circle’s x-position maps to horsepower, its y-position to torque, and its size to highway MPG, while color encodes the make. Built with D3 v7, the chart uses `d3.scaleLinear` for axes and bubble radius, `d3.scaleOrdinal` with `interpolateTurbo` for color, and SVG circles with mouseover tooltips for details. A legend encodes both the MPG size scale and the categorical color mapping.

Fork of Activity6_question 3

This scatter plot visualizes the February average temperature in Pennsylvania from 2002 to 2007, with points colored by whether Punxsutawney Phil saw his shadow. The chart uses D3.js v7 to build an SVG with linear scales for year and temperature, and includes axes, labels, and a simple legend indicating the two shadow conditions. Data is hardcoded from a CSV containing annual temperature readings and Phil’s shadow status.

Activity6_question 3

This scatter plot shows February average temperatures in the United States from 2002 to 2007, with blue circles representing years when Punxsutawney Phil saw his full shadow and orange circles for years with no shadow. The visualization uses d3.scaleLinear for both axes, d3.axisBottom and d3.axisLeft to render ticks, and d3.selectAll to append SVG circles. Data is embedded directly from a CSV file containing temperature readings from the Northeast, Midwest, and Pennsylvania regions. A simple legend distinguishes the two Phil outcome categories.

Activity6_Task3.2

This scatter plot visualizes the Iris dataset, mapping sepal length on the x-axis and petal length on the y-axis, with species distinguished by different symbol shapes. Built with D3 v7, it uses d3.scaleLinear for axes, d3.scaleOrdinal with d3.symbolsFill for shape encoding, and d3.symbol to render marks. A custom shape legend displays species labels, while d3.axisBottom and d3.axisLeft generate the axes. Data is loaded asynchronously from a CSV file and parsed with d3.csvParse.

Activity 6_question1

This example displays a horizontal bar chart of the top 10 countries by population in 2000, using red bars on a white background. The visualization is rendered as an SVG within a React application, using D3’s `scaleBand` for the categorical y-axis and `scaleLinear` for the numeric x-axis, with tick labels formatted via `format('.2s')`. Data is loaded asynchronously from a remote CSV file using D3’s `csv` function, and the chart includes axis labels and a title.

Activity 6_Question2

This bar chart displays the population of the top 20 countries in 2010, ordered along the y-axis with horizontal red bars extending along the x-axis. The visualization loads CSV data from a GitHub repository, slices the first 20 entries, and renders them using React with SVG. It employs D3 v5’s `scaleBand` and `scaleLinear` for axes, and custom components (`AxisBottom`, `AxisLeft`, `Marks`) to generate ticks, labels, and rectangles. A hover tooltip shows the formatted population value via a `<title>` element.

Activity6_Task3.1

This example renders a scatter plot of the classic Iris dataset, showing petal length on the x-axis and petal width on the y-axis, with each of the three species (setosa, versicolor, virginica) colored skyblue, lightgreen, or orange. It loads CSV data via `d3.csv`, parses numeric fields, and uses `scaleLinear` with `extent` to map values to SVG coordinates. Circles are bound with `selectAll` and `join`, while `axisLeft` and `axisBottom` generate labeled axes. The code accesses D3’s `csv`, `select`, `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` APIs from d3.v6, and styling is applied through SVG attributes.

Activity6_question3

This stacked bar chart shows how average February and March temperatures vary across multiple regions for each year from 2002 to 2006. Each bar is segmented by temperature category, with a legend identifying the eight region-month combinations. The visualization uses d3.csv to load the data, d3.stack to create the stacked series, and d3.scaleBand, d3.scaleLinear, and d3.scaleOrdinal for positioning and coloring. SVG rectangles render the stacked segments, with axes and legend generated via d3.axisBottom and d3.axisLeft. The code applies the d3.schemeCategory10 color palette to distinguish the temperature categories.

6 buddhas

Six buddha-like figures are drawn as SVG paths within a 1000 by 1000 canvas, each rendered in a distinct color and arranged in a grid. The visualization is built with React and uses SVG's `<path>` element to define the complex buddha outlines, which are scaled and transformed into position. A background image of flowers is applied via CSS. The code also generates numerous small, semi-transparent rectangles at random coordinates, layering them over the scene.

Oct 19, 2024

5 Buddhas

Five Buddhas displays an ornate, symmetrical silhouette of a seated Buddha rendered in gold against a black background. The artwork layers five overlapping Buddha shapes, each drawn with animated, multi-hued polygons that flicker with semi-transparent RGB colors. The visualization uses React to generate a complex SVG scene; nested `map` functions create a grid of diamond-like polygons with random coordinates, while a separate `path` element traces the Buddha figure’s detailed outline using a long series of cubic Bézier commands. The composition is scaled and translated to showcase the figure’s intricate, pulsing geometry.

Oct 14, 2024

5 Buddhas

A dense field of small, semi-transparent circles overlaps a hand-drawn Buddha path, creating a layered, psychedelic visual. The circles are placed randomly using nested `Array.map` calls and `Math.random()` for coordinates and RGB colors. The Buddha itself is rendered as an SVG `<path>` element within a `<g>` transform. The visualization is built with React, using inline SVG for the drawing, and runs in a black-background page.

Oct 14, 2024