N

nunnajaynica@gmail.com

@JaynicaNunna·19 public vizzes

Loading thumbnail…

SDV_project

This example displays two side-by-side bar charts comparing the top ten countries by Global Innovation Index (GII) and their corresponding 2023 population figures. The data is merged from CSV files by country name, sorted by GII in descending order, and filtered to the top ten entries. Using D3.js v6, the visualization renders bar charts in SVG, with axes, rotated x-axis labels, and tooltips showing exact values. The charts highlight the relationship between a country’s innovation ranking and its population size.

Loading thumbnail…

Task-2_jaynica

This visualization compares rating proportions across genres using an area chart. Multiple overlapping area series are rendered as SVG paths, with a color-coded legend identifying each series. The code loads data from a remote CSV file using `d3.csv`, then builds the chart with `d3.scaleBand` and `d3.scaleLinear` for axes, `d3.area` for series generation, and `d3.axisBottom`/`d3.axisLeft` for tick marks.

Loading thumbnail…

Task_1_jaynica

This example shows a pie chart of video game genres, with each slice sized by the count of games rated above 8.5, as loaded from a remote CSV file. D3 v6 (loaded via UNPKG) is used to shape the slices with `d3.pie` and `d3.arc` into an SVG, using an ordinal color scale for genre categories. A legend, built with D3's selection and shape primitives, maps each color to its genre label.

Loading thumbnail…

Jaynica nunna

This example presents a horizontal bar chart titled “POPULATION-2010,” visualizing the 2010 population data for 20 countries. The chart uses a Categorical color scheme with green bars and blue axis lines, with country names on the y-axis and population totals on the x-axis formatted using D3’s `format` function (e.g., “B” for billions). Built with React and D3 v5, it loads data from a CSV file via the `d3.csv` parser, then renders an SVG using `scaleBand` for categorical y-positions and `scaleLinear` for the numeric x-axis. Tooltips display each bar’s exact value, and the chart is part of a VizHub example demonstrating local ES6 module imports and D3 integration.

Loading thumbnail…

Jaynica Nunna

A horizontal bar chart displays the populations of ten countries for the year 2000, with the data loaded from a CSV file on GitHub. Built with React and D3 v5, it uses `scaleBand` for the categorical y-axis and `scaleLinear` for the numeric x-axis, rendering bars as SVG rectangles. Population values are formatted using `format('.2s')` to display in billions, and each bar includes a tooltip via a native SVG `<title>` element. The chart includes styled axis ticks and labels, with the x-axis labeled "POPULATION-2020".

Loading thumbnail…

Q4 - Jaynica nunna

This bubble chart visualizes the correlation between sepal length, sepal width, and petal length in the classic Iris dataset. Each circle’s position is determined by sepal measurements, while the radius encodes petal length and the color maps species via a scaleOrdinal with interpolateTurbo. Built with D3 (d3.v7), it renders as SVG, featuring a legend, axes, and an interactive tooltip on hover.

Loading thumbnail…

T4 - Jaynica Nunna

This bubble chart shows the correlation between average horsepower, torque, and highway MPG for various car makes, with each circle’s position encoding horsepower on the x-axis and torque on the y-axis, while its radius represents highway MPG. The visualization uses D3 v7 with SVG rendering, including interactive tooltips that display the car make on hover. A color scale based on `d3.interpolateTurbo` maps each make to a distinct hue, and legends for both bubble size and color categories are included. Data is loaded from a local CSV file using `d3.csv`.

Loading thumbnail…

Q3 - Jaynica Nunna

This scatter plot visualizes a car dataset, showing the relationship between horsepower on the x-axis and highway MPG on the y-axis, with each circle colored by car make. The visualization demonstrates D3 v6’s modular API, using `csv` to load data from a GitHub raw URL, `scaleLinear` and `scaleOrdinal` with `schemeTableau10` for scales, and `axisLeft`/`axisBottom` for axes. Circles are rendered as SVG elements via `selectAll().data().join()`, with a color legend positioned on the right. The plot uses a full-window SVG canvas with margins adjusted for readability.

Loading thumbnail…

T3.2-Jaynica nunna

This example shows a scatter plot of Iris flower measurements, mapping sepal length on the x-axis and petal length on the y-axis, with each species represented by a distinct symbol shape and a custom legend. The code loads data from a remote CSV file using `d3.csvParse` and renders the chart with D3 v7, using `d3.scaleLinear`, `d3.scaleOrdinal`, and `d3.symbol` for positioning and shape encoding. Axes are composed via `d3.axisLeft` and `d3.axisBottom`, while the visualization is orchestrated through local ES6 modules, demonstrating modular data-binding patterns with joins and `setState` for async data loading.

Loading thumbnail…

T3.2-Jaynica nunna

