G

ganesh.hns48@gmail.com

@Ganesh0115·18 public vizzes

Loading thumbnail…

Question2

This example shows a comparative area chart of monthly sales for two products during 2023, filled with distinct colors from a categorical scheme. The chart uses D3 v7’s `d3.scaleBand` for the month axis and `d3.scaleLinear` for the sales axis, with area paths generated via `d3.area`. Data is fetched as CSV from a GitHub repository, parsed with `d3.csvParse`, and rendered as SVG. A custom HTML legend, built with `d3.select` and `d3.selectAll`, displays color swatches and product labels alongside the chart.

Loading thumbnail…

Assignment2Question2

This D3.js v7 example creates an SVG area chart that visualizes monthly sales data for two products during 2022. The chart displays values from the embedded data array, with product1 and product2 each shown as filled areas using `d3.area()` and a categorical color scale via `d3.scaleOrdinal` with `d3.schemeCategory10`. A legend is generated using D3’s selection API to map colors to product names, while axes are created with `d3.axisBottom` and `d3.axisLeft`, and data is scaled using `d3.scaleBand` and `d3.scaleLinear`.

Loading thumbnail…

Assignment2Question1

A pie chart displays the sales distribution of electronic items in 2023, with each slice labeled by category and value. The chart uses D3 v7’s `d3.pie`, `d3.arc`, and `d3.scaleOrdinal` with `d3.schemeCategory10` to generate and color the SVG arcs. Data is fetched as CSV from a GitHub repository, parsed with a custom function, and rendered with a corresponding HTML legend.

Loading thumbnail…

sample

A pie chart displays the sales distribution of four electronic items—Smartphone, Tablet, Laptop, and Smartwatch—using D3.js v7 with SVG rendering. The chart encodes sales values as arc sizes, with each slice labeled by item name and sales amount, and a positioned legend showing color-coded item categories. Built with `d3.pie` and `d3.arc`, the visualization uses `d3.scaleOrdinal` with `schemeCategory10` for colors and appends path and text elements to the SVG. The legend is constructed as HTML divs, and all data comes from a static in-memory dataset.

Loading thumbnail…

Question4 Bubble chart

This bubble chart visualizes the relationship between power, torque, and fuel efficiency for various vehicles. Each bubble is positioned by its power and torque values, with the radius scaled to fuel efficiency and colors assigned per vehicle using d3.interpolateTurbo and d3.scaleOrdinal. Built with d3.v7, it renders via SVG with interactive tooltips showing vehicle make on mouse events. Axes are created using d3.axisBottom and d3.axisLeft, while a legend indicates fuel efficiency scaling. The data is loaded from a CSV file.

Loading thumbnail…

Task4 Bubble chart

This bubble chart visualizes the correlation between average horsepower, torque, and highway MPG across various car makes. Each circle represents a car make, with its x-position mapped to horsepower, y-position to torque, and size scaled to highway MPG. The chart uses an ordinal color scale based on `d3.interpolateTurbo` to distinguish makes. Hovering a bubble reveals a tooltip displaying the make. The visualization is rendered as SVG with animation, and includes legends for bubble size and color categories.

Loading thumbnail…

Question3

This scatter plot visualizes the relationship between height and weight, with data points colored by category (A, B, or other). The visualization uses a D3.js (v7) SVG rendering pipeline, reading a CSV dataset of weights and heights. The code leverages several D3 APIs, including `d3.csv`, `d3.scaleLinear`, `d3.extent`, `d3.axisLeft`, `d3.axisBottom`, and `d3.select` to build the chart, with axis labels styled via CSS and rendered as SVG text elements.

Loading thumbnail…

Activity6Task3.2

This scatter plot displays Iris flower measurements, plotting sepal length against petal length for individual specimens. Each point’s shape encodes the species category, with a dedicated legend identifying the three species groups. The visualization loads the Iris dataset from a GitHub-hosted CSV file and parses it using `d3.csvParse`. It renders marks using the `d3.symbol` API with `symbolsFill` to generate different point shapes, while `d3.scaleLinear` and `d3.scaleOrdinal` handle positional and categorical scaling, and custom axes and legend components are assembled using D3 selections.

Loading thumbnail…

Activity 6 Task3.1

This scatter plot visualizes the Iris dataset, showing the relationship between petal length (x-axis) and petal width (y-axis) with each point colored by species: sky blue for setosa, light green for versicolor, and orange for virginica. The visualization is built using D3 v6 and renders to SVG, with the data loaded directly from a GitHub-hosted CSV file via `d3.csv`. The code uses `d3.scaleLinear` for axis scaling, `d3.extent` for domain calculation, and `d3.axisLeft`/`d3.axisBottom` for chart axes.

