orusushanth2002@gmail.com

@sushanth-001·18 public vizzes

Activity 7: Area Chart

An area chart displays battery life versus screen size across phone categories. The chart uses semi-transparent, color-coded areas for each category, which are differentiated by a legend. Data is loaded from a CSV file using `d3.csv` and rendered as SVG with D3 v7. The visualization uses `d3.scaleLinear` for axes, `d3.scaleOrdinal` with `d3.schemeTableau10` for colors, and `d3.area` with `d3.curveMonotoneX` to create smooth, filled areas for each category.

Apr 10, 2025

Loading thumbnail…

Activity 7: Pie Chart

This pie chart visualizes the distribution of smartphone categories from a CSV dataset. The visualization uses D3.js (v7) to compute slice arcs with `d3.pie()` and renders them as SVG paths using `d3.arc()`. A color scale from `d3.scaleOrdinal(d3.schemeTableau10)` distinguishes categories, while a legend and axis labels clarify the data. The chart also includes tooltips with category names and counts.

Apr 10, 2025

Loading thumbnail…

activity6_task4_answer

This bubble chart visualizes the relationship between laptop processor speed, RAM, and battery life, with each circle positioned by processor speed and RAM on the x- and y-axes while its radius encodes battery life. Brand identity is communicated through color, with a legend mapping each brand to its assigned color. The visualization uses D3.js v7 with a standard `d3.select` workflow, `d3.scaleLinear` for position and size encoding, `d3.scaleOrdinal` for color mapping, and `d3.axisBottom` and `d3.axisLeft` for axes. Data is loaded asynchronously from a CSV file hosted on GitHub, and hovering over a bubble triggers a styled tooltip displaying detailed specifications.

Apr 1, 2025

Loading thumbnail…

activity6_task4_tutorial

This interactive D3.js bubble chart visualizes the relationship between average horsepower, torque, and highway MPG for various car makes. The x-axis represents horsepower, the y-axis represents torque, and the size of each circular marker indicates the vehicle's highway fuel efficiency. Data is loaded from a remote CSV file and rendered as SVG circles, colored by car brand using `d3.scaleOrdinal`. Hovering over a bubble triggers an animated tooltip displaying the exact values, while the radius and opacity scale through `d3.scaleLinear`.

Apr 1, 2025

Loading thumbnail…

Activity6_Task4_Tutorial

This visualization shows the correlation between average horsepower, torque, and highway MPG for various car makes. Each bubble represents a car brand, positioned by horsepower on the x-axis and torque on the y-axis, with bubble size encoding highway MPG, colored by make. The chart, rendered as an SVG using D3 v7, builds the visualization with `d3.scaleLinear` for axes and bubble sizing, `d3.scaleOrdinal` for colors, and includes an interactive tooltip on mouseover that displays precise values. Data comes from a CSV file containing averages for 30+ automotive manufacturers.

Apr 1, 2025

Loading thumbnail…

Fork of activity6_Task3_answer

This interactive D3.js scatter plot visualizes smartphone specifications, plotting screen size on the x-axis against battery life on the y-axis. Individual data points are color-coded by phone category (budget in sky blue, midrange in light green, and flagship in orange), with data loaded from a remote CSV using `d3.csv`. The visualization uses `d3.scaleLinear` for axes, labels drawn via SVG text elements, and supports dynamic viewport sizing through `window.innerWidth` and `window.innerHeight`.

Apr 1, 2025

Loading thumbnail…

activity6_Task3_tutorial3.1

This scatter plot visualizes the Iris dataset, showing the relationship between petal length and petal width, with each of the 150 flowers colored by species (setosa, versicolor, virginica). The chart uses a D3 v6 pipeline that loads CSV data from a GitHub repository, applies linear scales to map data values to pixel coordinates, and renders points as SVG circles with a fixed radius. The code leverages the `d3.csv`, `d3.scaleLinear`, `d3.extent`, `d3.axisLeft`, and `d3.axisBottom` APIs to construct axes and position marks, while a custom switch function assigns categorical colors to each species group.

Apr 1, 2025

Loading thumbnail…

activity6_task3_tutorial3.2

This interactive scatter plot visualizes the Iris dataset, mapping sepal length to the x-axis and petal length to the y-axis. Species are distinguished through different symbol shapes, with a legend indicating each species. The visualization uses D3 v7 APIs including `scaleLinear`, `scaleOrdinal`, `symbol`, and `axisLeft`/`axisBottom`. Data is loaded asynchronously as CSV from GitHub, parsed with `csvParse`, and rendered in an SVG that dynamically fits the window dimensions.

Apr 1, 2025

Loading thumbnail…

Activity6_Task2_Answer

This visualization shows the distribution of employee performance ratings across five departments, with each department’s proportional breakdown into categories from Poor to Excellent. The chart uses stacked horizontal bars, where each segment’s length corresponds to the percentage of ratings in that category, and a legend identifies the color-coded categories. Built with D3 v7, the code employs `d3.csv` to load the dataset, `d3.stack().keys()` to compute the stacked series, `d3.scaleLinear` for the x-axis, and `d3.scaleBand` for the y-axis, rendering as SVG with interactive tooltips on mouseover.

