K

kruthanreddy812@gmail.com

@KruthanReddy·21 public vizzes

Loading thumbnail…

Fork of Network

A force-directed network diagram maps relationships among clothing categories, with blue, green, and orange nodes representing gender groups and garment types, connected by gray links. The example uses d3.forceSimulation with forceLink, forceManyBody, forceCenter, and forceCollide to position nodes in an SVG canvas. Drag interactions, implemented via d3.drag, let users move nodes, while tick updates reposition links, circles, and text labels, and a title labels the chart.

Loading thumbnail…

Fork of Network

A static network diagram shows connections between clothing items and gender categories, with "Boys" linked to T-Shirt, Shorts, and Shirt, while "Girls" connects to Jeans, Skirt, and Saree, plus one cross-link from Shirt to Jeans. Built with D3 v7, the SVG rendering places nodes at fixed coordinates without force simulation, drawing gray lines for links, colored circles for nodes, and text labels. The code uses `selectAll`, `append`, and data joins to create the visualization directly from predefined arrays, with a title displayed at the top.

Loading thumbnail…

Fork of Network

This example uses D3 v7 to visualize a small clothing relationship network with a force-directed layout. Eight nodes represent clothing categories (Boys, Girls) and items (T-Shirt, Shorts, Shirt, Jeans, Skirt, Saree), while nine links show group assignments and outfit pairings. The code creates an SVG canvas and applies `d3.forceSimulation` with `forceLink`, `forceManyBody`, and `forceCenter` to position the elements. Groups appear in blue, items in green, with labels offset beside each node. A title marks the chart as an "Outfits Relationship Network."

Loading thumbnail…

Fork of Tree

This example shows a hierarchical tree of clothing categories, from a root node for "Clothing Family" down to individual outfit types like T-Shirt, Suit, and Saree. The code uses `d3.stratify` to convert a flat dataset of parent-child pairs into a tree structure, then applies `d3.tree` to compute the layout and renders it as SVG. Circles for nodes are color-coded by depth, with labeled text alongside each node and gray lines connecting linked nodes.

Loading thumbnail…

map Fork of Vanilla D3 Vibecoding Template

This choropleth maps U.S. state populations using a log-scaled color gradient, with lighter blues representing smaller populations and darker teals for larger ones. It loads TopoJSON state boundaries via d3.json and topojson, projects them with d3.geoPath and the geoAlbersUsa projection, and colors each path by matching FIPS IDs to 2020 Census data. A linear gradient legend shows the log-spaced color scale, while native SVG title elements provide hover tooltips with formatted population values.

Loading thumbnail…

Fork of Area Chart

This area chart visualizes the average quantity of laptops sold at different cost levels, using data loaded from a CSV file. It shows a smoothed line and a semi-transparent filled area beneath it, representing the trend of average sales as cost increases. The chart is built with D3 v7, using `d3.csv` to fetch the data, `d3.rollups` to compute averages, and `d3.area` with `d3.curveMonotoneX` for the filled region, alongside `d3.axisBottom` and `d3.axisLeft` for the axes.

Loading thumbnail…

Fork of Fork of HTML Starter

This visualization displays the average quantity of laptops sold at each price point, using a monotone smoothing spline to connect aggregated data points. The chart is built with D3.js v7, loading CSV data from a GitHub Gist and using `d3.rollups` to group records by cost and calculate the mean quantity sold. The line is rendered as an SVG path with `d3.line` and `d3.curveMonotoneX`, with red circles marking each aggregated value and axes provided by `d3.axisBottom` and `d3.axisLeft`.

Loading thumbnail…

Fork of Fork of D3 Starter

This example visualizes laptop sales distribution by company using a pie chart, with each slice labeled by its percentage of the total. Data is loaded from a CSV file via a GitHub Gist, and quantities are aggregated by company. The chart is rendered as an SVG using D3 v7, employing `d3.pie` and `d3.arc` to generate the pie geometry, `d3.scaleOrdinal` for categorical colors, and `d3.schemeCategory10` for the palette. A legend is built manually with SVG rectangles and text elements.

Loading thumbnail…

Fork of pie chart

This fork of a pie chart shows the distribution of laptop sales by company, using aggregated quantities from a CSV dataset loaded via `d3.csv`. The visualization computes per-company totals, then renders a standard SVG pie with `d3.pie` and `d3.arc`, scaling colors with `d3.scaleOrdinal` and `schemeCategory10`. A single centered group translates the chart to the middle of a 600×450 canvas, with each slice’s fill mapped from the company name.

Loading thumbnail…

Fork of Fork of D3 Starter

This visualization displays laptop sales as a pie chart, with each slice representing the total quantity sold per company. It uses D3.js version 3, specifically leveraging the `pie` and `arc` generators to compute slice geometry, and `scaleOrdinal` with `schemeCategory10` to assign colors. The data is loaded from a remote CSV file via D3's `csv` function, then aggregated by company before rendering. The chart is drawn as an SVG element, centered within a 600x450 pixel canvas, with a 150-pixel radius for the pie.

Loading thumbnail…

Fork of ICE-7 Resusable Scatter Plot

