G

gaddamthanmayeereddy759@gmail.com

@GaddamThanmayeeReddy·27 public vizzes

Loading thumbnail…

India Map ICE-8

This example presents a choropleth-style map of India’s administrative regions, colored by each state’s name using a categorical scale. The map is rendered as SVG with D3.js v5, using `d3.geoMercator` for projection and `d3.geoPath` to generate shapes. TopoJSON data is loaded from a GitHub gist and converted to GeoJSON via the `topojson` library. State labels are placed at polygon centroids, while hovering highlights a region in yellow. The background uses a soft linear gradient, and each state’s name appears as a tooltip.

Loading thumbnail…

Area Chart - ICE_7

This area chart visualizes Chicago’s average daily temperatures for March, using a smooth curved line and a semi-transparent green filled region beneath it to emphasize temperature trends over the month. The chart is built with D3 v5, employing `scaleTime` for the date axis, `scaleLinear` for the temperature axis, and both `line` and `area` generators with `curveBasis` for the curved path. The x-axis uses a custom month format, while the y-axis applies a compact number formatter, with grid lines and labeled axes styled via CSS. Data is loaded from a CSV file containing day–temperature pairs.

Loading thumbnail…

Pie Chart , ICE-7

A pie chart visualizes the net worth in billions for various movies, with each slice colored and labeled to show the corresponding value. The chart is rendered as an SVG using D3 v5, leveraging `d3.pie`, `d3.arc`, and `d3.scaleOrdinal` to generate segments and map colors. Data is loaded from a CSV file via `d3.csv`, and a legend on the right lists each movie title alongside its net worth. The visualization emphasizes clear labeling and color coding to compare budget figures across films.

Loading thumbnail…

Reusable scatter plot, ICE-7

This reusable D3 scatter plot displays furniture measurements (chair and table dimensions) from a CSV file, color-coded by furniture type (ikea, oak, durian) with corresponding symbols and a legend. The visualization animates by cycling through different x-axis data columns every second, using D3 v6 APIs including `scaleLinear`, `scaleOrdinal`, `axisLeft`, `axisBottom`, `symbol`, and `selectAll` with a generic chart builder function. Rendered as SVG, it updates axes and marks dynamically while maintaining a fixed window-sized canvas.

Loading thumbnail…

Line Chart - ICE_7

This line chart visualizes average daily temperatures in Chicago from late March to mid-April 2024. It shows a clear upward temperature trend over time, with values fluctuating between approximately 58°F and 86°F. The visualization uses D3 v5 to render an SVG line chart with a smooth basis curve, time-scaled x-axis, and linear y-axis. The code imports D3 modules like `scaleTime`, `scaleLinear`, `line`, and `curveBasis` to construct the chart, while data is loaded from a CSV file containing date and temperature columns. Axis labels and a title are styled with CSS classes, with the temperature axis rotated vertically.

Loading thumbnail…

Fork of Piechart ICE7

This example visualizes the net worth of heart disease patients across different countries from 1990 to 2022 using a pie chart. It shows the proportion of each country’s net worth in billions of dollars, with labels and a legend displaying the corresponding movie names and values. The visualization uses D3 v5 APIs such as `d3.pie`, `d3.arc`, and `d3.scaleOrdinal` to generate the SVG paths and color-coded sections. Data is loaded from a remote CSV file via `d3.csv`, and the chart is rendered using SVG elements within a fixed-width container.

Loading thumbnail…

Fork of ICE-7 PieChart 11590101

This pie chart visualizes the net worth of the top 10 billionaires in the world, using data from a CSV file loaded via the D3.js `csv` function. The chart displays each billionaire's name and net worth in billions, with colored slices and value labels positioned using the `arc.centroid` method. A legend on the right pairs each color swatch with the corresponding name and net worth figure. The visualization uses D3 v5’s `pie` and `arc` generators, with `scaleOrdinal` for color mapping and `format` for tick label formatting, rendering as SVG elements.

Loading thumbnail…

Fork of Piechart of NYC Food Data

This pie chart visualizes the net worth of movies in billions, using a dataset of movies from a CSV file. The chart displays labeled segments and a legend with movie titles and their corresponding values, with colors assigned via a categorical scale. Built with D3 v5, it uses the `pie` and `arc` generators to create the chart, and `scaleOrdinal` for color mapping. The data is fetched from a GitHub-hosted CSV, and the visualization is rendered in SVG within an HTML page.

Loading thumbnail…

Fork of Fork of Fork of ICE7 Pie Chart

This example visualizes movie budgets and their net worth in billions using a pie chart, with each slice labeled and accompanied by a legend. The visualization fetches data from a CSV file and renders it as an SVG using D3 v5, employing `d3.pie`, `d3.arc`, and `d3.scaleOrdinal` to generate and color the chart’s segments. The code also uses `d3.format` to display tick values with abbreviations like "K" for thousands, while the title and axes are styled via an external stylesheet.

