jahnavigummadi@my.unt.edu

@Jahnavichowdary123·16 public vizzes

Activity-7Q2

Three overlapping area layers compare horsepower, torque, and highway MPG across car brands on a shared point scale, with distinct steelblue, orange, and green fills and a matching legend. The chart renders to SVG using D3 v6, loading CSV data remotely and parsing numeric fields. It employs `d3.area` generators, `scalePoint` and `scaleLinear`, `axisBottom` with rotated labels, and `axisLeft`, while tooltips appear via appended `title` elements.

Nov 4, 2024

Loading thumbnail…

Activity-7Q1

This example shows five small pie charts displaying genre distributions across five rating ranges, from "below 5.0" to "above 8.5". The dataset is loaded via `d3.csv` from a GitHub raw link, with each chart labeled by rating range. The code uses `d3.pie` and `d3.arc` to generate slices, `d3.scaleOrdinal` with `d3.schemeCategory10` for coloring, and SVG text for slice labels. Each chart includes a legend below it and is rendered as an inline-block div within a flex container.

Nov 4, 2024

Loading thumbnail…

Activity6_task4

This bubble chart visualizes the distribution of movie ratings across six genres, plotting the percentage of ratings in the 5.0–6.5 range on the x-axis against the 6.5–7.5 range on the y-axis. Bubble size encodes the share of ratings above 8.5, while color distinguishes genres. The chart uses d3.csv to load data, d3.scaleLinear for positioning and sizing, and d3.scaleOrdinal with d3.schemeCategory10 for colors. Interactive tooltips appear on mouseover via d3 transitions, and axes are rendered with d3.axisBottom and d3.axisLeft.

Oct 19, 2024

Loading thumbnail…

Activity6_q6

This scatter plot visualizes the relationship between the percentage of ratings in the 5.0–6.5 range (x-axis) and the 6.5–7.5 range (y-axis) across different genres from a remote CSV dataset. Each circle represents a genre, colored by its category through a `d3.scaleOrdinal` color scheme, with tooltips revealing the exact values. The visualization uses D3 v6 APIs including `csv`, `scaleLinear`, `axisLeft`, and `axisBottom` to load data, scale axes, and render the SVG. Axis labels are styled via CSS classes, while the plot’s marks are drawn as SVG circles with a black stroke.

Oct 19, 2024

Loading thumbnail…

Activity6_task3

This visualization displays a scatter plot of the Iris dataset, mapping petal length on the x-axis and petal width on the y-axis. Data points are colored by species (setosa, versicolor, and virginica) using a predefined color scale. The example uses D3 v6 via UNPKG, loading CSV data asynchronously with `d3.csv`, and rendering circles with an SVG-based approach. Axes are generated through `d3.axisLeft` and `d3.axisBottom`, with linear scales (`d3.scaleLinear`) for positioning and `d3.extent` for domain calculation, resulting in a clean, labeled chart.

Oct 19, 2024

Loading thumbnail…

Activity6_task3-tu

This example demonstrates a minimal VizHub project that renders a centered "Hello VizHub!" message. It uses D3 v5 to select a DOM element and set its text content via the `select` API, while also importing a local ES6 module to supply the message. The page loads D3 from a CDN and styles the output with CSS, offering a basic template for combining D3 selections with modular JavaScript.

Oct 19, 2024

Loading thumbnail…

Activity6_q3

This stacked bar chart displays the total ratings for different car makes, broken down into horsepower, torque, and highway MPG segments. Using the d3.stack() function and d3.scaleOrdinal for color encoding, the chart renders in SVG format. The d3.scaleBand and d3.scaleLinear axes position the bars, while mouseover events trigger a tooltip showing the individual metric values. Data comes from the bubblechart.csv file, loaded via d3.csv.

Oct 19, 2024

Loading thumbnail…

Activity6_task2

This example visualizes the distribution of IMDb movie ratings across six genres, using a stacked horizontal bar chart. Each bar segment represents the percentage of movies within a rating category, from below 5.0 to above 8.5, and the data is compiled in the `data.csv` file. The visualization is built with D3 v7, utilizing `d3.scaleOrdinal` for color mapping, `d3.axisBottom` for the x-axis, and a custom tooltip on mouseover to display exact percentage values. The chart is rendered as an SVG with a clean, stylized layout.

