Skip to main content
Log in
V

vishnupriyapalagiri@gmail.com

@Vishnupriya987·19 public vizzes

Loading thumbnail…

Tutoria_9

This animated scatterplot cycles through four Iris flower measurements—petal width, sepal width, petal length, and sepal length—by continuously updating the x-axis scale. The visualization loads CSV data from a GitHub gist, uses D3’s `csv`, `scaleLinear`, `extent`, and `axisBottom`/`axisLeft` APIs, and encodes each species with a distinct color. Overlapping circles and repeated text labels are redrawn on every interval, with a fixed legend and rotating axis titles demonstrating a reusable `scatterPlot` module.

Apr 22, 2024
Loading thumbnail…

area_chart_activity_9

This area chart shows the daily closing price of a stock over time, with a light green filled region beneath a green line, both scaled to fit the SVG canvas. The chart includes a labeled x-axis for dates and y-axis for price in dollars, plus a bold title. The visualization uses D3 v4 with `d3.area`, `d3.scaleTime`, `d3.scaleLinear`, `d3.axisBottom`, and `d3.axisLeft`, reading tab-separated time-series data from a remote CSV file. The line uses `d3.curveLinear` to connect data points without smoothing.

Apr 21, 2024
Loading thumbnail…

Pie_chart_activity_9

This pie chart visualizes language usage distribution from a CSV file, with each slice colored by language and labeled interactively through a tooltip showing exact counts in millions. It uses D3.js v6’s `d3.pie`, `d3.arc`, and `d3.scaleOrdinal` to generate SVG paths with hover transitions, alongside a custom legend mapping the color domain. The chart loads data asynchronously via `d3.csv` and positions the pie off-center with a fixed radius, rendering static arcs with animated tooltip opacity changes.

Apr 21, 2024
Loading thumbnail…

Activity8_Question1.2

A horizontal bar chart displays the 20 most populous countries in 2010, with each bar labeled by country name and scaled by population in billions. The visualization uses React components with D3 v5 utilities, including `scaleBand` for the categorical y-axis and `scaleLinear` for the quantitative x-axis. Data is loaded asynchronously from a CSV file via `d3.csv`, and SVG rectangles render the bars with tooltips showing formatted population values. Axes are built from custom React components that map D3 scales to SVG elements.

Apr 11, 2024
Loading thumbnail…

Activity8_Question1

This visualization displays the population of ten countries in the year 2000 as a horizontal bar chart. Each bar’s length is proportional to population value, with country names on the y-axis and a formatted population scale (using abbreviations like “B” for billions) on the x-axis. The chart uses React components with d3.scaleBand and d3.scaleLinear for positioning, and d3.format for tick labels. Data is loaded asynchronously from a CSV file using d3.csv, and rendered as SVG rectangles with native tooltips.

Apr 11, 2024
Loading thumbnail…

Fork of Activity8_Question4

This animated bubble chart compares urban population growth and mobile cellular subscriptions across the United States, Canada, and Mexico. Data points are rendered as SVG circles, with position encoding urban growth and subscription totals, while radius reflects subscriptions per 100 people. The visualization uses D3.js v7 scaling functions and axes, along with mouseover, mousemove, and mouseleave events for tooltip interaction. Data is loaded from a CSV file, and colors distinguish each country.

Apr 10, 2024
Loading thumbnail…

Activity8_Question4

This example demonstrates a minimal VizHub project that loads D3 v5 via UNPKG and uses an ES6 module import to display a message in the browser. The code imports the `select` function from D3 and a local `message` string from `myMessage.js`, then sets the text content of a `#message` div to that string. The page is styled with centered, large text using CSS. It shows how to combine a CDN-hosted library with local JavaScript modules in a simple HTML page.

Apr 10, 2024
Loading thumbnail…

Activity8_Question3

This scatter plot visualizes the relationship between height and weight, with points colored by category to reveal grouping patterns. The visualization renders as an SVG generated with D3.js v7, using `d3.csv` to load data from a remote GitHub repository and `d3.scaleLinear` for axis scaling. Points are drawn as SVG circles and colored via `d3.scaleOrdinal`, with interactive tooltips appearing on mouseover. The chart includes axes and a legend created through custom drawing functions, all styled through a separate CSS file.

Apr 10, 2024
Loading thumbnail…

Fork of Activity8_Question2

A stacked bar chart displays population distribution across seven age groups for each US state, using data from a local CSV file. The chart employs D3 v7’s `d3.stack`, `d3.scaleBand`, `d3.scaleLinear`, and `d3.scaleOrdinal` to render SVG rectangles. Hovering over a bar segment triggers a tooltip showing the state, age group, and exact population value, implemented via mouseover and mouseout events with CSS-styled tooltip divs.

Apr 10, 2024
Loading thumbnail…

Activity8_Task2

