rahul.bonu524@gmail.com

Activity-7_Question-1

This D3.js v7 example presents a pie chart visualizing gadget prices, with each slice labeled by name and a corresponding on-screen legend. A CSV dataset from a GitHub gist supplies the data, which drives a color-coded categorical scale. Segments are rendered as SVG paths, and hovering over a slice triggers a tooltip displaying the item name and price. The legend is built from rendered SVG rectangles, providing a static key alongside the animated chart interactivity.

Nov 5, 2024

Activity-7

Animated scatter plot of the Iris dataset cycles through four feature combinations, using petal width, sepal width, petal length, and sepal length on the x-axis while keeping sepal length on the y-axis. Points are colored by species (setosa, versicolor, virginica) with a legend and axis labels. The visualization uses a reusable scatter plot module built on D3 scales and axes, updating via `setInterval`. Data is loaded from a CSV file, rendered as SVG circles, and includes dynamic axis titles and a title.

Nov 5, 2024

Question-3(ScatterPlot)

This scatter plot visualizes the relationship between fruit weight and diameter, with each point colored and shaped according to fruit type. The visualization uses D3.js v7 with d3.scaleLinear for axes, d3.scaleOrdinal with d3.schemeCategory10 for colors, and d3.symbols for distinct point shapes. A custom shape legend displays the fruit type categories. Data comes from a CSV file loaded via d3.csvParse, with axes and labels rendered using d3.axisLeft and d3.axisBottom.

Question-3.2

This scatter plot displays the Iris dataset, mapping sepal length on the x-axis against petal length on the y-axis. Each point is encoded with a distinct symbol representing its species, with a legend identifying the three categories. The visualization is built using D3’s `scaleLinear` for coordinate mapping and `symbolsFill` for shape encoding. Data is loaded from a remote CSV file and parsed with `csvParse`, while axes and labels are generated through the custom `axes` module using `axisLeft` and `axisBottom`.

Question-4

This bubble chart visualizes the correlation between power output, torque, and efficiency rating for various car manufacturers. Each bubble's position maps to power and torque on the x and y axes, its size encodes efficiency rating, and its color distinguishes the manufacturer. Built with D3 v7, the visualization uses `d3.scaleLinear` for axes and bubble sizing, `d3.scaleOrdinal` for color encoding, and SVG circles for rendering. Interactive tooltips appear on mouseover, displaying manufacturer details, while a legend indicates efficiency values.

Task-3

This scatter plot visualizes the Iris dataset, mapping petal length and width for the x and y axes, with each point colored by species (setosa, versicolor, or virginica). Built with D3 v6, it loads data via `d3.csv`, uses `scaleLinear` for axes from `d3.scaleLinear`, and renders circles with `d3.select` and SVG `circle` elements. The chart includes labeled axes and a legend via `d3.axisLeft` and `d3.axisBottom`, with dimensions scaled to the browser window. Data is pulled from a remote CSV hosted on GitHub Gist.

Task-4-Tutorial-4

This bubble chart shows the correlation between average horsepower, torque, and highway MPG across car makes. Each circle’s position encodes horsepower on the x-axis and torque on the y-axis, while its radius scales with highway MPG using a linear scale (`d3.scaleLinear`). A tooltip displays the make on hover, and a legend maps both MPG values and car makes to size and color, using `d3.interpolateTurbo` for the ordinal color scale. The SVG is rendered with D3 v7, reading data from a CSV file.

Oct 21, 2024

Question-2

A stacked horizontal bar chart displays the percentage distribution of movie ratings across six genres, with each bar segmented by five rating bands from below 5.0 to above 8.5. The visualization uses D3 v7 to load CSV data via `d3.csv`, stack values with `d3.stack()`, scale positions with `d3.scaleBand` and `d3.scaleLinear`, and render SVG rectangles with tooltips on mouseover. An ordinal color scale maps rating bands to distinct colors, while axes and labels are generated using `d3.axisBottom` and `d3.axisLeft`.

Question-2_Task-2

This stacked bar chart shows the distribution of movie ratings across six genres, with each bar segment representing the percentage of films falling into one of five rating categories. The visualization uses a horizontal stacked bar layout, where hovering over a segment displays the exact percentage via a tooltip. The chart is built with D3 v7, using `d3.stack()` to create the stacked data structure and `d3.scaleOrdinal()` for color encoding. SVG rectangles are rendered for each segment, with `d3.axisBottom()` and `d3.axisLeft()` providing the axes. The dataset is loaded from a CSV file containing genre and rating percentage columns.

Question-2_Task-2

This example demonstrates a minimal D3.js visualization that displays a text message centered on a web page. It shows how to load D3 from a CDN via UNPKG, use the `select` API to query the DOM, and set the text content of an HTML element. The code also imports a local ES6 module to supply the string rendered to the viewer. The visualization relies on standard HTML and CSS for layout and styling, with D3 handling the DOM manipulation.

Question-1.2

This horizontal bar chart displays the population of 20 countries in 2010, with bars extending rightward from a shared left origin to represent each nation’s total population. Built with React and D3 v5, the visualization uses `scaleBand` for the categorical country axis and `scaleLinear` for the population scale. Rectangular marks are rendered as SVG elements, and the D3 `format` function abbreviates axis tick labels (e.g., converting millions to “B”). Data is loaded asynchronously via `d3.csv` from a GitHub-hosted CSV file.

Activity6_Task1

This example shows a horizontal bar chart of population data for 30 countries in 2020, with each bar labeled by country name and sized proportionally to its population value. The visualization is rendered as an SVG using React components, with D3’s `scaleBand` and `scaleLinear` handling the axis scales and D3’s `format` function converting tick labels to abbreviated units like “B” for billions. Data is loaded asynchronously from a CSV file using D3’s `csv` method, and the chart includes interactive tooltips via SVG `<title>` elements that display the formatted population on hover.

Question-1.1

This example displays a horizontal bar chart of the top 10 countries by population for the year 2000. Using D3 v5 and React, the chart employs `scaleBand` and `scaleLinear` for positioning, with bars rendered as SVG `<rect>` elements from CSV data. The x-axis uses `format('.2s')` to abbreviate population values, converting 'G' to 'B' for billions, and each bar includes a tooltip via the `<title>` element. Axis ticks are labeled in blue, and the visualization is styled with the Poppins font.

Fork of Hello VizHub

This example loads a CSV dataset of national populations and renders a horizontal bar chart for ten countries in the year 2000. The visualization uses D3 v7's `scaleLinear` and `scaleBand` to map population values and country names to SVG rectangles, with axes generated by `d3.axisBottom` and `d3.axisLeft`. It also demonstrates importing from the `d3` module and a local ES6 module, along with parsing comma-separated numbers via `d3.csv`.

Fork of Hello VizHub

A minimal demo of VizHub's modular code capabilities. It displays a single, large "Hello VizHub!" message centered on the page. The example loads D3 v5 from the unpkg CDN and uses the `d3.select` function to reference the `#message` div. Text content comes from a separate local ES6 module, `myMessage.js`, which exports the message string, demonstrating how to import code from external files.

Oct 18, 2024