This example uses D3.js to create a reusable scatter plot of laptop sales data, displaying the relationship between cost and quantity sold. The chart is built with an SVG-based custom scatter plot API that constructs axes, labels, and title using `scaleLinear`, `extent`, `axisLeft`, and `axisBottom`. Each point is rendered as a steelblue circle with a radius of six pixels and 70 percent opacity. The code loads a CSV file from a GitHub Gist, parses it, and then applies the plot to a full-window SVG.

Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This scatter plot visualizes the relationship between laptop cost and quantity sold, using data loaded from a CSV file via `d3.csv`. Points are rendered as SVG circles with axes created through `scaleLinear`, `axisBottom`, and `axisLeft`. The chart uses a reusable function pattern, where the `scatterPlot()` module configures dimensions, margins, and accessors before being called on an SVG selection. The visualization fills the browser window and applies a custom font from Google Fonts for all text elements.

Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This visualization presents the classic Iris flower dataset as an animated scatter plot that cycles between four different variable pairings every two seconds. Each point represents a flower specimen, positioned according to the currently selected x and y axes from measurements like petal width and sepal length. Built with D3 v6, the example uses d3.scaleLinear for coordinate mapping, d3.axisLeft and d3.axisBottom for the axes, and the reusable chart pattern with join selections for efficient updates. The SVG rendering includes a custom Share Tech font and smooth transitions between axis configurations.

Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This example demonstrates a reusable scatter plot visualization of laptop sales data, showing the relationship between cost and quantity sold. It uses a D3.js module pattern to create a configurable chart component, with the `scatterPlot` function accepting setters for dimensions, margins, and data accessors. The data is loaded from a remote CSV file via `d3.csv()`, then parsed and rendered using `scaleLinear` for axes and `axisLeft`/`axisBottom` for tick marks. The implementation includes TODO notes about making the chart idempotent, and the page uses custom styling with the Share Tech font.

Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This fork of a reusable D3 scatter plot visualizes laptop sales data, plotting cost on the x-axis against quantity sold on the y-axis. Each circle represents a data point colored by area using `d3.scaleOrdinal` with `schemeCategory10`. Built with React hooks, the code uses `useRef` and `useEffect` to manage the SVG lifecycle, clearing previous renders before appending new ones via `d3.select`. Axes are generated with `d3.axisBottom` and `d3.axisLeft`, while scales use `d3.scaleLinear` and `d3.extent`. The data is loaded asynchronously from a CSV file hosted on GitHub.

Loading thumbnail…

Fork of HTML Starter

This example compares laptop cost and quantity sold across 160 records from a CSV file. A yellow line chart traces quantity sold over the record index, while thin orange bars represent cost values on the same axes. The visualization uses D3 v7 with SVG rendering, employing `d3.csv`, `d3.scaleLinear`, `d3.line`, and `d3.axisBottom`/`d3.axisLeft`. Axes, labels, and a legend for both series are included.

Loading thumbnail…

Fork of HTML Starter

A pink scatter plot compares laptop Cost and Quantity_Sold using data from laptop_sales_160.csv. The visualization maps price on the x-axis and units sold on the y-axis, with each circle representing a product. The code loads data with d3.csv, converts fields to numbers, and uses d3.scaleLinear with d3.axisBottom and d3.axisLeft for axes. Circles are appended as SVG elements with explicit x, y, and radius attributes, and axis labels are added as text elements.

Loading thumbnail…

Fork of HTML Starter

This bar chart displays laptop sales quantities by company, sourced from the laptop_sales_160.csv file. It uses D3.js v7 to bind the data, create a band scale for the x-axis, and a linear scale for the y-axis. The SVG rendering shows yellow bars for each company, with axes and labels generated using d3.axisBottom and d3.axisLeft.

Loading thumbnail…

Fork of HTML Starter

This example shows a bar chart of laptop sales by company, using a CSV dataset of 160 records. The visualization encodes each company’s total Quantity_Sold as the height of a steelblue rectangle, with an ordinal x-axis and linear y-axis. It is built with d3.csv, scaleBand, scaleLinear, and axisBottom/axisLeft, rendering to SVG. The chart loads data asynchronously and maps the CSV’s numeric column before drawing the bars.

Loading thumbnail…

Fork of React & D3 Starter

This example showcases a summary of the Laptop Sales dataset, displaying the file size, row count, and column count as text on a web page. It uses a `fetch` request to load a CSV file from a GitHub gist, parsing it with `d3.csvParse` into a structured dataset. The page then appends a static yellow triangle polygon to an SVG container using D3's selection and append methods. The code relies solely on D3 v7 for data parsing and basic SVG shape creation, with no interactive charts or visual encodings beyond the displayed metadata.

Loading thumbnail…

Fork of React & D3 Starter

This example shows a summary of a laptop sales CSV file, displaying the file size, total number of rows, and columns fetched from a raw GitHub gist. The code uses D3 v7's `csvParse` method to parse the data, and then renders a simple static yellow triangle onto an SVG canvas appended to the HTML body. The user interface is built with React and D3's `select` API, using a minimal SVG polygon to provide a basic visual element alongside the textual data summary.