Skip to main content
Log in
R

Ramdas Dheeraj

@dheeraj837·15 public vizzes

Loading thumbnail…

Network

This example visualizes a collaboration network among three authors and three papers, using a force-directed simulation to position the six nodes. D3.js v6 APIs such as `d3.forceSimulation`, `d3.forceLink`, and `d3.forceManyBody` compute the layout, while SVG circles and lines render the nodes and edges. Purple and blue colors distinguish author and paper groups, and users can drag nodes to interact with the simulation, which updates positions and labels on each tick.

Nov 8, 2025
Loading thumbnail…

Tree

This example presents a three-generation family tree as a static SVG visualization using D3.js v6. It shows a root "Grandparents" node branching into two parent nodes, each with two child nodes. The layout is computed with `d3.stratify()` and `d3.tree()`, while `d3.linkVertical()` draws the connecting paths. Node shapes and colors encode generation depth: squares represent the root, circles represent parents, and triangles represent children. A legend explains the mapping, and each node includes a tooltip via a `<title>` element.

Nov 8, 2025
Loading thumbnail…

Maps

This choropleth map visualizes world population by country using a blue sequential color scale. It loads GeoJSON country boundaries and a CSV of population data, joining them by ISO3 country codes. The map is rendered with D3.js, using `d3.geoNaturalEarth1` projection and `d3.geoPath` to draw SVG paths. Countries with missing data are shown in gray. Hovering over a country reveals a tooltip with the country name and formatted population. A gradient legend displays low-to-high population values with tick marks.

Nov 8, 2025
Loading thumbnail…

Line Chart

This line chart visualizes the relationship between engine size and average vehicle price using a sampled car dataset. The chart aggregates raw CSV data with `d3.rollup` to compute mean prices per engine size, then renders a monotone-smoothed path with `d3.line` and SVG circles for each data point. Axes use `d3.axisBottom` and `d3.axisLeft`, with price formatting as currency. Interactive hover tooltips display exact values via mouse events, all styled with a dark theme.

Oct 25, 2025
Loading thumbnail…

Pie Chart

A pie chart built with D3 v7 displays the distribution of car types from a CSV file hosted on a GitHub Gist. The visualization aggregates raw records into categorical counts by type—Sedan, SUV, Truck, and Coupe—and shows each segment's percentage share using `d3.scaleOrdinal` with the `d3.schemeSet2` palette. D3's `arc` generator positions slices, while leader lines and external labels annotate each wedge. An interactive legend, populated via the `d3.select` API, highlights corresponding slices on hover, and a tooltip provides additional detail. The chart uses SVG rendering.

Oct 24, 2025
Loading thumbnail…

Scatter Plot

This scatter plot visualizes a car dataset, showing fuel efficiency versus price with points colored by car type. Built as a reusable D3.js chart function, it uses `d3.scaleLinear` for both axes, `d3.scaleOrdinal` with `d3.schemeSet2` for categorical colors, and SVG circles with hover tooltips. The data is loaded from a CSV file via `d3.csv` with `d3.autoType`, and rendered in an SVG container with axes generated using `d3.axisLeft` and `d3.axisBottom`.

Oct 24, 2025
Loading thumbnail…

Area Chart

This area chart visualizes the relationship between fuel efficiency (in miles per gallon) and engine size (in liters) for a sample of cars. A single blue, semi-transparent filled area rises to show engine size across the fuel-efficiency range, overlaid with axes and labels. The visualization is built with D3 v6, using `d3.area` to generate the area shape, `d3.csv` to load data from a GitHub Gist, and `d3.axisBottom` and `d3.axisLeft` for the axes. The chart is rendered as an SVG element.

Oct 23, 2025
Loading thumbnail…

Multi-Series Line Chart

