S

Siddhartha Alwala

@tejasiddhartha·16 public vizzes

Loading thumbnail…

Tutorial_9

This interactive SVG visualization displays the Iris dataset, cycling through different measurement pairs (petal width, sepal width, petal length, sepal length) on the x-axis while keeping sepal length on the y-axis. It uses D3 6.7.0 loaded via UNPKG, employing `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` for axes and scaling. The animation updates every second via `setInterval`, recoloring points by species with a legend. A reusable `scatterPlot` module handles the chart structure, while custom markers and axis labels enhance the display.

Loading thumbnail…

Activity_9-Area_chart

This area chart displays the session rate over time, with a light blue fill and dark blue stroke. The visualization loads CSV data from a GitHub gist via d3.csv, parses dates with d3.timeParse, and scales the x-axis with d3.scaleTime and the y-axis with d3.scaleLinear. It renders axes using d3.axisBottom and d3.axisLeft, and draws the area path with d3.area. Axis labels and an underlined title are added as SVG text elements.

Loading thumbnail…

Activity_9-pie chart

This pie chart visualizes Canadian immigrant data from 2013, showing the proportion of immigrants from each continent. The chart uses D3.js v6 to create an SVG pie layout with `d3.pie()` and `d3.arc()`, coloring each slice with a hue based on its index. Hovering over a slice displays a tooltip with the continent’s percentage of the total, calculated via `d3.sum()`. A legend accompanies the chart, listing each continent and its exact immigrant value. The data loads from a remote CSV file via `d3.csv()`.

Loading thumbnail…

Activity6_Question4

This example shows a bubble chart comparing beverage manufacturers by plotting glucose levels on the x-axis and ratings on the y-axis, with bubble size encoding calorie content and color distinguishing maker categories. The visualization uses d3.csv to load tabular data and d3.scaleLinear for the x, y, and bubble radius scales, while d3.scaleOrdinal assigns distinct colors to manufacturers. SVG circles are rendered with d3.selectAll and .join('circle'), and an interactive tooltip appears on mouseover using D3’s event handling. The chart includes labeled axes, a title, and legend ranges for the scales.

Loading thumbnail…

Activity6_Question3

This scatterplot shows the relationship between calories and protein content for 77 breakfast cereals, with each point colored by manufacturer. Hovering over a circle reveals the cereal name and its exact values in a tooltip. The visualization uses d3.csv to load the data, d3.scaleLinear for both axes, and d3.scaleOrdinal with d3.schemeCategory10 for color encoding. A legend identifies the manufacturers, while axis labels and gridlines provide context for the quantitative comparison.

Loading thumbnail…

Activity6_Question2

This visualization shows how different food categories—fruit, vegetables, meat, dairy, grains, and snacks—are distributed across six rating bands, from below 4 to above 8, as stacked horizontal bars representing proportions that sum to 100%. Each segment’s width encodes the percentage of ratings in that band, with colors distinguishing rating levels and a tooltip revealing exact percentages on hover. The chart loads data from a CSV file and uses d3.stack() for stacking, d3.scaleBand() and d3.scaleLinear() for positioning, and d3.axisBottom and d3.axisLeft for axes. An ordinal color scale maps rating keys to a fixed palette, and mouse events update tooltip content dynamically.

Loading thumbnail…

Activity6_Question2

This example demonstrates how to combine D3 and SVG to render a dynamic force-directed network graph. It loads D3 via UNPKG and uses ES6 module imports to structure the code. The visualization employs `d3.forceSimulation` to calculate node positions and link paths, updating the SVG elements on each tick. The graph layout is rendered using standard SVG `<circle>` and `<line>` elements, with the simulation handling collision and centering forces to produce a simple, interactive cluster.

Loading thumbnail…

Activity6_Task4

This interactive bubble chart visualizes the correlation 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 and color represent highway MPG and car make, respectively. Built with D3 v7, the SVG visualization includes a tooltip on hover, a size legend for MPG values, and color-coded makes. Data is loaded from a local CSV file, with scales and axes created via `d3.scaleLinear`, `d3.axisBottom`, and `d3.axisLeft`.

