saiabhishekmunnangi@gmail.com

@Saiabhi2610·30 public vizzes

Fork of country map

This fork of a country map visualizes average annual sunshine hours per U.S. state using a choropleth map. Hovering over a state reveals its exact yearly hours via a tooltip, with colors ranging from yellow to red based on a sequential scale. The visualization uses D3 v7’s `d3.geoPath` and `d3.geoAlbersUsa` projection to render TopoJSON state boundaries from the us-atlas dataset, while `d3.scaleSequential` and `d3.interpolateYlOrRd` handle color encoding. A linear gradient legend displays the hour range.

Nov 9, 2025

Loading thumbnail…

Fork of network

A force-directed network diagram maps research collaborations among eight hypothetical scientists, with node color encoding their department (AI, Biology, or Physics) and labeled text identifying each researcher. The visualization uses d3.forceSimulation with forceLink, forceManyBody, and forceCenter to position nodes, while an SVG viewBox renders the graph at responsive scale. Dragging is enabled via d3.drag, and link lines update positions on each simulation tick, with the node fill color assigned using a d3.scaleOrdinal domain mapped to the three research groups.

Nov 9, 2025

Loading thumbnail…

Fork of network

Nov 9, 2025

Loading thumbnail…

Fork of tree

This example presents a hierarchical tree of programming languages, grouped into families like C Family, Scripting Languages, and Functional Languages, with nested relationships such as C++ leading to C# and Java. It uses the D3.js v7 library with a `d3.tree` layout on a `d3.hierarchy` object, rendering nodes as circles colored by depth via `d3.scaleOrdinal`. Links are drawn as horizontal paths using `d3.linkHorizontal`, with text labels positioned next to each node. The visualization is built with SVG and includes static sample data defined in the script.

Nov 9, 2025

Loading thumbnail…

Fork of Fork of Simple World Map

This visualization shows a world map highlighting renewable energy production for 2024, using a yellow-green sequential color scale to indicate production levels across countries, with a legend and tooltip providing exact values. It renders the map as SVG using `d3.geoNaturalEarth1` projection and `d3.geoPath`, pulling geographic data from a TopoJSON world atlas. The code uses `d3.scaleSequential` with `d3.interpolateYlGn` to color countries, and a linear scale with axis for the legend. Countries not in the dataset appear gray, and the tooltip displays production in TWh or no data.

Nov 9, 2025

Loading thumbnail…

Fork of Simple World Map

This example shows a simple map of the world using the Natural Earth projection, with countries drawn as filled paths outlined in white. It first displays a graticule grid and an outline around the map, then loads geographic data from the visionscarto-world-atlas via a TopoJSON URL. The code uses d3.geoNaturalEarth1, d3.geoPath, and d3.geoGraticule to project and render shapes, while topojson-client’s feature method converts TopoJSON to GeoJSON. Country boundaries are rendered as SVG paths without additional visual encoding.

Nov 9, 2025

Loading thumbnail…

Fork of HTML Starter

This example displays a world map colored by values joined from a CSV dataset, with a hover tooltip showing each country’s name and numeric value. It renders an SVG using D3 v7’s `d3.geoNaturalEarth1` projection and `d3.geoPath`, loading country boundaries from TopoJSON via `world-atlas`. Country colors are assigned through a sequential `d3.scaleSequential` interpolator, while the CSV is joined using a `Map`. The tooltip appears on mouseover events, positioned at the cursor.

Nov 9, 2025

Loading thumbnail…

Fork of Fork of line chart

A line chart shows average engagement over time, with yearly mean values computed from a CSV dataset using d3.rollup and d3.mean. The SVG rendering uses d3.axisBottom and d3.axisLeft for axes, with a d3.line generator applying curveMonotoneX for smoothing. Data points appear as circles, and the y-axis measures average engagement while the x-axis displays years. The chart is built with D3 v7, drawn in an SVG container, and styled with a blue stroke and filled dots.

Oct 27, 2025

Loading thumbnail…

Fork of line chart

This fork of a line chart displays the average engagement metric over time, with each point representing the mean engagement for posts on a given date. The visualization aggregates data from a CSV file containing social media post information. Using D3 v7, the chart renders an SVG line with a monotone curve, individual data point markers, and formatted axes. It leverages D3's `scaleTime`, `scaleLinear`, `rollup` for grouping, and `line` generator, with time-based parsing and formatting for the date axis.

Oct 27, 2025

Loading thumbnail…

Fork of area chart

This chart shows the cumulative engagement of a social media dataset over time, using an area chart to visualize the growing total as a filled region. The visualization is rendered as SVG using D3 v7, with the x-axis representing dates and the y-axis showing the cumulative sum of engagement values. The code loads data from a CSV file, aggregates engagement by day using `d3.rollup` and `d3.sum`, then computes the running total. The area path is drawn with `d3.area` and a monotone curve, styled with a light blue fill and steel blue stroke, alongside axes labeled "Date" and "Cumulative Engagement".

