S

Sai Hemanth Babu Sunkari

@hemanth145·17 public vizzes

Loading thumbnail…

reusable scatter

This example presents a reusable scatter plot that cycles through four numeric measurements from the Palmer Penguins dataset—bill length, bill depth, flipper length, and body mass—updating the x-axis every two seconds. The visualization shows the relationship between the selected x-axis variable and bill depth on the y-axis, with each point representing an individual penguin. Built with D3 v7, the code defines a custom `scatterPlot` function using scale methods like `scaleLinear`, `extent`, and axes via `axisLeft` and `axisBottom`, while rendering SVG circles with a fixed radius. Data is loaded as CSV from a GitHub Gist, and the animation relies on `setInterval` to swap the x-value accessor and re-render the chart.

Loading thumbnail…

line chart

This chart displays Amazon’s annual net income from 1994 to 2020 as a red line across a time-series. The x-axis encodes years, while the y-axis shows income in millions. D3 v5’s `d3.csv`, `d3.scaleTime`, `d3.scaleLinear`, and `d3.line` generate the SVG path, with `d3.axisBottom` and `d3.axisLeft` producing labeled axes and gridlines. The data is loaded from a GitHub gist and parsed using `d3.timeParse`.

Loading thumbnail…

pie chart

A pie chart displays the top 10 countries by recorded deaths from gas pollution in 2021, with each slice labeled in thousands and accompanied by a color-matched legend. The visualization reads data from a CSV file via `d3.csv` and uses `d3.pie` and `d3.arc` to generate the segments, with `d3.scaleOrdinal` assigning colors. Text labels are positioned using the arc centroid, and the chart renders as SVG within an HTML page.

Loading thumbnail…

area chart

This area chart displays car sales in India from 2009 to 2019, with a smooth curve and orange filled area beneath the line to emphasize sales trends over time. The visualization uses d3.csv to load the data, d3.scaleTime and d3.scaleLinear for axes, and d3.area with d3.curveBasis to generate the filled path. The SVG is rendered with margin-based positioning, and axes are styled using d3.axisBottom and d3.axisLeft with custom tick formatting.

Loading thumbnail…

Fork of Circles with D3

This fork of “Creating Circles with D3” demonstrates the D3.js data-join pattern by rendering a scatter plot of e-commerce data (Quantity vs. Price) loaded from a CSV file. Using D3 v7, the example binds the data to SVG circles, positions them with linear scales, and includes axes and labels. The visualization also incorporates the general update pattern for smooth rendering and uses method chaining to build the chart declaratively.

Loading thumbnail…

bar grapgh

This bar chart displays total sales across product categories, with each category represented by a colored bar on a band scale. The visualization uses D3.js v7 to load CSV data from a GitHub gist, map it into an array of category-total pairs, and render an SVG chart with axes, labels, and a legend. The code applies a sequential color scheme via `d3.scaleOrdinal` with `d3.schemeCategory10`, and uses `d3.axisBottom` and `d3.axisLeft` for the axes. A title and rotated category labels are included to improve readability.

Loading thumbnail…

Fork of Sol LeWitt Reproduction Vert

This example reproduces a Sol LeWitt-style artwork as an interactive chart, combining a bar chart and scatter plot to explore categorical and quantitative data. It shows how geometric abstraction can be generated from data, with hovering over bars highlighting them in orange. The code loads CSV data via D3 v6’s `d3.csv` method, converting string values to numbers, then passes the dataset to custom `renderBarChart` and `renderScatterPlot` functions that set up SVG, scales, and axes. While the drawing logic is stubbed out, the structure relies on D3’s data-binding and selection APIs to map values to visual elements.

Loading thumbnail…

Fork of HTML Starter

This example demonstrates a D3.js visualization that combines a static SVG illustration with dynamic data loading. It displays a decorative smiley face with ears, a nose, and a hat, rendered using SVG shapes like circles, ellipses, polygons, and paths. The visualization also fetches a CSV file from a remote URL using D3’s `d3.csv` method, then computes and displays basic dataset statistics—such as file size in kilobytes, row count, and column count—in a styled text element. The page uses custom CSS for typography and layout, while the SVG is centered and responsive. The visualization is built with React and D3 v7, rendering entirely via SVG.

Loading thumbnail…

Fork of Fork of Smiling face

