veenachowdarykavuri@gmail.com

@KAVURUVEENACHOWDARY·6 public vizzes

veena

A network graph displays nodes arranged in a circular layout, with links connecting salespersons, products, and regions. The D3.js v7 code positions nodes using trigonometric calculations based on the viewport dimensions, drawing SVG lines for edges. Node labels are placed directly on the chart without force-directed simulation, relying instead on a static circular arrangement. The visualization encodes two node types—salespersons and regions—through color differentiation, while products and connections form the remaining graph structure.

Apr 9, 2025

Loading thumbnail…

VEENA

This example visualizes a hierarchical sales dataset for “Awesome Chocolates,” showing global sales broken down by region, geography, and layers such as salespersons and products. It presents the tree structure using SVG nodes and links, with additional metadata like product categories and sales figures displayed via a tooltip. The visualization is built with D3 v7, using the hierarchical tree layout and custom styling for nodes, links, and interactive hover effects.

Apr 8, 2025

Loading thumbnail…

ICE7 - REUSABLE SCATTER PLOT VEENA

This visualization shows car sales by month using a reusable scatter plot class. Each dot represents a sale, colored by car model, with jitter applied to reduce overlap among points. Hovering reveals a tooltip with model, sales, and month details. The chart includes x and y axes with labels and a legend. Built with D3 v7, it uses `d3.scaleBand` and `d3.scaleLinear` for positioning, `d3.scaleOrdinal` for colors, and SVG circles with mouse event handlers for interactivity.

Apr 5, 2025

Loading thumbnail…

Fork of Fork of Fork of ICE7 - AREA CHART VEENA

Five small multiples show monthly car sales per model in separate area charts, colored distinctly and outfitted with dots and hover tooltips. The code defines an `AreaChart` class using the D3 v7 API (`d3.scalePoint`, `d3.scaleLinear`, `d3.area`) to generate SVG paths and circles. Each chart's area path records total sales on mouseover, while each dot reveals the specific month and sales value, with hover effects changing fill and stroke color via CSS transitions.

Apr 2, 2025

Loading thumbnail…

Fork of Fork of ICE7 - LINE CHART VEENA

Five side-by-side line charts compare monthly car sales for different models, with each chart using a distinct color and interactive dots that reveal model, month, and sales figures in a tooltip on hover. The visualization is built with D3 v7, using a reusable `LineChart` class that filters the dataset by model, scales the data with `d3.scalePoint` and `d3.scaleLinear`, and renders lines via `d3.line`. SVG axes are drawn with `d3.axisBottom` and `d3.axisLeft`, while mouseover transitions animate the tooltip’s opacity.

Apr 2, 2025

Loading thumbnail…

Fork of ICE7 - REUSABLE PIE CHART VEENA

This reusable pie chart visualizes total car sales by model across six months, aggregating raw data with d3.rollup and d3.sum to show each model's share as a colored slice. The chart renders as SVG using d3.pie and d3.arc, with labels positioned via labelArc.centroid and an interactive tooltip that displays percentage values on mouseover. A legend with a background box accompanies the pie, and the code uses d3.scaleOrdinal for color mapping and a custom PieChart class for reusability.

Apr 2, 2025