Skip to main content
Log in
S

sahithya.voleti@gmail.com

@sahithya118·21 public vizzes

Loading thumbnail…

Fork of HTML Starter

This area chart visualizes monthly grocery sales revenue using D3.js v6 with SVG rendering. It fetches CSV data from a GitHub Gist, then displays revenue trends across months with labeled axes and steelblue fill. The code employs D3's `scaleBand`, `scaleLinear`, `area`, and `axisBottom`/`axisLeft` APIs, with data converted to numeric values via unary plus operator.

Apr 12, 2024
Loading thumbnail…

Fork of HTML Starter

This visualization displays a filled area chart showing the total number of international students per year. The chart uses a steelblue area to represent the data, with labeled axes for "Year" and "Total International Students." The example loads a CSV dataset from a GitHub gist and parses it using `d3.csvParse` with `d3.autoType` to infer data types. The SVG rendering is built with D3.js v7, using `d3.scaleBand` for the x-axis, `d3.scaleLinear` for the y-axis, and the `d3.area` generator to create the area path. Axis ticks are drawn with `d3.axisBottom` and `d3.axisLeft`.

Apr 12, 2024
Loading thumbnail…

Fork of HTML Starter

This example presents a pie chart of fruit types with their total weights derived from a CSV file hosted on GitHub. The visualization uses D3 v6 to compute the pie layout with `d3.pie()` and generate slices via `d3.arc()`, while `d3.rollup()` aggregates the raw weight data by fruit. Labels appear at each slice’s centroid showing the fruit name and total pounds, and a legend with color-coded rectangles identifies each category. The SVG rendering also includes custom axis titles for context.

Apr 12, 2024
Loading thumbnail…

Fork of HTML Starter

This example presents a pie chart showing the popularity of programming languages based on user counts fetched from a remote CSV file. It uses the D3.js v6 library, specifically the `d3.pie()` and `d3.arc()` functions to compute and draw the pie slices as SVG paths, with `d3.scaleOrdinal` providing categorical colors. A legend is generated alongside the chart, and title labels are added via SVG text elements. The visualization is built within a React framework but renders directly to SVG in the browser, with data loaded using `d3.csv`.

Apr 12, 2024
Loading thumbnail…

Fork of HTML Starter

This example displays an area chart of programming language popularity, showing the number of users for each language. The chart is rendered as an SVG within an HTML page, using D3.js v6 to fetch a CSV file from a GitHub gist. The code constructs the visualization with `d3.scaleBand` for the categorical x-axis and `d3.scaleLinear` for the y-axis, then applies the `d3.area` generator to create the filled area path. Axis labels are added using `d3.axisBottom` and `d3.axisLeft`. The data source is loaded via `d3.csv`, and the final SVG is styled with a steelblue fill.

Apr 8, 2024
Loading thumbnail…

Fork of Fork of Fork of Fork of Fork of Buddha in colors -overlapping Buddha

This visualization displays a densely overlapping Buddha figure rendered with a chaotic scatter of colored polygons. The code generates a grid of 21x21x21 random triangles, each with randomized positions, fill colors, and rotations, creating a vibrant, abstract mosaic layered over a central black-and-white Buddha path. Built with React and rendered as SVG, the piece uses the `Math.random()` function to generate coordinates and RGB values, while the Buddha silhouette is defined by a detailed SVG path element. The result is a dynamic, multicolored interpretation of the iconic Buddha shape.

Apr 5, 2024
Loading thumbnail…

Fork of HTML Starter

This example visualizes the Iris dataset as a scatter plot, mapping sepal length to the x-axis, petal length to the y-axis, and species to point shapes. It uses the D3.js v7 library with the `scaleLinear`, `scaleOrdinal`, `symbolsFill`, and `symbol` APIs to position and render the marks. The visualization also incorporates `axisLeft` and `axisBottom` for chart axes, and a custom shape legend generated with `symbolGenerator`. Data is loaded asynchronously from a CSV file using `csvParse` and rendered into a responsive full-viewport SVG.

Apr 5, 2024
Loading thumbnail…

Activity6_Task4

A bubble chart visualizes the correlation between average horsepower, torque, and highway MPG across 31 car makes, with bubble size encoding MPG and color distinguishing brands. Built with React and D3 v7, the SVG chart uses d3.scaleLinear for axes and bubble radius, d3.scaleOrdinal for color, and d3.axisBottom/axisLeft for ticks. Interactive tooltips appear on mouseover, while legend circles and labels show MPG values. Data comes from the bundled bubblechart.csv file, rendered with animated transitions.

Apr 5, 2024
Loading thumbnail…

Fork of HTML Starter

This visualization displays the classic Iris dataset as a scatter plot, mapping petal length on the x-axis and petal width on the y-axis while coloring each point by species (setosa, versicolor, virginica). The code loads the CSV data via D3's `d3.csv`, uses `scaleLinear` for both axes, and renders SVG circles with species-specific fills. Axis labels and ticks are generated using `axisLeft` and `axisBottom`, with the chart sized to the full window. This is a React-based D3 v6 example, rendered entirely in SVG.

Apr 5, 2024
Loading thumbnail…

Activity 6 Task 2

This stacked bar chart visualizes the distribution of IMDb ratings across six movie genres, with each bar segment representing the percentage of films within a given rating bracket. The chart uses `d3.stack()` and `d3.scaleBand()` to compose the segments, while `d3.scaleOrdinal()` assigns distinct colors. Tooltips reveal exact percentages on mouseover using `d3.select` and event handlers. Data comes from a CSV file, and the SVG rendering applies custom CSS styling for typography and hover effects.

Apr 5, 2024
Loading thumbnail…

