tarun.chintada46@gmail.com

Activity-7.1 Q2

This example shows an area chart of monthly day counts for the first half of the year, using a sample dataset with month names and number of days. The D3.js v7 code creates an SVG visualization with a steelblue filled area, scales using `d3.scaleBand` and `d3.scaleLinear`, and generates the path with the `d3.area` generator. Axes are added via `d3.axisBottom` and `d3.axisLeft`, with labels for both dimensions. The chart is built entirely with SVG elements appended to a container div.

Activity-7.1 Q1

This visualization shows housing costs across different urban areas as a pie chart. The code loads data from a CSV file and uses d3.pie and d3.arc to generate the sectors, with d3.scaleOrdinal assigning distinct colors to each location. The SVG rendering includes a legend displaying the urban area names alongside their corresponding color swatches. The dataset is fetched asynchronously from a GitHub gist, and the chart updates dynamically once the data is loaded.

Activity 7.1 T

An animated scatter plot of the Iris dataset cycles the x-axis through petal width, sepal width, petal length, and sepal length while the y-axis remains sepal length. Circles are colored by species (setosa, versicolor, virginica) with a custom legend. The visualization uses D3 v6 APIs such as `scaleLinear`, `axisLeft`, `axisBottom`, and `selectAll().data().join()` within a reusable `scatterPlot` function. A `setInterval` updates the x-value accessor, triggering a re-render with new SVG text, title, and axis labels. Data is loaded via `d3.csv` from a GitHub gist.

Activity 7.1 Tutorial

This interactive scatterplot visualizes the Iris flower dataset, showing the relationships between petal and sepal measurements. It cycles through four variable combinations on the x-axis every few seconds, using color-coded circles for species. Built with D3.js (v6.7.0), it leverages modules like `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to create the plot. The animation sequences through different dimension pairs, with a legend, axis labels, and a title rendered as SVG. Data is loaded from a remote CSV file hosted on GitHub.

Activity_6_Q4.9

This bubble chart visualizes the Iris dataset, using sepal length and width as Cartesian coordinates and petal length to scale the radius of each semi-transparent, steel-blue circle. The D3.js v7 code loads the CSV data, applies linear scales for the axes and a square-root scale for the radii, and renders the chart as SVG with axis labels. The plot shows the distribution of iris measurements, with larger bubbles indicating longer petals.

Activity6_Task4

This interactive bubble chart visualizes the correlation between average horsepower, torque, and highway MPG across 31 car makes. Each circle’s x-position maps to horsepower, y-position to torque, and radius to highway MPG, while color distinguishes manufacturers. Built with D3 v7, the SVG rendering includes hover tooltips showing the make, a bubble-size legend for MPG values, and a color legend for all makes. Data is loaded from a CSV file, with scales created using d3.scaleLinear and d3.scaleOrdinal, and interactivity handled via mouseover, mousemove, and mouseleave events.

Activity_6_Q3.6

Activity_6_Q3.2

This example demonstrates a scatter plot of the Iris dataset, mapping sepal length to the x-axis and petal length to the y-axis, with species represented by distinct symbol shapes. It uses D3 v7, importing APIs like `scaleLinear`, `scaleOrdinal`, `schemeCategory10`, and `symbol` via ES6 modules. Data is fetched from a GitHub-hosted CSV and parsed with `csvParse`. The plot includes labeled axes and a custom shape legend, rendered using a combination of joined SVG elements and D3’s data-join pattern.

Activity_6_Q3.1

Activity-6_Question-2.3

This stacked bar chart displays regional sales data for three products across four regions, using a categorical color scale to distinguish each product category. Built with D3 v7, the visualization imports data from a local CSV file and applies d3.stack() to layer the series, with d3.scaleBand() for the x-axis and d3.scaleLinear() for the y-axis. Axes are rendered using d3.axisBottom() and d3.axisLeft(), while a custom legend reflects the stacked order. The SVG output includes hover styling defined in the accompanying CSS.

Activity6_Task2

This example visualizes the distribution of IMDb movie ratings across six genres using a stacked horizontal bar chart. The chart displays the proportion of films in each rating category, from below 5.0 to above 8.5, with genres ordered along the y-axis and percentage values on the x-axis. The code loads data from a CSV file, processes it with d3.stack, and renders the SVG using d3.scaleBand, d3.scaleLinear, and d3.scaleOrdinal. Interactive tooltips appear on mouseover to show exact percentages, implemented with D3 event handlers.

activity 6_Task 1

Activity_6_Question-1.2

A horizontal bar chart displays the 2010 populations of 20 countries, sourced from a CSV hosted in a GitHub repository. The chart uses React with D3 v5 modules, including `scaleBand` and `scaleLinear`, to map categorical country names and quantitative population values to SVG rectangles. Axis components are built from custom React modules, and D3’s `format` with the `.2s` notation (replacing 'G' with 'B') formats the x-axis tick labels as billions. Tooltips show the exact formatted population value via SVG `<title>` elements.

Activity_6_Question-1.1

6 Buddhas

Six Buddhas render as overlapping gold-toned figures against a dark, flower-patterned background. The composition layers identical Buddha silhouettes in a grid-like arrangement, with semi-transparent circles scattered across the canvas adding subtle texture. Built with React and SVG, the visualization uses nested array maps to generate random circle positions and colors. The Buddha paths come from embedded SVG path data, scaled and translated into position using React transform attributes.

Fork of Fork of Fork of Fork of Fork of Buddha in colors -overlapping Buddha

5 Buddhas