S

shreelasya.bezawada@gmail.com

@SHREELASYABEZAWADA·16 public vizzes

Loading thumbnail…

Fork of Fork of ICE-8 NETWORK

This example visualizes a network of cities, where each city is connected to its two nearest neighbors by geographic distance, and nodes are colored by country. The view merges a world-map projection with a force-directed layout: a Mercator projection places cities at their real-world positions, while `d3.forceSimulation` with linked `forceLink`, `forceManyBody`, `forceCollide`, and `forceX`/`forceY` forces keeps them near those anchors during drag interactions. Data is loaded from a CSV via `d3.text` and parsed with a regular expression. Hovering shows details in a tooltip, and labels adjust as the simulation runs.

Loading thumbnail…

network

A force-directed network graph maps family relationships from a CSV dataset, with nodes representing individuals and links showing connections. Node colors encode generation depth, computed via breadth-first search from root nodes, and labels identify each person. Dragging nodes repositions the simulation, while hovering reveals additional details in a tooltip. The visualization uses d3.forceSimulation for layout, d3.drag for interaction, and SVG rendering with D3 v7.

Loading thumbnail…

network

This network visualization shows countries as labeled nodes, grouped and colored by continent, with links connecting countries that share a continent. The layout uses a force-directed simulation (`d3.forceSimulation` with `d3.forceLink`, `d3.forceManyBody`, and `d3.forceCenter`) to position nodes, which can be dragged via `d3.drag`. Data comes from a CSV file, rendered as SVG circles and text, with continent colors from the `d3.schemeSet2` ordinal scale.

Loading thumbnail…

network and tree

This example presents an interactive language family tree as a hierarchical visualization, showing the structure of Language Family → Language → Country with circle size encoding native speaker counts in millions. The SVG-based chart uses D3.js v7 to load CSV data from a GitHub gist, parsing a tokenized single-line format before building the hierarchy. Tree layout renders nodes and links, while hover interactions trigger a tooltip displaying additional details about each language.

Loading thumbnail…

tree and network

This example shows a multi-generation family tree as a compact vertical hierarchy, with nodes colored by depth to distinguish generations. The visualization loads CSV data containing child–parent relationships from a GitHub Gist, then uses `d3.stratify()` to build the hierarchy and `d3.tree()` to compute the layout. Curved links are drawn with `d3.linkVertical()`, while node circles use `d3.scaleOrdinal` to map generation depth to colors. A hover tooltip displays each person’s name and parent, rendered as SVG within a responsive viewBox.

Loading thumbnail…

making maps

A choropleth map shows total clothing units produced by country, with aggregated production costs and sale prices revealed in tooltips. Built with D3 v7, it uses `d3.geoNaturalEarth1` for projection, `d3.geoPath` to render country shapes from TopoJSON world-atlas data, and `d3.rollup` to aggregate a 20-row CSV dataset by country. Labels and a legend clarify the weighted per-unit metrics, rendered as SVG with an interactive tooltip.

Loading thumbnail…

reusable

This reusable scatter plot shows the relationship between electricity consumption, average temperature, population size, and renewable energy percentage across a dataset of countries. The visualization uses SVG circles whose x and y positions map to electricity consumption and temperature, while circle radius encodes population and color encodes renewable energy share through a green quantized scale. The chart is built with D3 v7, featuring axes with grid lines, axis labels, and hover tooltips. The code implements a factory function that encapsulates margins, scales, and rendering logic, making the chart configuration-driven and reusable for different datasets.

Loading thumbnail…

reusable

This interactive scatter plot visualizes city-level energy metrics, comparing population against CO₂ emissions while using color to represent renewable energy adoption buckets (low, medium, high). The chart cycles through five different x-axis variables every three seconds, including electricity consumption, renewable percentage, and temperature, with smooth updates via D3’s data joins. Built with d3.v7, the reusable scatterPlotFactory pattern manages scales, axes, and a categorical color legend, rendering animated SVG marks that re-position as the axis changes. The dataset is fetched from a remote CSV and parsed client-side.

