badrinath888@gmail.com

Network Visualization ICE-8

This example shows a small friendship network of six named people (Alice, Bob, Cathy, Dan, Ella, and Frank) connected by six links, rendered as an SVG. It uses d3.forceSimulation with forceLink, forceManyBody, and forceCenter to position nodes, which are drawn as green circles with text labels. Links appear as gray lines updated on each simulation tick. Nodes are draggable via d3.drag, which temporarily fixes their positions during interaction.

Nov 9, 2025

ICE-8 Tree Diagram.

This visualization shows a hierarchical tree of vehicle categories, breaking down the root “Vehicles” node into Land, Air, and Water subgroups, each with its own leaf nodes like Car, Plane, and Boat. Using D3.js v7 and an SVG rendering, the code implements a tree layout via `d3.hierarchy` and `d3.tree`, drawing curved links with `d3.linkHorizontal` and positioning nodes as circles. Node colors distinguish depth levels, and text labels identify each category. The static dataset is hardcoded in the script, with the layout size explicitly set on the SVG canvas.

Nov 9, 2025

Area Chart ice-7

This area chart visualizes CO₂ emissions from 1960 to 2020 using a simple dataset of six yearly observations. The chart displays the trend with a light blue filled region beneath a steel blue line, making the growth over time immediately apparent. It uses d3.csv to load the data, d3.area to generate the filled path, and d3.scaleLinear with d3.axisBottom and d3.axisLeft for the axes. Rendered as SVG, the chart includes clear axis labels and a title, with the data encoded on the y-axis as absolute emission values starting from zero.

Line Chart Using D3.js ice-7

This example shows a line chart of CO₂ emissions over time, with data spanning from 1960 to 2020. The visualization displays a rising trend in emissions, plotted as a single steel-blue line against axes for year and CO₂ levels. The code loads CSV data using `d3.csv`, then constructs an SVG with `d3.scaleLinear` for both axes and draws the line path via `d3.line`. Axes are rendered with `d3.axisBottom` and `d3.axisLeft`, while text elements add axis labels and a title.

Pie Chart with Labels and Legend ice-7

This pie chart displays CO₂ emissions by continent, with each slice labeled directly on the chart and accompanied by a color-coded legend. The chart uses D3.js v7 with an SVG rendering approach, loading data from a CSV file via `d3.csv()`. Slice geometry is generated using `d3.pie()` and `d3.arc()`, with labels positioned at slice centroids and a legend built using SVG `rect` and `text` elements. Colors are mapped through a `d3.scaleOrdinal` with the `schemeCategory10` palette.

ICE-7 Common Visualization Idioms

This example demonstrates a reusable scatter plot comparing CO₂ emissions against GDP for six countries. The visualization positions circles along a linear scale for each variable, with axes, labels, and a title generated dynamically. It uses d3.csv to load the data from a CSV file, d3.scaleLinear for coordinate mapping, d3.extent to determine domains, and d3.axisBottom and d3.axisLeft for the axes. The plot is rendered as an SVG with circles styled in steelblue with partial opacity, and the code encapsulates the plotting logic into the `scatterPlot` function, allowing it to be reused with different data variables.

line graph

This visualization combines multiple line series and bar charts to show CO₂, methane, and nitrous oxide emissions alongside GDP trends from 1960–2022. The data is loaded from a TSV file using `d3.tsv` with `d3.autoType`. Lines are rendered using `d3.line()` with an ordinal color scale, while semi-transparent bars represent GDP on a right-aligned axis. The SVG chart includes axes, labels, and a tooltip, built entirely with D3 v7.

scatter plot

This scatter plot shows the relationship between GDP and CO₂ emissions for countries in 2020, with circle size encoding population and color highlighting China, the United States, and India. Hovering over a point reveals a tooltip with country details. Built with D3 v7, the visualization uses d3.tsv for data loading, d3.scaleLinear for axes, d3.scaleSqrt for sizing, and d3.axisBottom/axisLeft for rendering SVG axes with animation on tooltip transitions.

Barchart

This bar chart displays the top 15 CO₂-emitting countries in 2020, with bars scaled linearly to show each nation’s emissions in megatonnes. The view uses an SVG rendered by D3 v7, loading tab-separated data via `d3.tsv` from a public GitHub gist. Bars are drawn with `scaleBand` and `scaleLinear`, while rotated tick labels on the `axisBottom` improve readability of country names. The chart includes a bold title and axis labels for country and emissions, all created using standard D3 selection and join methods.

Bargraph

This bar chart shows CO₂ emissions for a wide range of countries and global groupings, ordered by descending value. It uses D3’s `scaleBand` and `scaleLinear` to map country names and emission values to the canvas, and draws steel-blue rectangles for each bar. Axis ticks are generated with `axisBottom` and `axisLeft`, while rotated labels and explicit axis titles clarify the country and emissions units. The data is read from a CSV file.

ICE-6

This example shows a bar chart of CO₂ emissions by country, sorted from the largest emitter (Non-OECD GCP) down to the Dominican Republic. It uses an SVG canvas with D3’s `scaleBand` and `scaleLinear` to position bars, and `axisBottom` and `axisLeft` to render axes. The chart displays only the first 10 tick labels to avoid clutter, with rotated text. Data comes from an embedded CSV file, and the visualization is built with D3 v7.

Oct 19, 2025