Skip to main content
Log in
H

himavinaytummala@my.unt.edu

@Vnai307·14 public vizzes

Loading thumbnail…

US Annual Auto Sales

This chart shows US annual auto sales over time, with a line/area plot tracing the sales trend by year. The visualization uses D3 version 5’s `scaleTime` and `scaleLinear` for the axes, with a filled light-blue area beneath the line via the `area` generator. The code reads CSV data from a GitHub gist, parses the Year and Sales columns, and renders the chart as scalable vector graphics (SVG). Axis labels and a title are added using D3’s text elements, while the grid lines come from the `axisLeft` and `axisBottom` functions with negative tick sizes.

Apr 13, 2024
Loading thumbnail…

Top India Car Sales

This pie chart visualizes the top five Indian car manufacturers by annual sales, with each slice labeled with its sales figure in thousands. The visualization loads CSV data from a GitHub gist, sorts and filters the dataset, then uses d3.pie and d3.arc to generate SVG paths for the chart. A d3.scaleOrdinal assigns distinct colors to each brand, while custom legends and text labels are positioned using arc.centroid. The code imports specific functions from d3 v5, including csv for data loading and format for tick label formatting.

Apr 13, 2024
Loading thumbnail…

Bubble Chart

This bubble chart visualizes Walmart sales data, plotting total sales against units sold for each item category, with bubble radius scaled proportionally to sales figures. The chart loads a CSV file from a GitHub gist via the Fetch API, parses the data with string manipulation, and renders using Chart.js on an HTML Canvas element. Six semi-transparent color categories distinguish the data points, while the chart's non-responsive configuration keeps dimensions fixed at 900 by 400 pixels.

Apr 6, 2024
Loading thumbnail…

Bubble Chart of Population Data

This example displays the top 10 most populous countries as a horizontal bar chart, with country names on the y-axis and population values on the x-axis. Built with React and D3 v5, it uses `scaleBand` for the categorical y-axis and `scaleLinear` for the quantitative x-axis, rendering SVG rectangles for each bar. Population data comes from the United Nations World Population Prospects 2019, formatted with D3’s `format('.2s')` to abbreviate large numbers. The visualization includes styled axes and a tooltip using the SVG `<title>` element.

Apr 6, 2024
Loading thumbnail…

Penguin Dataset Scatter Plot (with Shapes)

This example displays a scatter plot of penguin measurements, mapping flipper length and body mass while encoding species identity through distinct marker shapes. The visualization uses D3 v5 API functions like `csv`, `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to load data, scale axes, and render SVG paths. Three species—Adelie, Gentoo, and Chinstrap—appear as circles, crosses, and triangles, respectively, with all points filled in steelblue. The dataset is fetched from a GitHub-hosted CSV file, and the chart fills the browser viewport.

Apr 6, 2024
Loading thumbnail…

Penguin Dataset Scatter Plot (with Color)

This scatter plot visualizes the Palmer Penguins dataset, mapping flipper length on the x-axis and body mass on the y-axis. Each circle is colored by penguin species—blue for Adelie, green for Gentoo, and red for Chinstrap—allowing quick comparison of morphological traits across groups. The D3 code loads the data via `csv()`, uses `scaleLinear()` for axis scaling, and renders circles with SVG, while `axisBottom()` and `axisLeft()` add labeled axes.

Apr 6, 2024
Loading thumbnail…

Religion by Country

This stacked bar chart displays the estimated religious composition of the 20 most populous countries in 2010, based on data from the Pew Research Center's Global Religious Landscape. Each bar represents a country, segmented by religion, with population measured in millions. Hovering over a legend item highlights that religion across all countries while fading the others. The visualization uses d3's `scaleOrdinal` and `schemeCategory10` for colors, `flatRollup` and `stack` for data structuring, and a custom `colorLegend` for interaction.

Apr 6, 2024
Loading thumbnail…

Religion by Country

This stacked bar chart visualizes the estimated religious composition of the world’s 20 most populous countries in 2010, based on data from the Pew Research Center’s Global Religious Landscape. Each bar is segmented by religion, with colors from D3’s `schemeCategory10`, enabling quick comparison of dominant faiths like Christianity, Islam, and Hinduism across nations. Hovering over the legend highlights the corresponding segments within the bars, while dimming others for focused inspection. The visualization is built using D3’s `scaleOrdinal`, `scaleLinear`, `scaleBand`, and `stack` APIs, with custom color legend and responsive axes handling.

Apr 6, 2024
Loading thumbnail…

Religion by Country

This stacked bar chart visualizes the estimated religious composition of the world’s 20 most populous countries in 2010, based on data from the Pew Research Center’s Global Religious Landscape. Each bar is segmented by religion, with colors from D3’s `schemeCategory10`, enabling quick comparison of dominant faiths like Christianity, Islam, and Hinduism across nations. Hovering over the legend highlights the corresponding segments within the bars, while dimming others for focused inspection. The visualization is built using D3’s `scaleOrdinal`, `scaleLinear`, `scaleBand`, and `stack` APIs, with custom color legend and responsive axes handling.

Apr 6, 2024
Loading thumbnail…

Activity 6_Task 1.1

This example displays a horizontal bar chart of the top ten countries by population in the year 2000, using a light green fill for bars and blue tick lines. It loads data from a CSV file via `d3.csv`, formats the x-axis tick labels with `d3.format`, and renders the visualization as an SVG using React components. The chart uses `d3.scaleBand` for the categorical y-axis and `d3.scaleLinear` for the quantitative x-axis, with tooltips showing the population value on each bar.

Apr 6, 2024
Loading thumbnail…

Activity 6_Task 1.2

This example renders a horizontal bar chart of 2010 population data for 20 countries, sourced from a CSV file hosted as a GitHub gist. The visualization is built with React and rendered as SVG, using D3 v5 functions such as `scaleBand`, `scaleLinear`, `max`, and `format` for data handling and scaling. Interactive tooltips display the population value for each bar, and the axes are drawn with custom components, with blue tick lines and light green marks.

Apr 6, 2024
Loading thumbnail…

Activity 6_Question 1.1

This bar chart displays the population of ten countries in 2010, sourced from a CSV file. It uses React to render SVG elements, with D3 v5 handling data loading via `csv`, scales through `scaleBand` and `scaleLinear`, and axis generation. The bar marks include tooltips, and the x-axis labels are formatted using D3's `format` function.

Apr 6, 2024
Loading thumbnail…

Activity 6_Task 1

This example demonstrates a simple text display using D3.js. It loads D3 v5 from a CDN and uses the `d3.select` API to target an HTML element by ID, setting its text content to a greeting message. The message itself is imported from a local ES6 module, showing how to mix external libraries with custom modular code. The page is styled with CSS, centering the large "Hello VizHub!" text.

Apr 6, 2024
Loading thumbnail…

5 Reflections of Buddha

Five overlapping Buddha silhouettes in vivid, randomized colors float against a black background, creating a kaleidoscopic, translucid composition. The piece is built with React and rendered as SVG, layering thousands of tiny polygon shapes generated by nested loops. Each polygon uses random values for position, fill color, and rotation, producing a dense, shimmering field of geometric noise. The five distinct Buddha paths are then overlaid on top, their outlines defined by complex SVG path data. The result is a spiritual iconography transformed into a chaotic, generative art piece, where order and randomness collide.

Apr 6, 2024