J

JaswanthKoorapati@my.unt.edu

@Jaswanth284·16 public vizzes

Loading thumbnail…

Assignment8_Visuaization_Network

A force-directed bipartite network visualizes the relationship between authors and papers. The visualization loads node and link data from CSV files hosted on GitHub. It uses `d3.forceSimulation` with forces like `forceLink`, `forceManyBody`, `forceX`, and `forceCollide` to position nodes, and uses `d3.drag` for interactive manipulation. Each author is rendered as a blue rectangle and each paper as an orange rectangle, with text labels, edges colored gray, and an SVG-based tooltip showing node details on mouseover. The code also handles data-loading errors with a visible message.

Loading thumbnail…

Jaswanth_Assignment8_Tree

This hierarchical tree visualization maps programming languages by paradigm and family, showing the relationships from root categories down to individual languages. It uses D3 v7’s `stratify` and `tree` APIs to process CSV data and compute the layout, while custom `symbol` shapes (circle, square, diamond, triangle) and an ordinal color scale distinguish each depth level. Interactive tooltips display node names and layer types on hover, with a legend explaining the four tiers. The visualization renders as SVG with horizontal link paths connecting nodes.

Loading thumbnail…

Jaswanth_Assignment8_USA Map

This visualization shows a choropleth map of the United States, displaying the number of clean energy jobs per 1,000 workers. The map uses a green sequential color scale with threshold breaks, allowing viewers to compare state-level employment data at a glance. The visualization is built with d3.v7, using `d3.geoAlbersUsa()` for projection and `d3.geoPath()` to render state boundaries. It loads data from a CSV file via `d3.csv` and U.S. state boundaries from the us-atlas TopoJSON, while `d3.scaleThreshold()` assigns colors based on job density values. Hovering over a state reveals a tooltip with its specific data.

Loading thumbnail…

Assignment8_1_world map

This choropleth map visualizes renewable electricity share as a percentage of total electricity generation by country for 2022. Using a Natural Earth projection via `d3.geoNaturalEarth1` and `d3.geoPath`, it renders world countries from TopoJSON data, colored with a green-to-blue threshold scale. A hover tooltip displays each country’s name and its renewable share, with missing values marked as N/A. The visualization also includes graticules and a discretized legend, with data loaded from a linked CSV file.

Loading thumbnail…

Assignment_7_Area Chart_jaswanth

This area chart shows music industry revenue in million USD per year from 2015 to 2022, highlighting a general upward trend. The visualization uses D3 v7’s `d3.area`, `d3.line`, and `d3.curveMonotoneX` generators to render a gradient-filled area and a stroked line over a time-series axis built with `d3.scaleTime`. Data is loaded asynchronously from a raw GitHub CSV via `d3.csv`, with hover tooltips on the circular marks triggered through SVG mouse events.

Loading thumbnail…

Assignment_7_Line chart_Jaswanth

A line chart displays music revenue in million USD per year from 2015 to 2022. Data comes from a remote CSV file loaded with `d3.csv` and `d3.autoType`. The visualization uses `d3.scaleTime` and `d3.scaleLinear` for axes, a `d3.line` generator with `d3.curveMonotoneX` for smoothing, and `d3.axisBottom`/`d3.axisLeft` for ticks. Interactive circles show tooltips on `mouseenter`, `mousemove`, and `mouseleave` events. The chart renders as SVG with gridlines and axis labels in a fixed 750×420 viewport.

Loading thumbnail…

Assignment_7_piechart

This pie chart displays the share of music revenue (in millions USD) across top years, with each slice labeled by its percentage of the total. The SVG rendering combines a pie on the left and a legend on the right, both drawn inside a single responsive viewBox. Using d3.pie and d3.arc for slice generation, the code loads data from a remote CSV, applies a d3.scaleOrdinal with schemeSet2 for colors, and adds interactive tooltips via appended title elements. The legend lists each year with its value and percentage, built through D3 data joins.

Loading thumbnail…

Jaswanth_Assignment7_Reusable Scatter Plot

A reusable scatter plot displays the relationship between year and revenue using music trends data loaded from a CSV file. The chart uses D3.v7’s selection joining API (`d3.select().join()`) to build SVG axes and circles. It implements a chainable factory function with setters for width, margins, scales, labels, and dot color. Hovering a circle triggers an absolute-positioned HTML tooltip showing the data point’s label and coordinates. The axes use linear scales with integer year ticks and rotated y-axis titles.

