raaghaveramireddy@my.unt.edu

Activity 7 Area Chart

This example renders an area chart showing the proportion of ratings across different music genres. It uses stacked areas, colored with a custom palette, to display the data, with a legend identifying each genre. The chart is built with D3 v6, loading data from a CSV file via `d3.csv`. It creates an SVG visualization using `d3.scaleBand` for the x-axis, `d3.scaleLinear` for the y-axis, and a custom `d3.area` generator for the areas, with axes and labels added via `d3.axisBottom` and `d3.axisLeft`.

Nov 7, 2024

Activity 7 Questiuon 1

This example visualizes earthquake magnitudes in Hawaii from 2000 to 2025, showing how magnitude values change over time through a combined line and area chart. The visualization uses d3.scaleLinear for both axes, d3.axisLeft and d3.axisBottom for tick marks, and d3.line with d3.curveBasis for the trend line, while d3.area fills the space beneath the curve. Data is loaded from a CSV file via d3.csv, parsed into numeric values, and rendered as SVG elements within a D3 v5 selection.

Nov 6, 2024

Activity 7

This animated scatter plot displays the Iris dataset, cycling through four different feature pairs on the x-axis while keeping petal width on the y-axis. Points are colored by species. The visualization uses D3 v6 via the `csv`, `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` APIs inside a reusable `scatterPlot` ES6 module. A `setInterval` loop updates the x-axis mapping, while SVG elements render axes, legend, and title.

Nov 6, 2024

Activity6_tutorial 1

This example visualizes the Iris dataset with a scatter plot of petal length against petal width, coloring each point by species (setosa, versicolor, or virginica). It also encodes sepal length and width as additional attributes on the circle elements. The code loads CSV data via `d3.csv`, uses `d3.scaleLinear`, `d3.extent`, `d3.axisLeft`, and `d3.axisBottom` to render SVG circles and axes, and styles the page with CSS. The data comes from a remote gist URL.

Oct 24, 2024

task 1 question 2

This example displays a horizontal bar chart of the top 20 countries by 2010 population, sourced from a CSV file accessed via a GitHub URL and loaded with `d3.csv`. It uses React and `d3.scaleBand` and `d3.scaleLinear` to position bars, with `AxisBottom` and `AxisLeft` components rendering tick marks and labels. Bars are drawn as SVG `<rect>` elements with a native `<title>` tooltip showing the formatted population value via `d3.format` (displaying “B” for billions), while axis styling uses blue tick lines and light green bars.

Oct 24, 2024

task 4 _question

This interactive bubble chart visualizes the correlation between sepal length, sepal width, and petal length for three iris species. It uses D3.js v7 to render SVG circles, with position mapping to sepal dimensions, bubble size reflecting petal length, and color distinguishing species. The visualization loads the iris dataset from a CSV file, employs d3.scaleLinear for all axes and size scaling, and d3.scaleOrdinal for species colors. Hovering over a bubble triggers a tooltip showing species and petal length, while a legend identifies each species by color.

task 4 tutorial

This example visualizes the correlation between average horsepower, torque, and highway MPG for various car makes using a bubble chart. Each bubble’s position reflects horsepower and torque, its size encodes highway MPG, and its color distinguishes car makes via a `d3.scaleOrdinal` with `d3.interpolateTurbo`. The chart includes axes, a size legend, and an interactive tooltip that appears on hover using mouse events. Data is loaded from a local CSV file with `d3.csv`, and rendering is done through SVG elements with D3 v7.

task 4 _ tutorial

This bubble chart visualizes the correlation between average horsepower, torque, and highway MPG for various car makes using data from bubblechart.csv. Each circle’s position encodes horsepower on the x-axis and torque on the y-axis, while its radius represents highway MPG and its color distinguishes the make. Built with D3.js v7, the SVG rendering includes interactive tooltips on mouseover using D3’s event handling, plus legends for both bubble size and color categories.

task 3 question

This scatter plot visualizes car dataset attributes, plotting horsepower on the x-axis against highway MPG on the y-axis, with points colored by car make. The D3 v6 code uses `d3.csv` to load data from a GitHub-hosted CSV, then applies `d3.scaleLinear` for axes, `d3.scaleOrdinal` with `d3.schemeTableau10` for categorical colors, and `d3.axisLeft` and `d3.axisBottom` for tick marks. A legend maps colors to makes, and SVG circles represent each vehicle.

task 3 tutorial3.2

This scatter plot displays the Iris dataset, plotting sepal length against petal length. It distinguishes the three iris species by assigning different symbols to each, with a corresponding shape legend. The visualization is built using D3 v7, employing functions like `scaleLinear`, `scaleOrdinal`, and `symbol` to manage scales and shapes. The axes and legend are created with custom modules, while the data is loaded from a CSV file and parsed with `csvParse`.

