M

maddulanagasanjana@gmail.com

@NagaSanjana20·25 public vizzes

Loading thumbnail…

Fork of Network

This interactive network visualization shows flight routes between major cities and hub airports across the United States. Nodes are drawn as SVG circles, with larger light green circles representing hub airports and smaller light blue circles representing major cities. The layout is driven by d3.forceSimulation using link, charge, center, and collision forces, while links are rendered as gray lines. Users can drag nodes to reposition them, and hovering reveals a tooltip with the node’s ID and type.

Loading thumbnail…

Fork of Tree

A fork of a three-layer D3 v7 tree visualization renders a hierarchical dataset of continents, countries, and cities using SVG. The code builds a vertical tree layout with `d3.hierarchy` and `d3.tree()`, then draws curved links with `d3.linkVertical()`. Node shapes encode depth: rounded rectangles for the root and countries, diamonds for continents, and circles for leaf cities, with a legend explaining each.

Loading thumbnail…

Fork of Map

This example displays a world map colored according to a small set of country population figures, using lighter blue shades to represent higher values. It renders countries as SVG paths through `d3.geoPath` and the `geoEqualEarth` projection, with a Title and Labels for each of the eleven populated countries. The map loads TopoJSON from the `world-atlas` dataset via `d3.json`, and uses a `d3.scaleSequential` with `d3.interpolateBlues` to map populations. A legend in the top-left corner communicates the color scale range.

Loading thumbnail…

Fork of Map

This example displays a world map of countries rendered as light blue SVG paths with dark borders, using an Equal Earth projection fitted to the full viewport. The visualization loads geographic data from the World Atlas TopoJSON collection, converts it to GeoJSON features via topojson.feature, and draws each country with d3.geoPath. A hover tooltip reveals each country’s numeric ID, while the projection and path generator are configured through d3.geoEqualEarth and fitSize to center the globe.

Loading thumbnail…

Area Chart

This simple stacked area chart visualizes the growth of global installed energy capacity (Solar, Wind, Hydro, and Nuclear, in GW) from 2000 to 2022, highlighting that all categories rise over the period. The chart uses the D3.js library version 7, reading data from a CSV file and rendering to SVG. It constructs the visualization using `d3.stack()` and `d3.stackOffsetNone` to compute the layers, `d3.curveMonotoneX` for smooth area interpolation, and standard D3 scales, axes, and gridlines; a legend identifies each energy source.

Loading thumbnail…

Line Chart

This line chart compares the growth of four global energy sources—solar, wind, hydro, and nuclear—in gigawatts (GW) from 2000 to 2022, using data from Sun_Wind_Energy.csv. Each source is rendered as a smooth monotone line with distinct pastel colors, and a legend identifies the series. The visualization uses D3.js v7 to load the CSV, generate SVG paths via the `d3.line` generator with `d3.curveMonotoneX`, and scales axes with `d3.scaleLinear` and `d3.axisBottom`/`d3.axisLeft`. Light horizontal gridlines aid reading values across the increasing trends.

Loading thumbnail…

Line chart

This line chart displays the growth of four global energy sources—solar, wind, hydro, and nuclear—from 2000 to 2022, using smoothed monotone curves over a white SVG canvas. The visualization reads a CSV file and maps each source to a distinct pastel color, with a legend on the right. It uses `d3.csv`, `d3.scaleLinear`, `d3.axisBottom`, `d3.axisLeft`, and `d3.line` with `d3.curveMonotoneX` to construct the axes and paths, while gridlines and labels are added via D3’s selection and join methods.

Loading thumbnail…

Line chart

Four pale pastel line charts track installed capacity in gigawatts for solar, wind, hydro, and nuclear energy from 2000 to 2022, all trending upward. Built with D3 v7 and SVG, the chart reads a CSV file via `d3.csv`, maps data with `d3.scaleLinear`, and renders smooth monotone curves using `d3.line` with `d3.curveMonotoneX`. A legend and gridlines complete the view.

Loading thumbnail…

Fork of Pie Chart

