bhargavr016@gmail.com

Task-10

This example displays a pie chart with a side legend, both rendered as SVGs. The D3 pie layout computes arc angles based on the percentage values, while d3.arc generates the path data and d3.schemeTableau10 assigns categorical colors. A second SVG contains the legend with colored rectangles and text labels, and the data is loaded from a remote CSV file.

Apr 29, 2024

Project

This visualization tracks annual inflation rates across countries from 1980 to 2024 using a multi-line chart. It displays each country’s inflation trajectory as a distinct colored line, with a continuously updating x-axis representing time and a y-axis showing percentage rates. The primary view uses d3.csv to load globalInflation.csv, then transforms the wide data into a long format for rendering with d3.line and d3.scaleTime. A secondary script focuses specifically on India’s data, adding red data points with d3.scaleLinear and d3.axisBottom to highlight its trends.

Apr 25, 2024

Activity6_Q4

This interactive bubble chart shows the correlation between average horsepower, torque, and highway MPG for 31 car models, with bubble size encoding MPG and color distinguishing each make. Built with D3 v7, it renders SVG circles with smooth hover interactions and tooltips displaying model names. The visualization includes dual legends for bubble size (highway MPG) and color-coded makes, using d3.scaleOrdinal with interpolateTurbo colors and d3.scaleLinear for both axes and bubble radius.

Activity6_Task4

This bubble chart shows the correlation between average horsepower, torque, and highway MPG for various car makes. Each bubble’s position encodes horsepower (x-axis) and torque (y-axis), while its radius represents highway MPG. Bubbles are colored by car make, using a turbo colormap through `d3.interpolateTurbo` and `d3.scaleOrdinal`. An interactive tooltip displays the make on hover, implemented with `.on('mouseover')` callbacks. The chart also includes a size legend for MPG values derived from the `z` scale, with data drawn from `bubblechart.csv`.

Activity6_task3.2

This scatter plot visualizes the Iris dataset, mapping sepal length on the x-axis and petal length on the y-axis. Each point represents a flower sample, with its species indicated by a distinct fill symbol—circles, squares, and diamonds—as defined by the `symbolsFill` palette. The chart includes labeled axes and a custom shape legend explaining the species-to-symbol mapping. The visualization uses D3.js version 7, leveraging `scaleLinear`, `scaleOrdinal`, and `symbol` to create the plot and its interactive legend.

Activity6_Q3

This scatter plot visualizes the relationship between Glucose and BMI in a diabetes dataset, with each point colored by the binary Outcome variable. The visualization uses D3 v6 to load CSV data from a GitHub repository and render it as an SVG. It employs `d3.scaleLinear` for the x and y axes, `d3.scaleOrdinal` with `schemeCategory10` for color encoding, and `d3.axisBottom` and `d3.axisLeft` for labeled axes.

Activity6_Task3

This scatter plot visualizes the Iris dataset, showing petal length against petal width for individual flowers. Points are colored by species—sky blue for setosa, light green for versicolor, and orange for virginica—using D3.js v6. The code loads CSV data from a GitHub repository and uses `d3.scaleLinear`, `d3.extent`, and `d3.axisLeft`/`d3.axisBottom` to create the axes. It renders as an SVG, with circles positioned by the scaled petal measurements and styled via a switch statement on the species field. The plot includes custom axis labels in green.

Activity6_Question2

This stacked bar chart displays the distribution of user ratings across five tech categories, with each bar proportionally segmented from "below 5.0" to "above 8.5." Using d3.scaleBand for the categorical y-axis and d3.scaleLinear for the percentage x-axis, the chart employs d3.stack to compose the segments. A hover tooltip reveals exact percentages per segment, with the data loaded via d3.csv. SVG rendering and smooth opacity transitions for the tooltip enhance interactivity.

Activity6_Task2

This stacked bar chart shows how IMDb movie ratings are distributed across genres, with each bar segment representing the percentage of films falling into rating bands from “below 5.0” to “above 8.5.” The visualization uses D3 v7’s `d3.stack()` to compute the stacked series and `d3.scaleOrdinal` for color mapping, rendering as SVG. Hovering over a segment triggers a tooltip showing the exact percentage for that genre and rating category, while axis labels and a title clarify the data. The chart reads from a local CSV file structured with genre rows and rating-band columns.

Activity-6-q1.2

A horizontal bar chart displays the population of 20 countries in 2010, sorted by country name. The visualization uses D3’s `scaleBand` and `scaleLinear` to map countries and populations to SVG rectangles, with React managing the component structure. Data is loaded asynchronously via `d3.csv` from a GitHub-hosted CSV file, and population values are formatted with `d3.format` to abbreviate large numbers (e.g., “1.2B”). Blue axis lines and green bars are styled with CSS.

Activity-6-q1.1

A horizontal bar chart shows the population of the top ten countries in the year 2000, with bars ordered by country name and green rectangles sized by population. The chart uses React components for rendering SVG elements, with d3.scaleBand and d3.scaleLinear for positioning, and d3.format for abbreviating tick labels. Data is loaded asynchronously from a CSV file via d3.csv, which also multiplies the population values by 1000 to reflect actual counts.

activity 6_Task 1

This bar chart displays the 2020 populations of 30 countries, ranked vertically by name with horizontal bars indicating population size. A green fill and SVG rendering make the ranking immediately readable. The visualization is built with React and D3 v5, using `scaleBand` and `scaleLinear` for axes, while `csv` loads data from a GitHub-hosted CSV file. Axes are custom components, and tooltips appear via SVG `<title>` elements.

Fork of Hello VizHub

This example displays the text "Hello VizHub!" centered on the page. It loads D3 v5 from UNPKG and uses the `d3.select` API to locate the `#message` div and set its text via the `text` method. The text string itself comes from a local ES6 module, `myMessage.js`, which exports a `message` variable. The page’s styling is defined in a separate `styles.css` file, and the D3 code runs from an imported `bundle.js`.

Apr 13, 2024