Loading thumbnail…

Jaswanth_Assignment7_re-usable Scatter Plot

This reusable D3.js v7 scatter plot visualizes work hours against productivity scores from a personal productivity tracker CSV, using square symbols sized by exercise minutes and colored by screen-time buckets. The chart renders as SVG and demonstrates the factory-pattern component design, with configurable accessors for x, y, radius, and color encoding, plus an optional legend. Interactive tooltips appear on mouseenter to reveal month, work hours, productivity, and screen-time details, while axes, labels, and scales are built with d3.scaleLinear, d3.scaleOrdinal, and d3.symbol.

Loading thumbnail…

Assignment6_Jaswanth_SP

This scatter plot visualizes the relationship between calories burned and steps taken, with each circle representing an individual user/week record and colored according to the user. The D3.js v7 code loads a fitness dataset from a raw GitHub CSV file, using `d3.csv` with `d3.autoType` to parse values. It applies `d3.scaleLinear` for both axes, `d3.scaleOrdinal` with `d3.schemeTableau10` for categorical colors, and renders the chart as SVG with `d3.axisBottom` and `d3.axisLeft` for axes.

Loading thumbnail…

Assignment6_Jaswanth_SP

A scatter plot visualizes the relationship between steps taken and calories burned for individual user-week records, with each point colored by user. The visualization uses D3.js v7 to load CSV data from a GitHub repository, render circles, and construct axes. It employs d3.scaleLinear for x and y positions, d3.scaleOrdinal with d3.schemeTableau10 for categorical colors, and d3.extent and d3.axisBottom/axisLeft to calculate domains and draw the chart components.

Loading thumbnail…

Assignment6_Jaswanth

This bar chart displays the average daily steps for each user in a fitness dataset, with values plotted on a linear scale against categorical user names on a band scale. The visualization aggregates raw CSV data using d3.rollups and d3.mean, then renders seagreen rectangles via D3 v7’s data join. Axes are generated with d3.axisBottom and d3.axisLeft, while labels and a title are added as SVG text elements. The chart uses an SVG rendering approach with fixed dimensions and margins.

Loading thumbnail…

Jaswanth_Multi-Series Line + Combined (Bar+Line)

This visualization presents a combined bar-and-line chart of electric vehicle performance data from a CSV file, showing average battery drain as green bars against the left axis and average driving range as a red line against the right axis. The data is binned into groups of five trips each to improve readability. Built with D3 v7, the visualization uses `d3.csv`, `d3.rollups`, and `scaleBand`/`scaleLinear` to process and map data into SVG elements, including a custom legend, gridlines, and an annotation highlighting the bin with maximum battery drain.

Loading thumbnail…

Assignment_6_Jaswanth_multi line series

This multi-series line chart displays EV performance across three metrics—speed, battery drain, and range—as functions of Trip ID, with each metric assigned a distinct color from the d3.schemeSet2 ordinal scale. Built with D3 v7, the visualization draws an SVG with gridlines, axes, and three separate line paths, using d3.axisBottom and d3.axisLeft for chart furniture. A peak-speed annotation highlights the maximum value with a circle and text label, while a legend maps colors to series names. The data is loaded via d3.csv from a remote GitHub source.

Loading thumbnail…

Assignment_6_Jaswanth_Part3

A multi-series line chart compares three EV performance metrics—speed, battery drain, and range—across trip IDs, with a circled annotation highlighting the peak speed. The visualization uses D3 v7 to load CSV data, scales, axes, and gridlines, then draws a line for each metric via `d3.line`. A color legend identifies each series, and axis labels, a title, and a peak-speed callout clarify the data. The chart is rendered as an SVG, with data sourced from a remote GitHub CSV file.

Loading thumbnail…

Exoplanet_Emotional_Resonance

This interactive dashboard visualizes a synthetic dataset of exoplanets, plotting each world’s distance in light-years against its observation score. Dot size encodes the Emotional Resonance Index, while dot color represents light color, with legend chips for filtering. Built with D3 v7, it uses `d3.csv` to load data, renders a scatterplot in SVG, and displays computed KPI statistics. A fixed tooltip appears on hover, and a separate inline SVG shows a custom radial-gradient planet icon.