V

vydeeshm@gmail.com

@vydeesh970·26 public vizzes

Loading thumbnail…

network

This network visualization displays the conceptual relationships between authors and papers using a force-directed layout. Green author nodes (radius 10) connect via gray links to purple paper nodes (radius 14), with labels positioned above each circle. The graph encodes a many-to-many bipartite structure where each author collaborates on multiple papers. Built with D3 v7, the implementation uses `d3.forceSimulation`, `d3.forceLink`, `d3.forceManyBody`, `d3.forceCenter`, and `d3.forceCollide` to run physics-based layout. Data loads from `graph.json` via `d3.json`, while `d3.drag` enables interactive node repositioning, and XML/SVG `<circle>`, `<line>`, and `<text>` elements render the output in a white rounded card.

Loading thumbnail…

tree

This example displays a hierarchical tree of programming languages, organizing them into compiled and interpreted categories with individual language leaves. The visualization uses d3.csv to load the data, d3.stratify to convert the flat table into a hierarchy, and d3.tree to compute the layout. Links are drawn with d3.linkHorizontal, while nodes differentiate types using shapes—circles for parent categories and diamonds for leaves—with a d3.scaleOrdinal assigning colors by depth. SVG rendering presents the final structure against a styled page background.

Loading thumbnail…

maps

This choropleth map shows U.S. state crime rates per 100,000 people, with states colored on a sequential orange-red scale based on values loaded from a CSV file. The visualization uses D3 v7 and TopoJSON to render state boundaries via `d3.geoAlbersUsa` projection and `d3.geoPath`, while encoding data with `d3.scaleSequential` and `d3.interpolateOrRd`. A canvas-generated gradient legend with a `d3.axisBottom` scale accompanies the SVG map, and hover interactions display crime values and state names in a tooltip.

Loading thumbnail…

Fork of D3 Starter

This choropleth maps crime rates per 100,000 people across U.S. states, coloring each state on a red-orange gradient from low to high values. The map uses an Albers USA projection via `d3.geoAlbersUsa()`, with state boundaries drawn through `d3.geoPath()`. State-level data from a CSV is joined to TopoJSON features from the us-atlas package, and a hover tooltip shows each state’s name and rate. A gradient legend, rendered as a Canvas image embedded in the SVG, includes an axis from `d3.axisBottom()`.

Loading thumbnail…

question-1

This choropleth map visualizes world population by country using a natural Earth projection. It colors each country with a sequential YlGnBu color scale, where darker shades indicate higher population values, and provides a legend showing the population scale. The visualization uses D3's `d3.geoNaturalEarth1` projection and `d3.geoPath` to render countries from TopoJSON data, while population CSV values are mapped to each country's numeric ID. Interactive tooltips display country names and population totals on hover, built with D3 event handlers and an HTML overlay.

Loading thumbnail…

scatter plot ICE-7

A scatter plot of 120 cars from the classic fuel-economy dataset, with axes, color, and point size mapped to numeric and categorical columns via dropdown menus. The D3 v7 reusable component uses `d3.scaleLinear`, `d3.scaleSqrt`, and `d3.scaleOrdinal` with `d3.schemeTableau10`, rendering SVG circles with animated transitions. Grid lines, axes, tooltips, and legends update dynamically when the user selects different columns.

Loading thumbnail…

area chart ICE-7

This area chart visualizes 24 months of synthetic household electricity usage in kWh. The filled area emphasizes the magnitude of values relative to a zero baseline, with an overlaid line and interactive dots. Built as a reusable D3 component using d3.area and d3.line, it renders in SVG with animated updates. The chart includes axes, gridlines, axis labels, and a hover tooltip, all managed through D3 v7 selection joins and the public update method.

Loading thumbnail…

line chart ICE-7

This example shows a reusable line chart tracking synthetic monthly household electricity usage in kWh over 24 months. Built with D3 v7, the chart uses `d3.scaleTime()` and `d3.scaleLinear()` for axes, `d3.line()` for the series path, and `d3.axisBottom()` and `d3.axisLeft()` for labeled axes with gridlines. The SVG rendering includes data points as circles, a hover tooltip, and an animated update capability through the `lineChart.update()` API, allowing redraws with new CSV data.

Loading thumbnail…

pie chart ICE-7

