Harshithakodakandla@my.unt.edu

area chart

This area chart displays monthly average temperatures, with a red dot marking each month's value and a steelblue filled region beneath the line. It loads CSV data from a GitHub gist, using a band scale for the month axis and a linear scale for temperature. The chart is rendered as SVG with D3 v7, including axes, labels, and an interactive tooltip that appears on mouseover events.

Nov 5, 2024

Q2

A stacked bar chart displays technology job counts across experience levels, using categorical colors to distinguish entry-level, intermediate, senior, and expert segments. The visualization loads CSV data with d3.csv, stacks series with d3.stack, and maps values through d3.scaleBand and d3.scaleLinear for axes. Hover interactions trigger a tooltip showing the exact category and count for each bar segment, rendered as SVG rectangles within the chart container.

Q4

This bubble chart visualizes the relationship between sports participation, popularity, and revenue. Each sport from the loaded CSV file is represented as a circle, positioned by participation on the x-axis and popularity on the y-axis, with circle size reflecting revenue and color distinguishing sports. Built with D3.js v6, it uses `d3.scaleLinear` for axes and radius, `d3.scaleOrdinal` for colors, and `d3.axisBottom` and `d3.axisLeft` for axes. Hovering reveals a tooltip with the sport's exact values, rendered as SVG with animated transitions.

Q3

This Q3 scatter plot visualizes buyer data, showing the relationship between product price and review count. Each circle represents an item, with position determined by its numeric `Reviews` and `Price` values. The plot uses a linear scale for both axes and includes a legend, though the code colors points based on a `Genre` field using `d3.scaleOrdinal`, mapping values to red and black, despite the legend listing 'Positive' and 'Negative'. The visualization is rendered as an SVG with D3.js v7, fetching the dataset from a GitHub Gist URL and parsing it with `d3.csvParse`. Axes are generated using `d3.axisBottom` and `d3.axisLeft`.

Q1.2

A horizontal bar chart ranks the top 20 countries by 2020 population, with bars sorted by name and labeled with country names on the left axis. The visualization uses React with D3 v5's `scaleBand`, `scaleLinear`, and `csv` to load and map population data from a GitHub gist, rendering SVG rectangles via the `Marks` component. Axis components format tick values using D3's `format('.2s')` to display billions, and tooltips show exact formatted values.

Q1.1

This bar chart displays the population of ten countries in the year 2000, with horizontal bars sorted by country name. The visualization uses React components to render SVG elements, with d3.scaleBand for the categorical y-axis and d3.scaleLinear for the quantitative x-axis. Data is loaded asynchronously via d3.csv from a GitHub gist, with population values converted from thousands. The chart includes formatted axis ticks using d3.format with SI notation, and each bar contains a native SVG title element for tooltip display.

Tutorial_4

This bubble chart shows the correlation between average horsepower, torque, and highway MPG across 31 car makes. Each circle’s position encodes horsepower (x-axis) and torque (y-axis), while the radius maps to highway MPG and color distinguishes car make. Built with D3.js (v7), the visualization includes hover tooltips, a legend for MPG values, and a color legend for makes. Data is loaded from a CSV file, rendered as SVG, and scales are defined using `d3.scaleLinear` and `d3.scaleOrdinal`.

Tutorial_3.2

This example demonstrates a D3.js scatter plot of the Iris dataset, showing sepal length against petal length with species encoded by symbol shapes. It uses D3 modules like `csvParse`, `scaleLinear`, `scaleOrdinal`, `schemeCategory10`, and `symbol` to render the marks. It also includes custom axes and a shape legend built with `axisLeft`, `axisBottom`, and `symbolGenerator`. Data is fetched from a CSV file via UNPKG and processed into numeric fields before visualization.

Tutorial_3

This scatter plot visualizes the Iris dataset, mapping petal length along the x-axis and petal width along the y-axis, with each of the three iris species (setosa, versicolor, and virginica) distinguished by a different fill color. Built with D3 version 6, the visualization uses `d3.csv` to load data from a remote GitHub source and `d3.scaleLinear` to create the axes’ scales. The SVG circles are drawn using `d3.select` and a data join, while `d3.axisLeft` and `d3.axisBottom` render the labeled axes, with additional text annotations for the axes.

Tutorial2

This stacked bar chart visualizes the distribution of movie ratings across six genres, showing the percentage of films within each rating category. The chart uses horizontal bars for each genre, segmented by rating levels from "below 5.0" to "above 8.5," with a color scale distinguishing the categories. Hovering over a segment reveals the exact percentage via a tooltip. Built with d3.v7, the visualization uses `d3.stack`, `d3.scaleBand`, and `d3.scaleLinear` to compute and render the stacked geometry, while `d3.axisBottom` and `d3.axisLeft` generate the axes, and the data is drawn as SVG rectangles.

