deepthiv.4706@gmail.com

@deepthi4706·7 public vizzes

Health Network Graph

This example shows a zoomable health network graph that links global regions—Brazil, India, Australia, and Nigeria—to disease categories like Cancer and Infectious, and then to specific conditions such as Skin Cancer, Dengue, and Asthma. The visualization uses d3.forceSimulation with link, charge, center, and collide forces to lay out nodes in SVG. Pan and zoom are enabled via d3.zoom, and nodes can be repositioned through d3.drag. Colors are assigned by d3.scaleOrdinal, and a d3.forceLink defines the network edges.

Apr 8, 2025

Loading thumbnail…

Tree Graph ICE 8

A tree diagram shows the hierarchical structure of global health data, with countries (Brazil, India, Australia, Nigeria) branching into disease categories and specific diseases. The visualization uses a horizontal tree layout with colored nodes—orange for countries, light blue for disease categories, and green for diseases—to distinguish hierarchy levels. The code employs D3 v7's `d3.hierarchy` and `d3.tree` APIs to compute layout positions, and renders the SVG with `linkHorizontal` paths and circles via a `.join()` operation. A legend above the chart explains the color coding.

Apr 8, 2025

Loading thumbnail…

Cosmetic Scatter Plot

A cosmetic product scatter plot visualizes the relationship between customer ratings (on the x-axis, 0–5) and price in USD (on the y-axis), for a dataset loaded via `d3.csv` from a GitHub gist. Each blue dot represents a product, with hover interactions changing the dot’s fill color and stroke width, and tooltips showing brand, rating, and price. Built with D3 v7, the SVG uses `scaleLinear` for both axes, `axisBottom` and `axisLeft` to render ticks, and appended circle elements with `title` nodes for tooltips. The chart highlights how price and perceived quality correlate across cosmetics brands.

Apr 2, 2025

Loading thumbnail…

Fork of ICE7 - Reusable scatter plot 1

This interactive scatter plot visualizes relationships between pairs of numerical columns from a cosmetics dataset loaded via `d3.csv`. Users select which attributes appear on the x- and y-axes using dropdown menus, and the chart redraws on change. Built with D3 v6, it uses `d3.scaleLinear`, `d3.axisBottom`, and `d3.axisLeft` to render axes, while circles with steelblue fill represent data points. The visualization is rendered as SVG within a fixed 700×500 viewport, with margins and axis labels updated dynamically.

Apr 2, 2025

Loading thumbnail…

Cosmetic Area Chart

This visualization shows how the prices of cosmetic products vary across a dataset, using a filled area chart where the x-axis represents the index of products and the y-axis displays price in USD. The blue, semi-transparent area emphasizes the overall price range and distribution across the product list. Built with D3.js v7, the code loads CSV data from a GitHub gist, parses the Price field, and constructs linear scales for both axes. It renders the area using the `d3.area()` generator into an SVG path, with labeled axes and a heading.

Apr 2, 2025

Loading thumbnail…

Cosmetics Line Chart

This example shows a line chart of cosmetic product prices, plotting each product’s price in US dollars against its index position in the dataset. The chart uses D3.js v7 to load CSV data, then renders an SVG line with a steelblue stroke, along with axes and labels. The y-axis domain is dynamically adjusted with a transition to shift the line upward after initial drawing, while the x-axis uses a linear scale based on the data index. The code applies SVG transitions in this final adjustment.

Apr 1, 2025

Loading thumbnail…

Cosmetic Pie Chart

This pie chart displays the distribution of cosmetic product labels—such as Lipstick, Foundation, and Eyeliner—from a CSV dataset loaded via `d3.csv`. The chart uses `d3.pie()` and `d3.arc()` to generate slices, with `d3.scaleOrdinal(d3.schemeCategory10)` assigning colors. Each slice includes a white text label positioned using `arc.centroid`. A legend, built with SVG rectangles and text, maps each color to its full product name. The SVG is rendered at 700×500 pixels with a red title, and all styling is applied via CSS.

Apr 1, 2025