pavankrishna441@gmail.com

ICE-8 (Part-2)

ICE-8 (Part-1)

ICE-7 (Part-1)

This reusable scatter plot visualizes the relationship between temperature and humidity from weather data loaded via a CSV file. It uses D3 v7’s `d3.csv`, `d3.scaleLinear`, `d3.axisBottom`, and `d3.axisLeft` to render an SVG chart with steelblue circles that turn orange on hover. Axis labels are appended directly to the tick groups, and margins define the plot area within a 600x400 pixel container styled by external CSS.

ICE-7 (Part-4) - Area Chart

This interactive area chart displays temperature readings for various cities, with each city’s temperature value encoded as the height of a filled region. The SVG visualization includes rotated city labels on the x-axis and a labeled y-axis for temperature in degrees Celsius. The code fetches weather data from a remote CSV file, parses it with `d3.csvParse`, and uses `d3.scaleBand` and `d3.scaleLinear` to map the categorical and quantitative variables. Areas are drawn using the `d3.area` generator, while axes are rendered via `d3.axisBottom` and `d3.axisLeft`. The chart is styled with a color ordinal scale and a clear gridless presentation.

ICE-7 (Part-3) - Line Chart

This line chart displays temperature variations across different cities, with each city on the x-axis and temperature values on the y-axis. The visualization uses D3.js v7 to fetch and parse a CSV file from a GitHub gist, then renders an SVG line chart with rotated x-axis labels and a y-axis labeled "Temperature (°C)". The chart applies a linear scale for temperature and a band scale for cities, with a smooth line connecting data points using the d3.line() API. The chart includes a drop shadow and rounded corners, making the visualization visually appealing.

ICE-7 (Part-2) - Pie Chart

This pie chart displays the distribution of city temperatures across three categories: low (<20°C), medium (20-30°C), and high (>30°C). The code loads CSV data from a remote GitHub gist using `d3.csvParse`, then uses `d3.pie()` and `d3.arc()` to generate SVG paths. A `d3.scaleOrdinal` with `d3.schemeCategory10` assigns colors to segments, while labels and a legend are added via D3 selections. The visualization is rendered entirely in SVG with D3 v7.

ICE-6 (Part-2)

This example plots a weather dataset from a GitHub-hosted CSV file as a scatter plot, showing the relationship between temperature (x-axis) and humidity (y-axis). The visualization is created with D3 v7, directly utilizing the library's `csv`, `scaleLinear`, `extent`, and axis functions to map data points as circles within an SVG canvas. The code constructs linear scales for both axes and renders the plot across the full window dimensions, with labeled axes for temperature in Celsius and humidity as a percentage.

Pavan ICE-6

This example displays a bar chart of sports data showing the number of players per team. It uses a green horizontal bar fill for each team, with the player count displayed as text next to the bar. The chart is built with vanilla JavaScript, using the Fetch API to load a CSV file from a GitHub gist, and dynamically creates HTML elements with inline styles to render the bars. The data is sourced from a CSV containing team names and player counts.

del

This example visualizes data using React with SVG rendering, where a circular dataset is represented through a custom-styled ring and an embedded text label. The visualization centers a solid circle in a 221x221 SVG viewBox, filled with a teal color, while the surrounding container uses a clean, card-based layout with a title. The design demonstrates how a minimal, self-contained SVG can be integrated into a React component structure to present a simple, focused data story.

Pavan ICE-5

This example displays a stylized SVG illustration of a character, likely a snowman or robot, composed of geometric shapes and flat colors. The page also fetches a CSV dataset from a remote URL to compute and display the file size, row count, and column count of the data. It uses vanilla JavaScript with the XMLHttpRequest API to retrieve the CSV and the Blob API to measure file size. The SVG is rendered directly in the HTML, with no external visualization libraries.

Fork of Let's make a face with D3.js!

This example uses D3.js v5 to draw a simple cartoon bear face and body as a collection of SVG shapes. It shows how to construct a figure from primitive elements, including circles for the head, eyes, and paws; ellipses for the body and ears; rectangles for the legs; and a path for the mouth. The code selects the SVG element, sets its dimensions, and uses a centered group to position all parts relative to a common origin. Rendering relies on D3’s `select` and `append` methods to build the static visualization with explicit attributes.

