peddubalaji@gmail.com

ICE-8 Network graph

ICE-8 TREE GRAPH

d3.js Customized Network Graph and Family Tree

Fork of Circles with D3

Fork of Circles with D3

ICE-7 SCATTER PLOT VARUN

This example shows a pie chart of the top 10 most frequent math scores from a CSV dataset, with a legend displaying each score and its count. It uses D3.js v7 to load the data via `d3.csv`, aggregate counts, and sort them in descending order. The `d3.pie` and `d3.arc` functions generate the slices, while a custom color palette from `d3.schemeCategory10` colors each slice, and a separate SVG legend is built manually with `rect` and `text` elements.

ICE-7 AREA CHART

This area chart visualizes revenue trends over time, with the x-axis representing years (based on customer counts) and the y-axis showing revenue in millions. The chart uses a skyblue filled area beneath the line to emphasize the magnitude of revenue values. Built with D3.js v7, the visualization fetches CSV data from a GitHub gist, processes it with `.csv()`, and renders the graphic using SVG. The code configures axes, labels, and margins, and uses `d3.area()` to generate the filled area path.

ICE-7 Line chart

This responsive line chart displays revenue trends over time, with expenses on the x-axis and revenue on the y-axis, plotted as a single blue line. The chart is built using the D3.js v7 library, which fetches CSV data from a GitHub Gist via `d3.csv`, scales the axes with `scaleLinear`, and renders the line as an SVG path using `d3.line` and `axisBottom`/`axisLeft` for the axes.

ICE-7 BALAJI PIE CHART

This pie chart visualizes company metrics by aggregating the total values of six distinct fields—Revenue, Profit, Customers, Expenses, EmployeeCount, and Productivity Index—from a CSV file fetched from a GitHub gist. The data is loaded using `d3.csv`, and the sums are calculated with `d3.sum`. The chart is rendered as an SVG, using `d3.pie` to generate the arc data and `d3.arc` to draw each sector, which are then colored with `d3.scaleOrdinal` and the `d3.schemeCategory10` palette. Text labels are positioned at each arc’s centroid.

ICE-7 SCATTER PLOT

This interactive scatter plot, built with D3.js, presents the Iris dataset, encoding two selected variables along the x- and y-axes. The plot dynamically cycles through the `Revenue`, `Expenses`, and `EmployeeCount` fields every two seconds, updating the x-axis scale and circle positions. It uses D3's `scaleLinear`, `extent`, and `axisLeft`/`axisBottom` APIs, with data fetched from a CSV URL. Rendered as an animated SVG, the circles have a fixed radius, and axes are generated for each new data view.

Balaji ICE-7 Scatter Plot