Loading thumbnail…

Reusable Scatter Plot

This visualization explores global city energy and demographic data using a reusable D3 scatter plot component. It displays cities as colored symbols (triangles, squares, diamonds, circles) based on their renewable energy adoption, with a legend categorizing values from low to very high. The example animates by cycling the X-axis through population, temperature, CO2 emissions, and renewable energy percentage every three seconds, while the Y-axis remains electricity consumption. The code imports D3 v6 modules via `select`, `text`, `csvParse`, `scaleLinear`, `axisLeft`, `axisBottom`, and `symbol` to build the custom SVG visualization, reading data from a gist-hosted CSV.

Loading thumbnail…

area chart

This area chart visualizes electricity consumption against population for major cities, with the data sorted by population to show a clear upward trend. The chart uses blue filled areas beneath a yellow line, with orange points providing interactive tooltips that display additional city metrics. Built with D3 v7, the visualization loads CSV data from a GitHub gist, applies data-cleaning regex operations, and uses `d3.area`, `d3.line`, and `d3.curveMonotoneX` for smooth rendering. It also features grid lines, axis labels, and SVG animation for tooltip transitions.

Loading thumbnail…

line chart

This line chart shows the relationship between population and electricity consumption across major global cities, with each point representing a city and a smooth curve connecting them by ascending population. The visualization uses D3 v7 with SVG rendering and includes interactive hover tooltips displaying detailed city statistics. Data is loaded from a remote text file, parsed in-browser using `d3.csvParse`, then sorted and scaled with `d3.scaleLinear`. The chart applies `d3.axisBottom` and `d3.axisLeft` for axes, `d3.line` with `curveMonotoneX` for the path, and gridlines generated from the axis scales.

Loading thumbnail…

pie

This pie chart displays the categorical sum of a numeric value, with interactive controls to select the category and value columns from a CSV/TSV dataset. Small slices below a configurable minimum share are grouped into an “Other” slice, and the chart updates with animated transitions. Built with D3 v7, it uses `d3.dsvFormat` for automatic delimiter detection, `d3.rollup` for aggregation, and `d3.arc` for rendering each slice as an SVG path. Hovering reveals a tooltip with the exact value and percentage share. The data is fetched from a remote gist file.

Loading thumbnail…

Multi graph

This visualization combines bars and a line chart to compare average monthly users and average energy consumption across EV charging stations in different cities. D3 v6 parses CSV data from a GitHub gist, groups records by city, and computes mean values. The chart uses `scaleBand` for the x-axis, `scaleLinear` for dual y-axes, and `d3.line` to connect energy data points. React manages the loading state, while SVG rendering displays cyan bars, magenta line markers, and interactive tooltips for each city.

Loading thumbnail…

SG

A scatter plot shows the relationship between energy output and monthly users for EV charging stations. Each circle represents a station, with color encoding city and size encoding the number of charging ports. The visualization uses D3.js v7 with SVG rendering, loading data from a gist URL and parsing it with `d3.csvParse`. Axes are created with `d3.axisBottom` and `d3.axisLeft`, while point size uses `d3.scaleSqrt` and color uses `d3.scaleOrdinal` with `d3.schemeTableau10`. A tooltip displays station details on mouseover.

Loading thumbnail…

BAR CHART

A horizontal bar chart ranks the top 15 EV charging stations by monthly users, with each bar colored on a cool gradient and labeled with station ID, city, and user count. The visualization is built with React and D3 v5, using `scaleBand` and `scaleLinear` for axes, `csvParse` to load remote data, and `interpolateCool` for color encoding. SVG rendering includes grid lines, axis labels, and a tooltip on hover.

Loading thumbnail…

Global Renewable energy

This visualization displays the first five rows of a global renewable energy dataset in a formatted HTML table. The code loads the data from a GitHub Gist using `d3.csv`, extracts the column headers from the first row, and dynamically builds a styled table with a `thead` and `tbody`. The dark-themed page is rendered with CSS variables, and errors during data loading are caught and displayed in red text within the container.