Skip to main content
Log in
A

akhilasannayila@gmail.com

@AkhilaSannayila·15 public vizzes

Loading thumbnail…

Activity 7.1_Question 5

This example visualizes the number of US students in a university from 2000–08, combining an area chart with an overlaid line chart to emphasize both the trend and cumulative magnitude of student counts over time. The visualization uses D3 v5 APIs, including `scaleLinear` for axes, `line` and `area` generators with `curveBasis` for smooth curves, and `axisBottom`/`axisLeft` for labeled axes. Data is loaded via `csv` from an external GitHub Gist, and rendering uses SVG elements with styled paths for the line and area.

Nov 7, 2024
Loading thumbnail…

Activity 7.1_Question 1

This pie chart shows mortality rates across United States, with each slice representing a state’s number of deaths and a legend listing state names and values. The chart is rendered in SVG using d3.v5, employing pie(), arc(), and scaleOrdinal() to generate segments colored from a fixed palette. Data is loaded via d3.csv from a remote GitHub gist, and arcs are drawn with d3.arc() using an inner radius of 0 and outer radius of 175. Death counts are converted to numbers and summed, though the total is not displayed.

Nov 7, 2024
Loading thumbnail…

Activity 7_Tutorial 1

This animated scatter plot visualizes the Iris flower dataset, cycling through four measurement combinations on the x-axis while mapping species to color. Built with D3.js, it uses a reusable scatterPlot function with linear scales and axes, updating every few seconds via setInterval. The code loads CSV data, parses numeric fields, and renders colored circles with a custom legend and axis labels.

Nov 3, 2024
Loading thumbnail…

Activity 6_Question 6

This scatter plot visualizes the relationship between free and total sulfur dioxide levels in wine samples, with each point colored and shaped according to wine quality rating. Using D3.js v6, the visualization maps quality scores to distinct colors via a lookup object and applies different SVG symbol types through `d3.symbol()` and the `shapeMap` dictionary. The code loads wine quality data from a remote CSV file using `d3.csv()`, processes the numeric values, and renders the chart as an SVG with `d3.scaleLinear` axes and `d3.axisBottom`/`d3.axisLeft` for the x and y scales.

Oct 22, 2024
Loading thumbnail…

Activity6_Question 9

This bubble chart visualizes the relationship between product price and sales volume, with bubble size representing product rating and color distinguishing product categories. The chart uses D3 v7 with SVG rendering, incorporating `scaleOrdinal` with `schemeCategory10` for categorical colors, `scaleLinear` for both axes, and `scaleSqrt` for bubble radius. Interactive tooltips appear on mouseover, displaying detailed product information via D3 event handlers. Product labels are placed inside each bubble, and a categorical legend maps colors to outdoor product types.

Oct 22, 2024
Loading thumbnail…

Activity6_Task4

This bubble chart visualizes the correlation between average horsepower, torque, and highway MPG for various car makes. Each circle’s position encodes horsepower and torque on the x- and y-axes, while its radius and color represent highway MPG and the car make, respectively, with a color scale from `d3.interpolateTurbo`. Built with D3 v7, the SVG rendering includes interactive tooltips that display the make on hover, plus a legend for bubble size and color. Data is loaded from a CSV file, and the chart uses `d3.axisBottom` and `d3.axisLeft` for axes.

Oct 22, 2024
Loading thumbnail…

Activity6_Task3.1

This scatter plot shows the relationship between sepal length and petal length for three iris species, using distinct symbol shapes to encode species identity. The visualization includes labeled axes and a legend that maps species names to their corresponding shapes. Built with D3 v7, the code uses `scaleLinear` for positional encodings, `scaleOrdinal` with `symbolsFill` to assign shapes, and `symbolGenerator` to render marks. Data is loaded asynchronously from a CSV file containing the classic iris dataset, parsed with `csvParse` before numeric fields are converted.

Oct 22, 2024
Loading thumbnail…

Activity6_Task3