Oct 19, 2024

Loading thumbnail…

Fork of Hello VizHub

This fork of Hello VizHub demonstrates a minimal D3.js setup, displaying the static text "Hello VizHub!" in the center of the page. The example shows how to import D3 functions via ES6 module syntax, using `select` from the D3 library to target the message div and set its text content. It also illustrates importing from a local ES6 module (`myMessage.js`) and loading D3 from the UNPKG CDN. The styling is handled through a linked CSS file, setting the font size and alignment.

Oct 19, 2024

Loading thumbnail…

Activity6_q1.2

This example shows a horizontal bar chart of population data for 20 countries in 2010, using a linear scale for population values and a band scale for country names. The code loads data from a remote CSV file and renders the chart as an SVG in a React component, using D3 v5 APIs such as `scaleBand`, `scaleLinear`, and `csv`. Interactive tooltips display the formatted population on hover, while axis labels and tick formatting convert values to billions using `format('.2s')`.

Oct 19, 2024

Loading thumbnail…

Fork of Activity6_q1.1

A fork of a VizHub activity example, this visualization renders a horizontal bar chart of country populations for the year 2000. The data is loaded from a GitHub-hosted CSV and displayed using React and D3 v5, with the top ten countries sorted by population. The chart uses `scaleBand` for the y-axis and `scaleLinear` for the x-axis, with SVG `<rect>` marks for each bar and a `<title>` element for tooltips. The code demonstrates importing D3 functions and local ES6 modules, and customizes axis styling through CSS classes.

Oct 19, 2024

Loading thumbnail…

Activity6_q1

This D3 bar chart displays the population of ten countries for the year 2000, using horizontal bars sorted by country name. The visualization loads CSV data via `d3.csv` from a GitHub repository, then renders an SVG with React, applying a linear scale to the population axis and a band scale to the categorical country axis. Bars are styled with a light green fill, and tooltips, formatted with `d3.format` to show values in billions, appear on hover.

Oct 19, 2024

Loading thumbnail…

Activity6_Task1

This horizontal bar chart displays the population of the top 10 countries in the year 2000. The visualization uses D3.js scales and formatting functions to map country names and population values to the layout. Built with React, the example loads data from a remote CSV file and renders the chart using SVG. Interactive tooltips are provided through the `<title>` elements on each bar, while D3's `scaleBand` and `scaleLinear` position the bars and axes.

Oct 18, 2024

Loading thumbnail…

Activity 6_Task 1 (Q1.1)

This example shows a horizontal bar chart comparing the population of ten countries in the year 2000, using a dataset loaded from a GitHub-hosted CSV file. The React application renders the chart as an SVG, with rectangular bars scaled by population values on a linear axis and country names positioned on a band axis. The code imports `scaleLinear`, `scaleBand`, `axisBottom`, and `axisLeft` from the D3 v5 library, leveraging React's `useRef` and `useEffect` hooks to attach the axes to the SVG elements.

Oct 18, 2024

Loading thumbnail…

Fork of 6 Buddhas

A stylized SVG portrait of the Buddha is composed of overlapping, colorful paths on a flower-background image. The React app renders a fixed 960x1000 SVG, embedding the background as an `<image>` element and layering a detailed path with transforms for scaling and positioning. The visualization uses React and ReactDOM for component rendering, with a plain SVG path for the figure.

Oct 18, 2024

Loading thumbnail…

5 Buddhas

A black canvas displays five nested layers of small, randomly placed polygon diamonds, each filled with vivid RGB colors and rotated 45 degrees, creating a dense, chaotic mosaic. The visualization uses React and ReactDOM to render the SVG elements, with the diamonds generated through nested array maps and positioned using Math.random for both coordinates and color values. The composition is overlaid atop a larger SVG path depicting a Buddha figure, blending abstract geometric noise with the structured silhouette of the religious icon.

Oct 11, 2024