harshithamiriyam@gmail.com

Network

This interactive network graph visualizes a small social network of six people and their connections. Nodes are orange circles with labels, and links are gray lines; hovering turns a node red and displays a tooltip. Users can drag nodes to rearrange the layout. The visualization uses the D3.js library, specifically the `d3.forceSimulation` API with `d3.forceLink`, `d3.forceManyBody`, and `d3.forceCenter` for physics-based layout, alongside custom drag functions and SVG rendering.

Apr 12, 2026

Tree

A family tree plots ten individuals across three generations, separating root, middle, and leaf nodes by color—red, blue, and green—while labels identify each person and lines connect parent to child. The chart uses the D3.js v7 `stratify` and `tree` layout functions to position the hierarchy, drawing circles and connecting lines as SVG elements within an 800-by-500 canvas. Interactivity is included through mouseover and mouseout events that enlarge and recolor nodes when hovered.

Apr 12, 2026

map

This map visualizes world countries with a choropleth encoding of randomly generated dummy data values. The visualization uses a Natural Earth projection, with countries colored on a sequential blue interpolator and orange highlighting on hover. It loads GeoJSON country boundaries from the world-atlas TopoJSON dataset via `topojson.feature`, then renders them as SVG paths using `d3.geoPath`. A floating tooltip, positioned on mousemove, displays each country’s numeric value as the user interacts.

Apr 12, 2026

area

This area chart visualizes Apple’s stock price trend over time, using a light blue filled path beneath a line. It loads CSV data from Plotly’s finance-charts dataset, parses the date and closing price fields, and renders an SVG with D3 v7. The chart uses d3.scaleTime and d3.scaleLinear for axes, d3.area to generate the path, and d3.axisBottom and d3.axisLeft for the grid. Labels for “Date” and “Stock Price” are added as SVG text elements.

line

This line chart displays Apple’s stock price trend over time, using data from Plotly’s finance-charts-apple.csv. The visualization uses d3.csv to load the data, d3.scaleTime and d3.scaleLinear to map dates and closing prices, and d3.line to generate the SVG path. The chart includes labeled axes and a green stroke line, rendered with d3.axisBottom and d3.axisLeft.

pie

This pie chart compares the number of high-price days (above $100) versus low-price days in Apple’s stock history. The code loads CSV data from a Plotly-hosted dataset, counts occurrences in each category, and renders an SVG pie chart using d3.pie and d3.arc. A d3.scaleOrdinal with d3.schemeCategory10 assigns colors to the two slices, and labels are positioned at each arc’s centroid via arc.centroid. A legend is built with plain HTML divs, replicating the slice colors. The chart is minimal, showing only the split between two price thresholds without additional axes or time detail.

Reusable

This example displays a reusable scatter plot of Apple stock close prices over time, using a subset of the first 100 data points from the plotly finance-charts-apple CSV. The visualization shows a blue dot for each sample, mapped with index on the x-axis and price on the y-axis, along with labeled axes. The code defines a `scatterPlot` function that accepts SVG and layout properties, using `d3.scaleLinear` for both axes, `d3.axisBottom` and `d3.axisLeft` for ticks, and appends circles to the SVG with D3 v7.

combined chart

This combined chart overlays two encodings of the Iris dataset: light blue bars represent sepal length, while a green line traces petal length across the sample index. The D3.js code uses `scaleLinear` for both axes, `line` to generate the path, and `axisBottom`/`axisLeft` for the axes. SVG elements are appended directly to the chart, with a title, axis labels, and a legend clarifying the mapping.

multi series line chart

This multi-series line chart visualizes three measurements from the Iris dataset—sepal length, sepal width, and petal length—across the dataset’s rows. Each series is rendered as a distinct colored path (red, blue, green) using D3’s `line` generator, with `scaleLinear` mappings for x and y axes. The React component appends an SVG via `d3.select` and loads data asynchronously with `csv`, then adds axis labels and a legend. The chart uses D3 v7 with axes created via `axisBottom` and `axisLeft`.

scatter plot

This scatter plot visualizes the Iris dataset, mapping petal length on the x-axis against sepal length on the y-axis for individual flowers. The example uses React with D3 v7 functions like `csv` for data loading, `scaleLinear` for axis scaling, and `extent` to compute domains. Data is rendered as purple SVG circles, with labeled axes and a title added via D3’s `axisBottom` and `axisLeft` methods. The chart is built dynamically within a React component using a `useEffect` hook to fetch and process the data.

bar graph

This bar graph shows the migration distance of birds categorized by their migration status, using a dataset from a CSV file. It uses D3.js v7 within a React 19 application to render an SVG chart with `scaleBand` for the categorical y-axis and `scaleLinear` for the numeric x-axis. The code loads data via `csv`, applies axes with `axisLeft` and `axisBottom`, and draws steelblue rectangles for each bar, with a title and axis labels.