saisathyapriya097@gmail.com

Visualizing Tree

Network Graph

This network graph visualizes the distances between major US cities using a force-directed layout. Nodes represent cities, while links show the connections with their distances in miles labeled along the edges. The simulation uses `d3.forceSimulation` with `d3.forceLink`, `d3.forceManyBody`, and `d3.forceCenter` to position the nodes, and updates SVG elements on each tick to reflect the dynamic layout.

map

This example displays a choropleth map of Australia, showing state boundaries and labels with hover-based population tooltips. It uses a Mercator projection centered on the country via `d3.geoMercator()` and renders geographic features as SVG paths through `d3.geoPath()`. State polygons are styled with a light fill that darkens on mouseover. The map loads GeoJSON data from a remote gist, and labels are positioned using `path.centroid()`. A custom tooltip div reveals the population property for each state on hover.

pp Scatter Plot

This animated scatter plot visualizes the relationship between sales volume and either price or another numeric attribute for phone data, toggling the x-axis variable every two seconds. Built with D3 v7, it uses `d3.scaleLinear` for both axes and `d3.axisBottom`/`d3.axisLeft` for tick marks. The `setInterval` function re-binds the data, updating circle positions via `attr('cx')`. Data loads asynchronously from a CSV via `d3.csv`, rendered as an SVG with steelblue circles.

Reusable D3 Scatter Plot

This reusable D3.js scatter plot visualizes youth unemployment data, animating between two axes every two seconds to compare the unemployment rate against the median age of unemployed youth. The chart is implemented as a configurable `scatterPlot` module using d3’s `scaleLinear`, `axisBottom`, `axisLeft`, and `extent` APIs, rendering SVG circles with a steelblue fill. Data is loaded asynchronously from a CSV via `d3.csv` and parsed with a custom row function. The animation cycles the x-axis value between two dataset columns, updating the plot through a `setInterval` timer.

pie chart

This example shows a pie chart of unemployment rates by country, with each slice labeled by country name and percentage in the legend on the right. It fetches CSV data from a GitHub gist and renders the chart on a canvas element using the Chart.js library. The code parses the CSV rows manually, assigns each country a random color, and customizes legend and tooltip callbacks to display the percentage alongside names.

area chart

This area chart displays the unemployment rate in different countries, using a single teal line filled with a semi-transparent color to emphasize the values. The chart is rendered on an HTML `<canvas>` element using Chart.js, with data fetched from a remote CSV file provided via a GitHub Gist. The CSV is parsed manually in JavaScript, extracting country names and numeric unemployment rates, which are then passed to the chart’s line dataset configuration.

line chart

This line chart visualizes unemployment rates across multiple countries, with each country plotted on the x-axis and its corresponding rate on the y-axis. The chart is rendered on a canvas using Chart.js, which fetches CSV data from a GitHub gist and parses it into labels and numeric values. The code creates a line dataset with a teal border color, includes a legend at the top, and displays axis titles for countries and unemployment rate. The visualization updates responsively based on the canvas dimensions.

sales Bar Chart

This example visualizes furniture sales data as a grouped bar chart, comparing sales values across multiple furniture types. It uses Chart.js with a Canvas renderer, fetching CSV data from a remote URL and parsing it manually with string operations. The chart displays dynamic, semi-transparent bar colors and includes labeled axes for sales value and furniture type, with a title.

sales Scatter Plot

This scatter plot visualizes furniture sales data, with each point representing a sales value plotted against itself on both axes. The chart displays multiple furniture types as distinct colored datasets, using a linear scale for both the x-axis (labeled “Sales Range”) and y-axis (labeled “Values of Sales”). The visualization is rendered on an HTML canvas using the Chart.js library, with data fetched from a remote CSV file and parsed via PapaParse. Each furniture type’s sales values are mapped to point coordinates, with dynamic colors differentiating categories, creating a direct comparison of sales distributions across product types.

load and parsing of data

This example demonstrates how to fetch and parse a remote CSV file, displaying the file size and the number of rows and columns directly on the page. The code uses the Fetch API to retrieve a text file, then processes the raw text to count lines and commas in the header row. The page also includes two decorative inline SVG graphics (a star and a triangle composition) styled with CSS, which are fixed to the corners. Built with React, the visualization relies on plain JavaScript for data handling, with no external charting libraries, and renders all output as HTML and SVG.

load and parse of data

This example demonstrates how to load and parse a CSV file from a remote URL using the Fetch API, displaying the file’s size, row count, and column count in the browser. The page retrieves the data as a Blob to extract its byte size, then converts it to text to count lines and columns. It renders the results in styled HTML elements and includes decorative SVG shapes in the corners. The code uses `fetch`, `blob()`, and `text()` methods, with CSS styling applied via an external stylesheet.

load and parsing of data

This example demonstrates how to load and parse a CSV file from a remote URL, displaying basic file metadata such as size, row count, and column count. The page fetches the data using the Fetch API, converts the response to a blob to read its byte size, then parses the text to count lines and commas in the header. The interface presents this information in styled HTML elements, with the results updated dynamically upon page load. The code relies on standard web APIs—`fetch`, `blob.text()`, and string manipulation—rather than external data visualization libraries, emphasizing a minimal approach to data inspection.

Fork of HTML Starter

