pranayrajana.97@gmail.com

Task 9

This pie chart visualizes the top 10 Democrat state populations, with each slice sized proportionally to the state's Democratic population count and colored using D3’s `scaleOrdinal` and `schemeCategory10`. The code loads data from a CSV file via `csv()`, sorts it, and renders the chart with `pie()`, `arc()`, and SVG `path` elements. A legend, built with custom `rect` and `text` elements, displays state names and population values formatted in millions.

Apr 28, 2024

task 9

This example demonstrates a minimal D3.js and ES6 module setup within VizHub. It displays the text "Hello VizHub!" centered on the page using the `select` function from D3 to target a DOM element. The code imports a local message from `myMessage.js` and assigns it to the element’s content, while also declaring unused variables and a regular expression. Styling is handled by `styles.css` with a large font size and centered alignment. The project loads D3 via UNPKG and showcases basic module imports and DOM manipulation.

Apr 28, 2024

Task 8_question

This interactive bubble chart visualizes the correlation between make cost, selling price, and profit percentage for 25 car brands, with data loaded from a CSV file. Each bubble’s size encodes profit percentage, while its color represents the brand, mapped via `d3.scaleOrdinal` and `d3.interpolateTurbo`. The chart uses `d3.csv`, `d3.scaleLinear`, and `d3.axisBottom`/`d3.axisLeft` to render axes, and includes a custom tooltip with `mouseover`/`mousemove`/`mouseleave` events. The SVG output features both a profit-size legend and a brand-color legend.

Task8_Question 3

This scatter plot visualizes the relationship between matches played and runs scored by Test cricket players, with each circle colored by the player’s country. The visualization loads CSV data from a remote gist and uses d3.csv, d3.scaleLinear, d3.extent, d3.axisLeft, and d3.axisBottom to map quantitative values. The SVG rendering applies d3.schemeCategory10 for ordinal country colors and includes axis labels for clarity. The chart highlights performance patterns across nations, showing how players from different countries cluster based on career longevity and run accumulation.

Task8_Tutorial_1

This stacked bar chart visualizes the estimated 2010 religious breakdown of the 20 most populous countries, using data from the Pew Research Center. The chart shows the population of each country divided into colored segments by religion. Users can hover over individual bars to see exact figures via tooltips, or hover over the legend to highlight specific religious groups within the visualization. The implementation relies on D3.js version 3.5.5, leveraging d3.svg.axis, d3.layout.stack, and d3.legend.color APIs to construct the chart and its interactive elements.

Task8_Tutorial1

This stacked bar chart visualizes the estimated religious composition of the 20 most populous countries in 2010, using data from the Pew Research Center's Global Religious Landscape. The chart uses `d3.flatRollup` and `d3.stack` to structure the data, with `d3.scaleLinear` for the x-axis (population in millions) and `d3.scaleBand` for the y-axis (countries). A color legend, built with `colorLegend.js`, allows users to hover over a religion to highlight its segments across all bars while fading others, using `d3.scaleOrdinal` with `schemeCategory10` for color assignment.

Fork of Fork of Interactive Stacked Bar Chart

A horizontal stacked bar chart breaks down the estimated religious affiliations of the world's 20 most populous countries in 2010. Values derive from Pew Research data. The visualization uses D3's `scaleOrdinal`, `scaleBand`, and `scaleLinear` scales, with `stack()` to compose segments. Hovering over the interactive legend, built from `colorLegend.js`, highlights the corresponding religion across all bars, fading other segments.

Task8_Turorial 4

This interactive bubble chart shows the correlation between average horsepower, torque, and highway MPG for various car makes. Each circle’s position encodes horsepower on the x-axis and torque on the y-axis, while its radius and color represent highway MPG and car brand, respectively. The chart is rendered as SVG with D3 v7, using `d3.scaleLinear` for axes and bubble size, `d3.scaleOrdinal` for color, and `d3.axisBottom` and `d3.axisLeft` for ticks. A tooltip displays the car make on hover, and legends annotate bubble size and brand colors. Data comes from a CSV file.

Task8_tutorial3.2

This interactive scatter plot visualizes the Iris dataset, mapping sepal length on the x-axis against petal length on the y-axis. Each data point’s shape encodes the flower species, with a legend identifying the three categories. The visualization, built with d3.v7 and the d3.scaleLinear, d3.scaleOrdinal, and d3.symbol APIs, renders SVG marks and axes, loading data from a CSV file via d3.csvParse. The plot updates dynamically as the browser window is resized, with axes and legend drawn using custom modules that leverage d3.axisBottom, d3.axisLeft, and d3.symbol.

Task8_tutorial3

A scatter plot of the Iris dataset, colored by species (setosa, versicolor, virginica), maps petal length on the x-axis and petal width on the y-axis. The code uses D3 v6 with `scaleLinear`, `axisBottom`, and `axisLeft` to render axes, while `circle` elements are positioned via `x` and `y` scales. Data is loaded asynchronously via `d3.csv` from a GitHub gist, and each point’s color is assigned by a `switch` statement. The visualization also references sepal length and width values, though these do not affect the plotted coordinates.

Tutorial2_b

This stacked bar chart visualizes the percentage distribution of IMDb ratings across different movie genres, showing the relative share of each rating band within each genre. Hovering over a segment displays its exact percentage via a tooltip. The chart uses D3.js v7 with `d3.stack()` to create the stacked segments, `d3.scaleBand()` and `d3.scaleLinear()` for axes, and `d3.scaleOrdinal()` for color coding. Data comes from a CSV file, rendered as SVG elements, with mouse events triggering opacity changes and tooltip updates.

Task8_tutorial2

This stacked bar chart shows the percentage distribution of IMDb movie ratings across six genres, with each bar segment representing a rating range from below 5.0 to above 8.5. Hovering over a segment reveals a tooltip displaying the exact percentage for that rating level within the genre. The visualization uses D3.js v7 with an SVG rendering, employing d3.stack, d3.scaleBand, d3.scaleLinear, and d3.scaleOrdinal APIs. Data comes from a CSV file containing genre and rating percentage columns, with colors assigned via a custom ordinal scale.

Task8_Question1_b

This example shows a bar chart of the population of 20 countries in 2010, using a horizontal layout where each bar’s length encodes the population value and country names label the y-axis. The visualization is rendered as SVG using React, with scales from d3.scaleBand and d3.scaleLinear mapping data to positions and sizes. The code retrieves CSV data via d3.csv, formats tick labels with d3.format, and builds axes from React components that generate SVG elements. The bars include a native SVG title tooltip, displaying the formatted population value on hover.

Task8-Question (a)

This interactive bar chart shows the population of the top 10 countries in the year 2000. Built with React and D3 v5, the visualization uses `scaleBand` for the categorical y-axis and `scaleLinear` for the quantitative x-axis. Data is loaded from a remote CSV using D3's `csv` function, with each bar rendered as an SVG `<rect>`. Axis ticks are generated via D3's scale `ticks()` method, and the x-axis labels are formatted with `format('.2s')` to convert values to billions. A hover tooltip displays the precise population value.

Fork of Task 8

This example displays a simple text message, "Hello VizHub!", and demonstrates the use of both D3.js and local ES6 modules within a React application. It imports the `select` API from D3 to set the text content of a designated HTML element, while also importing a message from a local module. The visualization includes basic styling for text alignment and font size, with additional CSS targeting the message container. The code loads D3 and React from UNPKG and uses the `d3.min.js` distribution.