This example draws a stylized smiley face with ears, a nose, and a red hat on an 800×500 SVG canvas. It uses plain HTML, inline CSS, and JavaScript-free SVG elements, including circles, ellipses, polygons, and paths to form the face, features, and decorative stars. The visualization is fully static, with absolutely positioned SVG star icons in yellow and blue. The code relies on basic SVG geometric shapes and CSS positioning, avoiding any JavaScript libraries or data sources, rendering entirely via the browser's SVG engine.

Loading thumbnail…

Fork of Smiling face

This example shows a smiling face rendered as an SVG graphic, featuring light blue circular head with ears, red elliptical eyes, a nose polygon, and a triangular hat. The face includes a curved mouth path and small black eyes. Two decorative star SVG elements are positioned absolutely over the scene, one yellow and one blue. The code uses plain SVG elements such as circle, ellipse, polygon, and path, with CSS for styling and positioning. No JavaScript libraries are employed; the visualization relies purely on static SVG markup and inline styles.

Loading thumbnail…

Fork of Smiling face

This example shows a stylized smiley face constructed from multiple SVG elements, including circles for the head, ellipses for eyes and ears, a polygon for the nose, and an orange triangle for the nose. A red hat sits atop the head, and a separate star icon is positioned at the top right using absolute CSS positioning. The code uses raw SVG markup within an HTML file, with shapes defined using attributes like `cx`, `cy`, `r`, and `points`. Styles control the page layout, hiding margins and overflow, while the SVG elements themselves rely on the browser's native rendering.

Loading thumbnail…

Fork of Frog Face Part I

A hand-coded SVG illustration of a frog face composes the entire visualization, rendered entirely with primitive shapes. The green circular head, white eyes with black pupils, pink nose and mouth, and triangular ears are all drawn using SVG elements such as `<circle>`, `<polygon>`, and `<path>`. The code directly specifies coordinates and styling within the HTML, using no external libraries. The fixed 960x500 canvas presents a static, cartoon-like portrait, with the title referencing a playful step toward a fuller smiley-face design.

Loading thumbnail…

Fork of Fork of Create a face with d3.js!

This example shows how to build a stylized smiley face using D3.js and React, with a playful mix of SVG shapes layered onto a yellow circle. It demonstrates the rendering approach by combining static HTML/SVG markup with dynamic D3 selections, using `d3.select` to append and style elements like ellipses, rects, and an arc path for the mouth. The code also imports the `arc` function from D3 to generate the mouth's curved path, while React handles the component structure and D3 manages the visual updates. The result is a fun, colorful illustration of basic shape composition and coordinate positioning.

Loading thumbnail…

Fork of smile

This example shows a simple, static smiley face built with React and rendered as SVG, with added decorative shapes like ears, a hat-like rectangle, and extra colored elements. The code uses React’s `ReactDOM.render` to mount the SVG, while D3’s `arc` generates the curved mouth path. The face is centered with explicit `cx`, `cy`, and radius values, and each feature—eyes, mouth, teeth, and additional shapes—is positioned using inline transforms and coordinates. No data is loaded; instead, the visualization relies entirely on hardcoded geometry and D3’s arc helper for the smile.

Loading thumbnail…

Fork of Fork of Jake - The Dog

This example shows a static, React-rendered smiley face constructed from basic SVG shapes: a yellow circle for the head, red and blue eyes, a green rectangular nose, and a purple elliptical mouth, with an orange line bridging the eyes. The code uses React 16.9 and D3 v5, though D3 is loaded but not actively employed. The entire visualization is defined directly in the HTML via JSX-like SVG elements, with no data binding or interactive behavior. The rendering approach is purely declarative, hard-coded coordinates and dimensions, producing a simple geometric face rather than a data-driven chart.

Loading thumbnail…

Fork of The House

This visualization depicts a Christmas tree composed of layered green polygons, a brown trunk, and red circular ornaments, alongside gifts, a dog, and Santa Claus. A prominent lime-colored star with a purple outline sits above the tree. The scene is rendered as static SVG shapes, using elements like `rect`, `polygon`, `circle`, and `ellipse` directly in the HTML. The star is drawn with a `polygon` and styled with `fill-rule: nonzero`, while all other objects use simple geometric coordinates. No external libraries or data sources are used; the graphic relies solely on hard-coded SVG markup.

Loading thumbnail…

Fork of Fork of Fork of Bird's Landscape - D3.js

This playful D3.js (v3) SVG scene depicts a whimsical landscape filled with randomly placed trees, flowers, stars, sheep, dogs, and flies, all generated from reusable functions. A red truck animates across the scene, while birds, clouds, and a rotating sun add motion. The composition is a "fork of a fork" of earlier landscape examples, remixing SVG structuring techniques for grouping and referencing elements.