Skip to main content
Log in
G

ganeshseeram5decem@gmail.com

@ganeshseeram2405·13 public vizzes

Loading thumbnail…

Activity6_Question4

This example visualizes the correlation between battery life, processing power, and camera quality across smartphone makes. The chart uses a bubble plot with processing power on the x-axis, camera quality on the y-axis, and bubble size representing battery life, alongside a color scale for phone brands. It includes interactive tooltips on hover and a legend for both bubble size and brand colors. The code uses d3.csv to load data, d3.scaleLinear for axes and bubble radius, and d3.scaleOrdinal with d3.interpolateTurbo for color mapping.

Apr 5, 2024
Loading thumbnail…

Activity6_Task4

This bubble chart visualizes the correlation between a vehicle's average horsepower, torque, and highway MPG for various car makes. It maps horsepower to the x-axis, torque to the y-axis, and uses bubble size to represent highway MPG, with color differentiating brands. Built with D3 v7, the visualization renders as an SVG and features an interactive tooltip that appears on mouseover, showing the vehicle make. It also includes legends for bubble size and color categories, with data read from a local CSV file.

Apr 5, 2024
Loading thumbnail…

Activity6_Question3

This scatter plot visualizes the Iris flower dataset, mapping sepal length on the x-axis and petal length on the y-axis, with three species distinguished by distinct symbol shapes. It loads data from a remote CSV, parses it with `d3.csvParse`, and renders marks using `d3.scaleLinear`, `d3.scaleOrdinal`, and the `symbol` generator. The chart includes labeled axes via custom D3 axes modules and a shape legend, all built with D3 v7 selections and joins.

Apr 5, 2024
Loading thumbnail…

Activity6_Task3.2

This interactive scatter plot visualizes the Iris dataset, mapping sepal length against petal length and distinguishing species by shape. It uses D3 v7, loaded via UNPKG, with imported utilities like `scaleLinear`, `scaleOrdinal`, and `symbol`. The chart fetches CSV data from a GitHub repository, parses it with `csvParse`, and renders axes, labels, and a custom shape legend. The code demonstrates modular ES6 imports and D3's join-based selection pattern for declarative updates.

Apr 5, 2024
Loading thumbnail…

Activity6_Task3

This example displays the classic Iris dataset as an SVG scatter plot, using D3 version 6 to map petal length and width along the axes while coloring circles by species. It loads data from a remote CSV file and uses `d3.csv` for parsing, `d3.scaleLinear` for scales, and `d3.axisLeft`/`axisBottom` for ticks. Each circle’s fill is determined by a switch function, and sepal measurements are set as `rx` and `ry` attributes, though the radius remains constant. The visualization fills the viewport and applies custom axis labels and styling.

Apr 5, 2024
Loading thumbnail…

Activity6_Question2

This stacked bar chart visualizes the distribution of book ratings across six literary genres, with each bar divided into four rating categories from below 3.0 to above 4.5. The visualization uses D3 v7 with an SVG renderer, employing d3.stack for data transformation, d3.scaleOrdinal for color mapping, and d3.scaleBand for the categorical y-axis. Interactive tooltips appear on mouseover to display precise percentages for each rating segment, with data loaded from a local CSV file.

Apr 5, 2024
Loading thumbnail…

Activity6_Task2

This stacked bar chart displays the distribution of IMDb ratings across different movie genres, with each bar segmented into five rating categories from "below 5.0" to "above 8.5" and expressed as percentages. The visualization uses D3 v7's `scaleOrdinal` for color encoding and `stack` for data transformation, rendering as SVG. The chart features a horizontal layout with genre labels on the y-axis and percentage ticks on the x-axis. Interactive tooltips reveal the exact percentage for each segment on hover, with opacity changes providing visual feedback. Data comes from the included `data.csv` file, and the styling uses custom fonts and CSS.

Apr 4, 2024
Loading thumbnail…

Activity6Question2

This example displays a horizontal bar chart of population figures for 20 countries in 2020, using CSV data loaded from a GitHub repository. React renders SVG elements, while D3 v5 handles scales and formatting: `scaleBand` maps countries to y-axis positions and `scaleLinear` maps population values to bar widths. The chart includes formatted tick labels that convert values to billions (e.g., "G" replaced with "B") and native SVG `<title>` elements for tooltips. Reusable React components (`AxisBottom`, `AxisLeft`, `Marks`) structure the visualization.

Apr 4, 2024
Loading thumbnail…

Activity6Question1

This bar chart displays the population of ten countries in the year 2000, using a horizontal layout with countries on the y-axis and population on the x-axis. Built with React and D3 v5, it loads CSV data from a GitHub repository and renders SVG rectangles. The code imports specific D3 functions like `scaleBand`, `scaleLinear`, `max`, and `format` (with a custom tick formatter that replaces 'G' with 'B' for billions). Axes and marks are implemented as separate React components, and tooltips show population values via SVG `<title>` elements.

Apr 4, 2024
Loading thumbnail…

Activity6Task1

This example presents a horizontal bar chart of population data for the top 30 countries in 2020, sourced from a GitHub-hosted CSV. The visualization is built with React and rendered as an SVG, using D3 v5's `scaleBand`, `scaleLinear`, and `csv` functions to parse data and position the bars. The chart employs custom axis components for bottom and left ticks, with bar tooltips formatted in millions using D3's `format` function. The code demonstrates modular ES6 imports within a VizHub environment.

Apr 4, 2024
Loading thumbnail…

Activity6_Task1

This example displays the text “Hello VizHub!” in a large, centered font. It demonstrates how to load D3 and local ES6 modules in a VizHub project, using the `select` function from D3 to target the message div and set its content. The styling is applied via an external stylesheet.

Apr 4, 2024
Loading thumbnail…

6 Buddhas

A field of small, randomly colored, rotated polygons fills the screen behind a large, intricate SVG path of a human face. The background is generated procedurally by mapping a React array into hundreds of polygons, each with randomized coordinates, colors, and rotations. The foreground is a static path element, likely a Buddha’s silhouette, rendered using explicit coordinate data. The visualization uses React and ReactDOM to build the SVG structure, combining generative and hand-coded graphical elements.

Apr 4, 2024
Loading thumbnail…

5 Buddhas

A mosaic of small, randomly rotated polygons forms a dense, colorful backdrop, overlaid with a large, intricate line drawing of a Buddhist figure rendered in red. The visualization uses React to structure the SVG output, with nested `Array.map` calls generating hundreds of polygon elements whose positions, colors, and rotations are determined by `Math.random()`. The central figure is a detailed SVG path, translated and scaled, while pure JavaScript handles the data generation and ReactDOM mounts the final composition.

Apr 4, 2024