Apr 1, 2025

Loading thumbnail…

Activity6_Task2_Answer

This visualization shows the distribution of movie ratings across different genres, using horizontally stacked bar charts to display the percentage of films falling into five rating categories from “below 5.0” to “above 8.5.” The chart employs a diverging color palette to distinguish each rating segment, with hover interactions revealing the precise percentage via a tooltip. Built with D3 v7, the code uses `d3.stack()` to compute the stacked data, `d3.scaleBand()` for the genre categories, and `d3.scaleLinear()` for the percentage axis. SVG rendering and ordinal color scaling complete the layout, with data loaded from a CSV file.

Apr 1, 2025

Loading thumbnail…

Activity6_Task2_Tutorial

This stacked bar chart shows the distribution of movie ratings across six genres, breaking down each genre’s percentages into five rating categories from "below 5.0" to "above 8.5." The visualization uses D3 v7’s `d3.stack` and `d3.scaleBand` to create the horizontal stacked bars, with a custom tooltip revealing precise percentage values on mouseover. Data is pulled from a CSV file containing proportional genre-rating combinations. The chart is rendered as SVG, with axis labels and a legend styled via external CSS, and uses `d3.scaleLinear` for the percentage axis.

Apr 1, 2025

Loading thumbnail…

Activity6_Task2_Tutorial

This example demonstrates a minimal D3.js visualization that displays a centered text message using the D3 selection API. The code imports the `select` function from D3 and sets the text content of a `<div>` element with the ID `message` to ‘Hello VizHub!’. Styling for the text is provided through an external CSS file that specifies center alignment and a large font size. The implementation uses the `d3.select` method to target the DOM element and the `.text()` method to populate it with the imported message string.

Apr 1, 2025

Loading thumbnail…

activity6_Task1_Answer1.1

This horizontal bar chart visualizes the population of the ten most populous countries in the year 2000, with the x-axis representing population counts (formatted in billions) and the y-axis listing country names. The chart uses D3.js (v7) to load and parse CSV data from a GitHub repository, then renders light green bars using SVG rectangles. The implementation constructs linear and band scales for the axes, positions axis labels manually, and applies tick formatting to convert numbers into a readable format. The visualization employs a clean, minimal design with clear grid alignment and a 900×500 pixel viewport.

Apr 1, 2025

Loading thumbnail…

activity6_Task1_Answer1.2

This visualization displays a horizontal bar chart of the top 20 countries by population in 2010, drawn as SVG shapes. The chart uses a linear x-scale for population values and a banded y-scale for country names. Built with D3.js v7, the code constructs axes and marks via modular JavaScript files, while loading its dataset from a remote CSV file with the `d3.csv` API. Light green bars represent data values, and custom axis methods format tick labels and provide clear chart titles.

Apr 1, 2025

Loading thumbnail…

activity6_Task1_tutorial1

This visualization displays the 2020 population estimates for the top 30 countries as a horizontal bar chart, with country names on the vertical axis and population values on the horizontal axis, formatted in billions. The React-based code uses d3.scaleBand and d3.scaleLinear for positioning, while d3.csv loads the data from a remote GitHub repository. SVG rectangles render each bar, with tick lines and axis labels styled in blue and green, and tooltips reveal precise population values on hover.

Mar 31, 2025

Loading thumbnail…

Fork of Six Buddhas

Six overlapping Buddha silhouettes form a colorful, layered composition against a floral background image. Each Buddha path is rendered as an SVG `<path>` element, transformed with a scale and translation to create the offset stack. The React application uses `ReactDOM` to render the SVG canvas, while the paths are defined by complex, hand-coded cubic Bézier curve data. A fuzzy, colorful circle pattern is also present but commented out, leaving the interlocking Buddha shapes as the primary visual element.

Mar 15, 2025

Loading thumbnail…

Fork of 5 Buddhas

A field of semi-transparent, randomly colored polygons is rendered against a blurred floral background, with a large, intricate path of a seated Buddha figure layered on top. The composition uses nested array maps to generate the polygon grid, and the Buddha path is drawn with a series of cubic Bézier curves via an SVG `<path>` element. The code relies on React for structure and inline SVG for rendering, with styles applied through CSS for the glassmorphism effect.

Mar 15, 2025

Loading thumbnail…

Fork of six Buddhas

This visualization depicts a fork of a Buddha illustration in which overlapping, semi-transparent circles are scattered in random positions across an SVG canvas. The artwork combines procedural randomness with a static Buddha silhouette path, creating a layered composition against a black background. Built with React, the code generates circles using nested array maps and applies random coordinates and RGB color values, while the Buddha figure is rendered as an SVG path with a thick stroke.

Mar 15, 2025