amalli7433@gmail.com

@MalliAchutha·8 public vizzes

Network Graph

This network graph visualizes a hierarchical dataset of global health concerns, grouping diseases by country and category. Force-directed layout positions nodes, revealing clusters while color encodes depth: orange for countries, light blue for categories, and green for diseases. The D3.js v7 simulation uses `d3.forceSimulation`, `d3.forceLink`, `d3.forceManyBody`, and `d3.forceCenter` forces. Nodes are draggable via a custom `drag` function, with SVG `circle`, `line`, and `text` elements updating positions on each tick.

Apr 8, 2025

Loading thumbnail…

Tree Graph

A hierarchical tree graph visualizes relationships among three countries, their health categories, and specific diseases. It uses a static, hand-coded dataset with India, France, and Brazil, each branching into two categories like Infectious or Respiratory, which further split into two diseases each. The code uses the d3.hierarchy and d3.tree layouts to compute node positions, and d3.linkVertical for curved link paths. Rendered as an SVG, circles and labels are color-coded by depth—orange for country, light blue for category, and light green for disease—with a legend clarifying the mappings.

Apr 8, 2025

Loading thumbnail…

Diamond Scatter Plot

A scatter plot displays diamond price in US dollars on the x-axis against carat weight on the y-axis, with each dot colored by clarity grade and revealing a tooltip on hover. Built with D3 v7, the SVG chart uses `d3.scaleOrdinal` with `d3.schemeTableau10` for categorical clarity colors, `d3.axisBottom` and `d3.axisLeft` for labeled axes, and rendered grid lines. The visualization relies on a small hardcoded sample dataset of ten diamonds, with interactive hover states increasing dot radius and opacity.

Apr 2, 2025

Loading thumbnail…

Diamond Area chart

This area chart visualizes the relationship between diamond carat weight and depth percentage, using a dataset of diamonds loaded from a CSV file via `d3.csv`. The code employs `d3.area` to generate a filled path in SVG, with a linear `d3.scaleLinear` for both axes and a fixed y-domain of 50 to 80. Grid lines are added with `d3.axisLeft`, while axis labels and a title are positioned manually as SVG text elements. The chart renders as a green semi-transparent area, illustrating how depth varies across carat weights.

Apr 1, 2025

Loading thumbnail…

Diamond Line Chart

This line chart shows the relationship between diamond carat weight and depth percentage, using a filtered subset of a diamonds dataset (every fifth point) loaded via `d3.csv`. The SVG visualization maps carat weight to the x-axis and depth percentage to a fixed 50–80 range on the y-axis, with a blue `d3.line` path connecting sorted data points. Gridlines from `d3.axisLeft` provide reference, while axis labels and a title are rendered as SVG text. The chart uses `d3.scaleLinear` for both scales and styled SVG elements for rendering.

Apr 1, 2025

Loading thumbnail…

Diamond pie chart

This pie chart visualizes the distribution of diamond shapes in a CSV dataset, showing the proportional count of each shape category. The chart is rendered as an SVG using D3.js v6, with slices generated by the `d3.pie` and `d3.arc` functions, colored with a categorical scale via `d3.scaleOrdinal`. Each slice is labeled with its shape name, and a separate legend with color swatches accompanies the chart. Data is aggregated using `d3.rollup` to count occurrences per shape.

Apr 1, 2025

Loading thumbnail…

Reusable D3 Scatter Plot

This example presents a population scatter plot, displaying the relationship between years and population size as individual steel-blue circles. The chart renders in full-screen SVG, with axes and labels for both dimensions. Built with D3 v7, the visualization uses `d3.csv` to load the population dataset, `d3.scaleLinear` for positioning, and `d3.axisBottom` and `d3.axisLeft` to draw the scales. The code is structured as a reusable `scatterPlot` function, which the main script configures via method chaining for dimensions, radius, color, and margins, then binds to the DOM with `d3.select('#chart').call(chart)`.

Apr 1, 2025

Loading thumbnail…

Reusable D3 Scatter Plot

This animated scatter plot visualizes diamond characteristics, mapping carat weight against price while coloring points by color grade via a reusable D3.js chart function. The visualization uses SVG rendering and a d3.scaleOrdinal color scale with d3.schemeCategory10. Buttons trigger play and pause controls, with points entering and updating through smooth transitions on the d3.axisBottom and d3.axisLeft. The code demonstrates a configurable scatterPlot builder pattern that computes scale domains using d3.extent and animates axis and point changes over one-second durations.

Apr 1, 2025