sivaparchuri2000@gmail.com

@SivaParchuri472·10 public vizzes

Fork of Fork of areachart

This area chart displays the top 10 U.S. states by population, using data loaded from a CSV file via `d3.csv`. The chart sorts states in descending order and renders a steelblue-filled path generated with `d3.area`, positioning points along a band scale for states and a linear scale for population. Axes are added with `d3.axisBottom` and `d3.axisLeft`, while the SVG canvas is fixed at 800 by 400 pixels. The visualization relies on D3 v7 to bind data and compute the area geometry.

Mar 26, 2025

Loading thumbnail…

Fork of Fork of pie chart

This is a D3.js pie chart visualizing the top 10 U.S. states by population, sourced from a CSV file hosted as a Gist. The chart displays each state’s postal abbreviation as a label on its corresponding slice, with a legend listing full state names and population counts. The visualization uses `d3.csv` for data loading, `d3.pie` for slice geometry, and `d3.arc` for rendering paths, with a `d3.scaleOrdinal` color scheme and SVG text elements for labels.

Mar 26, 2025

Loading thumbnail…

Fork of areachart

This fork of an area chart visualizes the distribution of sepal length across three Iris flower species—Setosa, Versicolor, and Virginica—using data fetched from a remote CSV file. The chart displays fifty flower samples per species on the x-axis, with sepal length in centimeters on the y-axis, comparing the species' trends through filled line areas. Built with Chart.js and rendered on an HTML canvas, the code fetches the CSV, parses it manually, filters rows by species, and draws the chart with distinct colors and translucent fills.

Mar 26, 2025

Loading thumbnail…

Fork of PieChart for Activity 7.1

This example displays the distribution of iris flower species using a pie chart, with counts for setosa, versicolor, and virginica plotted from a CSV file fetched via a Gist URL. The chart, rendered on a Canvas element, uses Chart.js to draw the pie slices with distinct colors and a custom tooltip that labels each segment with its flower count. The code parses the CSV data line-by-line and counts species occurrences before passing the aggregated values to the chart library, which is configured with a fixed, non-responsive size.

Mar 26, 2025

Loading thumbnail…

Fork of Hello HTML

A minimal HTML page titled "Hello HTML" loads with an empty body, illustrating the foundational structure of a web document. The example relies on the standard Document Object Model (DOM) and the HTML `<body>` element to render content. The code consists solely of the DOCTYPE declaration, a `<head>` section with a title, and an empty `<body>` tag, demonstrating the basic skeleton required for any web page. This fork of the original "Hello HTML" example serves as a starting point for adding visual elements, though the current version renders no visible output. It uses no external libraries or data sources.

Mar 26, 2025

Loading thumbnail…

Fork of Scatterplot

This fork of a scatterplot visualizes population by state using an SVG-based D3.js chart. The code loads CSV data from a GitHub Gist, maps states to the x-axis via `d3.scaleBand`, and population values to the y-axis with `d3.scaleLinear`. Circles mark each state's population, with rotated x-axis labels (`d3.axisBottom`) and added titles and axis labels. The chart uses D3 v7 and renders entirely with SVG elements.

Mar 25, 2025

Loading thumbnail…

Fork of Fork of Fork of Fork of Fork of Heatmap in D3

This example plots population against rank using a scatter plot of steel-blue circles on an SVG canvas. The code loads CSV data via `d3.csv` and applies `d3.scaleLinear` for both axes, mapping rank to the x-axis and population to the y-axis. It renders circles with `d3.selectAll('circle').data(data).enter()`, and adds axes, labels, and a title using the standard `d3.axisBottom` and `d3.axisLeft` APIs. The data originates from a remote gist URL provided in the source.

Mar 25, 2025

Loading thumbnail…

Fork of Scatterplot

This example visualizes the relationship between lung capacity and age, with each dot representing an individual and a hover tooltip revealing their disease type. Built with React and D3 v5, the scatterplot uses `scaleLinear` and `extent` to map the CSV data onto axes labeled "Age (years)" and "Lung Capacity." The code renders SVG elements via `React.createElement`, applies axes with `axisLeft` and `axisBottom`, and implements interactive tooltips using D3's `select` on mouse events.

Mar 25, 2025

Loading thumbnail…

Fork of scatter plot

This scatter plot visualizes population by U.S. state, with each state represented as a circle positioned along a categorical x-axis and a linear y-axis scaled to population values. The code loads CSV data via d3.csv, converts population strings to numbers, and renders circles using d3.scaleBand and d3.scaleLinear for axes. Circles are appended to an SVG container with fixed coordinates computed from the scales, using a steelblue fill and a 5-pixel radius. The visualization highlights population disparities across states while maintaining a simple, readable layout.

Mar 25, 2025

Loading thumbnail…

scatter plot

This scatter plot displays the population of each U.S. state as a circle, with states positioned along the x-axis and population values mapped to the y-axis. It uses D3 v7 to load CSV data from a GitHub gist, converts the population values to numbers, and renders the plot as an SVG with `d3.scaleBand` for the categorical state axis and `d3.scaleLinear` for the population axis.

Mar 25, 2025