SushmaNamidi@my.unt.edu

Area Chart

This area chart visualizes automobile sales by brand, with a steelblue filled path showing the trend across categorical x-axis values. The code loads CSV data from a GitHub repository using `d3.csv`, converts the Sales column to numbers, and renders the SVG chart with `d3.area` for the path, `scaleBand` for the x-axis, and `scaleLinear` for the y-axis. Axis labels for Brand and Sales are added via `d3.axisBottom` and `d3.axisLeft`.

Covid-19 Total no of Deaths in every Country

This bar chart displays the total number of COVID-19 deaths in every country, with each bar colored by country and the death count shown on the y-axis. The visualization loads data from a GitHub-hosted CSV file using d3.csv, then aggregates the records per country with a count operation via vega-lite-api. It renders as a static bar mark using vega-lite’s markBar, with tooltips exposing the country name and death total. The chart’s appearance is customized through a vega-lite config that adjusts axis styling and label colors.

Pie chart of Total deaths with Country DropDown

This interactive pie chart displays total COVID-19 deaths by continent for a selected country. A dropdown menu allows users to filter the data by country, and hovering over a slice reveals a tooltip with exact death counts. The visualization uses D3 v7 with SVG rendering, employing `d3.pie`, `d3.arc`, and `d3.rollup` to aggregate and draw the slices, while a custom legend and color scale using `d3.scaleOrdinal` accompany the chart. Data is loaded from a CSV file via `d3.csv`.

Fork of SVG

Line Chart of New Covid cases in country of 3 pandemic years (interactive)

This interactive line chart displays new COVID-19 cases across ten countries over a three-year period. The visualization uses progressively fading non-hovered lines and relies on hovering over a country name in the legend to highlight its individual trend. Built with React and D3 v5, the chart employs D3’s `scaleTime` and `scaleLinear` for axes and `line` with `curveNatural` for rendering each country’s SVG path. The underlying data is sourced from a CSV file provided in the repository.

Fork of Fork of Fork of Fork to pie chart

Fork of Fork of Fork to pie chart

PiechartProject

This visualization shows the distribution of COVID-19 deaths across continents using a pie chart. The chart displays each continent’s share as a percentage and absolute death count in thousands, with a color-coded legend. The code loads CSV data from a GitHub repository via `d3.csv`, then uses `d3.pie()` to compute arc angles and `d3.arc()` to generate SVG path segments. Color mapping is handled by `d3.scaleOrdinal()`, while `d3.format()` formats numeric labels. The SVG canvas is sized at 960×450 pixels, and all elements are rendered as standard SVG shapes.

Line chart

This line chart example visualizes the diverging value of a dataset, highlighting where it crosses a threshold line. Built with D3.js, it uses a red background and white grid lines to emphasize the black bars and the dashed limit. The chart reads data from an embedded source and renders text labels for the title, axis, and individual values. The code leverages D3’s SVG construction and styling via CSS, with a custom grid and path configuration to present the data clearly.

Fork of Mahendra Gullinkala Bonus IC

A bar chart compares savings amounts across age groups from 20 to 38, using sample data embedded in the code. Hovering over a bar highlights it and draws a dashed reference line, while displaying the numerical difference between the hovered bar and each other bar. The visualization uses d3.v5 with SVG rendering and animated transitions on mouseenter and mouseleave events. Axes, grid lines, and labels are generated via d3.scaleBand, d3.scaleLinear, and d3.axisLeft/axisBottom, with a red background container and black bars.

Fork of Line Chart with Country Dropdown

Fork of Pie Chart Covid Proj Viz 3

This visualization shows the distribution of total COVID-19 cases across continents as a pie chart with an accompanying legend, using percentages derived from the total case count. The chart is built with D3 v5, employing `d3.pie` and `d3.arc` to generate the segments, and `d3.scaleOrdinal` for color mapping. Data is loaded via `d3.csv` from a GitHub-hosted dataset, and rendered as SVG with custom tick formatting and styled text labels inside each slice.

Covid Project Viz 2

Top countries of Covid-19 Bar Chart

This example displays a bar chart of the top ten countries by total COVID-19 cases, ranked by population. It uses D3's `scaleBand`, `scaleLinear`, `axisLeft`, `axisBottom`, and `line` APIs to render the axes and a line mark. The visualization loads data from a remote CSV via `csv()`, sorts it, and slices the top ten entries. Local ES6 modules like `@curran/axis-labels` handle axis labels, while `select` and `join` manage SVG elements.

Scatter Plot Covid Project

This animated scatter plot visualizes the relationship between total COVID-19 cases and total vaccinations across countries, using a log-log scale to accommodate the wide data range. Points are color-coded into three categories based on the vaccination-to-case ratio: Low, Medium, and High Vaccine Shots, with an interactive legend that dims non-selected categories on hover. The D3.js visualization reads from a CSV file and uses `scaleLog` for axes, `scaleOrdinal` with `schemeCategory10` for colors, and the `@curran/axis-labels` library for axis annotations.