This multi-series line chart examines the relationships between study hours, sleep hours, and exam scores for 187 students. The visualization displays three trends on a shared axis, with each series represented by a distinct color. Built with D3.js v7 and rendered as an SVG, the code uses `d3.text` and `d3.dsvFormat` to efficiently parse the comma-delimited CSV data file. The chart automatically detects column names and scales, providing a clean overview of how these academic factors correlate with performance.

Oct 20, 2025
Loading thumbnail…

Multi-Series Line Chart (Student_ID vs Hours, Sleep, Score)

This example uses a multi-series line chart to compare hours studied, sleep hours, and exam scores for each student, allowing viewers to spot trends across the dataset. The D3.js code loads a CSV file, dynamically detects column names, and renders three colored lines on a shared axis. It employs `d3.dsvFormat` for parsing and `d3.select` for SVG manipulation, with a custom legend indicating each series. The chart is rendered as an SVG with a dark theme and styled axes.

Oct 19, 2025
Loading thumbnail…

Sale Sample Data

This example presents a dark-themed bar chart titled “Sales by Product Line,” aggregating sales data from a CSV file fetched from a GitHub gist. It uses d3.js v7 APIs including `d3.csv`, `d3.rollups`, `d3.scaleBand`, `d3.scaleLinear`, and `d3.scaleOrdinal` to group records by product line, sum their sales, sort descending, and encode values as bar heights with a Tableau10 color scheme. The SVG rendering includes rotated x-axis labels, horizontal grid lines, axis titles, and a legend, all styled via CSS custom properties.

Oct 19, 2025
Loading thumbnail…

Combined Chart

This combined chart displays average study hours as bars and average exam scores as a line, grouped by sleep-hour bins. It uses `d3.rollups` to aggregate the CSV data and a dual-axis layout with an SVG render. The chart is built with D3 v7, featuring flexible column detection and dark-themed styling.

Oct 19, 2025
Loading thumbnail…

Scatter plot

This dark-themed scatter plot visualizes the relationship between hours studied and exam scores for 188 students, with each point colored by attendance percentage using a sequential turbo scale. The visualization loads data from a CSV file and renders it as SVG circles, employing D3 v7 scales for positioning and color encoding. Interactive tooltips display student details on hover, while grid lines and axis labels provide context for the academic performance metrics.

Oct 18, 2025
Loading thumbnail…

Multi-Series Line + Combined (Bar+Line)

This dashboard presents two charts built with D3.js v7 from a CSV sales dataset. The top visualization uses a multi-series line chart to track monthly trends for Sales and Profit. The bottom chart combines bars for Sales with an overlaid line for Profit Margin, providing a dual-axis view of volume versus efficiency. Data is parsed and aggregated by month using `d3.rollups` and `d3.timeParse`, with axes, grids, and scales configured via `d3.axisLeft`, `d3.axisBottom`, and `d3.scaleUtc`. Rendering uses SVG within a dark-themed HTML container.

Oct 17, 2025
Loading thumbnail…

Scatter (PRICEEACH vs QUANTITYORDERED, color = PRODUCTLINE)

This scatter plot shows the relationship between PRICEEACH and QUANTITYORDERED from a sales sample CSV, with each point colored by PRODUCTLINE using a Tableau10 ordinal scale. The visualization uses d3.csv to load and parse the data, then renders SVG circles positioned by linear scales for both axes. A legend built with HTML divs identifies the product lines, while the dark-themed chart includes axis labels, a title, and a rotated y-axis label. The code relies on d3.axisBottom, d3.axisLeft, d3.extent, and d3.scaleLinear for the quantitative encodings.

Oct 17, 2025
Loading thumbnail…

Sales Data Summary

This interactive dashboard summarizes sales data from a user-supplied CSV file. It displays dataset statistics and a preview table alongside an SVG bar chart ranking top products by sales. Built with D3.js v7, the page features a URL input that loads and parses the data, auto-detecting column names. The visualization updates dynamically, with the bar chart using D3 scales and axes to render the sorted sales figures.

Oct 6, 2025