eedaraajay02@gmail.com

Question 1

This pie chart displays vehicle registration counts by type, using color-coded sections with value labels and a legend that pairs each category with its numeric count. The chart is rendered as an SVG using D3 v5, loading data from a CSV file via the `d3.csv` function. The visualization employs D3's `pie`, `arc`, and `scaleOrdinal` APIs to generate the sectors and colors, while the legend and labels are built using D3's `select` and `append` methods. The styling is defined in a separate CSS file, and the code demonstrates the use of ES6 modules for data fetching and rendering.

Apr 29, 2024

Task-9

This animated scatterplot cycles through the four Iris flower measurements (petal width, sepal width, petal length, sepal length) on the x-axis, colored by species. Built with D3.js (v6.7.0), it uses a reusable `scatterPlot` module with `scaleLinear`, `axisLeft`, and `axisBottom` to render axes. Data loads via `d3.csv` from a GitHub gist. A `setInterval` updates the x-value mapping, while static SVG circles, legend points, and rotated axis labels remain visible.

Apr 28, 2024

question 4

This example visualizes the correlation between iris flower measurements using a bubble chart, plotting sepal length against sepal width while encoding petal length through bubble size and species through color. It loads data from a CSV file and renders with D3 v7, using `d3.scaleLinear` for axes and bubble radius, `d3.scaleOrdinal` with custom colors for species, and `d3.axisBottom`/`d3.axisLeft` for scales. Interactive tooltips appear on mouseover via D3 event handlers, displaying species and petal length, alongside a legend for species identification.

question3

This scatter plot visualizes car data, showing the relationship between horsepower on the x-axis and highway miles per gallon on the y-axis, with each point colored by car make. The visualization uses D3 v6, loading data via `d3.csv` from a GitHub repository. It employs `scaleLinear`, `scaleOrdinal`, and `schemeTableau10` for scales and colors, rendering circles as SVG elements. The chart includes custom axis labels and a legend, with axes created using `axisLeft` and `axisBottom`.

Question_2

A population treemap displays yearly population values for several countries as horizontal bars on a band scale. Hovering highlights a bar and reveals a tooltip with the specific year and population figure. The visualization uses D3 v7 APIs including `d3.scaleBand`, `d3.scaleLinear`, `d3.axisLeft`, and `d3.schemeSet3` for color encoding. Population data is loaded from a CSV file and rendered as SVG rectangles, with axes formatted using `d3.format`.

question_2

This example visualizes the classic Iris flower dataset, plotting petal and sepal lengths for each species along a horizontal axis. It uses D3.js v7 with a band scale for the categorical species on the y-axis and a linear scale for length. Circles are rendered in SVG, with petal lengths in steel blue and sepal lengths in green. Hovering changes a circle's fill color. The code loads data via `d3.csv` and uses `d3.scaleLinear`, `d3.scaleBand`, `d3.axisBottom`, and `d3.axisLeft` to construct the chart.

Question 2

This stacked bar chart visualizes religious demographics across the top 20 most populous countries, with population values in millions. The visualization uses D3.js version 7.8.5, employing `scaleOrdinal` and `schemeCategory10` for color encoding, `flatRollup` and `stack` for data aggregation, and `scaleLinear`/`scaleBand` for axes. A color legend provides interactive filtering—hovering a religion name highlights the corresponding segments while fading others. The data comes from the CSV file `religionByCountryTop20.csv`, with responsive layout handled by `observeResize` from `@curran/responsive-axes`.

Question 1.1

A horizontal bar chart displays the 2010 populations of twenty countries, loaded from a remote CSV with D3's `csv` function. React renders SVG rects for data marks, with a linear scale mapping population to bar width and a band scale mapping country names to vertical positions. D3's `format` function abbreviates tick labels, replacing 'G' with 'B' for billions in the bottom axis. Mouseover tooltips, created with SVG `<title>` elements, show the formatted population values.

Question1

This example shows a horizontal bar chart comparing the populations of the top 10 countries in the year 2000, with numeric labels formatted using shorthand notation (e.g., "1.2B"). It is built with React and D3 v5, using `scaleBand` and `scaleLinear` to map country names and population values to SVG rectangles. Data is loaded asynchronously from a CSV file via D3’s `csv` function, filtered to the first ten rows, and rendered with custom `AxisBottom`, `AxisLeft`, and `Marks` components. The chart also includes interactive tooltips using SVG `<title>` elements.

Tutorial 4

This tutorial demonstrates a bubble chart that visualizes the correlation between average horsepower, torque, and highway MPG across different car manufacturers. Each bubble’s position encodes horsepower and torque on the x- and y-axes, while its size reflects highway MPG and its color represents the car make. The visualization includes interactive tooltips on mouseover, a legend for bubble size, and color-coded categories. Built with D3 v7, it uses `d3.csv` to load data, `d3.scaleLinear` for axes and sizing, `d3.scaleOrdinal` for colors, and SVG rendering with animated tooltip transitions.

Tutorial 3.1

This interactive scatter plot displays sepal length against petal length for the Iris dataset, with species differentiated by symbol shape and a corresponding legend. It loads data from a remote CSV and uses D3 v7 methods including `scaleLinear`, `scaleOrdinal`, `symbol`, and `axisLeft`/`axisBottom`. The visualization is built with ES6 modules, including custom axis and legend components, and dynamically fetches and parses the dataset using `csvParse` before rendering.

tutorial 3

This scatter plot visualizes the Iris dataset, showing petal length against petal width with points colored by species (setosa, versicolor, and virginica) as skyblue, lightgreen, and orange. Circle markers also encode sepal dimensions through their `rx` and `ry` attributes, though they remain visually circular due to a fixed radius. The visualization loads data via `d3.csv` from a GitHub raw URL, uses linear scales (`scaleLinear`) with `extent` for domains, and renders axes with `axisLeft` and `axisBottom`. D3 v6 from UNPKG handles the SVG rendering and data joins.

tutorial 2

This example visualizes the distribution of IMDb movie ratings across six genres using a stacked horizontal bar chart. Each bar segment represents the percentage of movies falling into one of five rating bands, from below 5.0 to above 8.5. The chart is built with D3 v7, using `d3.stack` to compute the cumulative values and `d3.scaleOrdinal` for color coding. The SVG rendering includes axis labels and a tooltip that reveals the exact percentage for a rating band on mouseover. Data is loaded from an included CSV file.

Tutorial1

This bar chart displays the 2020 populations of 30 countries, with a horizontal layout and a square-root scale for the x-axis. The visualization utilizes React, D3 v5, and ES6 modules, loading data from a CSV in useData.js using d3.csv. SVG rendering is driven by custom components for axes and marks, which use d3.scaleBand and d3.scaleLinear to map values. A tooltip, set via the `title` element, shows the formatted population on hover.