sairathan.p045@gmail.com

ICE-8

This interactive force-directed graph visualizes a small friendship network of seven people, with nodes colored by social group and labeled by name. The visualization uses D3.js v7’s `d3.forceSimulation` to compute physics-based layout, combining `d3.forceLink`, `d3.forceManyBody`, `d3.forceCenter`, and `d3.forceCollide` to position nodes and edges. Rendering as SVG, the graph supports node dragging and displays a tooltip with a person’s name and group on hover. The data are explicitly defined in the code as simple node and link arrays.

ICE-8

This visualization shows a hierarchical taxonomy of programming languages, organizing them by paradigm and breaking each language down into characteristic features. The tree layout uses `d3.tree()` with `d3.linkHorizontal()` to draw the connected paths, and renders nodes as SVG shapes that change by depth: rectangles for the root and paradigm levels, circles for languages, and diamonds for features. Colors also encode depth, using blue, light blue, green, and orange fills. Node positions are computed from the layout’s size settings, with the viewBox set to [−50, −20, 1000, 700].

Fork of Fork of ICE-8-VK-1.2

A choropleth map colors US states by 2023 population estimates using a sequential logarithmic blue scale. The visualization loads TopoJSON state boundaries from us-atlas, projects them with d3.geoAlbersUsa, and renders each state as an SVG path via d3.geoPath. Hovering reveals a tooltip with the state name and formatted population, while the embedded Census Bureau data drives the fill colors.

Assignment

This choropleth map visualizes a custom Global Renewable Energy Adoption Index, coloring countries by their score on a green sequential scale while leaving countries without data in gray. The visualization uses D3.js (v7) with a Natural Earth projection via `d3.geoNaturalEarth1` and `d3.geoPath`, rendering geographic paths from a TopoJSON file loaded through `d3.json` and processed with TopoJSON. Country polygons are filled based on score thresholds, and hover interactions reveal tooltips with country names and scores. A legend on the left explains the color thresholds and the "No Data" gray.

Q3

This line chart shows revenue trends from 2018 to 2023, using crimson curves with black circular markers to highlight annual data points. The visualization employs d3.csvParse to load inline tabular data and d3.scaleLinear for both axes, with a Catmull-Rom curve for smooth interpolation. SVG rendering includes axis labels for fiscal year and revenue in millions, with styling applied through d3.axisBottom and d3.axisLeft. The chart uses a fixed 800×500 viewport with defined margins, demonstrating standard D3 v7 layout and data-binding patterns.

Mar 30, 2026

2Q

This example visualizes operating system market share using a pie chart with external labels and a legend. It displays Windows, macOS, Linux, and ChromeOS with their respective percentages computed from the raw CSV data. The visualization uses `d3.pie()` to compute slice angles, `d3.arc()` for rendering paths, and `d3.scaleOrdinal` with `schemeCategory10` for colors. SVGs are drawn via `d3.select`, and slices include white strokes, while labels are positioned using trigonometric calculations based on mid-angles.

Mar 30, 2026

assignment

This example shows a reusable scatter plot of engine horsepower versus fuel efficiency (MPG) using data embedded as a CSV string. The chart renders circles with semi-transparent crimson fill, labeled axes, and a custom margin and size configuration. Built with D3 v7, the code defines a configurable `scatterPlot` function exposing setters for dimensions, accessors, labels, color, and radius, then binds it to an SVG element via `datum` and `call`. SVG rendering handles the axes, grid-free plot, and point positioning through linear scales.

Mar 30, 2026

Line Chart and bar chart

This example combines bars and a line chart to compare two related variables across a time series. It visualizes humidity as light blue bars on the left y-axis and temperature as a red line on the right y-axis, with a legend, gridlines, and axis labels for each scale. The chart renders synthetic sine-wave data in an SVG using d3.scaleLinear for both axes, d3.axisBottom, d3.axisLeft, and d3.axisRight for ticks, and d3.line for the temperature path. A React version loads student performance data via d3.tsv, groups records into intervals, and plots average study time as bars against average absences as a line.

multi series line chart

This multi-series line chart visualizes daily weather trends for temperature, humidity, and pressure over a 200-day synthetic period. Three colored lines display the temporal patterns of each variable, accompanied by axes, gridlines, and a legend. The example uses D3 v7 APIs including `d3.line`, `d3.scaleLinear`, `d3.axisBottom`, and `d3.axisLeft`, rendering SVG paths within a React component. The code generates randomized sinusoidal data, demonstrating how multiple time series can be overlaid with distinct stroke colors and compared on a shared value scale.

second

This scatter plot visualizes the Iris dataset, showing the relationship between petal length and sepal length across all flower samples. Each point is rendered as a steelblue circle with partial opacity, using d3.scaleLinear for both axes and d3.axisBottom and d3.axisLeft to display the scales. The SVG is created directly via d3.select and appends circles, text labels, and axes within a defined margin. Data is loaded asynchronously from a raw CSV URL using d3.csv with d3.autoType, and the visualization includes a title and axis labels for clarity.

Asssignement

A bar chart displays monthly sales for 100 coffee shop branches, with each bar colored on a sequential blue scale to encode sales magnitude. Using D3 v7 within a React component, the visualization loads data from a CSV file via `d3.csv`, aggregates it, and renders SVG rectangles scaled with `scaleBand` and `scaleLinear`. Branch labels are rotated on the x-axis, and axes are drawn with `axisBottom` and `axisLeft`, with hover effects changing bar color to orange.