N

nagasai.mandalapu@gmail.com

@Nagasai-Mandalapu·28 public vizzes

Loading thumbnail…

Fork of network tree nagasai

This network graph visualizes relationships between job titles and experience levels, showing how frequently each pair appears in the source dataset. The D3.js force-directed layout uses `d3.forceSimulation` with `forceLink`, `forceManyBody`, and `forceCenter` to position nodes, while SVG circles and lines depict the connections. Data is loaded from a CSV file, filtered to the top five job titles and experience levels, and rendered with categorical colors. Nodes are draggable through D3's drag behavior, with arrow markers indicating link direction.

Loading thumbnail…

Fork of Fork of Fork of area

This example shows the average wage trend for Australia over time as a filled area chart. The SVG rendering uses D3 v6’s `d3.area` generator with linear scales for both year and wage value, while axes are drawn via `d3.axisBottom` and `d3.axisLeft`. Data is loaded from a remote CSV using `d3.csv` and filtered to exclude non-numeric entries. The chart is styled with a teal fill and stroke, and the page is structured with plain HTML and a linked stylesheet.

Loading thumbnail…

Fork of Fork of line

This visualization displays Australia's average wage from 2000 to 2022 using a line chart. The line represents the wage trend across years, with data loaded from a CSV file hosted on GitHub. The chart is rendered as an SVG using D3 v6, employing `d3.scaleBand` for the x-axis and `d3.scaleLinear` for the y-axis, with `d3.line` to generate the path. The code also includes axes with tick marks and labels, and includes a React-based version in the index.js file.

Loading thumbnail…

Fork of Fork Ice-5 nagasai

This visualization displays the points earned by soccer teams in Group A from a CSV dataset, with each team plotted along a categorical x-axis and their points scaled along a linear y-axis. The chart uses a line to connect the points across teams, making it easy to compare performance trends within the group. The code leverages D3.js v7, specifically `d3.scaleBand` for the x-axis, `d3.scaleLinear` for the y-axis, and `d3.line` to generate the path. Data is loaded via `d3.csv` from a GitHub-hosted CSV file, and the SVG is rendered with margins and axis labels for clarity.

Loading thumbnail…

Fork of Fork of Fork of ICE - 7 Pie Chart Nagasai

This example visualizes soccer team point totals as a pie chart, with each slice representing a team and its size proportional to points earned. The code uses D3.js v7 APIs including `d3.pie()`, `d3.arc()`, and `d3.scaleOrdinal` with the `schemeCategory10` color palette. Data is loaded via `d3.csv()` from a remote GitHub gist, then filtered to extract team names and points. SVG paths are drawn for slices, and labels are positioned using an outer arc generator with `centroid()` for readability.

Loading thumbnail…

Fork of Fork of ICE - 7 Pie Chart Nagasai

A soccer group points pie chart visualizes the distribution of points among Group A teams. The chart encodes each team’s points as a slice’s arc length, with a categorical color scale from `d3.scaleOrdinal` and `schemeSet3`. The code fetches CSV data, aggregates it by group, and renders the pie using `d3.pie` and `d3.arc` generators inside an SVG. Slice labels display team names using `arcGenerator.centroid`, while only Group A is shown, leaving Group B unrendered.

Loading thumbnail…

Fork of ICE - 7 Pie Chart krishna

This pie chart visualizes the number of goals scored by top football players, with each slice representing a player’s goal count. The chart uses a simple flat design, with each slice labeled in thousands (e.g., "1.2K") and a legend listing player names alongside their corresponding goal values. The code leverages D3 v5 APIs including `d3.pie`, `d3.arc`, and `d3.scaleOrdinal` to compute slice geometry and map colors, while data is loaded from a CSV file using `d3.csv`. The chart is rendered as an SVG, with text and legend elements positioned manually for clarity.

Loading thumbnail…

Fork of Fork of Reusable D3 Scatter Plot

This example adapts a reusable D3 scatter plot to visualize soccer statistics, cycling through three different variable pairings every three seconds. It uses `d3.csv` to load a dataset containing goals for and against, wins, draws, losses, and points. The animation smoothly updates the plot's axes and circle positions by re-binding data and calling `axisLeft` and `axisBottom` within a setInterval loop. The SVG circles are rendered with a fixed radius, and the chart adjusts to the full window size.

Loading thumbnail…

Fork of ICE-7 Scatter plot

