Amrit Adhikari

Fork of Network

This gallery example visualizes a network of ten major technology companies, with nodes representing firms like Microsoft, Google, and NVIDIA, and links depicting collaborations or partnerships labeled by type such as “Investment” or “Competition.” The visualization uses d3.forceSimulation to position the nodes physically, with node size and color encoding company group, while link thickness reflects collaboration strength. Rendered as an animated SVG, the chart employs d3.v7 and a manual color scale to distinguish company types. Hovering over a node is enabled, though the code primarily demonstrates a static force-directed layout.

Fork of Tree

This visualization displays a three-level family tree of programming languages, with a single root node branching into four paradigm categories—Object-Oriented, Functional, Scripting, and Systems—which then split into specific languages and their frameworks or variants such as Java, Haskell, Python, and Rust. The graphic uses D3 v7 with the `d3.forceSimulation` layout algorithm to position nodes dynamically, rendering the hierarchical structure as SVG circles and gray linking lines. Nodes are color-coded by tree depth, with a visual legend explaining each level’s hue, and the React-based implementation sets the initial dataset from a flat parent-child array.

Fork of Map

This example demonstrates two static maps rendered with D3 v7: a world map using the Natural Earth projection and a map of Nepal using the Mercator projection. Both visualizations load country boundaries from the `world-atlas@2` TopoJSON dataset, which is converted to GeoJSON via `topojson.feature` and drawn with `d3.geoPath`. The world map includes a graticule and a sphere background, while the Nepal map filters features by country ID 524 and fits the projection to that geometry. The code uses `d3.geoNaturalEarth1`, `d3.geoMercator`, and `projection.fitSize` to position the maps within their SVG containers.

Fork of World Map

This example displays two static choropleth-style maps: a world map using the Natural Earth projection and a US states map using the Albers USA projection. It demonstrates how to load TopoJSON data from the `world-atlas` and `us-atlas` datasets, convert it to GeoJSON with `topojson.feature`, and render it with `d3.geoPath` and `d3.geoNaturalEarth1` or `d3.geoAlbersUsa`. Both maps include graticule lines and interactive title tooltips showing region IDs.

Fork of Area Chart Visualization

This interactive area chart visualizes product sales trends from 2018 to 2024, allowing viewers to toggle between stacked and overlapping area representations. The stacked mode shows cumulative market growth across all products, while the overlapping mode displays individual product sales with semi-transparent fills and line borders. Built with D3 v7, the visualization uses `d3.stack`, `d3.area`, `d3.line`, `d3.scalePoint`, and sliding transitions to switch between chart types. Data is loaded from a CSV file containing yearly sales figures for multiple products.

Fork of linechart

This fork of a line chart visualizes product sales trends from 2018 to 2024, with each product’s sales values plotted as a separate line and points. The chart uses D3 v7 APIs including `d3.csv`, `d3.scalePoint`, `d3.scaleLinear`, and `d3.line` to render an SVG with axes, grid lines, and a legend. Data is loaded from a remote CSV file.

Fork of pie chart

This fork of a pie chart shows product sales distribution for a selected year, with a dropdown menu to switch between 2018 and 2024 data. The D3 v7 code loads CSV data via `d3.csv`, uses `d3.pie()` and `d3.arc()` to generate SVG slices, and renders percentage labels for segments larger than 5%. A color scale maps product names to slices, and a legend lists each product alongside its color swatch. The chart updates in place by clearing and redrawing the SVG on each year selection.

Fork of Reusable D3 Scatter Plot

This example presents a reusable D3 scatter plot that visualizes tech product data, mapping price, rating, sales volume, and customer reviews. The plot automatically cycles through these attributes every two seconds, updating the x-axis and data points. It uses D3’s `scaleLinear`, `extent`, `axisLeft`, `axisBottom`, and `scaleOrdinal` APIs for axes and color. Implemented as a configurable chart function, it demonstrates a reusable pattern with `.join()` for creating and updating SVG circles and legend items, with data loaded from a CSV file.

Fork of HTML Starter

This example presents a dashboard for customer data, featuring a summary of key statistics, a data table, and a prominent SVG visualization. Built with D3.js (d3 v7) and rendered as SVG, the page loads a CSV dataset from a GitHub gist and displays it within a polished, gradient-styled interface. The code uses standard DOM manipulation and D3's data-binding capabilities to populate the visual elements.

Oct 5, 2025