Oct 27, 2025

Loading thumbnail…

Fork of Fork of line chart

This line chart shows the trend of average engagement over time, with each date aggregated from the dataset and displayed as a smooth, monotone curve. The visualization uses D3.js v7 to parse CSV data, group entries by date, and compute the mean engagement value per day. The chart renders as an SVG with a time-scaled x-axis and a linear y-axis, featuring a seagreen path and circular markers at each aggregated point. The code relies on `d3.csv`, `d3.rollup`, `d3.scaleTime`, `d3.line` with `curveMonotoneX`, and axis generators.

Oct 27, 2025

Loading thumbnail…

Fork of line chart

This example demonstrates a forked implementation of a basic line chart using D3.js version 3. The visualization renders a simple line plot that maps data points across an x-y coordinate system, with the chart’s axes and path generated through D3’s `d3.svg.line()` and `d3.scale.linear()` APIs. The code constructs the SVG elements dynamically, tying scales to the data domain and range. However, the actual data series and interactive behaviors are not defined in the visible files, leaving the chart as a template that would be populated with data for full rendering.

Oct 27, 2025

Loading thumbnail…

Fork of Fork of pie chart

This pie chart shows the distribution of posts across platforms (Twitter, Facebook, Instagram, YouTube, Reddit) using data from a CSV file. It displays both the count and platform name directly on each slice, with a legend to the right for clear identification. The visualization is built with D3.js v7, using `d3.pie()` to compute the arc segments and `d3.arc()` for the slice geometry, while `d3.scaleOrdinal()` with `d3.schemeTableau10` assigns colors. Data aggregation relies on `d3.rollup()` to count platform occurrences, and the SVG output reserves extra canvas space for the legend.

Oct 27, 2025

Loading thumbnail…

Fork of pie chart

This fork of a pie chart visualizes categorical data as a donut-style ring with an accompanying legend. The code uses D3 v7 and renders the chart by mapping input data to arc paths via `d3.pie` and `d3.arc`, with each slice colored distinctly and a legend showing stroke outlines. The chart provides a static, non-interactive view of proportional shares, with text labels absent and only the legend indicating categories.

Oct 26, 2025

Loading thumbnail…

Fork of HTML Starter

This example shows a minimal web page displaying the static text “Hello HTML!” centered on a white background. The text is styled with a 12em font size through a CSS class. The code uses standard HTML structure, linked external CSS for presentation, and a JavaScript module that logs “hello world” to the console. The project relies on basic web technologies rather than visualization-specific libraries, serving as a simple starting point.

Oct 26, 2025

Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This scatter plot shows the relationship between author followers and engagement for a social media misinformation dataset. It uses the D3.js v7 library to load CSV data and render an SVG visualization. The reusable `scatterPlot()` component builds the chart with `d3.scaleLinear` for axes, `d3.extent` for domains, and `d3.axisBottom`/`d3.axisLeft` for tick marks. Circles represent individual posts, with labeled axes for author follower counts and engagement levels.

Oct 26, 2025

Loading thumbnail…

Fork of HTML Starter

This fork of the HTML Starter visualizes 156 months of synthetic climate data from 2010 to 2022, combining three variables in a single SVG chart. It shows rainfall as skyblue bars against the left axis, while temperature and CO₂ appear as tomato and green lines against the right axis. The code uses d3.scaleTime, d3.scaleLinear, d3.axisBottom, d3.axisLeft, d3.axisRight, and d3.line to render the axes and paths. Data are generated in-browser with Math.sin, Math.cos, and Math.random.

Oct 20, 2025

Loading thumbnail…

Fork of HTML Starter

This multi-series line chart displays three synthetic data streams—sales, profit, and expense—across 150 indexed points. The visualization uses D3 v7 to generate the data and render an SVG line chart with distinct colored lines for each series. The chart includes labeled axes for the index and value, a chart title, and a manual legend identifying each line. The code uses d3.range to create the data, and d3.scaleLinear, d3.line, d3.axisBottom, and d3.axisLeft to construct the visualization.

Oct 20, 2025

Loading thumbnail…

Fork of Melting Data for Multiple Lines

A multi-series line chart displays trends for Sales, Revenue, and Profit, plotting lines color-coded by metric. Built with D3.js v7, the code uses `d3.scaleLinear` for axes, `d3.line` for path generation, and `d3.axisBottom`/`d3.axisLeft` for gridlines and ticks. Data is loaded from a CSV file and rendered as SVG, with a legend displaying the color mapping.

Oct 20, 2025

Loading thumbnail…

Fork of D3 Scatter Plot

This scatter plot visualizes BMW engine size versus price for model years 2010–2024, with each point colored by fuel type. The D3.js v7 code loads data from a CSV file and uses `d3.scaleLinear` for both axes, `d3.scaleOrdinal` with `schemeTableau10` for fuel type colors, and `d3.axisBottom` and `d3.axisLeft` for chart axes. The SVG rendering includes axis labels, a title, and a legend generated from the color domain.

