6264kusuma@gmail.com

Tree

Fork of Network graph

Fork of Network Graph

This network graph visualizes relationships between entities, where each node represents an entity and each link represents a connection type such as "General Practice," "Gastroenterology," or "Physiotherapy." The graph uses a force-directed layout, with nodes simulated using `d3.forceSimulation`, including link, charge, and center forces. Nodes are colored by group and rendered as circles with labels, while links are drawn as lines. The graph supports interactive dragging via `d3.drag`, and data is loaded from a JSON file using `d3.json`.

Network Graph

This network graph visualizes relationships between patients, using nodes to represent individuals and links to show connections such as shared race or departmental referrals. The graph is rendered as an SVG within a React framework, using D3 v6's `forceSimulation` API to calculate node positions and `forceLink`, `forceManyBody`, `forceCollide`, and `forceCenter` to manage the physics. Users can drag nodes to explore the network, and the visualization updates dynamically through the `simulation.on('tick')` event.

Network Graph

Network Graph

The network graph visualizes patient relationships using force-directed layout, where nodes represent individual patients from the dataset and links show connections between them. The visualization is rendered as SVG in a React framework using d3.v7, with d3.forceSimulation handling the physics-based positioning and collision detection. The graph displays patient attributes such as age, gender, and race through node styling, with interactive zoom and pan capabilities enabled through d3.zoom. The code uses d3.select and .join() to manage the SVG elements dynamically based on state changes.

Tree

Tree

Japan Map

This example displays a map of Japan, centered within a full-page layout, on a light gray background. The visualization is built using JavaScript and relies on the D3.js library for map rendering and geographic projections. The map is rendered to the screen through the use of SVG paths generated by D3’s geographic path generator, which converts GeoJSON data into viewable shapes. The page structure is defined in HTML and styled with CSS, while the map’s appearance and positioning are controlled entirely through the D3 code in the included script.

India map

USA Map

This interactive SVG map of the United States displays the 50 states colored purple, darkening to a lighter shade on hover. The visualization is built with React and D3.js, using the `geoAlbersUsaTerritories` projection and `d3.geoPath` to render geographic shapes from a TopoJSON file sourced from `us-atlas`. State interiors are drawn with a black stroke, and the data is loaded asynchronously using D3's `json` function and TopoJSON's `feature` and `mesh` utilities.

Fork of ICE 8

This fork of ICE 8 shows a choropleth map of the 50 U.S. states, with each state filled in green and its borders drawn in white. The map uses the `geoAlbersUsaTerritories` projection and `d3.geoPath` to render geographic features, sourced from the `us-atlas` TopoJSON dataset, converted via `topojson.feature` and `topojson.mesh`. Hovering over a state turns it orange, implemented with a CSS `:hover` rule in the React and D3 v5 codebase.

ICE 8

This visualization displays a choropleth map of the United States, with each state filled by a categorical color from the D3 category10 scheme. The map uses the geoAlbersUsa projection and renders state boundaries as SVG paths with white strokes via d3.geoPath. It loads US Atlas TopoJSON data from a CDN, extracts state features using topojson’s feature function, and shows state names as tooltips on hover.

Tree graph

A tree visualization displays a hierarchical data structure from a JSON file, showing parent-child relationships through vertical links and labeled nodes. The graph represents an object model with classes, attributes, and methods, using D3 v5's `tree`, `hierarchy`, and `linkVertical` layouts to position elements. Interactive pan and zoom functionality is implemented via `d3.zoom`, while nodes are rendered as SVG text with `foreignObject` elements containing input fields. The visualization supports exploration of complex nested data through its expandable tree layout.

ICE 8

This example renders a map of India from a GeoJSON file, displaying its states as individual paths. The visualization fills the entire browser window and uses distinct white strokes to delineate each country boundary, creating a clean, geographic outline. The code builds the graphic with the `d3.select` API for DOM selection and the `d3.geoPath` projection for converting geographic coordinates into SVG paths, leveraging the `d3` and `topojson-client` libraries. It defines the map purely as vector shapes without additional thematic data, offering a straightforward cartographic view.

ICE8-Tree graph

This visualization displays patient records as a hierarchical tree, showing each patient’s ID, gender, age, SAT score, race, admin flag, wait time, and department referral as leaf nodes. Using D3 v7 with an SVG rendering approach, the code builds the tree via `d3.hierarchy`, `d3.tree`, and `d3.linkHorizontal` to draw the connecting paths. Node circles and text labels are appended to groups, with styling handled through CSS. The dataset is a static array of patient objects, transformed into the treemap’s nested structure for display.

Fork of Mexico map

ICE 8

