shanmukhivasa@my.unt.edu

T9 - Area chart

Fork of T9 - Area chart

This area chart visualizes yearly price data from a CSV file, displaying the trend as a semi-transparent steelblue region. The code loads the data using `d3.text` and parses it with `d3.csvParseRows`. It builds the chart with `d3.select`, `d3.scaleLinear`, and `d3.area`, rendering the area path and axes via `d3.axisBottom` and `d3.axisLeft` within an SVG.

T9

Pie Chart

This pie chart visualizes the win counts of IPL teams, using a dataset sourced from a GitHub Gist and rendered as an SVG. The chart employs D3.js v7 APIs including `d3.pie` and `d3.arc` to generate slices, `d3.scaleOrdinal` for color mapping, and `d3.format` for label abbreviation. A legend on the right lists each team's name alongside its exact win tally, with slice labels positioned via arc centroids.

Task3

This scatter plot visualizes the relationship between resting blood pressure and serum cholesterol in a heart disease dataset, with each circle colored by chest pain type (skyblue for typical angina, lightgreen for atypical angina, orange for non-anginal pain, and red for asymptomatic). Created with D3 v6, the visualization renders as an SVG in the browser, loading CSV data from a GitHub gist. It uses `d3.scaleLinear` for both axes, `d3.axisLeft`, `d3.axisBottom`, and `d3.select` for rendering circles and labels, with a data-driven fill color function mapping categorical values.

Fork of Task3 with shape

A scatter plot visualizes heart disease data by mapping resting blood pressure on the x-axis and serum cholesterol on the y-axis. Each dot represents a patient, colored by chest pain type (blue, green, red, purple) with a hover tooltip showing age, sex, and pain category. The chart uses d3.csv to load the heart_disease.csv dataset and d3.scaleLinear, d3.scaleOrdinal, d3.axisBottom, and d3.axisLeft to render the SVG visualization.

Activity6_Task2

This chart is a stacked horizontal bar chart showing the percentage of fee payments across four terms and a final payment for individual students. Each bar segment represents a fee category, with its length proportional to the percentage paid. The visualization uses the D3.js v7 library with `d3.axisLeft`, `d3.axisBottom`, and `d3.stack` to construct the chart. The data comes from a static CSV file containing fee payment percentages for each student. Interactive tooltips display the exact percentage for each segment when hovered, and the chart includes a legend and axis labels.

Task4-Bubble chart

This bubble chart visualizes FIFA World Cup data from 1930 to 2014, plotting each host country as a circle whose position reflects the tournament year and total attendance, while the radius encodes the number of goals scored. The chart uses d3.csv to load the data, d3.scaleSqrt for the radius mapping, and d3.scaleOrdinal with d3.schemeCategory10 for circle colors. SVG circles and text labels are rendered via d3 selections, with axes generated using d3.axisBottom and d3.axisLeft. The visualization includes country labels positioned above each bubble.

Task4

This bubble chart visualizes the correlation between the number of goals scored, the year, and attendance for FIFA World Cup tournaments from 1930 to 2014. Each circle represents a tournament, with its x-position indicating the year, y-position showing the average goals scored, and radius scaling with attendance. The chart uses D3.js v7 with SVG rendering, employing `scaleLinear` for axes and bubble size, `scaleOrdinal` for color mapping, and `interpolateTurbo` for the color palette. Interactive tooltips display the country name on hover, with animated transitions for showing and hiding the tooltip. The visualization includes a legend for attendance values and color-coded country labels.

Task3

Activity6_Task1-2

This example shows a horizontal bar chart of population data for 20 countries in 2010, sorted by country name along the y-axis with population values on the x-axis. The visualization uses React components to render SVG elements, with D3 v5 scales (`scaleBand` and `scaleLinear`) and formatting utilities. The data is loaded via D3’s `csv` function from a remote gist, and each bar includes a native SVG `<title>` tooltip that displays the formatted population value. The axes are custom components that generate tick marks and labels, with formatting that converts large numbers to abbreviated units like “B” for billions.

Activity6_Task1

A horizontal bar chart displays the populations of ten countries in the year 2000, using a d3.scaleBand for the categorical y-axis and d3.scaleLinear for the quantitative x-axis. The React components render SVG rectangles via the reusable Marks, AxisBottom, and AxisLeft modules, with axis ticks styled through CSS. Data is loaded as CSV using d3.csv, formatted with d3.format, and tooltips are provided by SVG title elements.

5 Buddhas

Three overlapping buddha silhouettes are drawn in a layered composition across a black background, with the path data rendered as repeated geometry. The visualization uses React to render the SVG elements, mapping over nested arrays to generate numerous rotated polygons with randomized positions and colors, creating a dense, organic field around the central shapes. The buddha figures themselves are defined by complex SVG path strings, while the surrounding polygons are produced through iterative array mapping in JavaScript, giving the piece a chaotic, generative quality.