Loading thumbnail…

Fork of Fork of Reusable D3 Scatter Plot

This interactive scatter plot animates the Iris dataset by cycling the x-axis through petal width, sepal width, petal length, and sepal length every 1.5 seconds while keeping sepal length on the y-axis. It uses d3.csv to load data and d3.scaleOrdinal with a viridis palette to color points by species. The reusable d3.scatterPlot module leverages scaleLinear, axisLeft, and axisBottom for scales and axes, with SVG circles rendered and updated via selection calls. Legends and axis labels are appended manually, and the animation uses setInterval to reassign the xValue and refresh the plot.

Loading thumbnail…

Bar Chart - ICE 6

This bar chart visualizes movie budgets from a CSV data source, displaying each film’s budget as a horizontal bar sorted by movie title. The visualization uses D3 v6 to create the SVG-based chart, with bar lengths encoded by budget values and movie titles on the y-axis. The code employs `scaleLinear` for the x-axis and `scaleBand` for the y-axis, while axes are rendered using `axisLeft` and `axisBottom`. A gradient fill (green to orange) colors the bars, and the chart includes labeled axes and a title, "MOVIES WITH THEIR BUDGET (IN MILLIONS)." The x-axis uses tick formatting (e.g., "45M") to simplify large numbers.

Loading thumbnail…

Fork of Fork of Fork of Bar Chart + Axis customisation

The visualization displays a horizontal bar chart comparing movie budgets, sorted by film title, with custom axes and a gradient fill ranging from green to orange. It uses d3.csv to load budget data, d3.scaleBand for the categorical y-axis, d3.scaleLinear for the numeric x-axis, and d3.axisLeft and d3.axisBottom with custom tick formatting to abbreviate values (e.g., "45M"). A rotated y-axis label and a blue title are added via SVG text elements. The code customizes axis appearance by removing domain and tick lines, and applies gradients through SVG defs.

Loading thumbnail…

Scatter Plot - ICE 6

This scatter plot shows the relationship between movie budgets and domestic gross earnings, with each data point represented as a circle. The visualization uses D3 version 6 to fetch CSV data from a GitHub gist via `d3.csv` and `d3.autoType`. A linear scale for each axis maps the data extents to the SVG canvas, and circles are positioned using the `cx` and `cy` attributes. Axis labels appear in red, and the chart fills the entire browser window, incorporating a larger top margin for the title.

Loading thumbnail…

Fork of Dog Breed Type

This example shows a bar graph displaying the numeric values associated with different dog breed labels. The data is loaded from an external CSV file via `d3.csv` and drawn as SVG rectangles colored steelblue, with bars turning orange on hover. The visualization uses D3 v7 scales (`d3.scaleBand` for the x-axis and `d3.scaleLinear` for the y-axis) to position and size the bars. Axes are generated with `d3.axisBottom` and `d3.axisLeft`, and the y-axis is labeled “Value” via a rotated text element.

Loading thumbnail…

Fork of ICE4 cat face

This example shows a scatter plot of country data loaded from a remote CSV file, with circles positioned by country and region values and colored steelblue. The code uses D3 v6’s `d3.csv` to fetch and parse the dataset, then applies `d3.scaleLinear` for both axes and appends circles via `d3.selectAll().data().enter()`. SVG rendering is used, with axes generated by `d3.axisBottom` and `d3.axisLeft`.

Loading thumbnail…

Load and Parse data with D3

This example demonstrates how to load and parse a CSV dataset using D3.js and display summary statistics about that data. The page fetches a remote CSV file with `d3.csv`, then computes and displays the file size in kilobytes, the number of rows, and the number of columns in a `<pre>` element. The visualization is presented as a React-rendered SVG smiley face, which uses D3's `arc` generator to create the mouth and decorative eye and ear arcs, with a starry background image applied via CSS. The code relies on `d3.csvFormat` and the Blob API to measure data size, while the SVG face itself is constructed with basic shapes and paths.

Loading thumbnail…

Fork of Dog graphics- ICE-4

This graphic displays a cartoon dog named "Rock" against a light blue background, rendered entirely as SVG shapes created with a Figma design workflow. The dog’s head is built from filled bezier curves for the face, ears, and snout, with smaller paths defining eyes, nose, and a tongue. Additional decorative elements include white polygons for ear highlights and pink circles and rectangles. The code uses the HTML5 canvas via an embedded `<svg>` element with `path`, `circle`, `polygon`, and `text` tags, all styled through plain SVG attributes.

Loading thumbnail…

Fork of Smiling face: ICE-4