This fork of a pie chart visualizes energy data from a CSV file, showing CO2 emissions by year. The chart automatically detects categorical and numeric columns, aggregates values using `d3.rollup`, and displays the top 10 categories with an "Other" grouping. Slices and labels are rendered as SVG paths using `d3.arc` and `d3.pie`, with a pastel color scale and a legend. Data comes from Energy_CO2.csv with GDP, CO2, energy consumption, and life expectancy fields.

Loading thumbnail…

Pie Chart

This interactive pie chart visualizes product sales distribution across years, with a dropdown selector allowing users to switch between 2018 and 2024 data. The chart displays percentage labels on slices larger than 5% and includes a color-coded legend for product identification. Built with D3 v7, the example uses d3.csv to load product sales data, d3.pie for arc generation, d3.arc for slice paths, and d3.scaleOrdinal with d3.schemeCategory10 for colors. All elements render as SVG within a styled HTML container.

Loading thumbnail…

Scatter Plot

This interactive scatter plot displays daily signups against revenue from the ICE.csv dataset, with each circle representing a single day's metrics. The visualization automatically detects numeric columns from the CSV and plots the first two found on linear axes with tick marks and gridlines. Built with D3 v7, the code uses `d3.csv` for data loading, `d3.scaleLinear` for coordinate mapping, and `d3.axisBottom`/`d3.axisLeft` for generating axes. Custom styling includes a lightgrey SVG background, rounded points rendered as teal circles with 75% opacity, and title and axis labels formatted with the Share Tech font.

Loading thumbnail…

Scatter Plot

This animated scatter plot visualizes the classic Iris dataset, cycling through four flower measurements every two seconds. D3 version 6.7 scales the data linearly along both axes and renders circles with SVG. The reusable scatter plot module employs D3’s selection join for idempotent updates, using `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to redraw axes and marks dynamically, demonstrating responsive full-screen visualization.

Loading thumbnail…

Scatter Plot

This example shows a reusable scatter plot of daily business metrics from a CSV file, plotting signups on the x-axis and revenue on the y-axis with a point for each date. The visualization is built with D3 v7 using the `d3.csv` loader and `d3.scaleLinear` for both axes, while `d3.axisBottom` and `d3.axisLeft` render the tick marks. Each circle is appended via `selection.selectAll().data().join()` with opacity and a fixed color, and the chart includes a title and axis labels. The code defines a reusable `scatterPlot` function to allow flexible customization of data columns and styling.

Loading thumbnail…

Scatter Plot

This animated scatter plot visualizes the classic Iris dataset, cycling through four flower measurements every two seconds. D3 version 6.7 scales the data linearly along both axes and renders circles with SVG. The reusable scatter plot module employs D3’s selection join for idempotent updates, using `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to redraw axes and marks dynamically, demonstrating responsive full-screen visualization.

Loading thumbnail…

Fork of Reusable D3 Scatter Plot

A reusable scatter plot visualizes the ICE.csv dataset with an interactive interface for selecting numeric variables from the data. Built with D3 v7, the chart renders SVG circles and supports dynamic updates when users change X/Y axis selections through dropdown menus. The implementation demonstrates a chainable chart factory pattern with configurable setters, featuring tooltips on hover, a color legend for categorical grouping, and animated transitions between different data encodings. Grid lines, axis labels, and a responsive layout complete the visualization.

Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This interactive scatter plot visualizes daily metrics from a CSV file, letting users map any numeric column to the X, Y, and size channels and a categorical column to color. Built with D3 v7, the visualization uses `d3.zoom` for pan-and-zoom with scale extent bounds, `d3.scaleLinear` and `d3.scaleSqrt` for axes and point sizing, and `d3.scaleOrdinal` with the `schemeSet2` palette for coloring. Hovering a point triggers a tooltip with the row’s values, while the axis labels update dynamically based on selected column names. The chart resets to its original view when the user clicks the "Reset Zoom" button.

Loading thumbnail…

Multiline & Combined

Two D3.js v7 SVG charts display monthly data from ICE.csv. The first is a multi-series line chart plotting signups, revenue, and support tickets over time on a shared axis, using distinct pastel strokes and a legend. The second combines a bar chart of revenue with an overlaid line for support tickets, using shared time and value scales. Both charts employ d3.csv, d3.timeParse, d3.scaleTime, d3.scaleLinear, d3.line, and d3.axisBottom/axisLeft.

