Addiga Himesh Chander

family tree 8.2

A family tree of programming domains is shown as a vertical hierarchy, with colored nodes representing technology categories (Technology, Software, Hardware, AI) and their subcategories. The visualization uses D3.js v7's `d3.stratify()` to convert flat parent-child data into a hierarchy, then positions nodes with the `d3.tree()` layout. Links are drawn as vertical paths using `d3.linkVertical()`, while circles and text labels are placed at computed coordinates. The data is a static array of programming domains, rendered as an SVG with colored nodes by depth level.

Apr 12, 2026

Global Technology Adoption Map

This map visualizes a Global Technology Adoption Index, showing technology scores for eight selected countries using a yellow-to-red sequential color scale on a natural Earth projection. Countries without data appear in gray, and hovering highlights their borders while a tooltip displays the country name and score. Built with D3 v7 and TopoJSON, the visualization loads world country shapes from the world-atlas dataset, renders them as SVG paths via `d3.geoPath`, and includes a gradient legend with a `d3.axisBottom` scale.

Apr 12, 2026

Fork of CV: Line Chart

This fork of the Observable Line Chart example plots website visitors over 90 days using a React component with D3 v7. The SVG chart displays an orange line connecting daily visitor counts, with linear scales mapping days to the x-axis and visitor totals to the y-axis. The code loads data from a CSV file using d3.csv, converts the values to numbers, and renders the line using d3.line with d3.axisBottom and d3.axisLeft for the labeled axes.

Fork of CV: pie chart

This example shows a pie chart visualizing device usage by value across four categories: Smartphone, Tablet, iwatch, and Laptop. The chart is rendered as SVG within a React component using d3.pie and d3.arc to generate the paths and d3.scaleOrdinal for color encoding. Labels are positioned at each slice’s centroid. The visualization uses static data defined inline and d3.v7 APIs to build the chart entirely in App.jsx.

Fork of CV: pie chart

This pie chart visualizes the distribution of device usage across four categories with varying values. A React component renders an SVG, using d3.pie to compute arc segments and d3.arc to generate the paths. The d3.scaleOrdinal function assigns a distinct color to each device. Text labels are positioned at each slice’s centroid with arc.centroid, displaying the device names directly on the chart. The visualization updates automatically when the container size changes, thanks to a ResizeObserver hook that feeds dimensions into the rendering logic.

Fork of CV: Scatter Plot

This scatter plot visualizes the relationship between a startup's age and its active user count, with each circle representing a company from a CSV dataset. Built with React and D3 v7, the visualization uses linear scales derived from data extents to position circles on age and user metrics. Users can click any circle to highlight it, which changes its fill to white with a black stroke. The chart includes labeled axes for company age and active users, with the SVG rendering responsive to container dimensions via a ResizeObserver.

ICE6_Combined_Bar_Line

This combined chart displays 150 months of coffee sales as blue bars on a left y-axis, overlaid with customer counts as a red line on a right y-axis, using two independent linear scales. The visualization also includes grid lines, axis labels, a legend, and circular data points along the customer line for precise value reading. Built with React and D3 v7, the chart renders as SVG, reads data from a CSV file via d3.csv, and constructs the bar and line elements using d3.scaleBand, d3.scaleLinear, d3.axisLeft, d3.axisRight, and d3.line.

Fork of CV: Line Chart

This multi-series line chart visualizes 150 months of simulated coffee business trends, comparing coffee sales, pastry sales, and customer counts. The visualization uses a dual y-axis: a left axis scaling sales figures in dollars and a right axis scaling customer volume, while the x-axis represents month increments. Built with React and D3 v7, the chart renders as an SVG, using `d3.csv` to load data, `d3.scaleLinear` for axes, and `d3.line` path generators for each series. A legend distinguishes the three metrics through color and a dashed stroke for customer counts.

ICE6 Scatter Plot Car Efficiency

This scatter plot shows the relationship between car horsepower and fuel efficiency (MPG) across 112 vehicles. The visualization uses a blue circle for each car, with the x-axis representing horsepower and the y-axis showing miles per gallon, revealing a clear negative correlation between the two variables. Built with React and D3 v7, the code loads CSV data via `d3.csv`, applies linear scales with `d3.scaleLinear`, and renders circles into an SVG using the `join` pattern. Axis and text labels are added through `d3.axisBottom` and `d3.axisLeft`, with margins defining the plotting area.

ICE6 Bar Chart Coffee Sales

This bar chart displays monthly sales figures for 100 coffee shop branches, using a sequential blue color scale to encode the magnitude of sales. The visualization, built with React and D3 v7, renders SVG rectangles for each branch, with axis labels and a title. Using d3.csv to load data, the code employs scaleBand and scaleLinear for positioning, d3.axisBottom and d3.axisLeft for ticks, and d3.interpolateBlues for color mapping.

Fork of Fork of React & D3 Starter

This example displays a compact summary of the ICE 5 sales dataset, presenting the row count, column count, and total sales in a styled card. It loads the data from a CSV file using `d3.csv`, then computes the summary values with `d3.sum`. The React component manages state with hooks, and the final confirmation message is rendered inside an SVG rectangle. The visualization uses React 19 and D3 v7, with data fetched from a GitHub-hosted CSV and rendered as SVG within a React-driven interface.

Mar 2, 2026