Oct 20, 2025

Loading thumbnail…

Fork of Refactored Bar Chart

This is a bar chart that ranks the top 10 BMW models by total sales volume from the provided dataset, which includes sales records with attributes like model, year, region, and sales volume. The chart uses a horizontal bar layout where bar length encodes sales volume, and each model is labeled on the y-axis. Built with React and D3 v7, the visualization computes aggregation via `d3.rollups` and `d3.sum`, then sorts and slices the data to highlight the highest-selling models. The layout uses `scaleBand` for the categorical y-axis and `scaleLinear` for the quantitative x-axis, with visual elements rendered as SVG rectangles, and axes are drawn using custom components and `d3.axisBottom`.

Oct 20, 2025

Loading thumbnail…

Fork of Pathetic Bar Chart

This bar chart shows the average sales volume for each BMW model, computed from a CSV dataset of car sales spanning 2010 to 2024. The visualization uses D3.js to group the data by model and calculate the mean sales volume, then renders these aggregates as a series of rectangles. The chart is built with SVG, with axes rotated for readability, and bars that highlight on hover. The visualization is implemented as a React component that loads data asynchronously.

Oct 20, 2025

Loading thumbnail…

Fork of React & D3 Vibecoding Starter

This example shows a React and D3 bar chart of BMW sales volumes across different models, using data loaded from a CSV file and rendered as SVG. The chart displays the average sales volume for each car model, with interactive bars that highlight and dim upon selection. It uses D3 v7 APIs such as `scaleBand`, `scaleLinear`, `axisBottom`, and `axisLeft` within a React component structure. The implementation leverages a `ResizeObserver` for responsive dimensions and D3 joins for rendering the bars and axes.

Oct 20, 2025

Loading thumbnail…

Fork of React & D3 Vibecoding Starter

This fork demonstrates a React & D3 bar chart showing the frequency distribution of letters in a dataset, with hover and click interactions that highlight selected bars. The visualization uses React 19 with hooks for state management and container dimensions via ResizeObserver, while D3 v7 handles scales, axes, and SVG rendering. The code creates a bar chart from CSV data, featuring gridlines, axis labels, and smooth color transitions for interactivity. The example shows a modular approach where D3 handles DOM manipulation within rendered SVG elements while React manages the component lifecycle and state updates.

Oct 19, 2025

Loading thumbnail…

Fork of D3 Starter

This example displays a minimal “Hello D3” message in the center of the page, with oversized text scaled to 14em. It uses the D3 v7 library’s `select` function to target the body element and set its text content directly. The rendering approach is straightforward DOM manipulation, with an import map loading the D3 module from a CDN and a module script executing the update. The page serves as a basic starter template, with all styling defined inline in a CSS block.

Oct 16, 2025

Loading thumbnail…

Fork of D3 Starter

Oct 16, 2025

Loading thumbnail…

Fork of HTML

This example is a JavaScript tool that generates three synthetic CSV datasets for practice. It creates a bar chart dataset of 120 product sales, a scatter plot dataset of 150 height and weight observations, and a multi-series dataset of 200 monthly metric samples. The code uses the DOM `document.createElement` and `a.click()` API to trigger automatic file downloads of each CSV. It also leverages JavaScript's `Math.random` and `encodeURIComponent` for data generation and file encoding, all within a single HTML page.

Oct 16, 2025

Loading thumbnail…

bar chart

This bar chart shows total sales aggregated by product category from a 120-sample dataset (bar_dataset_120.csv). Each bar’s height encodes the summed sales value per category, with a color encoding distinguishing categories and a tooltip available on hover. The visualization is built using Vega-Lite’s declarative specification, embedded via vega-embed, and relies on an aggregate transform to compute the sum of sales grouped by category. The chart includes labeled axes, a title with subtitle, and disables the default action menu.

Oct 16, 2025

Loading thumbnail…

Fork of React & D3 Vibecoding Starter

This example shows an interactive bar chart of letter frequencies from a CSV dataset. The visualization renders seven bars with rounded corners and gridlines, where clicking a bar highlights it and dims the others. Built with React and D3 v7, it uses `scaleBand` and `scaleLinear` for scales, `axisBottom` and `axisLeft` for axes, and a `ResizeObserver` in a custom `useDimensions` hook to handle responsive sizing. D3's data joins update the bars, with click handlers managing selection state through React's `useState`.

Oct 16, 2025

Loading thumbnail…

Fork of D3 Starter

This example demonstrates the data-loading process for a garden dataset, displaying summary statistics including file size in kilobytes, row count, and column count within a styled summary box. The visualization uses D3 v7’s `d3.csv` method to parse a CSV file fetched from a GitHub Gist, routed through a proxy URL to bypass CORS restrictions. A static SVG circle provides decorative context, while the script dynamically updates the DOM via `d3.select` and `textEl.html`. Error handling displays failure messages if the fetch or parsing encounters issues, and the console logs the first five rows for verification.

Oct 5, 2025