Skip to main content
Log in
C

chandanamahesh0215@gmail.com

@chandanamahesh15·17 public vizzes

Loading thumbnail…

Fork of Network

This network visualization displays relationships between movie characters, with each node color-coded and shaped by role: Hero (blue star), Villain (red triangle), Sidekick (green circle), and Mentor (orange square). The example builds a force-directed graph using `d3.forceSimulation` with link, charge, and center forces, rendering nodes as SVG paths via D3’s symbol API. Links are drawn as lines, and labels follow node positions during the simulation. Nodes are draggable using D3’s drag interaction, which restarts the simulation with a higher alpha target for responsive movement.

Nov 3, 2025
Loading thumbnail…

ICE8-Network-CM

This example shows a force-directed network of research collaborations among professors, students, and institutions in the ICE-8 Section 2B project. Node colors encode role (blue professors, green students, orange institutions), and links represent supervision or partnership. Built with D3 v7, it uses `d3.forceSimulation`, `forceLink`, `forceManyBody`, and `forceCenter` to position draggable SVG circles and labels. The code defines sample node and link data inline and updates positions on each simulation tick.

Nov 3, 2025
Loading thumbnail…

ICE8-Tree-CM

A vertical D3.js tree visualizes programming languages across four layers: root, paradigm, language, and ecosystem. Color encodes paradigm (functional, object-oriented, procedural, scripting), while shape distinguishes each level—circle for root, diamond for paradigm, square for language, and triangle for ecosystem. Built with D3 v7 and SVG rendering, the tree includes hover tooltips, a legend, and inline self-tests calling `d3.stratify` to verify the data structure. The flat row data with parent-child IDs is converted into the tree layout, with accessible labels and ARIA attributes on the SVG element.

Nov 3, 2025
Loading thumbnail…

T1-MAP-CM

This example presents two maps side by side: a world basemap using TopoJSON data from world-atlas and a US choropleth showing education levels (percentage of adults with a bachelor’s degree or higher). The world map uses d3.geoNaturalEarth1 and d3.geoPath to render neutral country boundaries, while the US map joins CSV data with FIPS codes from us-atlas via d3.csv, applies a sequential PuBuGn color scale, and includes an interactive tooltip for state values.

Nov 3, 2025
Loading thumbnail…

Fork of T1-MAP-CM

This fork of T1-MAP-CM uses two linked maps to compare a neutral world basemap with a US agricultural exports choropleth. The world map, rendered via `d3.geoPath` and the Natural Earth projection `d3.geoNaturalEarth1`, shows only country boundaries as a basemap. The US map, projected with `d3.geoAlbersUsa`, colors states by 2011 export totals from the Plotly CSV `2011_us_ag_exports.csv`. Both maps use TopoJSON sources, and a custom tooltip appears on hover.

Nov 3, 2025
Loading thumbnail…

areaChart-spotify

This area chart visualizes Spotify listening habits, showing total songs played per week. The visualization combines a filled area with a line overlay and circular data points, using steelblue for the area and line with tomato-colored points. Tooltips provide exact values on hover. Built with D3 v7, the chart employs `scaleLinear`, `axisBottom`, `axisLeft`, `area()`, and `line()` with `curveMonotoneX` smoothing. Data comes from a Gist-hosted CSV file displayed in an SVG rendered at 900×520 pixels.

Oct 27, 2025
Loading thumbnail…

Area-Chart

This area chart displays weekly Spotify listening totals from a CSV dataset, using a gradient-filled region beneath a smooth line to emphasize volume trends over time. Built with D3 v7, it employs `scaleLinear`, `axisBottom`, `axisLeft`, `d3Area` with `curveMonotoneX`, and a linear gradient for the fill. Axes are labeled, and the SVG rendering includes a title and tooltip-free interactive hover effects. The chart’s reusable `areaChart()` function supports configurable margins, labels, and data accessors, with data loaded via `d3.csv`.

Oct 27, 2025
Loading thumbnail…

Spotify_LineChart

This line chart visualizes weekly song counts from a Spotify listening history dataset, using a reusable D3 line chart module. The chart plots total songs played across weeks, with steelblue lines and tomato-colored points marking each data value. It uses d3.scalePoint and d3.scaleLinear to map the axes, d3.axisBottom and d3.axisLeft for ticks, and d3.line to generate the path. Tooltips appear on hover via SVG `<title>` elements, while the data loads from a CSV file fetched with d3.csv.

Oct 27, 2025
Loading thumbnail…

Spotify_PieChart