This visualization uses a horizontal tree layout to display the hierarchical structure of a hospital's departmental referral network. The SVG rendering shows hospital departments as root nodes and individual patient referral records as leaf nodes, with the tree expanding from left to right. Built with D3.js v7, the code loads CSV data from a GitHub gist and uses the `d3.hierarchy` function to construct the tree data structure, then applies the `d3.tree()` layout algorithm to position nodes. The visualization employs `d3.linkHorizontal()` for curved link paths connecting parent and child nodes, with circular markers and text labels indicating each node's department name or individual record.

ICE - 7 Scatter Plot

This animated scatter plot visualizes car sales data, cycling through three numeric variables—Units, TotalAmount, and HorsePower—on the x-axis every two seconds while HorsePower remains fixed on the y-axis. Using D3.js version 6.7.0, the visualization leverages `scaleLinear`, `extent`, and `axisLeft`/`axisBottom` to map data points as black circles with white strokes. The `setInterval` function updates the x-axis scale and label, while the `scatterPlot` module handles the join pattern for smooth transitions. Data is loaded via D3’s `csv` from a GitHub raw URL, with axes and labels rendered in the Share Tech font.

ICE - 7 Area Chart

This area chart shows annual car sales trends from 2013 to 2023, with a green filled region beneath a black line to emphasize the overall sales trajectory. The visualization uses D3 v5 to load a CSV dataset from GitHub, parse the dates, and render the chart with a time-scaled x-axis and linear y-axis. It applies `d3.line` and `d3.area` generators with a basis curve, while axes are drawn using `d3.axisBottom` and `d3.axisLeft`. Grid lines are created via tick sizes, and axis labels are manually added with rotation for clarity.

ICE-7 Pie Chart

This example visualizes car sales by sales representative as a pie chart, with each slice representing the proportion of total sales amount attributed to a specific rep. The chart displays sales rep names and their corresponding sales percentages in a legend. The visualization loads CSV data from a GitHub repository using `d3.csv` and renders the pie chart with SVG paths. It uses `d3.pie` and `d3.arc` to generate the slices, `d3.scaleOrdinal` to assign distinct colors, and `d3.format` to display percentages. The legend is manually positioned using SVG groups and text elements.

ICE - 7 Line Chart

This chart visualizes monthly car sales trends over time, plotting total sales amounts against sale dates. The visualization uses React with D3 v7 to fetch and parse CSV data, then renders an SVG line chart with a smooth curved line via `curveBasis`. Axes are generated using D3 scales (`scaleTime` and `scaleLinear`), with custom tick components for x and y grids. The x-axis labels months, while the y-axis displays sales amounts, and axis titles clarify the variables. The chart’s styling includes red line strokes, grey gridlines, and green axis labels, with the data sourced from a remote GitHub CSV file.

ICE - 7 Pie Chart

This pie chart visualizes 2022 US auto sales by brand, displaying each brand’s year-to-date sales as a proportional slice with a color-coded legend that also lists the percentage and sales volume in thousands. The chart is built using D3 v5, with the `d3.pie` and `d3.arc` functions generating the segments from data loaded via a custom `getData` helper. Colors are assigned using `d3.scaleOrdinal`, and the legend is constructed manually with SVG `<rect>` and `<text>` elements. The visualization renders as static SVG, with a simple title and centered layout.

Fork of Fork

This visualization uses D3.js to plot COVID-19 data from a WHO global dataset, showing total cases against total deaths for each country as individual circles. The scatter plot uses D3's `csv` loader and `scaleLinear` functions to map the data, with axes labeled "Total Cases" and "Total Deaths." Circles are rendered in steelblue, and the chart is drawn as an SVG in a React application. The code defines its own width, height, and margins, using D3's `axisBottom` and `axisLeft` to generate the axes.

Ice

This visualization displays a scatter plot of the Iris dataset, mapping sepal length against sepal width using D3 v7. The SVG-rendered chart loads data from a remote CSV file and uses `scaleLinear`, `extent`, and axis functions to plot the measurements. Each point is drawn as a circle with a beige fill and cream stroke, with axes labeled "Sepal Length" and "Sepal Width." The code also customizes the chart dimensions and margins to fit the frame.

ICE

This example shows a bar chart of total COVID-19 cases aggregated by country, using data from a WHO global dataset. It first displays the raw categorical bars with steelblue fills, then rotates the x-axis labels for readability. The visualization is built with D3 v7, using `d3.csv` to load the data, `d3.sum` for aggregation, and `d3.scaleBand` with `d3.scaleLinear` for positioning. An SVG container with explicit margins renders the axes via `d3.axisBottom` and `d3.axisLeft`, while a rotated y-axis label clarifies the metric.

ICE-6

