N

Nagalakshmi Thota

@Nagalakshmi344·24 public vizzes

Loading thumbnail…

areachart

This area chart displays population changes over time for a single country, using data loaded from a GitHub-hosted CSV file. The visualization leverages D3 v7 to parse the CSV, transform it into year-population pairs, and render a scalable SVG area path. It includes labeled axes, a chart title, and uses `d3.area()`, `d3.scaleLinear()`, and `d3.axisBottom()`/`d3.axisLeft()` for the graphic layout. The chart fills the area beneath the line with a green tone, and the code also demonstrates ES6 module imports via a local helper file.

Loading thumbnail…

fruits

This pie chart shows the proportional distribution of fruit quantities sold, with each slice labeled by its percentage of the total. It is built with D3 v7, using `d3.pie` and `d3.arc` to generate the segments, `d3.scaleOrdinal` with `d3.schemeCategory10` for colors, and `d3.csv` to load the dataset from a GitHub-hosted CSV. A custom legend and a bold title are added below the SVG chart.

Loading thumbnail…

Activity 7.1

This pie chart displays the distribution of fruit quantities sold, with each slice representing a fruit type and labeled with its percentage of total sales. The visualization loads CSV data from a GitHub repository, converts the "Quantity Sold" field to numeric values, and uses D3.js v7's `d3.pie()` and `d3.arc()` generators to create the SVG arcs. A categorical color scale (`d3.scaleOrdinal` with `d3.schemeCategory10`) assigns distinct colors to each fruit, while percentage labels are positioned using `arc.centroid()`. A custom HTML legend below the chart maps each color swatch to its corresponding fruit name.

Loading thumbnail…

Piechart

This example presents a pie chart visualizing the quantity of fruits sold, with each slice labeled by its percentage of the total. The chart is rendered as an SVG within a VizHub project, loading data from a remote CSV file using `d3.csv`. The code leverages `d3.pie` and `d3.arc` to generate the slices, `d3.scaleOrdinal` with `schemeCategory10` for colors, and creates an HTML legend with colored swatches. The chart title and percentage labels appear directly in the SVG, with `d3.sum` used to compute totals.

Loading thumbnail…

Activity 6_Task 2

This example visualizes IMDB movie ratings by genre, showing the distribution of ratings across five categories (from "below 5.0" to "above 8.5") as proportional horizontal bars. Using D3 v7, the code loads CSV data and employs `d3.stack()` to create stacked bar segments, with `d3.scaleOrdinal()` for color mapping and a tooltip that displays exact percentages on hover. The x-axis uses `d3.axisBottom()` with a linear scale, while the y-axis uses `d3.scaleBand()` for genre categories. The visualization is rendered as SVG with custom CSS styling for typography.

Loading thumbnail…

question3.1

This bubble chart visualizes car data, plotting horsepower on the x-axis, torque on the y-axis, and using bubble size to represent highway fuel efficiency. Each circle is colored by car make, with a legend identifying the categories. The D3.js v7 code loads a CSV from GitHub, scales the data using `scaleLinear` for axes and bubble radius, and renders the chart as an SVG. Interactive tooltips appear on mouseover, showing the make, horsepower, torque, and highway MPG for each vehicle.

Loading thumbnail…

Activity 7.1

This D3.js pie chart visualizes the distribution of car makes from a CSV file loaded from a GitHub repository. It uses `d3.pie` and `d3.arc` to generate the pie slices, with `d3.scaleOrdinal` and `d3.schemeCategory10` providing the categorical color scheme. The chart displays percentage labels on each segment and includes a legend generated with HTML. Data is aggregated using `d3.rollups` to count occurrences of each make, and the SVG output is rendered within a centered layout.

Loading thumbnail…

Task4

This bubble chart visualizes the Iris dataset, plotting sepal length on the x-axis against sepal width on the y-axis, with each flower’s petal length controlling the circle’s radius. Species are color-coded using `d3.scaleOrdinal`, and hover tooltips display exact measurements. The visualization, rendered with SVG, includes axes with `d3.axisBottom` and `d3.axisLeft`, a legend, and a secondary circle reference for petal length. Data is loaded asynchronously from `iris.csv` using `d3.csv`.

Loading thumbnail…

question4.1_practice

This bubble chart shows the correlation between average horsepower, torque, and highway MPG for various car makes. Each circle represents a car manufacturer, with its x-position mapped to horsepower, y-position to torque, and radius scaled to highway MPG using d3.scaleLinear. The visualization uses d3.v7 to render SVG circles with ordinal color encoding by make, alongside interactive tooltips on mouseover. It includes axes with labels, a legend for car makes, and a reference circle legend for MPG values. Data is loaded from a CSV file via d3.csv.

Loading thumbnail…

question4.1

This example demonstrates a minimal D3.js visualization that displays a centered text message, “Hello VizHub!”, on a web page. It shows how to import D3 functions and local ES6 modules, with the text styled via CSS. The code uses `d3.select` to target the HTML element and sets its text content, while the message string comes from a separate local module. The visualization loads D3 version 5.16.0 from UNPKG and runs entirely in the browser.

Loading thumbnail…

question2.1

This visualization shows a stacked bar chart of the Iris dataset, displaying the total sepal and petal measurements for each species. The chart uses d3.stack() to aggregate the four numerical attributes into color-coded segments per species, with a tooltip showing individual segment values on hover. The visualization renders with SVG, using d3.scaleOrdinal for colors, d3.scaleBand for the species axis, and d3.scaleLinear for the measurement axis. A legend identifies each attribute, and the data is loaded from an external CSV file using d3.csv.

Loading thumbnail…

Question2_Task2

