Mahesh

@maheshchilukamari·8 public vizzes

Walmart Sales Network Graph

The Walmart Sales Network Graph visualizes employee collaboration across three departments—Electronics, Grocery, and Apparel—using a force-directed node-link diagram. Color-coded circles represent individual employees, with department membership shown by node fill, and grey links indicate collaborative ties between them. Built with D3 v5, the layout uses `d3.forceSimulation` with `forceLink`, `forceManyBody`, and `forceCenter` to position nodes, while drag interactions are enabled via `d3.drag`. The SVG rendering includes smooth tick-updated positions for both links and nodes, here applied to static sample data embedded in the script.

Apr 9, 2025

Loading thumbnail…

ICE 8 Tree

A force-directed network diagram maps employee collaboration across Walmart departments, using a small set of named nodes and links. Each node is color-coded by department (Electronics, Grocery, Apparel) and labeled with the employee’s name. The layout is computed with d3.forceSimulation, combining forceLink, forceManyBody, and forceCenter, while d3.drag enables interactive repositioning. The data is hardcoded as a JavaScript object, rendered as an SVG with circles and lines, all styled via CSS.

Apr 9, 2025

Loading thumbnail…

Walmart Sales Tree

This interactive tree diagram visualizes Walmart’s sales hierarchy, breaking down the corporate root into four stores and then into February 2010 weekly sales dates, with holiday weeks marked. Built with D3.js (version 3.5.17), the SVG visualization uses a `d3.layout.tree` to position nodes and animates expanding and collapsing branches through `transition` and click handlers. Node colors are assigned by depth via a `category10` scale, and the data is manually converted from a flat parent-child list into the tree structure.

Apr 8, 2025

Loading thumbnail…

Piechart ICE7

This pie chart displays the ten most populous Indian states in 2024, ranking them by population with a color-coded legend that labels each slice with the state name and its total population. The chart uses D3.js v7’s `d3.pie` layout and `d3.arc` generator to compute and draw the SVG paths, while a `d3.scaleOrdinal` with the `schemeTableau10` palette assigns colors. Data loads from a remote CSV file, and the legend is built with D3 selections, appending styled HTML divs.

Apr 2, 2025

Loading thumbnail…

Line chart

This line chart visualizes population growth in India from 1950 to 2024, with the x-axis showing years and the y-axis displaying the population growth rate. The visualization uses D3.js v7 to load CSV data from a GitHub gist, then constructs an SVG chart with linear scales, gridlines, and axis labels. The line path is generated with `d3.line()` and a monotone x curve, while axis formatting applies comma separators to large numbers. Styled with a dark red stroke on a white background, the chart includes dashed gridlines and a rotated y-axis label for clarity.

Apr 2, 2025

Loading thumbnail…

Fork of Area chart

This area chart displays India's population growth rate from 1950 to 2024, with a dark red filled region beneath a monotone curve. The visualization uses D3 v7 to load CSV data from a GitHub gist, parsing year and population values, then rendering axes with gridlines and labels for both dimensions. The chart employs d3.area with curveMonotoneX and linear scales to map the temporal data, while the y-axis is formatted with comma separators for readability.

Apr 2, 2025

Loading thumbnail…

Reusable D3 Scatter Plot

This reusable D3 scatter plot visualizes crop production in India, showing relationships between variables like cultivated area, production, yield, and year, with data points colored by season. Built with a custom `scatterPlot` component using `scaleLinear`, `axisLeft`, and `axisBottom`, the chart automatically rotates the x-axis variable every three seconds using `setInterval`, updating titles and re-rendering the SVG. The code loads CSV data via `d3.csv` and uses the `select` API for DOM manipulation, with animations driven by re-calling the plot function.

Apr 2, 2025

Loading thumbnail…

Choco Bar Ice Cream

This example uses D3.js v6 with SVG rendering to draw a chocolate bar ice cream treat. The code constructs a stick, chocolate base, almonds, wafer, and cherry using `append` and shape elements like `rect`, `ellipse`, and `circle`. A CSS linear gradient background and drop-shadow filters enhance the visual depth, with data-bound almond positions driven by an array and `.selectAll().data().enter()`.

Feb 23, 2025