This fork of the ICE-7 scatter plot visualizes cricket bowling records from a Gist-hosted CSV, plotting wickets against bowling average for each player. Built with D3 v6, it uses `scaleLinear`, `axisLeft`, and `axisBottom` to render an SVG chart with steel-blue circular marks. The reusable `scatterPlot` module exposes getter/setter methods for width, height, data, margins, and radius, while `index.js` loads the CSV with `d3.csv`, parses numeric fields, and invokes the plot. The page uses the Share Tech font and fills the viewport.

Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This example shows the Iris Dataset as an animated scatter plot, cycling through different pairings of flower measurements every two seconds. The plot is built with D3 v6, using `scaleLinear` for axes, `axisLeft` and `axisBottom` for ticks, and a reusable chart function that updates circles and axes in response to changing data accessors. The visualization uses SVG rendering and a custom `setInterval` loop to switch between four measurement columns.

Loading thumbnail…

Fork of ICE-7 Scatter plot

A reusable scatter plot animated with D3 v6 cycles through Runs, Average, Strike Rate, and Innings on the x-axis every three seconds. It visualizes Test Cricket player records from a CSV file, using d3.scaleLinear for axes, d3.scaleOrdinal with symbol types to distinguish player roles, and color to encode country. The SVG renders dynamically via d3.csv loading and a custom scatterPlot module.

Loading thumbnail…

Fork of ICE-7 Scatter plot

This animated scatter plot visualizes changes in average wages across countries over time, comparing each year’s values against the following year’s values in a sequence of transitions. The visualization cycles through data from 2000 to 2022, updating every three seconds. It uses D3.js v6 with SVG rendering, employing `d3.scaleLinear` for axes, `d3.scaleOrdinal` for country colors and year-based symbol shapes (circles, crosses, diamonds, and more), and `d3.axisBottom` and `d3.axisLeft` for grid lines. The code demonstrates a reusable chart pattern with configurable accessors and margins.

Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This fork of the reusable scatter plot visualizes average wage data by country, comparing annual values from 2000 to 2010. It employs a `d3.scaleBand` for the categorical x-axis and `d3.scaleLinear` for the continuous y-axis, with axes generated via `d3.axisBottom` and `d3.axisLeft`. Data is loaded asynchronously from a CSV using `d3.csv` and rendered as steelblue circles using SVG. The chart is structured as a reusable function with getter/setter methods for configuration, following the Towards Reusable Charts pattern.

Loading thumbnail…

Fork of Scatter Plot

This scatter plot visualizes average wages across different countries for the year 2021, with each dot representing a nation’s wage value. The visualization uses D3.js v7 to render SVG elements, employing a linear x-scale for wage amounts and a point y-scale for country names. Data is loaded from a CSV file via `d3.csv`, then mapped to circle positions using the scales. The chart includes labeled axes for country and average wage, with hover effects changing dot color to orange.

Loading thumbnail…

Fork of bar plot

A horizontal bar chart displays average wages across countries for 2022, using D3 v7 to load CSV data via `d3.csv` and render SVG elements. The chart encodes numeric values with `d3.scaleLinear` for the x-axis and categorical country names with `d3.scaleBand` for the y-axis. Bars appear in steelblue, turn orange on hover, and axes are formatted with `d3.axisBottom` and `d3.axisLeft`. The data comes from a remote gist URL, and styling is handled through CSS classes.

Loading thumbnail…

Fork Ice-5 nagasai

This visualization presents a summary of test cricket records for the top 83 batsmen over the last 25 years, using a simple webpage layout. It displays the data file’s size in kilobytes and bytes, along with row and column counts, in a green text block. The page also includes an SVG rendering of a cricket field and ball, built with basic SVG elements like circles, rectangles, and lines. The code uses D3.js v7’s `d3.csv` method to load and parse the external CSV data, while the HTML structure and CSS styling organize the content and colors.

Loading thumbnail…

snowman.dj3

A white snowman built from three stacked circles with black eyes and an orange triangular nose stands centered on a black background in an SVG canvas. The D3.js v7 code uses d3.select to append each circle and path element sequentially, setting explicit x, y, and radius attributes for positioning. The design relies on simple geometric shapes rather than external data, demonstrating basic SVG rendering with D3's append and attr methods.

Loading thumbnail…

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

This example presents an animated SVG landscape featuring a bird, trees, dogs, stars, and flowers, all rendered programmatically. The scene includes a day-night cycle simulated through animated gradients, a moving truck, and flying birds with flapping wings. Built with D3.js v3 and vanilla JavaScript, the code dynamically creates SVG elements using `document.createElementNS`, applies CSS animations, and uses SMIL animations like `animateTransform` and `animateMotion` for movement. The sky and sun gradients are defined with SVG `radialGradient` and `linearGradient` elements, animating over a 24-second loop.