Fork of Create a face with d3.js!

This example demonstrates how to build a cartoon face using D3.js version 7, rendered as SVG shapes with animation. It shows a yellow circle for the face, two eyes, animated eyebrows that move up and down, and a mouth created with an arc path. The code uses D3’s `select`, `arc`, and `transition` APIs to manipulate SVG elements, with the eyebrows undergoing a two-second transition cycle. The face is centered within an SVG canvas, and the animation runs automatically on load.

Fork of Create a face with d3.js!

This example demonstrates how to build a cartoon face using D3.js version 7, rendered as SVG shapes with animation. It shows a yellow circle for the face, two eyes, animated eyebrows that move up and down, and a mouth created with an arc path. The code uses D3’s `select`, `arc`, and `transition` APIs to manipulate SVG elements, with the eyebrows undergoing a two-second transition cycle. The face is centered within an SVG canvas, and the animation runs automatically on load.

Fork of Fork of Flowers

Fork of Fork of Flowers is a static generative artwork that depicts a stylized floral arrangement using simple geometric shapes and a soft, nature-inspired palette. The piece shows a central flower with layered golden ellipses and triangular brown petals, flanked by tall green stems with angular leaves on either side, all set against a split background of pale yellow and mint green. The code uses D3’s `select` to append SVG elements, including `rect`, `ellipse`, `path`, and `line`, with hardcoded coordinates and fill colors to construct the composition. No data source is involved; the rendering relies entirely on D3’s SVG manipulation to draw the vector shapes.

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

Fork of Fork of Bird's Landscape uses the D3.js library (v3) to render an animated, generative SVG scene of a bird and its environment. The visualization combines a dynamically colored sky and a gradient sun, both animated over a 24-second cycle, with a procedurally drawn bird built from scalable vector paths. While the code includes helper functions for random generation, the core landscape is constructed by layering SVG elements—a bird, sky gradient, and sun—to create a looping, time-lapse-inspired aesthetic.

Fork of Fork of Flowers

This animated visualization grows a flowering plant from a central stem, with five blossoms unfurling their petals in sequence. Each flower’s petals radiate outward from its center, expanding via `transition` on `r` attributes over two seconds. The code uses D3’s `select` and data joins to append SVG circles and paths, while a light-blue background, green leaves, and a brown vase complete the scene. The rendering relies on D3’s `transition` API for smooth growth, with flower positions and sizes hardcoded in the `flowers` array.

Fork of Cat smiley

The visualization displays a cat-faced smiley drawn with SVG shapes, including a circular face, triangular ears, eyes, a nose, a mouth, and whiskers. It uses D3 v7 to append and style each geometric element, such as circles for the face and eyes, and paths for the ears, mouth, and whiskers, with black strokes and white fills. The rendering relies on static SVG attributes set via D3's selection methods, producing a simple, flat cartoon illustration without animation or data-driven updates.

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

This graphic shows a simple, stylized dog face built from basic geometric shapes. It depicts the dog’s head, eyes, nose, mouth, ears, and eyebrows using circles, ellipses, rectangles, and quadratic bezier curves. The visualization is created with D3.js version 7, which selects the SVG canvas and appends each shape using methods like `append` and `attr`. The dog’s mouth and ears are drawn using SVG path data with quadratic bezier commands, while the face and features use hardcoded coordinates. The design originates from a Figma mockup, and the code directly reproduces that static layout in the browser.

Fork of Tweak a Face

This example shows a stylized, symmetrical face built from basic geometric shapes, including a circular head, ears, eyes, nose, and a smiling mouth. The visualization uses React to render the SVG elements and D3’s `arc` generator to define the paths for the nose, mouth, eyes, and ears, with transformations for placement and rotation. The face is centered on a 960×500 canvas, and the code demonstrates how React and D3 can be combined to create static, data-free illustrations with precise control over shape geometry.