Skip to main content
Log in
D

deepthinaidu2001@gmail.com

@deepthinaidu16·14 public vizzes

Loading thumbnail…

tree diagram

A hierarchical tree diagram organizes programming languages into a root, categories, and individual languages. Each level is distinguished by a unique color, with nodes and labels displayed across a horizontal layout. The visualization uses D3.js v7, specifically the `d3.stratify` and `d3.tree` APIs to structure and position the hierarchy. Links are drawn with `d3.linkHorizontal`, and nodes are circles colored by depth, rendered as SVG within a `viewBox` canvas. A small legend clarifies the color mapping for root, category, and language depths.

Nov 9, 2025
Loading thumbnail…

map visualization

This map visualization displays global cost of living indices using a color scale from yellow to blue, with gray indicating missing data. It uses D3 v7 to load TopoJSON world geography and CSV country data, generating simulated cost values for each nation. The visualization employs d3.geoNaturalEarth1 projection with d3.geoPath to draw country boundaries as SVG paths, and includes an interactive hover tooltip that reveals each country’s index value. A sequential color legend with a linear gradient and axis is rendered at the bottom right to show the value range from 30 to 100.

Nov 9, 2025
Loading thumbnail…

network

This interactive network diagram visualizes a study group of seven students, with nodes representing each person and links indicating which pairs study together. Nodes are colored by academic major (CS, Math, Physics, Art), with a legend in the top-left corner. The layout is computed using a force-directed simulation built on D3 v7 APIs, including `d3.forceSimulation`, `d3.forceLink`, `d3.forceManyBody`, and `d3.forceCenter`. Users can drag nodes to explore the network, and the simulation updates positions accordingly, with node positions rendered as SVG circles and text labels.

Nov 9, 2025
Loading thumbnail…

map viz

This choropleth shows world population by country using a natural Earth projection. It renders country boundaries as SVG paths via d3.geoPath, with fill colors derived from a sequential YlGnBu scale encoding population values from a small embedded dataset. Hovering triggers a tooltip displaying country name and population. A gradient legend with an axis communicates the color-to-value mapping, while nations lacking data appear gray. The map loads country geometries from the world-atlas TopoJSON file, processed with topojson.feature.

Nov 8, 2025
Loading thumbnail…

Q4

This area chart displays monthly sales figures over time from a company performance CSV dataset. The visualization uses D3.js version 7.8.5 to load and parse the data, then renders a blue-filled area with a darker stroke line. It employs d3.scaleTime and d3.scaleLinear for the x and y axes, respectively, and constructs the shape using d3.area. The chart includes labeled axes for month and sales, with margins and an SVG viewport of 700 by 400 pixels.

Oct 27, 2025
Loading thumbnail…

Q3

This example shows a line chart tracking sales over time. It plots the monthly sales figures from a CSV file, with a line connecting data points and small circles marking each value. The chart is rendered as an SVG using D3.js, specifically employing `d3.scaleTime`, `d3.scaleLinear`, and `d3.line` to map the data. The source data is loaded via `d3.csv` from a GitHub Gist.

Oct 27, 2025
Loading thumbnail…

Q2

This pie chart displays the share of total sales per year from a `company_performance.csv` file. The chart renders as an SVG and uses coordinates loaded from the file, which are parsed with `d3.timeParse` and grouped by year with `d3.rollup`. Slice paths are generated via `d3.pie` and `d3.arc`, while colors come from `d3.scaleOrdinal` with the `d3.schemeTableau10` palette. Labels are positioned using the arc centroid, and a legend lists each year. The document references the D3 library (v7.8.5) via a CDN and an external data source hosted on GitHub Gist.

Oct 27, 2025
Loading thumbnail…

Q1

A reusable scatter plot visualizes company performance by mapping Sales to the x-axis, Profit to the y-axis, and scaling circle radius to Expenses. Semi-transparent blue circles reveal data density and overlap. Built with D3.js v7, the example loads a CSV file via `d3.csv`, then uses `d3.scaleLinear` for axes, `d3.scaleSqrt` for proportional sizing, and `d3.axisBottom`/`d3.axisLeft` to render the chart in an SVG container.

Oct 26, 2025
Loading thumbnail…

Fork of D3 Starter

This dashboard displays four coordinated D3.js (v7) visualizations of company performance: a reusable scatter plot mapping sales against profit with point size encoding expenses, a pie chart of annual sales share, and line and area charts showing sales over time. The data is loaded from a remote CSV file and parsed with `d3.csv`, using `d3.timeParse` to decode month-year strings. All charts render as SVG and include a tooltip implemented with `d3.select`, while axes are generated via `d3.axisBottom` and `d3.axisLeft`, with scales built using `d3.scaleLinear` and `d3.scaleSqrt`.

Oct 26, 2025
Loading thumbnail…

Fork of D3 Starter

This example shows monthly Sales, Profit, and Expenses for a company from 2013 to 2015, combining translucent blue bars for sales with colored lines for each metric. The visualization uses D3 v7 to load CSV data, with `d3.scaleBand` and `d3.scaleLinear` for axes, `d3.line` for the line paths, and `d3.axisBottom` and `d3.axisLeft` for ticks. A hover tooltip and a color-coded legend support interpretation of the multi-series data.

Oct 19, 2025
Loading thumbnail…

Fork of D3 Starter

This scatter plot visualizes company performance by plotting monthly profit against expenses. Each blue circle represents a month, with axis labels for both financial metrics and hover tooltips showing exact values. Built with D3 v7, the visualization loads CSV data from a GitHub gist, uses `d3.scaleLinear` for scaling, `d3.axisBottom` and `d3.axisLeft` for axes, and animates tooltip transitions via `d3.transition` on mouseover events.

Oct 19, 2025
Loading thumbnail…

Fork of D3 Starter

A bar chart displays monthly company sales, with bars colored on a blue sequential scale to indicate value. The chart loads comma-separated data from a remote GitHub gist and uses D3 v7 alongside its CSS-based transition and selection APIs. It builds the visualization with `d3.scaleBand` and `d3.scaleLinear`, renders axis tick labels rotated via an SVG transform, and shows a tooltip on mouseover using `transition.style` and absolute positioning. The SVG rendering is static except for tooltip fade transitions.

Oct 19, 2025
Loading thumbnail…

Fork of HTML Starter

This example displays a single, centered message reading “Hello HTML!” in extremely large type. The visualization is a minimal HTML page using a stylesheet for text formatting and a JavaScript module that logs “hello world” to the console. It relies on a straightforward DOM structure with a message div, styled via CSS, and an imported index.js script for the console output.

Oct 19, 2025
Loading thumbnail…

Fork of HTML Starter

This visualization summarizes South Indian movie data, displaying total count, average IMDB rating, and average box office earnings in a text summary, alongside a full data table and a bar chart of box office collections. The bar chart uses d3.scaleBand and d3.scaleLinear to map movie titles and revenue, with axes generated via d3.axisBottom and d3.axisLeft. The code loads a CSV dataset with d3.csv, cleans the data, and renders the SVG chart with blue rectangles, rotated x-axis labels, and custom title text.

Oct 5, 2025