hemanthkakani1999@gmail.com

CSCE-5320-Task-9

A pie chart displays the market share of car brands for 2021, with each slice representing a company's total sales and hover interactions revealing the exact value and percentage. The visualization is built with Plotly, using its `newPlot` function to render the chart inside a designated HTML `<div>` element. It fetches a CSV dataset from a GitHub repository, parses the file by splitting rows and columns, and extracts the brand names and total sales figures to populate the chart's labels and values. The layout sets the title, height, and width for the final presentation.

Apr 28, 2024

Fork of SDV_Project_Visualization_3

This line graph visualization compares average stock prices and average layoffs per month in 2022, using two separate datasets loaded via `d3.csv`. The chart renders two overlaid lines in green (stock price, left axis) and red (layoffs, right axis) within an SVG, employing `d3.scaleBand` for the categorical month axis with rotated labels, and `d3.axisLeft`/`d3.axisRight` for the dual y-axes. The lines are drawn with `d3.line` paths, and the visualization includes an x-axis label, axis titles, and a legend to identify each series.

Apr 25, 2024

SDV_Project_Visualization_2

A dual-axis line chart compares 2024 data science salaries and layoffs across five countries, using a shared x-axis for country names while plotting salary (left axis, in USD) and layoff counts (right axis) as separate polylines. The visualization pairs two CSV datasets loaded via `Promise.all` and `d3.csv`, filters them by year, and maps common countries before rendering SVG axes with `d3.axisBottom`, `d3.axisLeft`, and `d3.axisRight`. Lines are drawn using `d3.line`, with scales including `d3.scaleBand` and two `d3.scaleLinear` domains for the differing metrics.

Apr 24, 2024

Task8_Question1.2_HKK

This visualization displays the 2010 population of 20 countries as a horizontal bar chart. Each bar’s length is proportional to its population value, with country names on the y-axis and a formatted population scale on the x-axis. Built with React and D3 v5, it uses `scaleBand` and `scaleLinear` to map data to SVG rectangles, while `AxisBottom` and `AxisLeft` generate the ticks and labels. The dataset is loaded as CSV from a GitHub repository, and hover tooltips show the precise formatted population for each bar.

Task8_Tutorial1_HKK

This visualization displays the 2020 population estimates for 30 countries as a horizontal bar chart, with countries sorted along the y-axis and population values on the x-axis. Built with React and D3 v5, it leverages `d3.scaleBand` and `d3.scaleLinear` for positioning, while custom SVG axis components render tick marks and labels. The data is loaded as CSV from GitHub and formatted using D3’s `format` function to abbreviate large numbers.

Task8_Question1.1_HKK

This visualization shows the populations of ten countries in the year 2000 as horizontal bar charts. Each bar's length is proportional to population, with the x-axis formatted in billions and red tick lines. The React app uses d3.csv to load data from a GitHub-hosted CSV, d3.scaleBand for the y-axis, and d3.scaleLinear for the x-axis. SVG rectangles render the marks, with tooltips displaying formatted values.

Task8_Question4_HKK

The visualization compares the highest-priced electric vehicle model from each manufacturer as a bubble chart. Brand names are listed on the x-axis, while the y-axis represents the maximum price in euros, with each bubble's position and size encoding this value and its color following a sequential plasma scale. Implemented with d3.v7, the chart uses `d3.scaleBand`, `d3.scaleLinear`, and `d3.scaleSqrt` for axes and radii, and `d3.axisBottom`/`d3.axisLeft` for ticks. Data comes from a CSV file with car specifications, and the SVG rendering is generated via `d3.select` and appended circles.

Task8_Question2_HKK

This example shows a stacked bar chart of the Iris dataset, displaying the contributions of sepal length, sepal width, petal length, and petal width per species. It loads data from a remote CSV file using `d3.csv`, and uses `d3.stack`, `d3.scaleBand`, and `d3.scaleLinear` to compute and position the layers. The visualization renders as SVG, with each species on the x-axis and cumulative measurement values on the y-axis, colored distinctly per attribute.

Task8_Question3_HKK