This example displays the Iris dataset as a scatter plot, visualizing petal length against petal width for individual flowers, with species indicated by color (skyblue for setosa, lightgreen for versicolor, and orange for virginica). Additional sepal dimensions are stored in each circle’s `rx` and `ry` attributes, though the fixed radius of 5 overrides their visual effect. The visualization uses D3 v6 to load CSV data via `d3.csv`, scales through `scaleLinear` and `extent`, and renders SVG circles with axes generated by `axisLeft` and `axisBottom`. The plot fills the browser window, with labeled axes for petal length and sepal length.

Oct 22, 2024
Loading thumbnail…

Activity 6_Question 3

A stacked bar chart visualizes the distribution of IMDb ratings across six movie genres, with each bar partitioned into five rating categories from below 5.0 to above 8.5. The chart uses a CSV dataset and D3.js v7 with SVG rendering, employing scales such as `d3.scaleLinear` for the x-axis and `d3.scaleBand` for genres. A tooltip appears on mouseover, displaying the genre and percentage, while a legend identifies color-coded rating brackets. The animation is limited to tooltip transitions.

Oct 22, 2024
Loading thumbnail…

Activity6_Task2

This stacked bar chart displays the percentage distribution of IMDb rating levels across six movie genres, with each bar segment representing a rating bracket. The visualization uses D3.js v7 with SVG rendering, implementing a horizontal stacked bar layout that maps genres on the y-axis and percentage proportions on the x-axis. Interactive hover tooltips provide precise percentage values for each rating category. The chart employs different color segments for each rating range, sourced from CSV data containing genre-specific rating proportions.

Oct 22, 2024
Loading thumbnail…

Activity 6_Question 2

This example shows a horizontal bar chart of population figures for 20 countries in 2010, with each bar’s length encoded by population value and countries labeled on the y-axis. The visualization is built with React and D3 v5, using `scaleBand` and `scaleLinear` for positioning, and custom `AxisBottom` and `AxisLeft` components to render tick marks and labels. Data is loaded via `d3.csv` from a GitHub-hosted CSV file, and bars are drawn as SVG `<rect>` elements with a tooltip using the native `<title>` element.

Oct 22, 2024
Loading thumbnail…

Activity 6_Question 1

This visualization displays the population of ten countries in the year 2000 as a horizontal bar chart, with country names on the y-axis and population counts on the x-axis. It uses React and D3 v5 to render SVG elements; the `scaleBand` and `scaleLinear` functions handle the axes, while the data is fetched from a CSV file stored on GitHub. The bars are green, and hovering over a bar reveals its exact population via a tooltip, formatted with abbreviations like 'B' for billions.

Oct 22, 2024
Loading thumbnail…

Activity 6_Task 1

This example shows a horizontal bar chart comparing the 2020 populations of 30 countries, ranked by country name along the y-axis and population along the x-axis. The visualization is built with React and D3 v5, using `scaleBand` and `scaleLinear` for positioning, while axes and marks are rendered as SVG elements. Population values are loaded from a CSV file via `d3.csv`, formatted with `d3.format`, and tooltips display each bar’s value on hover.

Oct 21, 2024
Loading thumbnail…

6 Buddhas

Six Buddhas is a decorative visualization that renders a repeated Buddha silhouette as overlapping, semi-transparent SVG paths. The image layers six identical path shapes, each scaled and translated to different positions, with varying fill colors and stroke widths, creating a layered, collage-like effect. The rendering uses React to manage the SVG output, with the path data directly embedded in the code rather than sourced from an external file. A floral background image is applied via CSS, and a simple cubic function and array are also defined in the JavaScript, though their output is not visualized.

Oct 18, 2024
Loading thumbnail…

5 Buddhas

Five Buddhas is a generative SVG artwork built with React and ReactDOM, rendering a chaotic field of hundreds of random, colored, diamond-shaped polygons on a black background. Overlaid on this noise is a detailed vector path tracing the silhouette of a Buddha, drawn using a long series of cubic Bézier curve commands. The piece combines algorithmic randomness with a precise, hand-coded geometric form, creating a contrast between abstract computational generation and sacred iconography.

Oct 11, 2024