A donut chart visualizes Spotify listening habits by bucketing weekly skipped-song counts into Low (≤5), Medium (6–10), and High (≥11) categories, using a reusable `pieChart` module. The SVG renders slices via D3’s `pie` and `arc` generators, with leader lines, percentage labels, and a legend. Data comes from a CSV Gist, parsed and aggregated in `index.js`. The component exposes setters like `.width()`, `.data()`, and `.valueAccessor()` for customization, and uses a Tableau 10 color scale for slice fills.

Oct 27, 2025
Loading thumbnail…

PIE-CHART

A donut chart displays the distribution of Spotify listening weeks into three buckets based on skipped songs: low (≤5), medium (6–10), and high (≥11). The visualization uses d3.pie, d3.arc, and d3.scaleOrdinal to render slices with percentage labels, leader lines, and a legend. Data is loaded from a Gist-hosted CSV file using d3.csv, and the chart is rendered as an SVG. The component is reusable, with setters for width, height, and radii.

Oct 27, 2025
Loading thumbnail…

Spotify_D3ScatterPlot

This animated scatter plot visualizes Spotify listening habits, showing the relationship between total songs played and several rotating attributes including average listening time, new artists discovered, skipped songs, and mood score. Built with D3.js 6.7.0, it uses `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to map data from a CSV file loaded via `csv()`. The visualization cycles through four x-axis variables every two seconds using `setInterval`, redrawing circles with updated `cx` positions as the x-axis changes.

Oct 27, 2025
Loading thumbnail…

SCATTER-PLOT

This example visualizes listening time versus songs played from a Spotify habits dataset, plotting each week as a circle where size reflects artists discovered and color indicates mood score. It uses D3.js’s `scaleLinear`, `scaleSequential`, `interpolateTurbo`, `axisLeft`, and `axisBottom` to construct the scatter plot. The data loads from a GitHub Gist CSV file, and the reusable `scatterPlot` module renders SVG circles with hover tooltips.

Oct 27, 2025
Loading thumbnail…

Fork of ScatterPlot-Spotify

This scatter plot shows the relationship between engine horsepower and fuel efficiency (miles per gallon) for a subset of 1970s cars, with each point representing a car model. The horizontal axis displays horsepower, the vertical axis displays MPG, and the points are colored on a blue sequential scale based on horsepower. Built with a reusable `scatterPlot` module, the chart uses D3 v7 APIs such as `d3.scaleLinear`, `d3.extent`, `d3.axisBottom`, and `d3.axisLeft`. Hovering over a point triggers a tooltip showing the car’s name, horsepower, and MPG, implemented via mouse event listeners.

Oct 27, 2025
Loading thumbnail…

ScatterPlot-Spotify

This reusable D3 scatter plot displays the relationship between horsepower and miles per gallon for cars from the Vega datasets CSV file. Each circle represents a vehicle, with hover tooltips revealing the car name and exact values. The visualization uses `d3.csv` for data parsing, `d3.scaleLinear` and `d3.axisBottom`/`d3.axisLeft` for axes, and a slider control that dynamically updates the circle radius via the chart factory's getter/setter methods.

Oct 27, 2025
Loading thumbnail…

SPOTIFY - Scatter Plot

This scatter plot visualizes Spotify listening habits by plotting numeric columns from a CSV dataset, with axes automatically selected based on the most complete fields. The visualization loads data via `d3.csv` and uses reusable `d3.scaleLinear` scales, `d3.axisLeft` and `d3.axisBottom` for axes, and SVG circles for marks. It responsively redraws on window resize, applying custom margins and labels. The chart highlights relationships between behavioral metrics like newly discovered artists and mood scores, rendered with the D3 v6 library.

Oct 27, 2025
Loading thumbnail…

SPOTIFY - Scatter Plot

This interactive scatter plot visualizes Spotify listening habits, mapping metrics like average listening time, total songs played, and mood score. Users switch X and Y axes via dropdown selectors, while circle color encodes Mood_Score through d3.interpolateTurbo, and size encodes New_Artists_Discovered via d3.scaleSqrt. Hovering reveals a tooltip and focus ring. The D3 v7 SVG chart includes gridlines, axes, transitions on points, and a custom CSV loader that flattens single-line data.

Oct 27, 2025
Loading thumbnail…

Fork of HTML Starter

This example demonstrates loading and parsing a cleaned Disney characters CSV dataset with D3.js v7, displaying summary statistics such as total rows, distinct movies, average popularity score, and debut year range in interactive cards. It also renders a preview table showing the first eight rows of the data, including a color swatch rendered inline for the `color_hex` column. The visualization uses `d3.csvParse` with custom row accessors to coerce numeric fields, along with `d3.mean`, `d3.extent`, and data-join methods like `selectAll().data().enter().append()` to build the SVG and HTML elements.

Oct 6, 2025