budalavijay2001@gmail.com

data visualization stacked bar chart

This example visualizes COVID-19 total cases by country, grouped into stacked horizontal bars organized by continent. The chart uses D3 v7’s `d3.csv` to load remote data, `d3.groups` to structure the data hierarchically, and `d3.scaleBand`/`d3.scaleLinear` with SVG rendering. Each country is a rectangle colored via `d3.schemeSet3`, with rotated axis labels for readability.

Apr 22, 2024

data visulalization Scatter Plot

This scatter plot visualizes COVID-19 cases by country, plotting total deaths against total cases. Each circle represents a country, with color encoding the continent, and the plot includes axes, labels, and a legend. The code loads CSV data from a GitHub repository, uses D3 v7 scales and SVG rendering to position the circles, and employs `d3.axisBottom` and `d3.axisLeft` to generate the axes.

Apr 22, 2024

data visualization bubble chart

This example visualizes COVID-19 cases, deaths, and population across countries using a bubble chart. Each bubble’s position maps total cases on the x-axis and total deaths on the y-axis, while bubble radius encodes population via a square-root scale. The chart is rendered in SVG using D3 v7, with linear scales, axis generators, and a legend showing population magnitude. Data is loaded asynchronously from a remote CSV file using `d3.csv`.

Apr 22, 2024

task 9 question 2

This example shows an area chart that visualizes the relationship between ID and Age from a remote CSV dataset. The chart maps ID values on the x-axis and Age values on the y-axis using linear scales, with a filled area representing the age distribution. The code loads data via `d3.csv`, constructs the area path using `d3.area`, and renders axes with `d3.axisBottom` and `d3.axisLeft`. The SVG output includes labeled axes for ID and Age, demonstrating a straightforward data loading and charting workflow with D3 v7.

task 9_ question 1

This example displays a pie chart that visualizes the distribution of two categorical outcomes, "play" and "noplay", from a weather dataset. The chart is rendered as an SVG using D3.js, with data loaded from a CSV file via `d3.csv()`. It uses D3's `pie()` and `arc()` functions to compute the chart geometry and a `scaleOrdinal()` for color mapping, with a legend added on the right.

task_9 question 1

This example displays a pie chart of total COVID-19 cases by country, sourced from a remote CSV file. It uses D3 v6 to load the data via `d3.csv` and generates the chart with `d3.pie` and `d3.arc`, rendering slices as SVG paths. The visualization includes color-coded slices using `d3.schemeCategory10` and a legend with rectangles and text labels. The SVG output is centered and styled with a white background and shadow.

Task_9 Question 1

This example displays a pie chart visualizing COVID-19 total cases by country, using data loaded from a remote CSV file. It maps each country to a slice with a color from `d3.schemeCategory10`, and positions a legend to the right of the chart. The code leverages D3 v6 modules, including `d3.csv`, `d3.pie`, `d3.arc`, and appends SVG elements dynamically. The chart is rendered into a centered SVG with a white background and subtle shadow, loading the data asynchronously to build the visualization.

Fork of Reusable Scatter plot Activity 8