This scatter plot visualizes the Iris dataset, mapping sepal length on the x-axis and sepal width on the y-axis, with each of the three species (setosa, versicolor, and virginica) distinguished by a distinct fill color (skyblue, orange, and lightgreen). The visualization is built with D3 v6, using `d3.csv` to load the data, `d3.scaleLinear` for both axes, and `d3.axisBottom` and `d3.axisLeft` for rendering the scales. Data points are drawn as SVG circles, positioned via the scales, with the plot sized to the full browser window. The HTML also includes a centered, red, italicized and underlined title.

Task8_Tutorial4_HKK

A bubble chart displays average horsepower, torque, and highway MPG for car makes sourced from bubblechart.csv. Each circle’s x-position maps to horsepower, y-position to torque, and radius to MPG, with color distinguishing brands. The visualization includes axes, a circle-size legend for MPG values, and a categorical color legend. Built with D3 v7, it uses SVG, scales like `d3.scaleLinear` and `d3.scaleOrdinal`, `d3.csv` for data loading, and mouse events to show tooltips.

Task8_Tutorial3.2_HKK

This scatter plot visualizes the Iris dataset, mapping sepal length on the x-axis and petal length on the y-axis. It encodes the three iris species using different symbol shapes, with a legend labeled "SPECIES" positioned at the right. The visualization is built with D3 v7, using `scaleLinear` for axes, `scaleOrdinal` with `symbolsFill` for shape encoding, and a custom `shapeLegend` module. Data is loaded asynchronously from a CSV file and parsed with `csvParse`, with all marks rendered as SVG `path` elements.

Task8_Tutorial3.1_HKK

This scatter plot visualizes the Iris dataset, plotting petal length on the x-axis and petal width on the y-axis, with data points colored by species (setosa, versicolor, virginica). The visualization is rendered as an SVG using D3 v6, employing `scaleLinear` for axes, `extent` for domain scaling, and `axisLeft`/`axisBottom` for ticks. Circle radii are fixed, while the code also maps sepal dimensions to `rx`/`ry` attributes, though these do not affect the circular marks. The plot includes rotated axis labels for petal length and sepal length.

Task8_Question2_HKK

This visualization demonstrates a real-time collision-detection simulation using a force-directed particle system. The code leverages D3.js’s `forceSimulation` API to compute particle trajectories and render them on an HTML5 Canvas, with the underlying data drawn from a synthetic grid of points. A key feature analyzes pixel-level color data by calling the Canvas `getImageData` method, then dynamically adjusts particle positions and velocities based on detected boundaries, creating a responsive, interactive swarm behavior. The piece highlights the interplay between algorithmic physics and raw raster inspection.

Task8_Tutorial2_HKK

This example presents a horizontal stacked bar chart visualizing IMDb movie rating distributions across six genres. Each bar is segmented into five rating categories (from "below 5.0" to "above 8.5"), with segment lengths proportional to the percentage of movies in that category. The visualization uses D3.js v7, employing `d3.stack` to transform the tabular data into stacked series, `d3.scaleOrdinal` for category colors, `d3.axisBottom` and `d3.axisLeft` for axes, and SVG rectangles for rendering. Interactive mouseover tooltips display the exact percentage for each rating segment.

Fork of Fork of Task8_Tutorial1_Question1.2HKK

This example shows a horizontal bar chart comparing the 2010 population of 20 countries, with D3's scaleBand and scaleLinear mapping country names and population values to the SVG canvas. The React app loads CSV data via d3.csv, renders axes through custom AxisBottom and AxisLeft components, and displays values using si-format tick labels that convert gigabytes to billions. Blue rectangles represent each country's population, with tooltips showing formatted values on hover.

Apr 14, 2024

Fork of Task8_Tutorial1_Question1.1HKK

This bar chart displays the 2010 population of the top 20 countries from a CSV file loaded via `d3.csv`, with bars colored blue. It uses React to render SVG elements, with `d3.scaleBand` and `d3.scaleLinear` for axes, `d3.format` to abbreviate tick labels, and custom `AxisBottom` and `AxisLeft` components. Ticks are styled with red lines, and hovering reveals tooltips via SVG `<title>` elements.

Apr 14, 2024