This example demonstrates the loading and parsing of a CSV data file, displaying its file size, row count, and column count on a web page. It also embeds two static SVG images for visual context. The implementation uses the Fetch API to retrieve the remote CSV, then processes the response as a Blob and text to extract dimensions. The page styling relies on plain CSS, while the dynamic content is inserted into the DOM via `document.getElementById` and `innerText`. No external visualization libraries are used; the focus is on basic data inspection and layout.

load and parsing data

This example demonstrates how to fetch and parse a remote CSV file, displaying its file size and the number of rows and columns. It uses the Fetch API to retrieve the data as a blob, then converts it to text and processes it with basic string operations. The page reports the file’s byte size and its structural dimensions, with results styled using CSS. The data source is a GitHub Gist URL, and the interface is built with vanilla JavaScript and HTML, without any external visualization libraries.

fork of smiley

This example shows a hand-built smiley face scene with a light blue sky background, constructed entirely with HTML and CSS. The scene depicts a character with a blue cap, brown ears and hands, a white head, and facial features including eyes, eyebrows, a nose, and a mouth, all styled using CSS positioning and transforms. The code relies on the CSS `border-radius` for circular shapes, `transform` for rotating the hands and eyebrows, and absolute positioning to place each element within the layout. No JavaScript or external libraries are used; the rendering approach is purely static CSS styling, with the background color set to `#87ceeb` to simulate a sky environment.

Fork of Dog graphics- ICE-4

This graphic presents a stylized cat face built entirely from CSS-styled divs, using absolute positioning to assemble the head, ears, eyes, and other features on a light blue background. The illustration relies on the CSS `border-radius` property for organic shapes and `position: absolute` for precise layout, with no JavaScript or external libraries involved. The source code includes a minimal `index.html` structure and a linked `index.css` stylesheet that defines all visual styles, such as the peach-colored ears and white eyes. The example demonstrates a pure HTML/CSS approach to creating vector-like illustrations without using canvas, SVG, or any JavaScript rendering APIs.

nature scene

This example shows a simple nature scene built with D3.js, depicting a house, trees, clouds, sun, and a fence in an SVG canvas. The code uses D3’s selection and append methods to create each shape, including rectangles for the house and door, polygons for the roof, lines for palm tree trunks and fronds, and a path with d3.curveBasisClosed for the cloud silhouette. A circle represents the sun, while a long rectangle forms the fence. The visualization renders entirely with SVG elements, using hardcoded coordinates and colors to assemble the static scene.

Fork of Flowers

This animated visualization draws a single flower with a green stem, red petals, and an orange center, set in a light blue canvas with a grey vase below. It demonstrates D3.js transitions by growing each of the 12 petals and the center circle from radius zero to full size over two seconds, while leaves and vase shapes appear statically. The code uses D3 selection, `append`, `attr`, and `transition().duration()` to animate the geometric shapes, with petal positions calculated via trigonometric loops. The flower blooms in place, emphasizing a simple, spring-like growth effect.

Fork of Flowers with D3

A fork of a D3 flower chart maps categorical country names to bar-like stems, with each stem topped by a five-petal flower whose height reflects a numeric score. The visualization uses `scaleBand` for the x-axis, `scaleLinear` for the y-axis, and renders axes via `axisBottom` and `axisLeft`. Flower petals are positioned with trigonometric loops, while stems are drawn as `rect` elements. Hard-coded data for Malta, Outer Space, and the Netherlands sits in a local array, and the chart resizes to its container. The code uses D3 v7 selection and join methods.

Fork of Flowers

Fork of Flowers presents three categorical scores as stylized flowers on stems, with each bloom’s height reflecting its numeric value. The visualization uses D3’s `scaleBand` and `scaleLinear` to position stems and map scores, while manually drawing five petal circles plus a yellow center per flower via `append('circle')`. Data is hardcoded in an array, and the background, stem, and petal colors are set directly. The code relies on D3’s selection and axis APIs, including `axisBottom` and `axisLeft`.

Fork of flowers

This example demonstrates how SVG shapes and CSS styling can create a simple, colorful composition. It shows two circles—one small and centered, the other larger and offset—scaled together as a group. The rendering uses raw SVG elements within an HTML page, with CSS controlling the overall page layout and stroke properties for line-based elements. The code relies on core SVG APIs like `<circle>` and the `transform` attribute, alongside basic CSS rules for the body and stroke styling. The visual output is a minimal, static graphic that highlights the interplay between shape size, position, and color.

Fork of flowers

This example demonstrates basic SVG shapes and styling within an HTML document, using two circles of different radii positioned on a canvas. It shows how to apply inline presentation attributes like `fill` and `stroke` to define colors and outlines, while a CSS rule in an external stylesheet controls global page layout by removing margins and hiding overflow. The visualization relies on raw SVG markup embedded directly in the HTML, with a `<g>` element applying a scale transform to group the shapes. No external libraries or data sources are used; it is a static, hand-coded illustration of vector graphics fundamentals.

Fork of Shapes and Colors with SVG and CSS

This example demonstrates basic SVG shapes and styling using CSS, featuring two circles of different sizes and colors within an SVG canvas. The larger blue circle with a black stroke contrasts with the smaller default black circle, while a CSS transform scales the entire group. The rendering relies on native SVG elements (`<circle>`, `<g>`) and a linked stylesheet (`styles.css`) that sets body margins, overflow properties, and stroke styling classes. The code uses standard SVG attributes like `cx`, `cy`, `r`, and `fill`, with no external JavaScript libraries, purely showcasing SVG's built-in capabilities for static vector graphics.