A stacked bar chart visualizes the distribution of three iris species (setosa, versicolor, virginica) across sepal length values. The chart uses d3.csv to load the Iris dataset and d3.stack to create the stacked series, with d3.scaleOrdinal for color mapping. Each bar segment’s height represents the sepal width contribution per species, rendered as SVG rectangles via D3’s data joins and axis scales (d3.scaleBand, d3.scaleLinear). A legend identifies species colors.

Loading thumbnail…

activity6_que 2

This visualization displays the percentage composition of the Iris dataset, broken down by species and flower part measurements. The horizontal stacked bar chart uses d3.stack to aggregate the data, with each bar representing a different species and colored segments showing the proportional contribution of sepal length, sepal width, petal length, and petal width. The d3.scaleLinear and d3.scaleBand axes map the percentage values, while mouseover interactions trigger a tooltip that reports the exact percentage for each segment. The data is loaded from an external CSV file containing the classic Iris flower measurements.

Loading thumbnail…

acticity 6_q3

This example displays a scatter plot of age against height, with points colored by category (A, B, or C) using a fixed dot radius. The visualization loads CSV data from a GitHub gist and renders it as SVG circles using D3 v6. It employs `d3.csv`, `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to map the data and draw labeled axes for Age and Height.

Loading thumbnail…

Activity 6_Task 3.2

This example visualizes the Iris dataset as a scatter plot of sepal length against petal length, with species distinguished using different symbol shapes from D3’s `symbolsFill` and `scaleOrdinal`. A shape legend, created via custom functions, identifies each species. The code uses D3 v7 modules like `axisBottom`, `axisLeft`, `scaleLinear`, and `symbol`, loading data from a remote CSV and parsing it with `csvParse`. The visualization demonstrates modular ES6 imports and responsive SVG rendering.

Loading thumbnail…

Activity 6_Task 3

This scatter plot visualizes the Iris dataset, showing petal length on the x-axis and petal width on the y-axis, with each point colored by species. The D3 v6 code loads CSV data from a GitHub gist, then uses `d3.scaleLinear`, `d3.extent`, `d3.axisLeft`, and `d3.axisBottom` to map values to screen coordinates and render axes. Circles are drawn via SVG joins with species-based colors, while axis labels are added as text elements.

Loading thumbnail…

Nagalakshmi_que 1.2

This visualization displays a horizontal bar chart of population figures for 20 countries in 2010, with each bar’s length proportional to the population value. The chart loads CSV data from a GitHub repository using d3.csv and renders with React and SVG. It uses d3.scaleBand for the categorical country axis, d3.scaleLinear for the numeric population axis, and d3.format to abbreviate tick labels (for example, converting billions to “B”). Axes and marks are built through reusable local ES6 modules (AxisBottom, AxisLeft, Marks), with light green bars and styled tick labels.

Loading thumbnail…

Nagalakshmi

A horizontal bar chart displays the population of ten countries in the year 2000, with countries listed on the y-axis and population values on the x-axis. Built with React and D3 v5, it uses `scaleBand` and `scaleLinear` to map data, rendering SVG rectangles for bars. The chart fetches data from a GitHub CSV and formats axis ticks using D3's `format` function. Tooltips on each bar show the exact population value.

Loading thumbnail…

activity 6_que 1.1

This example displays a simple text message, "Hello VizHub!", centered on a plain webpage. It demonstrates fundamental VizHub capabilities by loading D3 from a CDN and using the `d3.select` API to set the text content of an HTML element. The code also imports a local ES6 module, `myMessage.js`, to supply the message string, and defines a CSS rule to control its visual styling. The visualization serves as a minimal template for combining D3, local modules, and external styling.

Loading thumbnail…

activity 6_Task 1

This example shows a horizontal bar chart comparing the 2020 populations of 30 countries, with bars sorted by population. It renders as an SVG using React and D3 v5, loading data from a CSV file via `d3.csv`. The chart uses `d3.scaleBand` for the categorical y-axis and `d3.scaleLinear` for the quantitative x-axis, with tooltips formatted using `d3.format`. Custom React components (`AxisBottom`, `AxisLeft`, `Marks`) generate the SVG elements.

Loading thumbnail…

Activity 6_Task 1

This D3.js bar chart displays the population of 30 countries in 2020, using horizontal bars on a Cartesian grid. The visualization leverages React components and D3 version 5's `scaleBand` for the categorical y-axis and `scaleLinear` for the numerical x-axis. Data is loaded via a CSV URL providing population figures, which are formatted using D3's `format` function to display values in billions. The SVG rendering includes blue tick lines, green bars, and a labeled x-axis, with tooltips showing formatted population values on hover.

Loading thumbnail…

Activity 6_Task 1

This example demonstrates the basic scaffolding of a VizHub project, displaying the static text message "Hello VizHub!" using D3.js. The code imports a local ES6 module, `myMessage.js`, to supply the text content, and the D3 `select` API to target the designated HTML element. The visualization relies on D3 v5 loaded via a CDN and uses CSS to style the large centered text.

Loading thumbnail…

6budha

A gallery piece built with React and rendered as SVG, this example displays a large, stylized buddha figure composed of two overlapping violet outline paths. The paths, defined with complex cubic Bezier coordinate data, are layered with white strokes on a photographic background of green flowers, creating a decorative, poster-like effect. The code constructs an array of numbers for potential use, but the visual output is solely the static vector illustration generated from the hardcoded path data.

Loading thumbnail…

5 Buddhas

Five Buddha faces overlap in a colorful, abstract composition. Each face is drawn as a dense SVG path, rendered multiple times with random rotations, positions, and fill colors pulled from an array. The visualization uses React to render SVG polygons and paths, with randomness generated via `Math.random` and applied to coordinates, color values, and transformations. The result is a layered, kaleidoscopic effect where the same Buddha shapes repeat and distort across a black background.