Activity 6_Task1

This bar chart displays the population of the top 30 countries in 2020, sorted by country name along the y-axis and population along the x-axis. The visualization uses D3.js v5 scale functions with React components for each chart element, including custom axes for tick marks and labels. Population values are formatted with a compact notation that converts billions (G) to billions (B) for tick labels and tooltips. The data is loaded as a CSV file from a GitHub gist, and the chart renders as an SVG with CSS styling for tick lines and bar fills.

Apr 5, 2024
Loading thumbnail…

Fork of HTML Starter

This gallery example presents a decorative, non-standard data visualization featuring the six reflections of Buddha, rendered as SVG paths layered over a background of colorful flowers. The React application generates an array of random, semi-transparent colored `<null>` shapes, although these effectively render nothing, while a complex, embedded SVG path defines the central figurative image. Using the React and ReactDOM libraries, the visualization applies random color fills and opacities, with the path data drawn from a static source, demonstrating a creative and artistic approach to code-based imagery.

Apr 5, 2024
Loading thumbnail…

Fork of Fork of Fork of Fork of Fork of Buddha in colors -overlapping Buddha

An overlapping Buddha silhouette emerges from hundreds of semi-transparent circles scattered across a black SVG canvas. Each circle’s position and fill color are randomly generated using `Math.random()` within nested `Array.map` iterations, while a fixed Buddha path renders in the foreground with a thick stroke. The React app, using `react@16.10.0`, displays both the random dot field and the path via JSX within a single `<svg>` element.

Apr 4, 2024
Loading thumbnail…

Fork of HTML Starter

This scatter plot maps fruit dimensions, plotting width on the x-axis and height on the y-axis, with each point’s shape encoding the fruit type via a categorical legend. The visualization uses D3.js v7, employing `scaleLinear` for axes, `scaleOrdinal` with `symbolsFill` to assign shapes, and `symbol()` to generate the marks. Data is loaded from a remote CSV file containing fruit measurements, fetched asynchronously and parsed with `csvParse`. Axes and labels are drawn using `axisLeft` and `axisBottom`, while the legend is constructed manually with positioned shape glyphs.

Apr 4, 2024
Loading thumbnail…

Fork of HTML Starter

This visualization shows a scatter plot of fruit dataset attributes, with each point colored by fruit type (apple, orange, banana, grape) and positioned by width on the x-axis and height on the y-axis. The code uses D3.js v6 functions including `scaleLinear`, `extent`, `axisLeft`, `axisBottom`, and `csv` to load data from a GitHub gist. It renders SVG circles with a radius of 5 pixels and includes custom axis labels for "Width" and "Height" in green, with a red title heading. The plot fills the browser window using dynamic width and height values.

Apr 4, 2024
Loading thumbnail…

Fork of HTML Starter

This bubble chart visualizes weather conditions across 20 US cities, plotting average temperature on the x-axis, precipitation on the y-axis, and encoding air quality index through bubble size and color. The visualization uses d3.csv to load Weather.csv data, with d3.scaleLinear for axes and bubble sizing, and d3.scaleOrdinal with interpolateTurbo for color mapping. Interactive tooltips appear on mouseover, while a legend displays both air quality index ranges and city color assignments. The SVG rendering includes animated transitions for tooltip visibility and hover effects.

Apr 4, 2024
Loading thumbnail…

Fork of HTML Starter

This scatter plot visualizes the relationship between height and weight for individuals in a demographic dataset, with points colored by gender (blue for male, pink for female). The visualization uses D3 v6 to load CSV data from a GitHub repository, then renders circles on an SVG canvas. D3's `scaleLinear` and `extent` functions map the raw measurements to pixel coordinates, while `axisLeft` and `axisBottom` create labeled axes for weight and height. The chart fills the browser window and includes custom axis label styling.

Apr 4, 2024
Loading thumbnail…

Fork of HTML Starter

This stacked bar chart visualizes music genre preferences across five age groups, using percentages from a CSV dataset. Each bar represents a genre, segmented into colored sections by age bracket. The visualization uses D3 v7 with `d3.stack()` for data stacking, `d3.scaleLinear()` and `d3.scaleBand()` for scales, and SVG rendering. Interactive tooltips display exact percentage values on hover, while a legend identifies the color encoding for each age group.

Apr 4, 2024
Loading thumbnail…

Fork of HTML Starter

This example shows a horizontal bar chart of population data for 20 countries from 2010, using React with D3 v5 for scales and axes. It loads CSV data via `d3.csv` and renders SVG elements with `scaleBand` for the categorical y-axis and `scaleLinear` for the numeric x-axis. The chart includes formatted tick labels using `d3.format` and displays a custom tooltip on each bar through SVG `<title>` elements. The visualization demonstrates a basic data-loading workflow with `useEffect` and `useState`.

Apr 4, 2024
Loading thumbnail…

Fork of HTML Starter

A horizontal bar chart displays population figures for ten countries in the year 2000, using yellow bars with green tick labels on a red axis grid. Built with React and D3 v5, the visualization loads CSV data via `d3.csv`, scales values with `d3.scaleBand` and `d3.scaleLinear`, and renders SVG rectangles through reusable components. Axis formatting uses `d3.format` to abbreviate large numbers, and tooltips appear via SVG `<title>` elements.

Apr 4, 2024
Loading thumbnail…

activity 6_Task 1

This example demonstrates how to build a modular D3.js application using ES6 modules and local imports. It displays a message in a large, centered text element, with the text content defined in a separate module. The code loads D3 from UNPKG and uses the `select` function to update the DOM, while also showcasing a regular expression and a constant variable. The styling is handled through an external stylesheet.

Apr 3, 2024