This example shows a stylized smiling face constructed from basic SVG shapes, including a yellow circular head with black eyes, a curved smile path, a brown triangular nose, pink elliptical ears, and red rectangular stripes across the eyes. The rendering uses plain SVG elements such as `circle`, `rect`, `path`, `polygon`, and `ellipse`, positioned absolutely within an HTML page with CSS resetting margins and hiding overflow. No JavaScript libraries are utilized; the visualization is static and relies entirely on inline SVG markup in `index.html`.

Loading thumbnail…

Fork of Fork of Smiling face

A smiling face composed of SVG shapes, including a yellow circle for the head, black circles for eyes, red rectangles over the eyes, a brown polygon nose, and pink elliptical ears, rendered on a 960-by-500 canvas. The code uses raw SVG elements within an HTML file, styled with minimal CSS to remove margins and hide overflow. The face is drawn with static coordinates, featuring a black quadratic path for the smile and a stroke outline around the head and ears.

Loading thumbnail…

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

This generative SVG landscape assembles an animated scene with a day-night cycle, birds, trees, dogs, stars, and flowers. Code builds the entire composition programmatically using the `createSVGElement` helper, `animateTransform` for wing flapping, and `radialGradient`/`linearGradient` with `animate` tags to shift sky colors over 24 seconds. Birds are copied and transformed via CSS `scale` and `translate`, while moving elements like a truck use synthetic animation. The piece references prior SVG experiments for the bird, sun, and land, using raw SVG paths rather than a high-level charting library.

Loading thumbnail…

Fork of Fork of Fork of Fork of Fork of Dog graphics using Figma design. Used bezier curve.

A Figma-designed SVG portrait of a cartoon dog named Rock, composed of layered bezier curves for the head, ears, snout, and body, sits against a sky-blue background. The graphic includes decorative stars, a speech bubble label, and pink accent shapes. The code directly uses raw SVG elements—`path`, `circle`, `rect`, and `polygon`—with explicit coordinates, fills, and stroke settings, and does not rely on any external JavaScript libraries for rendering.

Loading thumbnail…

Fork of Fork of Fork of Fork of Dog graphics using Figma design. Used bezier curve.

A stylized cartoon dog named "Rock" is rendered in SVG, using bezier curves to define its orange body, white face, and black ears. The scene includes decorative elements like stars, circles, and a pink moon and rectangle, all displayed on a light blue background. The graphic is built with raw SVG elements inside an HTML document, with shapes such as paths, circles, polygons, and text. The design was originally created in Figma and is presented here as a static SVG visualization.

Loading thumbnail…

Fork of Fork of Fork of Dog graphics using Figma design. Used bezier curve.

This visualization displays a cartoon dog named "Rock" constructed entirely from SVG shapes, primarily using a single bezier curve path for the body and circles for the eyes and nose. The graphic is rendered through raw SVG elements defined in an HTML file, with a sky-blue background and decorative accessories like stars, a collar, and pink shapes. The figure shows the dog's head and torso with ears and facial features, all built using basic geometric primitives and path data. The code uses no external JavaScript libraries, relying solely on native SVG markup and CSS styling for presentation.

Loading thumbnail…

Fork of Fork of Dog graphics using Figma design. Used bezier curve.

This example illustrates a stylized dog named "Rock" created with Scalable Vector Graphics (SVG) using Figma design elements, including bezier curves for the main body shape. The artwork features a blue background, orange dog silhouette, black eyes, white muzzle, decoration shapes, and text. The code uses the raw SVG API, defining paths, circles, polygons, and rectangles directly in markup, with CSS for styling. It also incorporates custom shapes like stars and pink decorative elements.

Loading thumbnail…

Fork of Fork of Dog graphics using Figma design. Used bezier curve.

This example illustrates a stylized dog named "Rock" created with Scalable Vector Graphics (SVG) using Figma design elements, including bezier curves for the main body shape. The artwork features a blue background, orange dog silhouette, black eyes, white muzzle, decoration shapes, and text. The code uses the raw SVG API, defining paths, circles, polygons, and rectangles directly in markup, with CSS for styling. It also incorporates custom shapes like stars and pink decorative elements.

Loading thumbnail…

Fork of Flowers

A flower shape repeats hundreds of times in random sizes and colors across the canvas. The image is a vibrant, chaotic field of overlapping petals and leaves, rendered with a heavy drop shadow for depth. Built with React, the app uses the `Path.js` component to draw the flower, positioning it with SVG `transform` attributes and random translations. The color of each flower is computed dynamically using the `rgb()` function, while the background is a CSS gradient transitioning through red, orange, yellow, green, and black.

Loading thumbnail…

Fork of Tree Fractal

This interactive tree fractal responds to mouse movement, changing its branch length ratio and angle difference as the cursor moves across the canvas. A recursive function draws the branching structure, with red circles at terminal nodes. The code uses the Canvas 2D API with high-resolution scaling via `devicePixelRatio`, clearing and redrawing the tree on each mouse move event.