Tutorial_1

This interactive bar chart displays population data for 30 countries in 2020, using a horizontal layout with country names on the y-axis and population values on the x-axis. The visualization is built with React and D3 v5, using `scaleBand` for the categorical axis and `scaleLinear` for the numeric scale, with bars rendered as SVG rectangles. Tooltips show formatted population values, and the data is loaded asynchronously from a CSV file using `d3.csv`. The chart includes styled gridlines and axis labels, with population values abbreviated using D3's `format` function.

Activity6_Tak1

This example displays a horizontal bar chart of population data for 20 countries, sourced from a CSV file of the 2010 census. The chart uses D3 version 5 and React, with bars encoded as rectangles whose lengths are scaled by the population value. Axis components are generated with D3’s scale and tick APIs, where x-axis ticks are formatted with a custom function and the y-axis labels use the domain values. The chart’s styling includes a green bar fill and a blue tick line, with a tooltip showing the raw population value on hover.

Oct 22, 2024

Activity 6_Task1

This example demonstrates a minimal VizHub project that renders a static "Hello VizHub!" message using D3.js. It highlights the setup for importing D3 modules and local ES6 modules, with the message defined in a separate `myMessage.js` file and applied via `select('#message').text(message)`. The HTML loads D3 v5 from UNPKG, and the page centers the text with CSS. The code serves as a template for integrating external libraries and modular JavaScript in a visualization environment.

Oct 21, 2024

Activity6_tutorial1

This bar chart displays the 2020 population of 30 countries, sorted alphabetically, using horizontal bars encoded by population size. It is built with React and D3 v5, using `scaleLinear` and `scaleBand` to map population values to bar widths and countries to row positions. Axes, tick labels, and rectangles are rendered as SVG elements, with a native SVG `<title>` element providing tooltips. Population data is loaded from a CSV file hosted on GitHub, with values formatted using D3's `format` function.

Oct 21, 2024

6 Buddha with image bg

Six overlapping Buddha silhouettes in violet, white, and other colors float against a background image of green flowers, creating a layered, translucent composition. The shapes are drawn as SVG paths within a React application, with each path transformed using different scale and translate values to offset and resize the repeated figure. The code uses React 16.10 and renders via SVG elements, with the flower image set as a CSS background on the body. The array manipulation and console logging in the starter code are present but not visible in the final visualization.

6 Buddhas

An array of 20 values maps to nested loops generating 8,000 overlapping circles, each with random radii and blue-tinted RGB colors, rendered as an SVG scatter plot against a black background. A second layer displays six versions of the same Buddha path, scaled and translated via SVG transforms, using opaque fills that create visual depth through overlap. The visualization combines procedural randomness with static vector artwork, built with React and ReactDOM, where the circle positions derive from multiplying array indices by random values.

6 Buddha

A dense scatter plot overlays thousands of semi-transparent circles, generated by three nested loops over an array of 0–20, with random positions and RGB colors varying per render. A large, hand-drawn SVG path depicting a Buddha silhouette is layered on top, translated and scaled via a `transform` attribute. The visualization mixes procedural randomness with a fixed, intricate vector shape, using React to render all elements into a single SVG canvas.

5 Buddhas

The visualization displays a grid of randomly generated, diamond-shaped polygons overlaying a large, detailed Buddha silhouette drawn as an SVG path. The composition layers multiple nested loops that create chaotic, colorful geometric forms, while the central Buddha figure remains the focal point. Built with React and rendered as SVG, the code uses JavaScript’s `Math.random()` to determine polygon positions, rotations, and RGB fill values, producing a vibrant, abstract interplay between the organic Buddha shape and the surrounding algorithmic noise.

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

A colorful scatter of small circles overlays a black background, rendered with React and SVG. The visualization displays 21 concentric clusters, each containing multiple overlapping translucent circles with randomized positions and RGB colors. The code uses React's `map` function to generate three nested iterations of 21 circles each, creating 9,261 total points. A pre-defined SVG path draws a Buddha silhouette, transformed and scaled, layered beneath the generative circle pattern.

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

A nested triple loop maps an array of numbers onto hundreds of semi-transparent circles, each positioned with `Math.random()` and filled with an RGB color generated from random values, creating a dense, chaotic scatter overlaid on a black background. A large SVG path, representing a detailed Buddha silhouette, is drawn on top with a thick stroke and heavy scaling, partially obscured by the overlapping circles. The visualization uses React and ReactDOM to render the SVG elements, combining generative randomness with a fixed geometric form.