BALAJI MANDAVA

Fork of ICE-8:Network graph

This network graph visualizes connections between patients and hospital departments using a force-directed layout. Blue circles represent patients, green circles represent departments, and gray lines show their relationships. The D3.js code builds the interactive diagram with `d3.forceSimulation` combining link, many-body repulsion, and center forces to position nodes dynamically, while SVG elements render the nodes, labels, and connecting lines. The sample dataset is hardcoded within the HTML file, and the visualization updates positions on each simulation tick.

Fork of ICE-8 Tree graph

This example visualizes hospital emergency room patient data as a hierarchical tree graph, grouping patients by department referral and showing attributes like date, gender, and age for each individual. The visualization uses D3.js version 7 with the `d3.tree()` layout and `d3.hierarchy()` to structure the data loaded from an external CSV file. Nodes are rendered as white circles with steelblue strokes, connected by gray curved paths generated using `d3.linkHorizontal()`, with text labels positioned based on whether each node has children. The SVG rendering includes custom CSS styling for the nodes and links.

Fork of Fork for plotting tree

This example displays a hierarchical tree visualization of hospital emergency room data, organized by department referral and showing individual patient details. Using D3.js v7, it fetches CSV data from a GitHub repository, transforms the flat records into a nested structure, and renders the result as an SVG tree layout. The visualization employs `d3.csv`, `d3.hierarchy`, and `d3.tree` to position nodes, with `d3.linkHorizontal` generating curved links between parent and child elements. Each patient node branches into leaf nodes for attributes like gender, age, date, and wait time.

Fork of Fork for plotting tree

This example displays a hierarchical tree of 2011 electric vehicle stock values, organized by country (China, India, United Kingdom, USA) and vehicle type (Buses, Cars), with leaf nodes representing BEV and PHEV quantities. The tree uses d3.hierarchy and d3.tree to compute node positions, with curved paths drawn between nodes via a cubic Bézier command in the `d` attribute. Node colors vary by depth—dark red for root and country levels, indigo for vehicle types, and green for leaf values—while links inherit their stroke color from the target node’s type. The SVG is rendered inside a styled container with a gradient background.

Fork of ICE-8 Tree graph

Fork of Visualization of Spatial Data - Tree Graph

This example visualizes an organizational hierarchy as a tree graph, with nodes representing employees and colored by role (CEO in green, CTO in blue, CFO in orange, and HR Manager in red). The data is loaded from a CSV file via `d3.csv`, then transformed into a hierarchy using `d3.stratify` and laid out with `d3.tree`. The resulting SVG is rendered using `d3.linkHorizontal` for curved links between nodes, with each node displaying a circle and the employee's name as text.

Fork of Tree graph for the SHL dataset

Fork of ICE8-Tree graph

This tree graph shows the hierarchical structure of hospital ER data, grouping patients by date, patient ID, gender, age, satisfaction score, name initials, race, admin flag, and wait time. It loads CSV data from a GitHub repository and uses `d3.csv` to parse it, then `d3.hierarchy` and `d3.tree` to lay out the nodes. Links are drawn with `d3.linkHorizontal`, while SVG circles and text labels render each node. The data is transformed into a multi-level nested structure before rendering, displaying the full branching relationship across all categories.

Fork of ICE-8 Tree graph

This visualization shows a hierarchical tree of hospital job data, including job categories, job titles, salaries, and locations. It is rendered using D3.js v7 and displays nodes as ellipses, rectangles, and circles based on their depth in the hierarchy. The code fetches data from a remote CSV file, transforms it into a tree structure, and uses D3's `d3.tree()`, `d3.hierarchy()`, and `d3.linkHorizontal()` APIs to create the graph.

Fork of ICE-8 Tree graph

Fork of ICE-8 Tree graph

Fork of ICE-8 Tree graph

This example visualizes a hierarchical tree graph of job data, showing the relationships between job categories, job titles, salaries, and company locations. The CSV data is fetched from a GitHub URL and transformed into a tree structure with custom grouping logic. The visualization uses D3.js v7 layout and rendering APIs, including `d3.tree()`, `d3.hierarchy()`, and `d3.linkHorizontal()`. Nodes are rendered as SVG shapes—ellipses, rectangles, and circles—with distinguishing colors based on their depth in the tree, and links are drawn as horizontal paths.

Fork of Fork of HTML Starter

A simple HTML page demonstrates a canvas-based visualization using CSS and JavaScript. The code constructs a grid of colored squares whose positions and colors are computed from a seed value, creating a deterministic pattern. It uses the JavaScript `Math.random()` function to generate the layout, with the canvas rendering handled through the Canvas API's `fillRect` method. The page serves as a minimal example of combining HTML structure with procedural drawing logic.

Fork of Script Test

This example displays a scatter plot of Amazon book data, plotting user ratings against review counts for a random subset of 50 books. The visualization uses D3 v7 to draw circles on an SVG, with axes labeled and scaled linearly. The code defines a reusable `scatterPlot` function that generates the chart, and it loads data from a remote CSV file before randomly sampling the dataset. The chart uses D3's axis generators and scale linear functions to map the data values to pixel coordinates.

scatter plot using iris data

This scatter plot visualizes the classic Iris dataset, showing the distribution of sepal and petal measurements across three flower species using color-coded points. The example renders as a static SVG chart using React and the V3 framework, with axes and grid lines drawn from the data’s numerical ranges. The plot maps the sepal length and width to Cartesian coordinates, while species are distinguished by hue, providing a clear view of clustering and overlap among the three groups. The code employs React’s state management to structure the visualization, though it does not use external charting libraries.

Fork of Reusable D3 Scatter Plot