Loading thumbnail…

cycle-dj3

This example displays three steel-blue circles on an 800-by-600 SVG canvas, with each circle’s position determined by the x and y coordinates from an external JSON file. The visualization loads data asynchronously using `d3.json`, then appends circles to the SVG via a D3 selection, iterating over the dataset with `.enter()`. The chart uses D3 v7’s declarative API to map data values directly to circle attributes.

Loading thumbnail…

fish

A single orange ellipse represents a fish swimming repeatedly across an 800-by-600 SVG viewport on a light blue background, looping infinitely with a linear ease and a fixed eye dot that moves in sync. The animation uses d3.v7’s `selection.transition()` and `selection.attr()` to update the horizontal `cx` coordinates over an 8-second duration, resetting to the off-screen start via the `on("end")` callback. The shapes are drawn directly with SVG `ellipse` and `circle` elements, with no external data source.

Loading thumbnail…

sun rise

This example animates a continuous day-and-night cycle, showing a sun setting from the right while a moon rises from the left and the sky transitions from light blue to dark night. It generates stars once the moon reaches the center, and moves clouds across the sky. The visualization uses D3 v7 with SVG elements and `requestAnimationFrame` to update positions and colors, leveraging D3 transitions for cloud movement and random star generation for the night sky.

Loading thumbnail…

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

This example shows a simple line chart of four data points using D3.js. The chart maps time to value, with an SVG path drawn in steel blue to connect the points. The code explicitly sets up linear scales for both axes, uses `d3.axisBottom` and `d3.axisLeft` to render tick marks, and creates the line with `d3.line()`. The data is hardcoded as an array of objects, and the visualization is rendered as SVG inside a dedicated container, following the classic margin convention for layout.

Loading thumbnail…

windmill rotating

The windmill rotates its four black blades continuously against a dark blue sky, with a green ground and gray base completing the static scene. Five small bird shapes fly once across the sky from left to right and then disappear. The D3 v7 code builds the SVG with explicit shape attributes, then uses `transition.attrTween` with `d3.interpolate` to create the infinite blade rotation, while the birds rely on a simple duration-based transition. Animation is driven entirely through D3's transition system without external data.

Loading thumbnail…

rippls

A field of colorful expanding circles animates continuously across the screen, with each circle growing from a small point until it fades and disappears. The visualization uses D3.js v7’s `d3.interval` to spawn a new circle every 100 milliseconds, while `d3.timer` drives the animation loop that increments each circle’s radius and updates its stroke opacity. Randomly positioned circles are colored using `d3.interpolateRainbow`, and the rendering is done via SVG circle elements appended to the document body. The example demonstrates a particle system built entirely with D3’s timing and selection APIs.

Loading thumbnail…

rippls

Three concentric circular targets, each composed of nested gray rings, appear on a light gray background, drawn with P5.js. The sketch computes each ring's size and shade by dividing the target's diameter into equal steps, creating a gradient from dark at the center to light at the edges. Using the P5.js API, the code binds functions like `createCanvas`, `ellipse`, and `fill` to the instance, then attaches `setup` and `draw` to render the static composition once. The visualization demonstrates how to structure a P5.js sketch with ES modules and hot reloading in a container-based environment.

Loading thumbnail…

aeroplane

The visualization depicts a simple airplane flying in a sky-blue scene with a yellow sun in the top-right corner. It shows the aircraft’s gray body, two triangular wings (one above and one below the fuselage), and a tail fin, all composed of basic shapes. The code uses D3.js v6 to append SVG elements—specifically `d3.select` to target the `svg` container, then `.append` for `rect`, `circle`, and `polygon` shapes. The rendering is entirely SVG-based, with no external data source; the scene is constructed programmatically from hardcoded coordinates and dimensions.

Loading thumbnail…

face

This example creates a simple face in an SVG canvas, rendering a green circular head, white eyes with black pupils, a red arc mouth, and two antennae with blue tips. The visualization demonstrates fundamental D3.js v6 selection and attribute methods, using `d3.select` to append shapes and `d3.arc` to generate the mouth path. All elements are positioned relative to fixed coordinates, with no data binding or interaction, showcasing basic SVG construction through D3’s imperative API.

Loading thumbnail…

Face

A smiling face built entirely from SVG primitives is drawn in the center of a light-blue circular head. The code uses D3 v7 to append a face group, two elliptical eyes, rectangular eyebrows, and a red arc for the mouth, with all positions computed relative to the viewport dimensions. The example demonstrates D3’s selection and arc APIs for constructing a simple, scalable vector graphic without any external data.