BamanGayathri

SDV Activity 7

This example shows the top 10 countries by population in 2020 using a pie chart rendered as SVG. It loads data from a GitHub gist CSV file and calculates the total population to proportionally size each slice. The visualization uses D3 v5 APIs including `d3.pie`, `d3.arc`, `d3.scaleOrdinal`, and `d3.format` to compute arcs, assign section colors, and format labels. A legend with colored rectangles and country names accompanies the chart.

Nov 5, 2024

Activity Task 2

This visualization presents a stacked horizontal bar chart comparing the distribution of movie ratings by genre, using data from an IMDb dataset. Each bar segment represents a specific rating category, with the length of each segment corresponding to the proportion of ratings within that genre. The chart is rendered as an SVG using D3 v7, employing `d3.stack()` to create the stacked segments, `d3.scaleOrdinal()` for color assignment, and `d3.axisLeft`/`d3.axisBottom` for axes. Interactive tooltips appear on hover, displaying the exact percentage for each rating category.

Activity 6 Task 4

This bubble chart displays the Iris dataset, plotting sepal length on the x-axis, sepal width on the y-axis, and encoding petal length through bubble size, with species distinguished by color. The visualization uses D3.js v7, including `d3.scaleLinear` for axes and radius, `d3.scaleOrdinal` with `d3.schemeCategory10` for colors, and SVG circles. Interactive tooltips appear on mouseover, while a legend shows petal length values and species categories.

Activity 6 tutorial 4

This bubble chart shows the correlation between average horsepower, torque, and highway MPG across various car makes, using bubble size to encode MPG and color to distinguish makes. Built with D3 v7, the visualization uses `scaleLinear` for the x/y axes and bubble radius, `scaleOrdinal` for color mapping, and `interpolateTurbo` to generate a color palette. It reads from a local CSV file, renders as SVG, and includes interactive tooltips on mouseover, plus a legend showing the MPG-to-radius scale.

Activity 6 Task 3

This scatter plot visualizes the relationship between horsepower and torque for vehicles, with each point colored by manufacturer using a categorical scale. The visualization uses D3 v6 to load CSV data from a GitHub repository, parse numeric fields, and render SVG circles scaled by linear axes. Axis labels and tick formatting are applied through D3’s axisLeft and axisBottom components, while the color scale uses scaleOrdinal with schemeCategory10. The chart fills the browser window, with circles set to a fixed radius and partial opacity to show overlapping points.

Activity 6 tutorial 3.1

This example shows a scatter plot of the Iris dataset, mapping petal length and petal width on the x- and y-axes while coloring each point by species (setosa, versicolor, or virginica). It loads the data from a remote CSV using d3.csv, scales the coordinates with d3.scaleLinear, and renders circles as SVG elements. The plot includes labeled axes generated by d3.axisLeft and d3.axisBottom, with gradient-colored data points and fixed radius.

Activity 6 tutorial 3.2

This scatter plot visualizes Iris flower measurements, plotting sepal length against petal length, with points colored and shaped according to species. The visualization loads its data from a CSV file fetched from GitHub and renders using D3 v7’s `scaleLinear`, `scaleOrdinal`, `symbolsFill`, and `symbol` APIs. Interactive axes and a shape legend are generated via custom `axisLeft`, `axisBottom`, and legend functions, while the chart updates dynamically as data is parsed and state changes are processed through `csvParse` and `setState`.

Activity 6 Tutorial 2

This stacked bar chart visualizes the distribution of IMDb movie ratings across six genres, showing the proportion of films falling into five rating brackets. Each horizontal bar is divided into colored segments, with hovering revealing exact percentages via a custom tooltip. The visualization uses D3.js version 7, employing `d3.stack` for data transformation, `d3.axisBottom` and `d3.axisLeft` for axes, and `d3.scaleOrdinal` for color mapping. Data comes from a CSV file, rendered as SVG with mouseover events for interactivity.

Activity 6 Task 1.2

This visualization presents a horizontal bar chart of population data for 20 countries, sourced from a CSV file for the year 2010. The bars are rendered as green SVG rectangles, with a blue axis line and the y-axis labels placed to the left. Built with React and D3 v5, the code uses `scaleBand` for the categorical axis and `scaleLinear` for the numeric scale, with a custom tick formatter that abbreviates large numbers.

Activity 6 Task 1.1

This bar chart displays the population of ten countries in the year 2000, with countries listed on the vertical axis and population on the horizontal axis. The visualization uses React with D3 v5 APIs including `scaleBand` for the categorical y-axis, `scaleLinear` for the quantitative x-axis, and `csv` for fetching data from a GitHub repository. SVG rectangles render the marks, with axis ticks and labels styled through CSS. The chart sorts and slices the loaded dataset to show the top ten most populous countries.

Activity 6 Tutorial 1

This example presents a horizontal bar chart showing the 2020 population for 30 countries. The visualization uses D3 v5 for data loading and scaling, with React components for rendering each SVG element. D3’s `scaleBand` and `scaleLinear` map country names and population values to pixel positions, while custom `AxisBottom`, `AxisLeft`, and `Marks` components generate the tick marks and bar rectangles. The data is fetched from a CSV file using D3’s `csv` function, and tooltips display formatted population values.

overlapping for 6

Six overlapping Buddha silhouettes obscure a repeating floral pattern, constructed entirely through nested React map loops that generate hundreds of semi-transparent SVG polygons. Each polygon’s vertex coordinates are computed with `Math.random()`, producing scattered, chaotic geometric fragments that layer atop one another. The rendering relies on React’s declarative JSX syntax to define inline SVG elements, with a pattern definition referencing an external flower image. The visualization demonstrates how random coordinate generation combined with opacity can create visual density, though the Buddha path itself remains static and clearly defined.

Oct 15, 2024