Rishabh Sharma

Fork of CyberAttacks Combined Vizs- Final Project Draft v3

This dashboard combines a line chart and a scatter plot to explore cyber attack data, with interactive menus for filtering by industry. The line chart visualizes trends over time, while the scatter plot displays event subtypes by year. Users can brush to highlight points and hover over a color legend to filter the scatter plot. Built with D3.js, it uses `scaleTime`, `scaleLinear`, `scalePoint`, `colorLegend`, and `brush`. The code imports data from `@python-monty/full_cyber_attack_data` and uses Bootstrap for styling.

Apr 16, 2024

Project SDV

This interactive dashboard presents a 3x3 grid of nine topic cards, each representing a distinct visualization related to the impact of population density on COVID-19 spread. The interface uses a CSS Grid layout with hover effects to highlight selectable cards. HTML5 and JavaScript handle the card click logic, logging selected items, while a custom CSS stylesheet imports Google Fonts to style the header. The page serves as a navigational hub for exploring different data views on the pandemic's geographical patterns.

Apr 15, 2024

Assignment 2 Qstn 2

This area chart visualizes Argentina’s scored goals across dates, using a steelblue filled path over a time-based x-axis and a linear y-axis for death counts. The code loads CSV data via `d3.csv`, parses dates with `d3.timeParse`, and constructs the area using `d3.area` with `d3.scaleTime` and `d3.scaleLinear`. Axes are rendered with `d3.axisBottom` and `d3.axisLeft` in an SVG container. The visualization relies on a D3 v7 dataset from a GitHub gist, updated dynamically after data loading.

Apr 13, 2024

Assignment 2 Q 1

This example displays a pie chart depicting plant species populations. It fetches data from a remote gist file, parses the text to extract each species and its corresponding population, and renders the chart as an SVG. The visualization uses D3 v6, specifically the `d3.pie` and `d3.arc` layouts, to create the pie segments and position labels. Each slice is colored using `d3.schemeCategory10`, and the chart is centered within a 400x400 pixel container.

Apr 13, 2024

Smile Face Fork Rishi

This example renders a cheerful smiley face using React and D3.js. It draws the face’s yellow head, black eyes, and a curved mouth as SVG elements, with the mouth path generated by D3’s `arc` function. The code declares constants for dimensions, eye placement, and mouth radius, then composes the visual within a React component that is mounted into the DOM via `ReactDOM.render`. The SVG is centered on a 960×500 canvas.

Apr 10, 2024

try

A React-rendered smiley face fills the browser window, adapting its size to the viewport dimensions. The code uses React 16.9 to create an SVG with a yellow circle for the face, two black eyes, and relies on `stroke-width` and `stroke` attributes for the outline. It does not include a mouth, despite the title, and calculates the face radius from the window height. The SVG elements are positioned using a `<g>` transform to center the composition.

Apr 10, 2024

Activity 6 task 4

This bubble chart visualizes the relationship between GDP, population, and life expectancy for 14 countries. Each circle’s x-position maps to GDP, y-position to population, and radius to life expectancy, with country labels and hover highlighting. The SVG chart uses D3 v7 with `scaleLinear`, `d3.csv`, and `axisBottom`/`axisLeft`, reading data from an embedded CSV file. The code styles circles with the `.bubble` class and applies opacity changes on mouseover and mouseout events.

Apr 6, 2024

Activity 6 task 3

This scatter plot visualizes the distribution of three data groups (A, B, C) across x and y coordinates, using colored circles to distinguish group membership. The chart includes labeled axes, a legend, and a sequential color scheme from `d3.scaleOrdinal(d3.schemeCategory10)`. Built with D3 v7, the code loads data from a CSV file, applies linear scales for both axes, and renders the visualization as SVG circles. Axis ticks, labels, and the legend are generated using D3’s `d3.axisBottom`, `d3.axisLeft`, and manual SVG text elements.

Apr 6, 2024

Activity 6 Task3.2

This scatter plot displays Iris flower measurements, plotting sepal length against petal length for three species. It uses D3 v7 with `scaleLinear` for the axes, `scaleOrdinal` with `symbolsFill` to encode species as different shapes, and a custom legend component. The visualization renders SVG paths generated via `symbol` and includes an asynchronous data fetch that parses CSV data before applying numeric type conversion.

Activity 6 task 2

