sunny.musku2631@gmail.com

@Sunny262k·12 public vizzes

Activity7_Question2

This area chart displays average temperatures from 2005 to 2023, with years on the x-axis and temperature in Celsius on the y-axis. The visualization uses D3 v7 to load CSV data from a GitHub gist, create a violet-filled area path using `d3.area`, and render axes with `d3.axisBottom` and `d3.axisLeft`. The SVG rendering includes labeled axes for clarity.

Nov 5, 2024

Loading thumbnail…

Activity7_Question2

This area chart displays diesel values from 2005 to 2023. The visualization loads data from a CSV file via `d3.csv` and renders a violet filled area using the SVG `path` and the `d3.area` generator. It uses `d3.scaleLinear` for both axes, with formatted year ticks on the x-axis. The chart includes labeled axes and is built with D3 v7 within a plain HTML page.

Nov 5, 2024

Loading thumbnail…

Activity7_Question1

A pie chart visualizes the number of matches played by the top 15 IPL cricketers, sorted by their runs. The visualization uses D3 v5 to render SVG paths and legend items, with colors assigned via `d3.scaleOrdinal` and `d3.schemeCategory10`. Data is loaded from a CSV file hosted on GitHub, then sorted and sliced for display. The chart includes interactive mouseover logging, and the legend displays player names alongside their match counts.

Nov 5, 2024

Loading thumbnail…

Activity7_Task1

This example demonstrates how to integrate D3.js into a VizHub project. It uses D3’s `select` API to locate an HTML element by ID and set its text content, showcasing basic DOM manipulation. The page displays a large, centered message that reads "Hello VizHub!" via the imported `message` constant from a local ES6 module. The code also includes unused variables and a regular expression, but these are not utilized. The visualization loads D3 v5 from a CDN and uses standard CSS for styling.

Nov 5, 2024

Loading thumbnail…

Activity6_Task1.1

This bar chart displays the top 10 countries by population in the year 2000, using a horizontal layout with countries on the y-axis and population on the x-axis. The visualization uses React to render SVG elements, with D3 v5 scales and formatting functions (scaleBand, scaleLinear, format) to position bars and transform tick labels. Population data is loaded from a CSV file via d3.csv and prepared in a custom useData hook. Each bar includes a native SVG tooltip showing the formatted population value.

Oct 23, 2024

Loading thumbnail…

Activity6_Task1.2

A horizontal bar chart displays the populations of twenty countries in 2010, sourced from a CSV file. Built with React and D3 v5, it uses `scaleBand` for the y-axis and `scaleLinear` for the x-axis. The SVG renders custom `AxisBottom` and `AxisLeft` components, while `Marks` draws rectangles with tooltips formatted using D3's `format` function.

Oct 23, 2024

Loading thumbnail…

Activity6_Task4

This bubble chart visualizes the correlation between a vehicle's maximum speed, acceleration, and fuel efficiency, with the latter determining the radius of each circle. The SVG render positions each car brand along the axes while its color is assigned through `d3.interpolateTurbo`. Hovering triggers a tooltip, powered by D3's `.on` events, to display the brand name. A legend and axis labels are included for all three variables.

Oct 21, 2024

Loading thumbnail…

Activity6_Task4

This bubble chart visualizes the correlation between average horsepower, torque, and highway MPG across 31 car brands. Each circle’s x-position maps to max speed, y-position to acceleration, and size to fuel efficiency, while color encodes the brand. The D3 v7 code (with SVG) uses `d3.scaleLinear` for axes and bubble size, `d3.scaleOrdinal` with `interpolateTurbo` for colors, and interactive tooltips on mouseover. A legend shows MPG values and brand colors, with data loaded from a CSV file.

Oct 21, 2024

Loading thumbnail…

Activity6_Task3.2

A scatter plot displays leaf length against stem height for plants, with each point’s shape encoding plant type via a d3.scaleOrdinal and symbol generator. The chart includes labeled axes from d3.axisBottom and axisLeft, plus a custom shape legend positioned at fixed coordinates. Data is loaded asynchronously from a GitHub CSV using d3.csvParse and rendered with d3.v7 selections.

Oct 21, 2024

Loading thumbnail…

Activity6_Task3

This scatter plot visualizes the IRIS plant dataset, mapping leaf length and leaf width for individual samples while coloring points by plant type (aloe, bamboo, or other). The SVG rendering uses D3 v6 APIs including `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to construct axes and position circles with a fixed radius. Data is loaded asynchronously via `csv` from a GitHub-hosted plants.csv file, and the code derives coordinates from leaf measurements while also reading stem height and thickness values into unused `rx`/`ry` attributes.

Oct 21, 2024

Loading thumbnail…

Activity6_Task2

This stacked bar chart shows the percentage distribution of five rating categories across six product types, revealing how ratings vary by genre. The visualization uses D3 v7 with SVG rendering, employing `d3.stack()` to create stacked segments for each rating bucket, `d3.scaleLinear` for the percentage axis, and `d3.scaleBand` for categorical alignment. Hover interactions trigger tooltips displaying exact percentages via mouse events and HTML div elements. The data comes from a CSV file listing product types and their rating proportions, normalized so each row sums to 100%.

Oct 19, 2024

Loading thumbnail…

5 Buddhas

Five overlapping Buddha silhouettes are built from hundreds of SVG polygons, each one randomly filled with bright RGB colors and rotated 45 degrees. The figures are layered on a green background, creating a dense, kaleidoscopic composition. Using React and ReactDOM, the code maps over an array of coordinates to generate every polygon. The image data is constructed from SVG paths that define the Buddha shape, with transformations applied to scale and position each copy.

Oct 15, 2024