This interactive pie chart visualizes a synthetic household budget allocation across eight categories, displaying each slice with its percentage label and a matching legend. Built with D3 v7, it uses `d3.pie` to compute arc angles, `d3.arc` for slice paths, and `d3.scaleOrdinal` with `d3.schemeTableau10` for colors. The SVG rendering includes leader lines, hover tooltips with transitions, and a reusable component pattern supporting `update()`. A tooltip provides exact values on mouseover, while legend swatches use the same color scale.

Loading thumbnail…

pie chart ICE-7

This chart displays monthly electricity usage for a household over 24 months, using a line with circular markers to show seasonal peaks in summer and winter. Built as a reusable D3 v7 component in SVG, it employs `d3.scaleTime`, `d3.scaleLinear`, and `d3.line` for rendering, with `d3.axisBottom` and `d3.axisLeft` for labeled axes and gridlines. The component exposes a public API including `.update()` for redrawing with new data, reading from a CSV file with `date` and `value` columns. A hover tooltip provides interactive feedback.

Loading thumbnail…

Scatter plot ICE-7

This is a reusable scatter plot built with D3 v7 that visualizes 120 car records from a CSV file, showing relationships between four numeric variables (horsepower, MPG, weight, displacement) with matching dropdown controls. Users can reassign each axis, the color encoding (by cylinders, origin, or year), and the point size (by weight, horsepower, or displacement) dynamically. The point areas are scaled via `d3.scaleSqrt`, colors use `d3.scaleOrdinal` with Tableau schemes, and SVG dots update with data joins, grid lines, axes, and an interactive tooltip.

Loading thumbnail…

ICE-7

This interactive scatter plot displays 120 car records from a CSV file, plotting attributes like horsepower, MPG, weight, and displacement against each other. Users can dynamically select which numeric column drives the x-axis, y-axis, point size, and categorical color (cylinders, origin, or year) via dropdown menus. The visualization, rendered as an SVG using D3 version 7, updates axes, gridlines, and legends in real time. Point radius is scaled with `d3.scaleSqrt` to encode area proportionally, while a hover tooltip shows details about individual cars.

Loading thumbnail…

ICE-7

This example presents a reusable D3 v7 area chart showing 24 months of synthetic household electricity usage in kWh, with the filled area emphasizing magnitude relative to a zero baseline. It renders an SVG with a gradient-styled area, an overlaid line, dots, axes, gridlines, and a hover tooltip that displays exact values. The chart uses d3.area, d3.line, d3.scaleTime, d3.scaleLinear, and d3.axisBottom/axisLeft, and supports updates via a public update method that redraws the visualization with new data.

Loading thumbnail…

ICE-7

This interactive line chart visualizes 24 months of synthetic household electricity usage data from a CSV file. The line and points track seasonal consumption patterns, rising and falling across the year with peaks in summer and winter months. Built with reusable D3 v7 component architecture, it uses `d3.scaleTime()`, `d3.scaleLinear()`, and `d3.line()` to render the SVG, with gridlines, axes, and tooltips. The chart supports dynamic updates through a public `.update()` method, making it adaptable for any time-series dataset with date and value columns.

Loading thumbnail…

ICE-7

This chart displays a synthetic household budget allocation as an animated, labeled pie chart built with D3 v7. It breaks down spending across eight categories like Housing and Transportation, showing each slice’s percentage via labels connected by leader lines. The visualization uses `d3.pie`, `d3.arc`, and `d3.scaleOrdinal` with `d3.schemeTableau10`, rendered as SVG. A legend lists categories with color swatches, and hovering over slices reveals a tooltip with exact values and percentages.

Loading thumbnail…

ICE-7

ICE-7 is a bare-bones HTML starter that renders a static, centered message reading “Hello HTML!” in enormous type. It uses plain CSS to size and position the text, while a single JavaScript file logs “hello world” to the console. The example demonstrates the minimal structure of a web page with separate HTML, CSS, and JavaScript modules, but it does not include any data, interactive elements, or visualization libraries. The rendering relies entirely on standard browser layout and styling, with no canvas, SVG, or external frameworks present.

Loading thumbnail…

ICE-7

This interactive scatter plot compares car models by horsepower, MPG, weight, and origin, using drop-down menus to switch the x- and y-axis variables and toggle point size encoding. D3 v7 builds the SVG visualization, applying scaleLinear, scaleSqrt, and scaleOrdinal with a Tableau10 color scheme to map data attributes. Points animate in via transition, and hover tooltips, powered by mouseover events, reveal car details. The legend groups points by origin, while drop-down selections trigger chart redraws through reusable configuration accessors.

