P

PadmajaKodati@my.unt.edu

@PadmajaKodatii·33 public vizzes

Loading thumbnail…

Project_SDV_33

A horizontal stacked bar chart ranks the top 10 most populous countries by total population, with each bar segmented by land area categories. A linked categorical color legend allows hovering to highlight and fade corresponding segments. The visualization uses D3.js APIs including `flatRollup`, `stack`, `scaleLinear`, and `scaleBand` for data aggregation and layout. The responsive design uses `observeResize`, while `colorLegend` functions handle interactive highlighting. Data comes from the `religionByCountryTop20.csv` file.

Loading thumbnail…

Project_SDV_2

This bar chart displays the top 10 most populous countries based on 2018 estimates from the United Nations World Population Prospects. The visualization uses D3 v5 with SVG rendering, employing `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to construct the chart. The code sorts the CSV data by population and renders only the top ten countries, with custom axis tick formatting that converts values to billions. The chart demonstrates D3 axis customization, including rotated labels and removed domain lines.

Loading thumbnail…

222

A combined line and area chart visualizes the sales of cars in India from 2009 to 2019, with the line tracing the trend over time and the area beneath it filled in orange. The chart loads CSV data from a GitHub repository and renders as an SVG using D3 v5, employing `scaleTime` and `scaleLinear` for the axes, with `axisBottom` and `axisLeft` for grid lines and tick labels. The line is drawn with `line()` and `curveBasis`, while the area is implied but not explicitly coded in the visible script.

Loading thumbnail…

Project_SDV_1

A donut chart displays the top five countries by population in 2020, with each slice labeled by country name and population in millions. The visualization uses D3 v5, loading CSV data from a GitHub repository via `d3.csv`. The chart is rendered as SVG, with `d3.pie` generating arc segments and `d3.scaleOrdinal` assigning colors. A legend is also appended, and the data is sorted and filtered to the top five entries before rendering.

Loading thumbnail…

Project_PieChart

This example displays a pie chart representing the basic cost of Netflix by country, using population data from a CSV file sourced from a GitHub repository. The visualization renders ten segments with an SVG path, colored via `d3.scaleOrdinal` and `schemeCategory10`, and includes a legend with country names and dollar values. The React-based code uses D3 v5 APIs such as `d3.pie`, `d3.arc`, and `d3.csv` to load and transform the data, with mouseover events logging the selected population value.

Loading thumbnail…

Question2

This area chart visualizes crop profits in the USA from 2010 to 2020, showing the trend of profit values over time. The chart uses a grey filled area beneath a black line to represent the data, with blue axis labels and a title indicating the topic. Built with D3 v5, the code employs `scaleTime` and `scaleLinear` for axes, `line` and `area` generators with `curveBasis` for smoothing, and `axisBottom` and `axisLeft` for tick marks. Data is loaded from a CSV file via `csv` and parsed for rendering as an SVG.

Loading thumbnail…

Question1

A pie chart visualizes population distribution across Indian states, with each slice labeled by state name and percentage of the total population. The chart uses D3 v7's `pie` and `arc` generators to compute slice geometry, `scaleOrdinal` with `schemeCategory10` for colors, and SVG `path` elements for rendering. A custom legend displays each state's name, population in millions, and percentage, while labels positioned via `arc.centroid` show percentages directly on slices. Data comes from a CSV file loaded with `d3.csv`, formatted with custom number and percentage helpers.

Loading thumbnail…

Fork of Question1

This pie chart visualizes population distribution across Indian states, showing each state's share as a percentage and its population in millions. The chart uses a color-coded legend with state names, populations, and percentages, alongside labels directly on each slice. Built with D3.js v7, it employs `d3.pie`, `d3.arc`, and `d3.scaleOrdinal` with `schemeCategory10` for colors, loading data from a CSV file of Indian Census 2021 statistics. Population values are parsed and formatted into millions and percentages for clear comparison.

Loading thumbnail…

Question1

This example visualizes the population of Indian states as a pie chart, with a legend positioned to the right. The chart uses a categorical color scheme from `d3.scaleOrdinal` and `d3.schemeCategory10` to distinguish states. The pie segments are generated with `d3.pie`, and their arcs are drawn using `d3.arc` with an inner radius of zero, producing a standard pie. Population values are parsed from a CSV file loaded via `d3.csv`, and labels display raw population in millions. The SVG rendering is driven by D3’s selection and data-join methods, with text elements for the title and legend.

Loading thumbnail…

Fork of Fork of Activity6_Task3

This example visualizes the Iris dataset as a scatter plot, mapping petal length and width along the axes while coloring each point by species. The D3.js code (v6) loads CSV data, applies linear scales, and renders SVG circles with a fixed radius. It uses `scaleLinear`, `extent`, `axisLeft`, `axisBottom`, and `select` to build the chart, with species-specific colors assigned via a switch function. The visualization fills the browser window and includes custom axis labels.

Loading thumbnail…

Question1_PieChart

This pie chart displays the proportional distribution of 30 car brands by their reported values. Each slice is sized according to its numeric value, with labels positioned at the slice centroids. A legend lists the brands and their corresponding colors. Created with D3 v7, the visualization uses `d3.pie()` to compute arc data, `d3.arc()` to generate the SVG paths, and `d3.scaleOrdinal` with `schemeCategory10` for coloring. The SVG container is centered, with labels rendered as text elements and the legend manually constructed.

Loading thumbnail…

Question1

This example visualizes the top five car companies and their market percentages as an interactive pie chart. Each slice displays its percentage value, with a legend showing company names alongside their corresponding percentages and color swatches. The visualization uses D3 v5 APIs including `d3.pie`, `d3.arc`, and `d3.scaleOrdinal` to generate the chart, and loads its data from a CSV file hosted on a GitHub gist. SVG is used for rendering all chart elements and text.

Loading thumbnail…

Activity6_Question4

This bubble chart visualizes device specifications, plotting processor speed on the x-axis against RAM on the y-axis, with bubble size representing storage capacity. The D3.js code builds an interactive SVG with tooltips that reveal each device’s brand and type on hover. It uses color scales (`d3.interpolateTurbo` and `d3.interpolateRainbow`) to distinguish brands and device types, and includes legends for both. The data is loaded from a CSV file, with storage values converted from strings like "1TB" to numeric gigabytes.

Loading thumbnail…

Activity6_Question4

This bubble chart compares laptop brands by processor speed, RAM, storage, and battery life, using bubble size and x/y positioning to reveal trade-offs between performance and portability. Built with Plotly.js (via the `bubblechart.js` script), it renders an interactive scatter plot where hovering exposes exact specifications from the CSV dataset. The chart uses a categorical color scheme for brands and linear axes for numeric attributes, with the `layout` API controlling axis labels and tooltips. Static styling comes from `styles.css`, while the bubble radii encode storage capacity.

Loading thumbnail…

Acitivity6_task2

This interactive bubble chart visualizes the correlation between average horsepower, torque, and highway MPG for various car makes. Each bubble’s position reflects its horsepower (x-axis) and torque (y-axis), while its size encodes highway MPG, and its color distinguishes the car brand. The visualization uses D3.js v7 with SVG rendering, implementing tooltips on mouseover and a legend for MPG values. Data is loaded from a CSV file and processed with d3.csv, while scales and axes are built using d3.scaleLinear and d3.axisBottom/Left.

Loading thumbnail…

Activity6_Task4

A D3.js bubble chart displays the correlation between average horsepower and average torque for different car makes, with bubble size and color encoding highway MPG. The visualization uses `d3.scaleLinear` for positional and size mappings, and `d3.scaleOrdinal` with `d3.interpolateTurbo` for categorical coloring. Hover interactions trigger tooltip handlers that show the car make. The chart is rendered as SVG and includes a legend for both bubble size and color categories.

Loading thumbnail…

Activity6_Task4

This bubble chart visualizes correlations between average horsepower, torque, and highway MPG for various car makes using D3 v7. The chart plots torque on the y-axis and horsepower on the x-axis, with the bubble radius encoding highway MPG. Data is loaded from a CSV file using `d3.csv`. The visualization employs `d3.scaleLinear` for axes and bubble sizing, `d3.interpolateTurbo` for color mapping, and `d3.scaleOrdinal` for categorical coloring. Interactive tooltips appear on mouseover, displaying the car make, while SVG rendering includes custom legends for both bubble size and color categories.

Loading thumbnail…

Activity6_task4

A bubble chart visualizes the correlation between average horsepower, torque, and highway MPG across 31 car makes. Each bubble’s position maps to horsepower (x-axis) and torque (y-axis), while its radius and color encode highway MPG and make, respectively. The visualization uses D3.js v7 to render SVG circles, with a tooltip on hover and a legend for MPG scaling and make colors. Data comes from bubblechart.csv, processed through d3.csv and d3.scaleOrdinal. The chart includes silver axes via d3-axisLinear and uses d3.interpolateTurbo for color mapping.

Loading thumbnail…

Activity6_Task4

This bubble chart visualizes correlations between average horsepower, torque, and highway MPG for various car makes using D3 v7. The chart plots torque on the y-axis and horsepower on the x-axis, with the bubble radius encoding highway MPG. Data is loaded from a CSV file using `d3.csv`. The visualization employs `d3.scaleLinear` for axes and bubble sizing, `d3.interpolateTurbo` for color mapping, and `d3.scaleOrdinal` for categorical coloring. Interactive tooltips appear on mouseover, displaying the car make, while SVG rendering includes custom legends for both bubble size and color categories.

Loading thumbnail…

Activity6_Task

This bubble chart visualizes the relationship between average horsepower, torque, and highway MPG for various car makes using data from a CSV file. Each circle’s position encodes horsepower (x-axis) and torque (y-axis), while its size and color represent highway MPG and the car make, respectively. The chart uses d3.csv for data loading, d3.scaleLinear for axes and bubble sizing, and d3.scaleOrdinal with d3.interpolateTurbo for color mapping. Interactive tooltips display the make on hover, and a legend clarifies bubble size and color encoding. The visualization is rendered with SVG and includes animated transitions for tooltip visibility.

Loading thumbnail…

Activity6_Question4

This example demonstrates a minimal D3.js setup within VizHub, showing how to load the library via UNPKG and use ES6 module imports. It renders a static text message, "Hello VizHub!", into a div element with the ID `message` using the `select` function, while defining a constant `f` and a regular expression `reged` that are declared but unused. The code also imports a local module, `myMessage.js`, to supply the displayed string, with styling applied through the `styles.css` file for centered, large-font text.

Loading thumbnail…

Activity6_Task4

This bubble chart visualizes correlations between average horsepower, torque, and highway MPG for various car makes using D3 v7. The chart plots torque on the y-axis and horsepower on the x-axis, with the bubble radius encoding highway MPG. Data is loaded from a CSV file using `d3.csv`. The visualization employs `d3.scaleLinear` for axes and bubble sizing, `d3.interpolateTurbo` for color mapping, and `d3.scaleOrdinal` for categorical coloring. Interactive tooltips appear on mouseover, displaying the car make, while SVG rendering includes custom legends for both bubble size and color categories.

Loading thumbnail…

Activity6_Task4

This interactive bubble chart visualizes the relationship between average horsepower, torque, and highway MPG for 31 car makes. Each circle's position encodes horsepower and torque on the x and y axes, while its size and color represent highway MPG and car make, respectively. Built with D3.js v7, the SVG visualization includes hover tooltips, a bubble size legend, and a color-coded categorical legend for each manufacturer. Data is loaded from a local CSV file using `d3.csv`.

Loading thumbnail…

Activity6_Question3

This scatter plot visualizes the penguins dataset, showing the relationship between bill length and bill depth for three species (Adelie, Chinstrap, and Gentoo), with each species represented by a distinct color. The plot uses D3 v6, loading data from a CSV file via `d3.csv`, and renders circles as SVG elements with `d3.select` and `d3.scaleLinear` for mapping data to coordinates. Axis labels are added using `d3.axisLeft` and `d3.axisBottom`, and the visualization fills the browser window with a dynamic width and height.

Loading thumbnail…

Activity6-Task3.2

This visualization presents the classic Iris dataset as a scatter plot, mapping sepal length against petal length. Each data point is rendered as a distinct symbol, with the species of each iris encoded by shape. The visualization also includes a custom legend that translates the symbol shapes into their corresponding species names. Built using D3 v7, the example leverages `scaleLinear`, `scaleOrdinal`, `symbolGenerator`, and `axisBottom`/`axisLeft` from the `d3` library, with the underlying data fetched and parsed via `d3.csvParse`.

Loading thumbnail…

Acitivity6_Task3.1

This example renders a scatter plot of the Iris dataset, encoding petal length and petal width on the x- and y-axes, with points colored by species (skyblue for setosa, lightgreen for versicolor, and orange for virginica). The visualization uses D3.js v6 to load the CSV from a GitHub repository, parse the data, and build an SVG plot with scaled linear axes, tick labels, and an axis legend. The code also incorrectly assigns the `rx` and `ry` attributes to circles using sepal measurements, though these do not affect circle appearance. Axis labels are added manually via SVG text.

Loading thumbnail…

Activity6_Question2

This stacked horizontal bar chart shows the distribution of ratings for six food categories, from "Below 4" to "Above 8," with each bar segment representing the percentage of ratings in that range. Built with D3 v7, the visualization uses `d3.stack()` to compute the stacked segments, `d3.scaleLinear()` for the x-axis, and `d3.scaleBand()` for the y-axis categories. Hovering over a segment highlights it and displays a tooltip with the exact percentage, while the data is loaded from a local CSV file. The SVG rendering includes custom axis labels and a legend.

Loading thumbnail…

Acitivity6_Task2

This stacked horizontal bar chart shows the distribution of IMDb movie ratings across six genres, with each bar divided into five rating categories from “below 5.0” to “above 8.5” as proportions of total films. The visualization uses `d3.stack` to accumulate the percentage data per genre, `d3.scaleOrdinal` with a custom color palette for category encoding, and `d3.axisBottom` with gridlines for the shared percentage scale. Interactive tooltips appear on mouseover, displaying the exact percentage for each rating segment, while the SVG rendering uses D3 v7 with data from the provided CSV file.

Loading thumbnail…

Activity6_Question1(2)

This horizontal bar chart displays the populations of the top 20 countries for 2010, using green bars and blue axis lines. The visualization is built with React and D3 v5, using SVG rendering. Data is loaded from a CSV file using D3’s `csv` function, then mapped to scale bands and linear scales. Bars are rendered as SVG `rect` elements, with axis ticks generated by custom `AxisBottom` and `AxisLeft` components. Population values are formatted with D3’s `format` function to abbreviate large numbers (e.g., “1.2B”).

Loading thumbnail…

Fork of Activity6_Question1(1)

This chart displays the population of ten countries in the year 2000 as horizontal bars, with country names on the y-axis and population on the x-axis. 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. AxisBottom and AxisLeft components generate ticks and labels, while Marks renders the rectangles. Data is loaded from a CSV file via d3.csv, and tick labels are formatted using d3.format with abbreviations.

Loading thumbnail…

Activity6_Task1

This bar chart displays the 2020 populations of 30 countries, ranked from largest to smallest along the vertical axis. The horizontal bars use a green fill, with the x-axis formatted in billions using D3’s `format` function. Built with React and D3 v5, the visualization uses `scaleBand` for the categorical country axis and `scaleLinear` for the population scale. SVG rendering handles the axes and marks, with tooltips provided by SVG `<title>` elements showing the formatted population value.

Loading thumbnail…

6 Buddhas

Six overlapping Buddha silhouettes, rendered in vivid, randomized RGB colors, float over a floral background image. The piece is built with React and SVG, mapping nested arrays of coordinates to generate scattered, semi-transparent rectangle elements. The Buddha paths are imported as raw SVG path data, transformed and scaled within grouped `<g>` elements to create the layered composition.

Loading thumbnail…

5 Buddhas

Five geometric Buddha figures overlap against a black background, each composed of layered, semi-transparent polygons with randomized coordinates, colors, and rotations. The SVG shapes are generated through nested JavaScript array maps, producing a dense, abstract mandala-like composition. Built with React, the visualization uses ReactDOM to render SVG elements, while random number generation drives the color, position, and opacity of each polygon without any external data source.