Skip to main content
Log in
J

Jhansi Balla

@jhansiballa25·14 public vizzes

Loading thumbnail…

Activity7 q2

This example shows the opening bid price of USD over the months of 2024 as a smooth area chart, combining a gray filled area beneath an orange line to emphasize trends. The visualization uses D3 v5 with SVG rendering, employing `scaleTime` and `scaleLinear` to map dates and prices, while `line` and `area` generators with `curveBasis` produce the smoothed paths. Data is loaded from a CSV file via `csv`, with axis labels and formatted ticks generated through `axisBottom` and `axisLeft`.

Nov 7, 2024
Loading thumbnail…

Activity7 q1

This pie chart visualizes US state-wise mortality rates, with each slice representing a state’s death count and labeled with its numeric value. A legend on the right identifies states by color. The chart uses D3 v5 APIs including `d3.pie`, `d3.arc`, `d3.scaleOrdinal`, and `d3.csv` to load data from a GitHub gist. Data is rendered as SVG paths, with labels positioned via `arc.centroid` and formatted using `d3.format`.

Nov 7, 2024
Loading thumbnail…

Activity6_Question4

This animated bubble chart compares life expectancy against healthcare spending across multiple countries from 1970 to 1974. Each circle represents a country-year observation, with bubble size scaled to spending and color uniquely identifying each country. Hovering reveals a tooltip with exact values. The visualization uses D3 v7 with SVG rendering, employing `d3.scaleLinear` for axes and bubble sizing, `d3.scaleOrdinal` for color assignment, and CSV data loaded via `d3.csv`. Interactive tooltips respond to mouse events for enhanced data exploration.

Oct 24, 2024
Loading thumbnail…

Activity6_Task4

This bubble chart visualizes the correlation between average horsepower and torque for various car manufacturers, where the size of each bubble represents the highway MPG and the color encodes the car make. The chart maps horsepower on the x-axis and torque on the y-axis, with numeric axes and a legend for circle sizes. Built with D3.js v7, it uses `d3.scaleLinear` for axes and bubble sizing, `d3.scaleOrdinal` for color mapping, and `d3.interpolateTurbo` for generating a color palette. Interactive tooltips appear on hover, displaying the make of each vehicle, while the visualization is rendered as SVG with a static dataset from a CSV file.

Oct 24, 2024
Loading thumbnail…

Activity6_Question3

This interactive scatter plot visualizes the Palmer Penguins dataset, showing the relationship between bill length and bill depth for three penguin species. The plot uses color-coded circles (skyblue for Adelie, lightgreen for Chinstrap, orange for Gentoo) to distinguish species. Built with D3 v6 and React, the visualization renders as SVG elements, using `scaleLinear` for axes, `extent` for domain computation, and `axisLeft`/`axisBottom` for chart labeling. Data is loaded via `csv()` from a remote gist URL, with each point's position mapped from numeric values parsed from the dataset.

Oct 24, 2024
Loading thumbnail…

Activity6_Task3.2

This scatter plot visualizes the Iris dataset, mapping sepal length against petal length for individual specimens. Data points are rendered as distinct shapes, with a legend denoting the species of each flower. The visualization employs the D3.js library, utilizing its `scaleLinear`, `scaleOrdinal`, `symbolsFill`, and `axisLeft`/`axisBottom` components. It reads the dataset from a remote CSV file, parses it with `csvParse`, and constructs the chart using a custom React framework, with axes created via the `axes` module.

Oct 24, 2024
Loading thumbnail…

Acivity6_Task3.1

This visualization presents a scatter plot of the Iris dataset, mapping petal length against petal width, with points colored by species (setosa, versicolor, virginica). The chart uses D3 v6's `csv`, `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` APIs, rendering via SVG. Data is loaded from a GitHub gist, and the plot includes labeled axes with custom styling. Although the code includes mappings for sepal length and width as `rx` and `ry` attributes, these are not applied as visual encodings, so the primary display remains the petal dimensions.

Oct 24, 2024
Loading thumbnail…

Activity6_Question2

This stacked bar chart shows the distribution of music ratings across five social media platforms (Twitter, Instagram, TikTok, Facebook, Snapchat), split into five rating brackets from below 5.0 to above 8.5. Each bar represents a platform, with colored segments showing the percentage of ratings in each bracket. The visualization uses D3 v7’s `d3.stack()` and `d3.scaleOrdinal` for color encoding, rendered as SVG with a tooltip on mouseover displaying exact percentages via `d3.format`. Data comes from a local CSV file.

Oct 24, 2024
Loading thumbnail…

Activity6_Task2

This is a stacked horizontal bar chart showing the percentage distribution of IMDb movie ratings across six genres, with ratings grouped into five categories from "below 5.0" to "above 8.5." The visualization uses d3.svg to render four-chart series with d3.stack for the stacked bars, d3.scaleOrdinal for color mapping, and d3.scaleBand for categorical positioning. Interactive tooltips appear on hover using D3 event handlers, displaying the exact percentage for each genre-rating combination. Data comes from a local CSV file containing proportional values per genre.

Oct 24, 2024
Loading thumbnail…

Activity6_Q1.2

This example displays a horizontal bar chart comparing the 2010 population of 20 countries, with each bar’s length proportional to population and a tooltip showing the formatted value. The visualization is rendered as an SVG using React and D3 v5, with `scaleBand` for the y-axis and `scaleLinear` for the x-axis. The data is loaded via `d3.csv` from a GitHub gist, and axis ticks are formatted using D3’s `format`.

Oct 24, 2024
Loading thumbnail…

Activity6_Q1.1

A horizontal bar chart displays the population of ten countries in the year 2000, with bars extending from left to right and ordered by country name. The visualization uses React with D3 v5, employing `scaleBand` for the categorical y-axis and `scaleLinear` for the quantitative x-axis. Data is loaded from a CSV file using D3's `csv` function. Each bar includes a native SVG `<title>` tooltip showing the formatted population value, and the x-axis tick labels convert SI units from 'G' to 'B' using D3's `format`.

Oct 24, 2024
Loading thumbnail…

Activity6_Task1

This horizontal bar chart displays the 2020 population of 30 countries, sorted from largest to smallest on the y-axis. The visualization uses React with D3 v5 scales, where `scaleBand` positions the country bars and `scaleLinear` maps population values to bar widths. The SVG rendering includes custom `AxisBottom` and `AxisLeft` components that format tick labels, and each bar contains a native HTML `<title>` tooltip showing the exact population value. Data is loaded from an external CSV file using D3's `csv` function.

Oct 24, 2024
Loading thumbnail…

6 buddha's

Six repeated Buddha silhouettes overlap in a grid-like arrangement, each rendered as a violet SVG path filled with a white stroke against a black background. The visualization uses React and ReactDOM to render the SVG elements, with each path's `d` attribute containing the same complex coordinate data transformed into different positions and scales. The background is a green flower image.

Oct 19, 2024
Loading thumbnail…

5 buddhas

Five buddhas overlap in a colorful, abstract composition rendered as SVG polygons on a black background. The visualization uses React to map a nested array of numbers into randomly positioned, rotated diamond shapes, while a large pre-defined path in each corner depicts a buddha figure. The code relies on React and ReactDOM for rendering, with random values driving polygon placement, fill colors, and opacity.

Oct 13, 2024