A stacked horizontal bar chart shows the percentage distribution of IMDb movie ratings across six genres, with each bar segmented into five rating brackets from below 5.0 to above 8.5. Built with D3 v7 and rendered as SVG, the visualization uses `d3.stack()` to compute the stacked series and `d3.scaleOrdinal` with a custom color palette to distinguish rating categories. Tooltips display exact percentages on mouseover, while axis labels and a title clarify the chart's purpose. Data comes from the provided CSV file.

Apr 10, 2024
Loading thumbnail…

Activity8_Question2

This example demonstrates a minimal D3.js application that loads a local ES6 module and uses a d3 selection to update the text content of an HTML div element. The code imports the `select` function from the d3 library and a `message` string from a separate local module via ES6 import syntax. A stylesheet centers the message and sets its font size to 12em. The page structure uses an index.html file that includes D3 from a CDN and loads a bundled JavaScript file.

Apr 10, 2024
Loading thumbnail…

Activity8_Task4

This bubble chart visualizes the relationship between average horsepower, torque, and highway MPG across different car makes. Each circle’s position encodes horsepower and torque on the x- and y-axes, while its radius and color represent highway MPG and manufacturer, respectively. The visualization uses D3.js (v7) with SVG rendering and includes interactive tooltips on hover, along with a legend showing MPG scale and color-coded makes. Data is loaded from a CSV file, and the chart animates transitions when the tooltip appears or moves.

Apr 10, 2024
Loading thumbnail…

Activity8_Task3.2

This example visualizes the Iris dataset as a scatter plot, mapping sepal length to the x-axis and petal length to the y-axis. The code uses a d3 scaleOrdinal and symbol generator to assign different shapes to each iris species, with a legend positioned on the right side. Data is loaded asynchronously via fetch from a GitHub-hosted CSV, parsed with d3.csvParse, and rendered using a SVG canvas. Axes are built using axisLeft and axisBottom.

Apr 10, 2024
Loading thumbnail…

Activity8_Task3.1

This scatter plot visualizes the Iris dataset, mapping petal length and width on the x- and y-axes while coloring each point by species (setosa, versicolor, virginica) using distinct colors. The D3.js v6 code loads CSV data via `d3.csv`, scales the variables with `d3.scaleLinear`, and renders SVG circles with axes generated by `d3.axisLeft` and `d3.axisBottom`. Axis labels are added as rotated text elements, and the chart fills the browser window using `window.innerWidth` and `window.innerHeight`.

Apr 10, 2024
Loading thumbnail…

Activity6_task2

This example demonstrates a basic D3.js setup that renders a text message into a web page. It shows how to import D3 modules and local ES6 modules, using `select` from D3 to set the content of a `div` element with the ID `message`. The page loads D3 v5 from a CDN via UNPKG and includes a separate CSS file for styling. The rendered message comes from a local module, and the code also defines an unused number variable and regular expression.

Apr 10, 2024
Loading thumbnail…

Activity6_task2

This chart visualizes the distribution of IMDb ratings across six movie genres, showing the proportional share of films within each rating category from "below 5.0" to "above 8.5" as stacked horizontal bars. The code uses d3.v7 with SVG rendering and d3.stack() to generate the stacked layout, d3.scaleBand() for the genre axis, and d3.scaleLinear() for the percentage scale. Interactive tooltips display exact percentages on mouseover, while the data is loaded from a CSV file containing aggregated genre-rating proportions.

Apr 10, 2024
Loading thumbnail…

Activity8_Task2

This stacked bar chart visualizes IMDb movie ratings across six genres, showing the proportion of movies falling into five rating brackets from below 5.0 to above 8.5. Each horizontal bar represents a genre, segmented by rating category using d3.stack() and colored with a d3.scaleOrdinal. The visualization uses d3.axisBottom with tick lines to read percentages along the x-axis, while hover interactions via mouseover events display exact percentages through a tooltip. Data comes from a CSV file containing genre-specific rating distributions.

Apr 10, 2024
Loading thumbnail…

Activity8_Task1

A horizontal bar chart displays the 2020 populations of 30 countries, sorted alphabetically by country name, with green bars extending from a blue left axis. The visualization uses React to render SVG elements, with d3.scaleBand for the categorical y-axis and d3.scaleLinear for the quantitative x-axis, formatted using d3.format. Population data is loaded from a CSV file via d3.csv, and hover tooltips reveal exact values through SVG title elements.

Apr 10, 2024
Loading thumbnail…

5 Buddhas

5 Buddhas layers a meditation on multiplicity and the digital divine. Constructed with React and rendered as SVG, the piece generates a field of small rotated polygons whose random positions and RGB colors are driven by repeated nested mappings over an array of numbers. At the center of this chaotic, colorful grid, five identical golden Buddha figures are placed, echoing the traditional Thai 'Buddha in colors' motif. The juxtaposition of the rigid, computational geometry with the serene, repetitive iconography creates a visual meditation on pattern, chance, and spiritual symbolism in a digital medium. The artwork uses a black background with an intentionally over-scaled type style to create a bold, dramatic presentation. The piece references and remixes the "Buddha in colors" series, exploring themes of repetition, variation, and algorithmic aesthetics.

Mar 16, 2024