This interactive scatter plot animates through the Iris dataset, cycling the x-axis through petal width, sepal width, petal length, and sepal length at intervals. Points are color-coded by species (setosa, versicolor, virginica) using skyblue, lightgreen, and orange. Built with d3.v6, it uses the reusable `scatterPlot()` module with `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to render SVG circles and axes. Text labels for the legend, title, and axis names are appended dynamically, while a `setInterval` updates the chart in an animation.

Apr 16, 2024

Activity6_Task4

This interactive bubble chart visualizes sales data across employees, plotting sales cost on the x-axis, profit on the y-axis, and quantity as bubble size, with color encoding employee names. The visualization includes a tooltip that appears on mouseover, revealing the employee name. Built with D3 v7, the chart uses SVG rendering and animation, loading data from a CSV file. It also includes a legend for bubble size and color categories, with the tooltip handling implemented via D3 event listeners.

Activity 6_Task4

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 and color represent MPG values and car brand, using d3.scaleLinear for sizing and d3.scaleOrdinal with d3.interpolateTurbo for coloring. The code uses D3 v7, loads data from bubblechart.csv, and includes an interactive tooltip triggered by mouseover events. A legend with circles, lines, and text explains bubble size scaling.

Activity6_Task3

This animated scatter plot displays Test Cricket player statistics, plotting runs, averages, strike rates, and innings as the x-axis cycles through these fields every three seconds. The visualization uses D3.js 6.7.0 with a custom `scatterPlot` module that employs `scaleLinear` for axes, `scaleOrdinal` with `schemeCategory10` for country-based coloring, and a symbol scale mapping batsmen, bowlers, and allrounders to distinct shapes via `symbol().type()`. Data comes from a CSV file sourced from gist.github.com, rendered as an SVG in the browser.

Activity6_Task3.2

This example displays a scatter plot of the Iris dataset, showing sepal length against petal length with points colored and shaped by species. It loads the CSV from a GitHub repository using `d3.csvParse`. The visualization uses D3 v7 scales including `scaleLinear` and `scaleOrdinal` with `symbolsFill` to differentiate species, while a custom legend built with `symbolGenerator` lists the categories. Axes are generated via `axisLeft` and `axisBottom` with explicit labels for each measurement.

Activity6_Task3.1

This example shows an interactive scatter plot of the Iris dataset, mapping sepal length to the x-axis and petal length to the y-axis, with each species represented by a distinct symbol shape. The visualization uses D3.js v7 APIs including `scaleLinear`, `scaleOrdinal`, `symbolsFill`, and `symbolGenerator` to render the marks, while a custom shape legend displays the species categories. Data is loaded asynchronously from a GitHub-hosted CSV file using `fetch` and parsed with `csvParse`, with numerical fields coerced to numbers before plotting. The chart includes labeled axes and a legend, all rendered within an SVG canvas sized to the full viewport.

Activity6_Task3.1

This example displays the classic Iris dataset as a scatter plot, mapping sepal length to the x-axis and petal length to the y-axis, with points colored by species using the Tableau 10 categorical color scheme. It demonstrates D3.js v7’s modular API, importing a reusable `scatterPlot` function from a local ES6 module and using core utilities like `d3.map`, `d3.scaleLinear`, `d3.scaleOrdinal`, and `d3.axisBottom`/`d3.axisLeft` to build the chart. The data is fetched as CSV from a GitHub gist, and the SVG is constructed with `d3.create` and rendered via a `join` operation for circles.

Activity6_Task3.2

This visualization displays a scatter plot of Iris flower measurements, plotting sepal length against petal length and encoding species using different symbol shapes. Each species appears as a distinct geometric marker with a corresponding legend positioned on the right. The code uses d3.scaleLinear for coordinate scaling, d3.scaleOrdinal with d3.symbolsFill for shape encoding, and d3.axisLeft/axisBottom for axes. Data is loaded asynchronously from a CSV file and parsed with d3.csvParse, while the scatter plot, axes, and legend are each structured as reusable D3 modules.

Fork of Activity 7 Scatter Plot

This fork of Activity 7 displays the Iris dataset in a scatter plot, comparing sepal length against petal length. Points are colored by species using a custom color mapping in the `index.html` data preparation. The visualization is built with the Observable-style `d3` API, using `d3.scaleLinear` for axes and `d3.scaleOrdinal` for categorical colors. Data is loaded via `d3.csv` from a remote Gist, and the plot is rendered into an SVG container styled with CSS.

Fork of IMDb Movie ratings

This stacked bar chart shows the distribution of IMDb movie ratings across six genres, with each bar segmented into five rating categories. The visualization reveals how genres like Documentary skew toward higher ratings, while Action films cluster at lower scores. Built with D3 v7, the chart uses d3.stack() to compute stacked segments, d3.scaleLinear() for percentages, and d3.scaleBand() for genre categories. Hovering over any segment displays a tooltip showing the exact percentage for that rating level within the genre, using d3.csv() to load the pre-aggregated dataset.

Fork of Activity 7

This horizontal bar chart displays the 2020 population of 30 countries, sorted in descending order with a green bar for each nation. The visualization loads CSV data from a GitHub gist and renders vector graphics using React with D3 v5, employing `scaleBand` for the y-axis and `scaleLinear` for the x-axis. Axes and bars are drawn as SVG elements via React components, with tooltips showing formatted population values.

Activity6_Task2

A grouped and stacked horizontal bar chart displays the percentage shares of renewable, fossil fuel, and nuclear electricity generation for ten countries. The visualization uses D3.js v7 with SVG rendering, loading data directly from a local CSV. It demonstrates `d3.stack()` for stacking the energy source series, `d3.scaleOrdinal()` for categorical colors, and `d3.axisBottom()` and `d3.axisLeft()` for axes. Interactive tooltips provide country-specific values when hovering over bars.

activity 6_Task 1 Q2

This interactive bar chart displays the population of the top 20 countries for the year 2010, sorted in descending order. Built with React and D3 v5, it uses the `scaleBand` and `scaleLinear` functions to map country names and population values to SVG rectangles. The data is loaded from a CSV file via D3’s `csv` function, and hovering over a bar reveals a tooltip with the population in a compact SI format.

Apr 10, 2024

activity 6_Task 1

This bar chart displays the populations of the top 10 countries in the year 2000, sorted in descending order. The visualization uses a React component that loads CSV data via `d3.csv`, with `d3.scaleBand` mapping countries on the y-axis and `d3.scaleLinear` mapping population values on the x-axis. The custom `Marks` component renders green SVG rectangles, and axis labels are formatted using the `d3.format` function. Tooltips show the formatted population value for each bar.

Apr 10, 2024