Loading thumbnail…

Question2

A stacked bar chart displays quarterly sales by product category, with categories on the y-axis and sales totals on the x-axis. The visualization uses D3 v7's `d3.stack`, `scaleBand`, `scaleLinear`, and `scaleOrdinal` APIs to construct the chart, with tooltips revealing the category and sales amount per segment. Data from the CSV file is loaded and rendered as SVG rectangles, with an interactive legend and axis labels. The code leverages D3's declarative `.join` pattern for efficient element updates.

Loading thumbnail…

Activity6Task2

This stacked bar chart shows the percentage distribution of five IMDb rating ranges across six movie genres, making genre effects on ratings visible. Each genre’s bar is segmented by rating category, with a legend identifying colors. Hovering over a segment displays its exact percentage via a tooltip. The visualization uses D3 v7 with `d3.stack` for data structuring, `d3.scaleLinear` and `d3.scaleBand` for axes, and SVG rendering. Data comes from a local CSV file with pre-aggregated proportions, and mouse events trigger the custom tooltip.

Loading thumbnail…

Activity6Question2

This stacked bar chart shows quarterly sales totals across three product categories—Electronics, Clothing, and Home Goods—using D3 v7 to render SVG. The chart uses `d3.stack()` to create stacked segments and `d3.scaleOrdinal()` for color mapping, with `d3.axisBottom` for the x-axis. Hovering over any segment reveals a tooltip displaying the exact sales value for that category and quarter. Data comes from a hardcoded CSV structure with quarter and category columns.

Loading thumbnail…

Task2 of Activity 6

A stacked horizontal bar chart shows the distribution of IMDb movie ratings across six genres, with each bar divided into five rating brackets from below 5.0 to above 8.5. The chart uses d3.stack to compute the stacked series and d3.scaleOrdinal with a custom color palette for the rating categories. Interactive tooltips display the exact percentage for each genre-rating segment on mouseover, using d3.select and event handlers. Data is loaded from a local CSV file and rendered as SVG.

Loading thumbnail…

Activity 6 Q1.1

This example shows a horizontal bar chart of population data for the year 2000, using a dataset from a GitHub repository. The chart renders ten countries as green bars with blue tick marks on the axes, and includes tooltips that display population values in a shortened format (e.g., "B" for billion). Built with React and D3 v5, the visualization uses `scaleBand` for the categorical y-axis and `scaleLinear` for the x-axis, with custom SVG components for axes and marks. Data is loaded via `d3.csv` from the provided URL, and the chart is rendered entirely as SVG elements.

Loading thumbnail…

Activity 6 Q1.2

This example shows a horizontal bar chart of the 2010 populations for the top 20 countries, sorted by the country name. The visualization uses an SVG-based React rendering with D3 scales. The bars are drawn as rectangles whose widths are mapped to the population data, and axis lines and tick labels are generated from the D3 `scaleBand` and `scaleLinear` APIs. Data is loaded from a CSV file using `d3.csv`, and population values are formatted with `format('.2s')`.

Loading thumbnail…

Activity 6

A horizontal bar chart displays the populations of 30 countries in 2020, sorted by country name, with each bar’s length representing population in billions. Built with React and D3 v5, it uses `scaleBand` for the y-axis, `scaleLinear` for the x-axis, and SVG `<rect>` marks with tooltips via `<title>`. Data is loaded from a remote CSV using `d3.csv`, and axes are rendered by custom components (`AxisBottom`, `AxisLeft`) with tick formatting via `d3.format`.

Loading thumbnail…

Six Reflections of Buddha

Six Reflections of Buddha displays a single Buddha silhouette repeated six times across the view, each instance colored with semi-transparent randomized RGB fills over a floral background image. The rendering uses React with SVG, generating the paths via nested array maps that place the figure at random coordinates. The implementation relies on React’s `createElement` and SVG `path` elements, with the background set through CSS.

Loading thumbnail…

5 Buddha reflections

Five Buddha reflections displays five overlapping, colorful Buddha head silhouettes arranged across a dark canvas. Built with React and rendered as SVG polygons, the visualization generates random geometric shapes and applies vibrant RGB colors and rotations. The Buddha paths are drawn using complex SVG path data, with multiple instances scaled and transformed to create the layered reflection effect. The code uses React's component structure and ReactDOM to render the SVG elements dynamically.