Loading thumbnail…

Iris Scatter Plot

This visualization displays the classic Iris dataset as a scatter plot, mapping sepal length on the x-axis against petal length on the y-axis. Each of the 150 flowers appears as a colored point, with a legend distinguishing the three species (setosa, versicolor, and virginica) using a pastel ordinal color scale. Built with D3 v7, the code loads CSV data via `d3.csv`, applies linear scales with `d3.scaleLinear` for axes, and renders SVG circles, axis ticks, labels, and a custom legend.

Loading thumbnail…

Fork of D3 Starter

This fork of the D3 Starter template visualizes global trends in CO₂ emissions, energy use, and GDP for the United States, China, and India from 1960 to 2020. It presents two charts: a multi-series line chart using `d3.line` and `d3.axisBottom`, and a combined bar and line chart using `d3.scaleBand` and `d3.scaleLinear`. The code aggregates data from the Our World in Data CO₂ dataset with `d3.group` and `d3.mean`, styling the output with custom SVG elements and a legend.

Loading thumbnail…

Fork of D3 Starter

This visualization combines a multi-series line chart and a grouped bar-and-line chart to explore the Iris dataset. The top chart plots sepal length against petal length for each species, using d3.line paths and a d3.scaleOrdinal color legend. The bottom chart displays average sepal and petal widths per species using d3.scaleBand rectangles for bars and a d3.line path with circles for the petal-width trend. All data is loaded asynchronously via d3.csv from a GitHub-hosted CSV file, and rendered as SVG with axes from d3.axisBottom and d3.axisLeft.

Loading thumbnail…

Fork of D3 Starter

This example presents two interactive charts built with D3 v7: a multi-series line chart tracking three quantitative variables over time, and a combined bar-and-line chart. The line chart uses `d3.line` to plot valueA, valueB, and valueC against year, while the bar chart draws valueA as rectangles via `d3.scaleBand` and overlays valueB as a line with a secondary `d3.scaleLinear`. Data is loaded asynchronously from a CSV file using `d3.csv`. The code also demonstrates axes, legends, and chart titles.

Loading thumbnail…

Home Appliances

A bar chart displays the average energy consumption in kilowatt-hours for each appliance type, using data from a 100-row CSV dataset of home electric appliance usage. The chart sorts appliances by descending average kWh and colors each bar distinctly, with a tooltip on hover showing the exact value. Built with D3 v7, the visualization uses `d3.csv` to load data, `d3.rollups` and `d3.mean` for aggregation, and `scaleBand` and `scaleLinear` for axes. Bars animate upward on load via a `transition()`, and dashed gridlines, rotated axis labels, and rounded bar corners enhance readability.

Loading thumbnail…

Fork of D3 Starter

This example is a minimal hello-world visualization that displays the text “Hello D3” centered on a blank page. It demonstrates the basic setup of a D3 v7 project using an ES module import and an import map. The page uses a `d3.select` call from the `d3` library to target the `body` element and set its text content. The HTML file defines the layout with a large font size, while the JavaScript file contains the single line of code that renders the output. The example serves as a starting point for building more complex D3 visualizations.

Loading thumbnail…

Fork of D3 Starter

This example displays a bar chart of average energy consumption by household appliance, sourced from a CSV file. It uses D3 v7 to load the data, construct linear and band scales, and render SVG rectangles for the bars, with rotated axes labels. The visualization adds a descriptive title and applies a blue fill to each bar via the `d3.scaleBand` and `d3.scaleLinear` APIs.

Loading thumbnail…

SDV_Assignment 5

This bar chart displays the average energy consumption in kilowatt-hours for home appliances across different cities. The visualization aggregates a CSV dataset loaded via `d3.csv`, computing city-level means with `d3.rollups`. A `d3.scaleBand` maps cities to the x-axis, while a `d3.scaleLinear` handles the y-axis, with bars rendered as SVG rectangles. The page also presents a data summary and a sample table. The interface uses a pastel gradient background and loads data from a GitHub gist.