Skip to main content
Log in
S

sarasaketh3@gmail.com

@sarasaketh3·18 public vizzes

Loading thumbnail…

ICE 7 - Area Chart SAKETH SARA

An area chart displays sales units per product, with a blue gradient fill beneath a line and circular dots marking each data point. The visualization loads CSV data from a GitHub gist, using D3 v7 scales, the `d3.area` and `d3.line` generators with `curveMonotoneX` smoothing, and an SVG rendering. Axes include gridlines, rotated product labels on the x-axis, and tooltips that appear on mouseover for individual values.

Oct 27, 2025
Loading thumbnail…

LINE CHART - ICE 7 SAKETH SARA

This line chart compares sales and profit values across a series of products. It uses D3 v7 to load a CSV file, map the data to points, and render two smooth monotone lines in blue and green, with circular markers for each product. The SVG visualization includes rotated category labels, horizontal grid lines, a legend, and interactive tooltips that appear on hover. The chart uses `d3.csv` with `d3.autoType`, `d3.scalePoint`, and `d3.axisBottom` to construct the axes and visual encoding.

Oct 27, 2025
Loading thumbnail…

ICE 7 LINE CHART - SAKETH SARA

This line chart displays music revenue from 2015 to 2022, plotting seven data points with a red line and white-stroked dots on a fixed 750×420 SVG canvas. The visualization uses D3 v7 to map year values to x- and y-coordinates, with light gray grid lines and labeled axes. An interactive tooltip appears on hover, showing the exact revenue for each point. The chart is rendered as scalable vector graphics, with styling controlled through a separate CSS file.

Oct 27, 2025
Loading thumbnail…

PIE - ICE 7 SAKETH SARA

This pie chart visualizes annual sales share by product category, with each slice labeled by product name and percentage of total sales. The visualization uses D3.js v7’s `d3.pie()` and `d3.arc()` generators to compute and draw the arcs, while `d3.scaleOrdinal` with the Tableau10 color scheme assigns distinct colors to each product. Data is loaded from a remote CSV file via `d3.csv`, and the chart includes labeled polylines connecting slices to text annotations, plus a legend for quick reference.

Oct 27, 2025
Loading thumbnail…

ICE-7 SAKETH SARA PIE

This example shows a donut-style pie chart of product sales loaded from a CSV file, with an ordinal color scale and a legend. Built with D3 v7, it uses `d3.pie()` and `d3.arc()` to generate the slices, while `d3.scaleOrdinal()` and `d3.schemeTableau10` assign colors. Tooltips appear on mousemove over each arc, and labels display for products with sales values above 90. The chart is rendered as SVG within an HTML page, styled by a linked stylesheet.

Oct 27, 2025
Loading thumbnail…

ICE-7 SAKETH SARA

This scatter plot displays the relationship between sales and profit for a set of products. The visualization maps sales values along the horizontal axis and profit along the vertical axis using d3.scaleLinear and d3.axisBottom/axisLeft. Data is loaded asynchronously from a CSV file via d3.csv with d3.autoType. Each product is rendered as an SVG circle with fill color #2563eb, and hovering reveals a custom tooltip showing the product name, sales, and profit values.

Oct 27, 2025
Loading thumbnail…

ICE 7

This example shows a reusable D3 scatter plot of product sales versus profit, with each circle representing an item and axes scaled to the data. It fetches CSV data from a GitHub Gist, falling back to embedded data if the request fails. The visualization is built with `d3.scaleLinear`, `d3.extent`, `d3.axisLeft`, and `d3.axisBottom`, and drawn as SVG circles. The plot is sized to the window and styled with the Share Tech font, using a minimal, full-screen layout.

Oct 26, 2025
Loading thumbnail…

Saketh Sara ICE-7

This example shows a reusable scatter plot of sales versus profit for ten product categories, with each point colored steelblue and annotated with tooltips. The visualization is rendered as an SVG using D3 v7, employing `d3.scaleLinear` for axes and `d3.axisBottom`/`d3.axisLeft` for ticks. Data is loaded asynchronously from a local CSV file via `d3.csv`. The chart is wrapped in a custom `scatterPlot` function that accepts configuration options, demonstrating a modular approach for reuse.

Oct 26, 2025
Loading thumbnail…

FORK OF ICE PART 3

This example presents a multi-series Chart.js visualization of global smartphone data from 2020 to 2024, combining quarterly unit sales and revenue trends. An amber bar chart shows total units across all regions, while blue, orange, and green lines track unit sales for APAC, Europe, and Americas respectively; a purple line on a secondary axis plots revenue in millions of USD. The chart uses a canvas element, loads data from a remote CSV file via the Fetch API, and is configured with dual y-axes for units and revenue.

Oct 20, 2025
Loading thumbnail…