Loading thumbnail…

Activity6_Task3.2

This visualization displays the classic Iris dataset as a scatter plot of sepal length against petal length, with each of the three iris species distinguished by a different symbol shape. The plot uses D3’s `scaleLinear`, `scaleOrdinal`, and `symbol` APIs to position points and render marks, while an axis module built with `d3.axisLeft` and `axisBottom` labels the chart. A custom shape legend maps each species to its symbol. The data is loaded asynchronously from a GitHub-hosted CSV and parsed with `d3.csvParse`.

Loading thumbnail…

Activity6_Task3

This example renders a scatter plot of the Iris dataset, visualizing petal length against petal width, with points colored by species (skyblue for setosa, lightgreen for versicolor, orange for virginica). The SVG is drawn using D3 v6, with scales from `scaleLinear` and axes from `axisLeft` and `axisBottom`. Data is loaded via `csv` from a GitHub raw URL, and circles are positioned using `x` and `y` values computed from the data. The code also sets `rx` and `ry` attributes, though the main visual encoding remains the circular marks.

Loading thumbnail…

Activity6_Task 2

A stacked bar chart shows how IMDb movie ratings are distributed across six genres, with each bar segmented into five rating bands from "below 5.0" to "above 8.5" as proportions summing to 1. The visualization highlights that documentaries skew toward higher ratings while action films concentrate in the lowest band. Built with D3 v7, the chart uses `d3.stack()` to compute the stacked segments and `d3.scaleOrdinal` for color encoding. Interactive tooltips display the precise percentage for each rating segment on mouseover. Data comes from the embedded `data.csv` file, rendered as SVG.

Loading thumbnail…

Questio_2

A bar chart displays car brands along the y-axis and highway MPG along the x-axis. Each bar’s length encodes the MPG value, while a mouseover tooltip reveals the make, horsepower, torque, and MPG for the hovered brand. The chart loads CSV data via `d3.csv`, uses `d3.scaleBand` for the categorical axis and `d3.scaleLinear` for the continuous axis, and renders with SVG. Axes are drawn with `d3.axisBottom` and `d3.axisLeft`.

Loading thumbnail…

Question_1(b)

This visualization shows the population of 20 countries in the year 2010 as a horizontal bar chart. The bars are rendered as SVG rectangles using React components, with the x-axis scaled linearly and the y-axis using a band scale for country names. The code uses D3 v5’s `scaleBand`, `scaleLinear`, `max`, and `format` for axes and tick labels, while the dataset is loaded via `d3.csv` from a GitHub URL. A simple tooltip is provided through SVG `<title>` elements showing the formatted population value.

Loading thumbnail…

Question_1(a)

This bar chart displays the population of the top ten countries in the year 2000, using horizontally-oriented rectangles. Built with React and D3 v5, it employs `scaleBand` for the categorical y-axis and `scaleLinear` for the quantitative x-axis. The SVG rendering includes custom axis components and a tooltip that formats population values using `format('.2s')`. Data is loaded asynchronously from a remote CSV file via a custom `useData` hook that uses `d3.csv`.

Loading thumbnail…

Activity 6_Task 1

This example shows a horizontal bar chart of the 2020 populations of the world’s most populous countries, ranked from largest at the top to smallest at the bottom, with populations displayed in billions. Built with React and D3.js, it uses `d3.scaleBand` for the categorical country axis and `d3.scaleLinear` for the population axis, rendering each bar as an SVG rectangle. Data is loaded asynchronously via D3’s `d3.csv` from a remote GitHub dataset, and hovering over a bar reveals its precise value using an SVG `<title>` tooltip.

Loading thumbnail…

5 Buddha

A Buddha silhouette composed of a dense triangular mesh overlays a field of small rotated square polygons. The background polygons scatter randomly across the viewport with randomized RGB fill colors and rotations, creating a colorful, chaotic texture. The Buddha path itself is rendered as a single SVG path element within a transformed group. The visualization uses React to generate the SVG structure, mapping over an array to produce the polygons, and relies on CSS for the black background and layout.