This example visualizes the relationship between sepal width and sepal length for iris flowers using a scatterplot. It shows individual data points as green circles, with sepal width on the x-axis and sepal length on the y-axis. The visualization is built with React and D3 v7, using `scaleLinear` for both axes, `axisBottom` and `axisLeft` for ticks, and `csv` to load the Iris dataset from GitHub. The code explicitly parses numeric values for both dimensions and renders the plot in SVG format, with clear axis labels.

ICE6

This visualization is a scatter plot matrix that shows pairwise relationships among numeric columns in a U.S. Senate dataset. Each cell in the grid compares two variables, with individual senators plotted as steel-blue dots. The code uses D3.js v7 to load data from a CSV file, compute axis domains with `d3.extent`, and render axes with `d3.axisTop` and `d3.axisLeft`. The diagonal cells are left empty, while off-diagonal cells display the scatter plots. The visualization is rendered using SVG, with circle elements representing each data point, and uses linear scales for both x and y axes.

Fork of HTML Starter

This example presents a minimal HTML page that displays the text “Hello HTML!” prominently centered on the screen. It demonstrates the fundamental integration of CSS for styling and JavaScript for potential interactivity, though no scripts are actually used in the code. The page uses a `.message` class with a large font size and text alignment, rendered directly in the browser’s DOM without any external libraries or frameworks. The data source is static text embedded in the markup, and the rendering relies entirely on native HTML and CSS, with no canvas, SVG, or JavaScript APIs involved.

Fork of HTML Starter

This visualization displays bar charts for Champions League team statistics, comparing goals, matches played, and wins. It employs a group bar chart where each team’s metrics are shown side-by-side in steelblue, orange, and green bars. The D3.js library (v7) is used for data parsing, aggregation, and rendering to SVG, with scales and axes built using `d3.scaleBand`, `d3.scaleLinear`, and `d3.axisBottom`/`d3.axisLeft`. The data is fetched from a CSV URL and aggregated via `d3.rollup`. The SVG renders bars, axes, and a legend within an 800x600 canvas.

Fork of A smiley moon with star and cloud

This example renders a stylized night scene in SVG, featuring a glowing smiley moon, two star-shaped polygons, and a circular sun on a dark blue background. The moon is drawn with a blurred gold ellipse, while the stars and sun use simple vector shapes. The visualization relies on SVG’s `<filter>` with `feGaussianBlur` for the moon’s glow effect, and radial gradients could enhance eye shading, though the code currently uses solid black circles. A bird image is embedded via `<image>`, and the scene is built entirely with inline SVG markup in an HTML document, with no external data sources.

Fork of CAT D3.js11

This example shows two identical SVG cat faces drawn side by side, each built from basic geometric shapes using D3.js v7. It demonstrates fundamental DOM manipulation by programmatically appending circles, paths, and polygons to create the head, ears, eyes, nose, mouth, and whiskers. The code uses D3’s selection and append methods to construct each cat, with no external data—the shapes are hardcoded via attribute values. A flexbox container in the HTML positions the two SVGs, while a separate CSS file centers the entire layout on the page. The cats do not animate or respond to interaction; they purely illustrate static SVG construction with D3.

Fork of Animated Clock

This example shows an animated clock that ticks through an entire day at 60 times normal speed. The clock face is rendered as twelve distinct SVG arcs, each representing an hour and styled with a tan background, while the hour and minute hands rotate continuously via D3.js. A sky-blue gradient background with drifting white clouds—animated via CSS keyframes—creates a playful, dynamic scene. The code leverages D3’s arc generator to draw the hour segments and positions the hour labels, with the entire clock centered and scaled to the viewport.

Fork of Fork of Fork of Circles with D3 - FLYING

A small D3.js scene animates a stylized butterfly against a light blue background. The SVG graphic consists of an orange body circle, two yellow elliptical wings, and antennae-like details. Using D3 transitions with a sine-in-out easing, the wings rotate back and forth in a looping flapping motion, triggered by the `transition.attrTween` callback chain. The code selects the HTML container and appends an SVG element with fixed dimensions, managing the animation recursively through the `.on("end")` event.

Fork of Fork of Flowers- Natural

This example shows a stylized flower with a green stem, purple petals, and a yellow center growing on a blue background, with a bird image placed at the flower’s core and a brown vase at the bottom. Petals and the center animate outward using D3 transitions with a 2000-millisecond duration, while leaves and vase shapes are drawn as static SVG paths and ellipses. The visualization uses D3.js version 7.8.5, calling `select`, `append`, and `.transition()` to create the growth animation, and includes an image element referencing an external bird file.

face with d3.js!

This example shows a stylized face built with React and D3, rendered as SVG elements such as circles, ellipses, rectangles, and a path for the mouth. The code uses D3’s `select` to append and style each shape, and the `arc` helper to generate the mouth’s curved path. Static SVG markup provides additional decorative shapes, while the React entry point attaches the D3-generated face to the scene.