ICE 6 PART 3

This example displays two related time-series charts. The first chart plots three metrics from a local CSV file over time as multi-series line graphs. The second chart combines a bar chart of total units with a line showing revenue. The code uses Chart.js, the Chart.js date-fns adapter, and PapaParse to parse the data. It robustly detects date and numeric columns, falling back to category labels if time parsing fails.

Oct 20, 2025
Loading thumbnail…

Fork of ICE PART 2

This interactive scatter plot from the “ICE PART 2” fork visualizes the Iris dataset, comparing sepal length against petal length. Each point represents an individual flower, colored by species (setosa, versicolor, virginica) using a palette of up to six colors. Built with Chart.js and PapaParse, the code loads the `iris.csv` file, groups rows by species, and renders a scatter chart with custom tooltips showing measurement values. The visualization includes axis labels and a legend to differentiate the three flower types.

Oct 20, 2025
Loading thumbnail…

Fork ICE PART 1

This example visualizes average smartphone sales by brand using a bar chart, with brands like Apple, Samsung, and Xiaomi sorted descending by their mean units sold. It loads a CSV dataset via PapaParse, aggregates the raw records by brand, and computes each brand’s average sales value. The chart is rendered on a Canvas element using Chart.js, with horizontal labels and a zero-based y-axis for the sales metric.

Oct 20, 2025
Loading thumbnail…

Fork of ICE

This fork of ICE renders a bar chart that shows the average of a detected numeric column grouped by a categorical column, with the data pulled from a remote Gist-hosted CSV file. The code uses d3.csv to load the data, heuristics to pick suitable categorical and numeric columns, and d3.rollups with d3.mean to aggregate the values. The resulting bars are drawn with d3.scaleBand and d3.scaleLinear, and the visualization includes axis labels, rotated category labels, and a grid for easier reading.

Oct 20, 2025
Loading thumbnail…

Fork of iCE 6 PART 1

This horizontal bar chart shows the top ten brands ranked by their popularity score, with each bar’s length proportional to the score and a color gradient from light to dark teal indicating rank. The data, loaded from a CSV Gist via `d3.csv` and `d3.autoType`, is sorted descending and sliced to ten entries. Built with D3 v7, the visualization uses `d3.scaleLinear` for the x-axis, `d3.scaleBand` for the y-axis categories, and `d3.axisBottom`/`d3.axisLeft` for gridlines and labels. Alternating background bands and value labels are rendered as SVG elements.

Oct 20, 2025
Loading thumbnail…

Fork of BAR CHART

This horizontal bar chart shows the top ten athletes by popularity score, with rounded bars colored on a teal gradient to rank them from most to least popular. Exact popularity values appear beside each bar, while a light striped background and gridlines aid comparison. The visualization loads a CSV dataset from a GitHub gist and sorts it with d3.descending before slicing the top ten records. It uses d3.csv, d3.autoType, d3.scaleLinear and d3.scaleBand, and renders axes and labels via d3.axisBottom, d3.axisLeft, and SVG text elements.

Oct 20, 2025
Loading thumbnail…

Fork of ICE 6

This visualization displays the popularity scores of the top 120 athletes as a horizontal bar chart, with athletes sorted in descending order and sampled x-axis ticks to manage label clutter. It uses D3 v7 APIs including `scaleBand` for the categorical axis, `scaleLinear` for the score range, and `axisBottom` and `axisLeft` for tick generation. Data is loaded from a remote CSV file via `d3.csv` with `d3.autoType` coercion, and bars are rendered as SVG rectangles with tooltips showing each athlete’s name and score.

Oct 20, 2025
Loading thumbnail…

Fork of D3 Starter

This bar chart visualizes the popularity scores of 120 athletes, sorted in descending order, with truncated tick labels and a sampled axis to manage the dense categorical axis. Built with D3 v7, it loads CSV data via `d3.csv` and `d3.autoType`, then uses `d3.scaleBand` and `d3.scaleLinear` to map names and scores. The SVG output is rendered using `d3.select`, `join`, and axis generators like `d3.axisBottom` and `d3.axisLeft`. Tooltips are added via SVG `<title>` elements, and the chart includes clear axis titles and a main heading.

Oct 20, 2025
Loading thumbnail…

Fork of React & D3 Vibecoding Starter

A bar chart displays athlete popularity scores for the top 120 athletes, sorted in descending order, with a teal fill and hover highlighting. The visualization creates an SVG using D3 v7, employing `d3.scaleBand` for the x-axis and `d3.scaleLinear` for the y-axis, with axes generated via `d3.axisBottom` and `d3.axisLeft`. Ticks are sampled every eighth entry and truncated to 12 characters. Data is loaded from a CSV file and rendered with tooltips.

Oct 20, 2025