Loading thumbnail…

ICE-6

This example shows a bar chart of value by category using D3 v7 in SVG. The chart uses `d3.scaleBand` for the x-axis and `d3.scaleLinear` for the y-axis, with bars and gridlines drawn via `d3.axisLeft` and `d3.axisBottom`. A gradient fill is defined with `linearGradient` stops, and bars include a `<title>` for hover text. The data comes from a local CSV file.

Loading thumbnail…

Fork of ICE-6(Scatter plot)

This scatter plot from the ICE-6 series visualizes monthly sales versus profit using D3 v7 with SVG rendering. Each circle encodes a month’s sales on the x-axis and profit on the y-axis, with a hover tooltip revealing exact values via mouse events. The chart includes gridlines, axis labels, and a legend, pulling data from a local CSV file. A title and caption provide context, while the dark theme and scaling functions (d3.scaleLinear, d3.extent) structure the visualization clearly.

Loading thumbnail…

ICE-6(Scatter plot)

This interactive D3.js v7 scatter plot uses a dark-themed SVG canvas to visualize the Iris dataset, plotting sepal length versus petal length for 150 flowers. Each circle encodes a data point colored by species using a `d3.scaleOrdinal` color mapping. The chart features labeled axes, gridlines, and a legend. Hovering over a point triggers a tooltip that displays the exact species and measurement values.

Loading thumbnail…

Fork of ICE-6(multi series)

This fork of ICE-6 combines bar and line series to compare monthly sales and profit data loaded from a CSV file. Bars encode sales values while a monotone-curved line shows profit, with both sharing a linear y-scale and band x-scale. The D3 v7 chart includes gridlines, axis labels, a legend, and interactive tooltips on bars and points. SVG rendering is used throughout, leveraging `d3.csv`, `d3.scaleBand`, `d3.scaleLinear`, `d3.axisBottom`, `d3.axisLeft`, `d3.line`, and event handlers for mouse and keyboard accessibility.

Loading thumbnail…

ICE-6(multi series)

This example combines bar and line charts to compare sales and profit across seven months, with bars encoding sales and a monotone line tracking profit. The SVG visualization is built with D3 v7, using `d3.scaleBand`, `d3.scaleLinear`, and `d3.line` with `d3.curveMonotoneX`. Interactive tooltips appear on bar and dot hover via mouse events, while gridlines, axis labels, and a custom legend clarify the dual-series data loaded from a CSV file.

Loading thumbnail…

ICE-6

This example visualizes a force-directed simulation of labeled nodes and links, where node positions are influenced by both collision detection and a centering force. It uses `d3.forceSimulation` with `d3.forceCollide` and `d3.forceCenter` to compute the layout, while `d3.select` and `transition.attrTween` animate the node elements as the simulation steps. The data is embedded within the code as a static array of node objects and link references, and the rendering relies on standard SVG circles and lines. The simulation runs continuously, updating positions each tick.

Loading thumbnail…

ICE-6

This example displays a static HTML starter page with a simple message, styled with Arial font and a light gray background. It uses a minimal SVG element with a white fill and border, though the SVG remains empty. The code relies on standard HTML, CSS, and a JavaScript file that logs “hello world” to the console. No data visualization or interactive behavior is present; the page simply renders a centered heading and message.

Loading thumbnail…

vydeesh

This interactive scatterplot visualizes the Iris dataset, comparing sepal length and width across three species using D3 v7's SVG rendering. The visualization employs a hover interaction on the legend, which fades non-targeted data points to highlight specific species. The chart features BBC-style color coding, with distinct purple tones assigned to each species. The code uses D3's `select` and `join` APIs to efficiently manage and update SVG elements, while a `ResizeObserver` monitors the container for responsive resizing.

Loading thumbnail…

ice5

This interactive scatter plot visualizes the Iris dataset, comparing sepal length and width across three species of iris flowers. The visualization uses d3.v7 to render SVG elements, with points colored by species according to a BBC-inspired color palette. Users can hover over legend items to highlight corresponding data points, and the chart includes interactive features like responsive resizing through ResizeObserver. The data is loaded from a remote CSV file containing Fisher's Iris dataset, featuring labeled axes, a legend, and clean typography for readability.