This example demonstrates a minimal VizHub project setup, rendering the text “Hello VizHub!” in a centered, large font using D3 v5. It shows how to import D3’s `select` function from a CDN and combine it with a local ES6 module called `myMessage.js`. The `index.js` file uses `select('#message').text(message)` to set the content of a `<div>`, while a separate `styles.css` file controls the visual appearance. The code also declares unused variables and a regular expression, but the visible behavior is limited to the static text output.

Loading thumbnail…

T3.1-jaynicanunna

This scatter plot visualizes the Iris dataset, mapping petal length and width on the axes and coloring each point by species (setosa, versicolor, and virginica). It uses D3 v6 via UNPKG, loading data from a CSV file, and scales the x and y positions with `scaleLinear`. The SVG circles are positioned with `attr` calls and colored through a switch statement. Axis labels are added with `axisLeft`, `axisBottom`, and `svg.append('text')`, while the chart resizes to the window dimensions using `window.innerWidth` and `window.innerHeight`.

Loading thumbnail…

T3.1-jaynicanunna

This scatter plot visualizes the Iris dataset, mapping petal length and width on the axes and coloring each point by species (setosa, versicolor, and virginica). It uses D3 v6 via UNPKG, loading data from a CSV file, and scales the x and y positions with `scaleLinear`. The SVG circles are positioned with `attr` calls and colored through a switch statement. Axis labels are added with `axisLeft`, `axisBottom`, and `svg.append('text')`, while the chart resizes to the window dimensions using `window.innerWidth` and `window.innerHeight`.

Loading thumbnail…

Q2 - Jaynica nunna

This stacked bar chart visualizes the percentage distribution of the four Iris flower measurements (sepal length, sepal width, petal length, and petal width) for each of the three Iris species. The data comes from the classic Iris dataset, which is loaded and transformed using D3's `d3.stack()` and `d3.scaleOrdinal()` for color encoding. The visualization uses `d3.axisBottom` and `d3.axisLeft` for its scales, with interactive tooltips appearing on mouseover events. The SVG rendering approach arranges the stacked segments horizontally across each species band, with the x-axis representing percentage values.

Loading thumbnail…

Q2 - Jaynica nunna

This visualization displays the percentage distribution of iris flower measurements across three species using a stacked horizontal bar chart. The chart encodes each species as a bar segment, with colors differentiating the four measurement attributes (sepal length, sepal width, petal length, petal width) as proportional parts of the whole. Built with D3.js v7, the code uses `d3.stack()` to compute stacked series, `d3.scaleLinear` and `d3.scaleBand` for axes, and `d3.scaleOrdinal` for color mapping. Interactive tooltips appear on mouseover, showing the exact percentage for each attribute segment. The data comes from the classic Iris dataset loaded from a CSV file.

Loading thumbnail…

T2_Jaynica Nunna

A stacked bar chart displays the percentage distribution of IMDb movie ratings across six genres, using five rating brackets from "below 5.0" to "above 8.5." The chart reads percentage data from a CSV file, with each genre represented by a horizontal bar divided into colored segments. Built with D3 v7, the visualization uses `d3.stack()` to compute the stacked series, `d3.scaleOrdinal()` for color mapping, and `d3.scaleBand()` for the genre axis. Interactive tooltips appear on hover, showing the exact percentage for each rating category, rendered as SVG elements.

Loading thumbnail…

T2_Jaynica Nunna

This example demonstrates how to integrate D3.js with ES6 modules in a minimal VizHub setup. It shows a simple text message rendered in a large, centered font, using D3’s `select` function to update the DOM content. The code imports `select` from the d3 library and a custom `message` export from a local module, while loading d3.v5 via UNPKG. The visual output is static, with no interactive behavior or data-driven rendering.

Loading thumbnail…

Fork of Jaynica Nunna

A horizontal bar chart displays the 2000 population estimates for ten countries from a CSV file, with the United States likely appearing as a leading bar due to its large population. The chart is built with React and D3 v5, using `scaleBand` for the categorical y-axis, `scaleLinear` for the continuous x-axis, and SVG `rect` marks. Data is loaded asynchronously via `d3.csv`, while axes and tooltips are rendered using custom components that leverage D3’s `format` for tick labels.

Loading thumbnail…

Jaynica Nunna

A horizontal bar chart displays the populations of ten countries for the year 2000, with the data loaded from a CSV file on GitHub. Built with React and D3 v5, it uses `scaleBand` for the categorical y-axis and `scaleLinear` for the numeric x-axis, rendering bars as SVG rectangles. Population values are formatted using `format('.2s')` to display in billions, and each bar includes a tooltip via a native SVG `<title>` element. The chart includes styled axis ticks and labels, with the x-axis labeled "POPULATION-2020".

Loading thumbnail…

5 buddhas

Five nested triangular arrays generate 21,000 semi-transparent polygons, each rotated 45° and colored by randomized RGB values, creating a dense, kaleidoscopic mandala-like field. React maps over nested arrays to render the overlapping shapes atop a black SVG canvas, while a central golden Buddha path anchors the composition. The result is a chaotic, maximalist visual reminiscent of a repeating geometric pattern.