This visualization shows the petal length distribution for three flower species (setosa, versicolor, and virginica) using a stacked bar chart. The horizontal bars display combined petal length values for each species. Built with D3.js v7, it uses `d3.stack()`, `d3.scaleLinear()`, `d3.scaleBand()`, and `d3.axisBottom()` to render SVG, with color encoding via `d3.scaleOrdinal()`. Interactive mouseover tooltips display exact petal lengths. The data originates from the iris dataset CSV file.

Activity 6 task 1

This horizontal bar chart visualizes the populations of the world’s 20 most populous countries, ranging from China’s 1.37 billion down to the Democratic Republic of the Congo’s 64.6 million. Each steel-blue bar’s length is proportional to population, with countries ordered alphabetically along the vertical axis. The D3.js v7 code loads CSV data, multiplies the raw figures by 1,000 to reflect actual counts, and uses `d3.scaleBand` and `d3.scaleLinear` to position bars, while `d3.axisBottom` formats ticks with a custom tick label function that converts large numbers into billions.

Activity6_Task2

This stacked bar chart visualizes the distribution of IMDb movie ratings across six genres, with each bar segment representing the percentage of movies falling into one of five rating brackets. The chart uses D3 v7’s `d3.stack()` and `d3.scaleOrdinal()` to generate the stacked layout and color encoding, with axes rendered via `d3.axisBottom` and `d3.axisLeft`. A custom tooltip, appended to the body, displays the exact percentage for each segment on hover. Data is loaded from a CSV file and rendered as SVG elements within a fixed 960×500 viewport.

Activity 6

This example demonstrates a minimal D3.js visualization that displays a centered text message, "Hello VizHub!," using the `d3.select` API to target a specific DOM element. The page loads D3 version 5.16.0 from UNPKG and imports a local ES6 module, `myMessage.js`, to provide the text content. Styling is handled through a separate CSS file, which positions the message with large, centered font. The code highlights the basic workflow of combining external libraries and local modules within a VizHub project.

Activity 6 Bar Chart 2

This bar chart visualizes the ten most populous countries, displaying each nation's population as a vertical bar. The primary chart uses D3.js version 7, employing `scaleBand` for the x-axis and `scaleLinear` for the y-axis. It reads data from a CSV file containing population estimates for the year 2000, rendering the visualization as an SVG. The bars are styled in steel blue and change to orange on hover, with rotated x-axis labels for readability. The chart includes a responsive layout that adapts to its container's dimensions.

Activity 6 Bar

This bar chart displays the populations of the top 10 most populous countries in the year 2000, using the dataset "Population 2000 top 10.csv". It shows the data as rectangular bars, colored steelblue by default, which turn orange on hover. The visualization is built with D3.js, using `d3.scaleBand` and `d3.scaleLinear` to map country names and population counts to x and y coordinates, respectively. The chart also includes rotated x-axis labels for readability and a y-axis, and is rendered as an SVG within an HTML page using JavaScript.

Activity 6

A horizontal bar chart displays the top 10 countries by population for 2020. Each bar is rendered as an SVG rect, with its length proportional to the population value on a linear scale. The chart uses D3 v5 scales (d3.scaleBand and d3.scaleLinear) for positioning and sizing, while React components structure the axes and marks. Data is loaded asynchronously from a CSV file via d3.csv, and tick labels are formatted using d3.format with a custom abbreviation for billions.

Activity 6

Activity 6

Fork of Fork of Fork of Fork of Fork of Buddha in colors -overlapping Buddha

This visualization layers hundreds of semi-transparent, randomly colored Buddha silhouettes on top of one another within an SVG canvas. Each of the 30 array values triggers a nested triple map, generating thousands of overlapping null elements with randomized positions and RGB fill values. The React application renders the paths and shapes using SVG, while the background image comes from an external URL. The code uses React's `createElement` and `ReactDOM.render` to mount the component.

Fork of Fork of 6 Buddha

This visualization displays a colorful, overlapping Buddha composed of dense, randomly positioned SVG elements. It layers hundreds of small, semi-transparent squares with variable RGB colors over a stylized Buddha path, creating a vibrant, pixelated effect against a floral background. The code uses React with ReactDOM to render the SVG, mapping multiple nested arrays to generate random coordinates and fill values. The Buddha shape itself is defined by a complex SVG `path` element, transformed and scaled within the composition.