kovuribalanagavinay@gmail.com

@kbnvinay·12 public vizzes

Fork of ICE-8_Network

This interactive network diagram visualizes collaborations between authors, books, and publishers as a force-directed graph. Node color and shape distinguish the three entity types, with links showing authorship and publication relationships. The visualization uses d3.forceSimulation with link, charge, and center forces to position nodes, while d3.scaleOrdinal maps entity types to color. Hovering over a node triggers a tooltip that displays information. The graph animates as the simulation runs, with all elements rendered as SVG.

Nov 2, 2025

Loading thumbnail…

Fork of Tree Graph ICE 8

A family tree visualization displays five generations of the Kovuri lineage, with each generation distinguished by a unique shape: circles, squares, diamonds, and triangles. The tree uses a hierarchical layout with connecting lines between parent and child nodes. The code leverages D3 v7’s `stratify` method to convert a flat array of family members into a hierarchy, then applies the `d3.tree` layout to position nodes. Each node renders as an SVG shape colored by its depth, with a legend explaining the generation-specific shapes and colors.

Nov 2, 2025

Loading thumbnail…

Fork of ICE-8

This choropleth shows a world map with countries colored by their Pasta Variety Index, a higher value indicating more varieties. Hovering reveals each country’s value via a tooltip. Built with D3 v7 and TopoJSON, it uses `d3.geoMercator` and `d3.geoPath` to project the 110m country outlines, with a sequential `YlOrRd` color scale mapping values from 4 to 13. The map fetches world-atlas data asynchronously and renders to SVG.

Nov 1, 2025

Loading thumbnail…

Fork of Map

This interactive map of Italy visualizes a playful, made-up “Pasta Variety Index” for ten major cities. Circle size and color encode the index value on top of the country’s geographic outline, with a hover tooltip revealing city details. The visualization is built with D3.js v7, rendering to SVG, and uses the `topojson-client` library to load world-atlas TopoJSON data. A custom `d3.geoPath` projection draws the country, while a simple CSS-based tooltip provides interactivity.

Nov 1, 2025

Loading thumbnail…

Fork of Fork of area chart

This example displays the average car price by brand as a single filled area, using a dataset of ten automotive manufacturers. The visualization encodes brands along the x-axis with a point scale and prices on the y-axis with a linear scale, producing a smooth area path that highlights price variations across brands. The chart is rendered as an SVG using D3 v7, with the area generated by the `d3.area()` generator and populated with axes via `d3.axisBottom` and `d3.axisLeft`. Light steelblue fills the area beneath the steelblue stroke, while rotated brand labels on the x-axis improve readability.

Oct 26, 2025

Loading thumbnail…

Fork of ICE-7 Hasini Line Chart

This line chart displays average car prices for ten brands, sourced from an inline dataset in the code. Built with D3 v7, it uses `d3.scalePoint` for the categorical brand axis and `d3.scaleLinear` for the price axis. A line path is drawn with `d3.line`, and individual data points are rendered as tomato-colored circles. The SVG includes rotated x-axis labels and axis titles, with axes generated via `d3.axisBottom` and `d3.axisLeft`.

Oct 26, 2025

Loading thumbnail…

Fork of piechart

This pie chart visualizes the average car price by brand, using a dataset of 50 vehicles across ten manufacturers. Each slice represents a brand, with its size determined by the mean price of its cars, and labels display the brand name and average value. The chart is built with D3 v7, using `d3.pie()` to compute arc data, `d3.arc()` to render the slices as SVG paths, and `d3.scaleOrdinal` with the `schemeSet3` color palette. Average prices are calculated via `d3.rollup` and `d3.mean` before the pie is drawn.

Oct 26, 2025

Loading thumbnail…

Fork of scatter plot fruit

This pie chart shows the distribution of car brand sales for six brands, with each slice sized proportionally to its sales figure and labeled directly on the chart. A color-coded legend to the right identifies each brand. Built with D3 v7, the visualization uses `d3.pie()` to compute the arc angles and `d3.arc()` to render the SVG paths, while `d3.scaleOrdinal` with the `schemeTableau10` palette assigns colors, and labels are placed using the arc centroid method.

Oct 26, 2025

Loading thumbnail…

Fork of Question 4: Multi-Series Chart (Bar + Line)

This fork of Question 4 displays a multi-series bar and line chart comparing average car price and horsepower for ten brands. The visualization reads a CSV file containing car attributes and uses D3 v7 scales and axes with dual y-axes: blue bars represent average price in USD, while a red monotone curve with dots shows average horsepower. The chart animates bar growth and line fading through `transition().duration()`, with gridlines, rotated x-axis labels, axis labels, a title, and a legend generated via D3 selections.

Oct 19, 2025

Loading thumbnail…

Fork of Scatter plot

This scatter plot visualizes the relationship between car price and horsepower for 50 car models across 10 brands, using color-coded dots to distinguish brands. Built with D3 v7, the SVG chart plots each vehicle as a circle with hover tooltips showing model details like year and exact price. The visualization includes axes, labels, a title, and a color legend. Data comes from a CSV file loaded via d3.csv, with numeric fields parsed and scales applied using d3.scaleLinear and d3.scaleOrdinal with colors from d3.schemeCategory10.

Oct 19, 2025

Loading thumbnail…

Fork of React & D3 Vibecoding Starter

This visualization shows the average car price by brand using a bar chart, with data loaded from a CSV file containing car specifications. The chart uses D3 scales (scaleBand and scaleLinear) to map brands and prices, and renders bars with a gradient fill. Bars animate upward with a bounce ease on initial render, and the chart includes axes, labels, and a tooltip that appears on hover. The React app manages the visualization lifecycle through hooks, and D3 handles the SVG rendering and transitions.

Oct 19, 2025

Loading thumbnail…

Fork of ICE-5 · Flowers Dataset Summary

This dark-themed dashboard summarizes a car dataset using D3.js v7 and vanilla JavaScript. It displays key statistics, an interactive table of the first ten rows with sortable price and horsepower columns, and a bar chart visualizing car prices. The interface includes a decorative SVG car illustration and relies on D3 selections and array methods to populate the summary, table, and chart from CSV data.

Oct 5, 2025