jasthilavanya2022@gmail.com

Fork of Hello VizHub

This example presents an animated scatter plot of the Iris dataset, cycling through different x-axis variables to visualize petal and sepal measurements across three species. The visualization uses D3's `scaleLinear` for axes and a custom `scatterPlot` module to manage the chart's geometry. It incorporates a color-coded legend for species, axis labels, and a title, with data loaded via `d3.csv` from a remote URL and rendered as SVG circles. The animation shifts the x-axis among four measurement columns at regular intervals.

Fork of Bubble chart

This bubble chart visualizes the correlation between average horsepower, torque, and highway MPG across 31 car makes. Each circle’s position encodes horsepower (x-axis) and torque (y-axis), while its radius represents highway MPG and its color distinguishes the manufacturer. The code uses `d3.csv` to load data, `d3.scaleLinear` for axes and bubble size, and `d3.scaleOrdinal` with interpolated turbo colors for categorical mapping. Interactive tooltips appear on `mouseover`, and a legend explains both bubble size and color groups. The SVG render includes animated transitions on hover via CSS opacity changes.

Fork of Fork of Scatter Plot with Shape

This example uses the Iris flower dataset to display a scatter plot of sepal length against petal length, with each of the three species differentiated by a distinct symbol shape. The visualization separates the axes and legend into reusable modules, employing D3’s `scaleOrdinal`, `symbolsFill`, and `symbolGenerator` to render the shapes. A custom legend component maps each species to its corresponding glyph, while the chart updates asynchronously after fetching and parsing the CSV data with `csvParse`. The code relies on D3 v7 APIs including `axisLeft`, `axisBottom`, and `scaleLinear`.

Fork of Activity 7 Scatter Plot

This visualization displays the classic Iris dataset as a scatter plot, mapping petal length and width along the axes while also encoding sepal measurements through the horizontal and vertical radii of each circular marker. The three Iris species—setosa, versicolor, and virginica—are distinguished by fill color. Built with D3 v6, it uses `d3.csv` for data loading, `d3.scaleLinear` for axis scaling, and `d3.axisBottom` and `d3.axisLeft` for chart furniture, rendering in SVG with the `join` operator for circle generation.

Fork of IMDb Movie ratings

Activity 6 Tutorial 2

Fork of Activity 7

A fork of the D3 Activity 7 example displays 2020 population estimates for 30 countries as horizontal bar charts, with a blue axis and green marks. The React app loads CSV data via `d3.csv`, uses `d3.scaleBand` and `d3.scaleLinear` to position bars, and renders SVG elements. Axes, labels, and tick formatting rely on `d3.format`; tooltips are provided by SVG `<title>` elements, and the project includes a D3 v6 tutorial video link.

Activity 6

This visualization displays the population of 30 countries in 2020 using horizontal bar charts rendered as SVG rectangles. The bars are sorted by country name along the y-axis, with x-axis lengths scaled proportionally to population values, formatted in billions. Built with React and D3 v5, the implementation uses `scaleBand` for the categorical y-axis, `scaleLinear` for the quantitative x-axis, and `csv` to load data from a GitHub-hosted dataset. Tooltips show formatted population values via SVG `<title>` elements.

Fork of Fork of Hello VizHub

5 Buddhas

Five overlapping buddha head silhouettes are drawn as long SVG polygon paths, one in each corner and center of a black canvas. The shapes are rendered with React, mapped from a fixed array of numbers, while random triangles are scattered across the background with varied fill colors and rotations. The buddha paths use the `M` and `C` commands to define their curved outlines, producing a stylized, symmetric composition.