task 2 question 2

This example visualizes the percentage distribution of iris flower measurements (sepal length, sepal width, petal length, and petal width) across three species: setosa, versicolor, and virginica. It renders a stacked horizontal bar chart in SVG, with each bar representing a species and colored segments showing proportional contributions of each measurement type. The code uses d3.stack() to compute the stacked values, d3.scaleOrdinal() for color mapping, and d3.scaleLinear() and d3.scaleBand() for positioning. Interactive tooltips display precise percentage values on mouseover, with data loaded from the built-in Iris dataset.

task 2 question

This example demonstrates the minimal “Hello World” setup for VizHub Version 3. The code exports a `main` function that receives a container element and writes a styled text into its HTML using the `innerHTML` property. The font size is a static number, which users can adjust via Alt-drag due to the runtime’s interactive widget support. It serves as a blank slate for building interactive visualizations without an `index.html` file.

Task 1 question 1

This example displays a horizontal bar chart of the population for ten countries in the year 2000, sourced from a CSV file. The chart uses `d3.scaleBand` for the categorical y-axis and `d3.scaleLinear` for the quantitative x-axis. React components render SVG `<rect>` marks and axes, with D3’s `format('.2s')` converting large numbers into abbreviated labels like “1.2B”. Loading is handled by `useData` with `d3.csv`, and tooltips appear via SVG `<title>` elements.

Activity6_task 2 tutorial

This example visualizes the distribution of movie ratings across genres using a stacked horizontal bar chart, where each genre is represented by a row segmented into five rating categories from “below 5.0” to “above 8.5.” The chart reads from `data.csv` and uses D3 v7’s `d3.stack()` to compute the stacked segments, with `d3.scaleOrdinal` assigning colors and `d3.scaleBand` handling the genre rows. Interactive tooltips appear on mouseover, showing the exact percentage for each rating category, while the SVG is rendered with axes, labels, and a title. The bars’ segment lengths reflect proportional percentages, making genre rating patterns immediately comparable.

Activity_6 task 2 tutorial

This stacked horizontal bar chart shows the distribution of movie ratings across six genres, with each bar divided into five rating categories from below 5.0 to above 8.5. The visualization uses d3.stack() to create the stacked segments, d3.scaleBand for the categorical y-axis, and d3.scaleLinear for the percentage-based x-axis. Interactive tooltips display exact percentages on mouseover, while the color scheme distinguishes rating categories via d3.scaleOrdinal. The data comes from a CSV file containing genre and rating percentage values.

Activity_6 task 2 Tutorial

This example visualizes the distribution of movie ratings across genres using a stacked horizontal bar chart. It shows the percentage of ratings in five categories, from "below 5.0" to "above 8.5", for genres such as Documentary, Drama, Comedy, Romance, Animation, and Action. The visualization uses D3.js v7 with SVG rendering, employing `d3.scaleOrdinal` for color coding, `d3.axisBottom` and `d3.axisLeft` for axes, and `d3.stack` to create the stacked segments. Tooltips display exact percentages on hover, using data loaded from a local CSV file.

Activity_6 Task 1

This visualization displays the 2020 population for 30 countries using a horizontal bar chart. React renders the SVG, while D3’s `scaleBand` and `scaleLinear` position the bars and axes. Data loads from a CSV file via `d3.csv`, with population values formatted using `d3.format`. The `Marks` component draws rectangles, and native SVG `<title>` elements provide tooltips on hover.

Activity_6 Task 1

This example demonstrates how VizHub supports ES6 modules and D3.js imports to render a simple text message on a webpage. It uses `d3.select` to target a `div` element with the ID `message` and sets its content from an imported local module. The code showcases importing both the `select` function from the D3 library via UNPKG and a custom `message` value from `myMessage.js`. A fixed number and regular expression are also declared but not used in the visualization.

Fork of 6 buddha

This visualization displays a stylized Buddha outline rendered in violet, overlaid with a repeating background image of flowers and nature, creating a layered collaged effect. The core Buddha path appears multiple times through nested React `map` functions that render SVG `<image>` elements, while a single `<path>` element defines the Buddha silhouette with a white stroke and thick stroke-width. The React app uses the `react` and `react-dom` libraries to manage the SVG output, with data arrays and cubic math functions (`sq`) preparing the iteration structure visible in the code.

Oct 19, 2024

6 buddha

A dense field of randomly positioned, rotated polygons forms a colorful, layered mosaic, with a large buddha silhouette drawn as an SVG path layered on top. The polygons are generated by nested loops over an array, and each vertex and fill color is derived from `Math.random()`. The buddha path is rendered using React elements within an SVG container, and the page is styled with a floral background image. The visualization uses React for DOM management and SVG for all drawing.

Oct 18, 2024