This animated scatter plot cycles through different x-axis attributes—Expenses, Revenue, and EmployeeCount—from a revenue CSV dataset, plotting them against Profit. Built with D3.js, it uses a reusable `scatterPlot` function with a fluent interface to configure scales, axes, and point radius. The visualization updates every two seconds via `setInterval`, re-rendering the SVG elements and axes as the data mapping changes. The code leverages D3’s `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to generate the plot.

ICE-6_BALAJI/Scatter Plot

This scatter plot visualizes the relationship between total bill amounts and tip amounts from a tips dataset. The visualization uses D3 v6 to create a clean, axis-labeled chart where each data point is represented by a circle, with the x-axis showing total bill and the y-axis showing tip. The chart includes proper axis labels and scales to make the data easy to interpret.

ICE-6-BALAJI/BARGRAPH

This bar chart visualizes the average salary distribution by department using D3.js within a React application. The data is loaded from a CSV file and processed on the client side. The visualization uses `scaleBand` and `scaleLinear` to map department names and average salaries to positions and bar lengths, respectively. Grid lines and text labels are rendered for both axes, with the chart positioned inside margins. The code demonstrates a data-driven approach to render horizontal bars, converting string salary values to numbers and grouping them by department before calculating averages.

ICE-5_Balaji

This example renders a simplified pictorial view of employee records by loading a CSV dataset and displaying two stylized employee figures in an SVG canvas. It demonstrates D3.js v7 capabilities, including CSV data loading via `d3.csv`, data inspection with `d3.csvFormat`, and dynamic SVG manipulation. The visualization provides a text summary of the dataset (size, row and column counts) and uses hand-coded geometric shapes—circles for heads, lines for limbs, rectangles for bodies—to illustrate the flexibility of D3 for creating custom graphics from external data. The light gray background and pastel colors keep the focus on the schematic representation of the employees.

Fork of Create a face with d3.js!

This example shows an animated sunrise scene built with D3.js, transitioning the sky from light blue to orange while a sun rises over mountains. It demonstrates D3’s ability to manipulate SVG elements, using `d3.select` to append and update shapes like rectangles, circles, lines, and polygons. The animation uses `requestAnimationFrame` to move the sun and interpolate colors via `d3.interpolate`, creating a smooth gradient effect. The rendering approach is purely SVG-based, with no external data source.

Fork of Circles with D3

This example shows a simple dog face built from basic SVG shapes, rendered in a 200x200 viewport using D3.js v5. The code draws a brown face circle, two black eye circles, a pink nose, and a curved mouth path generated with the `d3.arc()` API. Each element is appended directly to the SVG container with explicit `cx`, `cy`, and `r` attributes. The visualization demonstrates foundational D3 selection and attribute-setting methods for static, data-free graphics. The mouth uses an arc path transformed into position, while the overall composition relies on hardcoded coordinates rather than scales or data joins.

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

This example animates a sunrise scene built with D3 v7, showing a sun rising over mountains while the sky transitions from light blue to orange. The visualization renders SVG shapes—a sky rectangle, a sun with radiating spikes, and three triangular mountains—using D3 selections and attribute setters. Animation is driven by `requestAnimationFrame`, updating the sun’s position and interpolating the sky color via `d3.interpolate`. The code imports D3 from UNPKG and demonstrates local ES6 module usage, though the script is loaded directly. The scene focuses on simple geometric composition and smooth color blending rather than data-driven elements.

Fork of Create a face with d3.js!

This example demonstrates a sunrise animation built with D3.js, where the sun rises over a series of mountains while the sky transitions from light blue to orange. The animation is driven by `requestAnimationFrame`, updating the sun’s position and interpolating the background color using `d3.interpolate`. The scene is rendered as SVG elements—a sky rectangle, sun circle with radiating spike lines, and three polygons forming the mountain silhouettes—all created via D3’s selection and append methods. The code loads D3 from UNPKG and relies on ES6 modules.

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

This example animates a sunrise scene with a rising sun, sun spikes, and mountains, rendered as SVG shapes. It shows how D3.js can build and animate graphical elements, with the sky color interpolating from light blue to orange as the sun moves. The code uses D3 v7 selections and the `interpolate` API to transition colors, while `requestAnimationFrame` drives the animation loop. The scene includes static mountain polygons and dynamically updated sun and line elements, all defined in D3 code.

sunrise

This example shows a simple HTML page that displays a large, centered message reading “Hello HTML!” using custom CSS styling. The code relies on plain HTML and CSS, with no external libraries or JavaScript logic beyond the static markup. The message is styled with a font size of 13em and aligned to the center of the viewport. This minimal demonstration focuses on rendering text through basic document structure and cascading style rules, with no data processing or interactive behavior.

Fork of Teddy Bear

This example shows a teddy bear built entirely from circles and simple paths, using D3’s data-join to bind an array of circle coordinates and radii to SVG elements. The bear includes a body, head, ears, eyes, nose, and a smile, plus curved arms drawn with path elements. It uses the `select` and `join` API from d3 to create and update the circles, while hardcoded data arrays define the bear’s geometry. The rendering is static, set against a light blue background, and the code includes no interactivity or animation.