This example presents an animated scatter plot of the Iris dataset, cycling through different x-axis variables every two seconds. It uses a reusable chart module built with D3 v7, employing `scaleLinear`, `extent`, and `axisBottom`/`axisLeft` to render axes and data points as SVG circles. The code also includes a D3 pie chart visualization of Amazon Books sales by author, using `d3.pie` and `d3.arc` with a `title` element for hover details. Both charts draw from external CSV data sources.

Fork of Piechart ICE7

This pie chart visualizes vehicle seizure data by Indian state, displaying each state's count as a labeled slice with a legend. It loads CSV data from a GitHub gist and renders the visualization using D3.js v7 APIs including `d3.pie`, `d3.arc`, `d3.scaleOrdinal`, and `d3.format`. The chart encodes values in thousands, colors each slice distinctly, and positions labels at arc centroids.

Fork of Reusable D3 Scatter Plot

This example demonstrates an animated scatter plot built with D3 v7, visualizing the Iris dataset by cycling through different measurement columns (petal width, sepal width, petal length, and sepal length) on the x-axis every two seconds. It uses `d3.scaleLinear` for axes, `d3.extent` for domain calculation, and `d3.axisLeft`/`d3.axisBottom` for rendering scales. The reusable chart pattern, inspired by Towards Reusable Charts, exposes setter methods (`.width`, `.data`, `.xValue`) to configure the plot. Circles represent individual flowers, with smooth updates via `selection.join`, and the data loads from a CSV file using `d3.csv`.

Fork of Fork of Reusable D3 Scatter Plot

This example demonstrates a reusable D3.js scatter plot that visualizes Amazon book data, plotting petal width against average rating. It uses the d3.csv function to load and parse the dataset, then employs d3.scaleLinear, d3.axisBottom, and d3.axisLeft to render the axes and circles for each data point. The plot updates its x-axis and circle positions every two seconds by cycling through different numeric columns, driven by setInterval and the scatterPlot function’s configurable accessor methods. The visualization relies on D3 v7 (and v6 in package.json) with SVG rendering and animation.

Fork of Reusable D3 Scatter Plot

This example demonstrates a reusable scatter plot of the Iris Dataset, cycling through the four measured features (sepal length/width and petal length/width) on the x-axis every two seconds while keeping sepal length on the y-axis. It shows how a single chart function can be reconfigured with different accessor functions to update the visualization. The implementation uses D3’s `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` within a custom `scatterPlot` module, driven by `setInterval` to trigger re-renders. The SVG is appended to the body, with data loaded via `d3.csv` and parsed numerically.

bar chart champions league data

A grouped bar chart visualizes Champions League team statistics, comparing goals, matches played, and wins for each team. The chart aggregates the CSV dataset using d3.rollup, then renders three color-coded bars per team with d3.scaleBand and d3.scaleLinear. SVG axes, rotated tick labels, and a legend clarify the data. The visualization is built with React, D3 v7, and plain SVG rendering.

Fork of HTML Starter

This visualization presents a grouped bar chart of Champions League team statistics, comparing goals scored, matches played, and wins for each team. The code loads a CSV dataset from a GitHub gist, aggregates the data using d3.rollup and d3.sum, and renders three colored bars per team using SVG rectangles. D3 v7 handles the scales, axes, and legend, with x-axis labels rotated for readability. The chart uses d3.scaleBand for categorical positioning and d3.scaleLinear for the numeric y-axis, providing a clear side-by-side comparison of these metrics.

Fork of Fork of js

This example displays a plain-text summary of a loaded CSV dataset, showing the total row count, the column names, and the first data record as a JSON string. It uses D3.js version 7.3.0 to fetch the data with `d3.csv()` and then manipulates the DOM by selecting a `#data-summary` div and appending paragraph elements with the computed summaries. The page also logs the parsed data to the browser console for inspection.

Fork of HTML Starter

This example demonstrates a simple data-summary dashboard that loads a CSV file and displays basic metadata about its contents. It shows the total number of rows, the names of all columns, and the first data row as a JSON string. The code uses D3.js version 7, specifically `d3.csv` to fetch the dataset from a remote GitHub Gist URL, and then manipulates the DOM with `d3.select` and `append` to render the summary into styled paragraph elements. The visualization is minimal, focusing on text-based output rather than charts, and the data source is a static CSV of Champions League records.

CHAMPIONS LEAGUE DATA.HTML

This visualization displays the distribution of goals scored across Champions League matches, using a swarm plot to reveal clusters and outliers. It loads match data and renders circles representing individual goals, with positioning influenced by goal counts. The implementation combines D3.js force simulation for layout and D3 scales for mapping statistics to visual attributes.

Fork of HTML Starter

This example shows a bare-minimum HTML page that loads Champions League data from a remote CSV file. The code uses `d3.csv` to fetch and parse the dataset, logging the parsed data to the browser console. The page includes D3 v7 via a CDN link and provides a placeholder structure for future visualization code, demonstrating the basic pattern of data loading with a promise-based error handler.

CHAMPIONS LEAGUE

This example presents a simple HTML page displaying the text “Hello HTML!” centered in a large, bold font. Built with vanilla CSS and JavaScript in a bare-bones HTML file, it demonstrates basic DOM styling and layout fundamentals. The code uses inline CSS classes and a static HTML structure, with no external libraries or data sources. It serves as a minimal starting point for understanding web page construction before integrating frameworks like React.

most focked

This example demonstrates how to create a simple smiley face visualization using D3.js and SVG. It shows a yellow circle as the face, two black circles for eyes, and a curved black arc for a big smile. The code uses D3’s `select` and `append` methods to build the SVG structure, and the `d3.arc()` API to generate the smile’s path. The rendering is purely SVG-based, with fixed pixel dimensions (200 by 200). The example serves as a minimal introduction to D3’s shape generators and basic DOM manipulation, with no data binding or external data sources involved.