Pie Chart

Task 8-Tutorial 3.1_Q

This scatter plot displays vehicle data, mapping height on the x-axis and weight on the y-axis. Each circle’s color encodes the vehicle type—sedans appear red, compacts yellow, and other types green. Built with D3 v6, the visualization loads a CSV from a remote URL, uses `scaleLinear` and `extent` to set axis domains, and renders marks via `select` and `join`. The SVG output includes labeled axes and a red title, with margins and a fixed radius for all points.

Task 8-Tutorial3.1

Task 8-Tutorial3.2

This visualization displays the Iris dataset as a scatter plot comparing sepal length against petal length, with each of the three flower species distinguished by a unique symbol shape. The plot includes labeled axes and a shape legend to identify species. The code uses D3 v7 APIs including `d3.scaleLinear`, `d3.scaleOrdinal`, `d3.symbol`, `d3.symbolsFill`, and `d3.axisLeft`/`d3.axisBottom`. Data is loaded asynchronously from a CSV file and parsed with `d3.csvParse`, with numeric columns explicitly coerced.

Task 8-Q1A

Task 8_Tutorial4_Q

Task 8_Tutorial4

This bubble chart shows the correlation between average horsepower, torque, and highway MPG across 31 car makes. Each circle’s position encodes horsepower on the x-axis and torque on the y-axis, while its radius and color represent highway MPG and make, respectively. Built with D3 v7, the chart renders as SVG with animated tooltips on mouseover. A legend maps circle sizes to MPG values and includes color-coded dots for each make. Data comes from the provided CSV file, processed using d3.csv and scales like d3.scaleLinear and d3.scaleOrdinal.

Task 8-Tutorial3.2_Q

This scatter plot visualizes the vehicle dataset, mapping vehicle length on the x-axis and height on the y-axis, with different vehicle types distinguished by distinct point shapes. The visualization uses d3.scaleLinear for axes, d3.scaleOrdinal with d3.symbolsFill to assign shapes, and d3.symbol to render the marks. The chart includes axis labels and a shape legend generated via the shapeLegend component, with data loaded asynchronously from a CSV file using d3.csvParse.

Task 8-Tutorial 3.2_Q

This scatter plot displays the Iris dataset, mapping vehicle height and weight as x- and y-coordinates while using additional length and width values to set elliptical rx and ry radii. Each point is color-coded by vehicle type (Sedan, Compact, or other) using red, yellow, or green fills, with fixed circular radius applied to the SVG circles. The visualization loads data from a GitHub-hosted CSV file using d3.csv, parses numeric fields, and creates the plot with d3.scaleLinear, d3.axisLeft, d3.axisBottom, and a d3 selection join, all rendered as SVG elements with axis labels.

Task8_Tutorial2

Task8_Tutorial 2_Q

This stacked bar chart visualizes the percentage of revenue across six product categories, with each bar segmented into five revenue ranges from "less than 100" to "above 5000." The data comes from a CSV file, and the visualization uses d3.stack() to compute the stacked segments, with a d3.scaleOrdinal providing color encoding for each revenue range. Hovering over any segment triggers a tooltip that displays the exact percentage for that category and revenue range. The chart employs d3.scaleLinear for the x-axis, d3.scaleBand for the y-axis categories, and SVG rect elements for rendering the bars.

Task 8 Q1B

This bar chart displays the population of 20 countries in 2010, with countries on the y-axis and population values on the x-axis. Built with React and D3 v5, it uses `scaleBand` for the categorical y-axis and `scaleLinear` for the numeric x-axis. Data is loaded from a CSV file via `d3.csv` and rendered as SVG rectangles. The chart includes custom axis components, tick formatting that converts values to billions, and native tooltips using SVG `<title>` elements.

Task 8 Q1_2

This example demonstrates a minimal D3.js setup that renders a static text message into a webpage. It shows how to combine a local ES6 module (`myMessage.js`) with D3’s `select` function to update the DOM content of a `<div>` element. The code loads D3 v5 from a CDN via UNPKG and uses a regular expression (`/fdass/g`) and a constant variable, though these do not affect the visualization. The rendering approach relies on D3's core selection API rather than any data binding or scales.

Buddha Image Forked

Forked from a series of Buddha image clones, this React and SVG art piece layers a dense grid of randomly generated, semi-transparent polygons over a single trace of the Buddha’s path data. The polygons use randomized coordinates, colors, and rotation transforms, while the underlying path is scaled and translated within the same viewport. The sketch’s visual chaos contrasts with the structured outline, built using the React DOM and an inline array map, though no external charting library is applied.