artijain688

@artijain688·5 public vizzes

Fork of Bowl of Fruit - General Update Pattern Special Cases

This example demonstrates the general update pattern in D3 with special cases for data joins, showing apples and lemons in a bowl. The visualization cycles through scenarios: removing an item, modifying an existing item’s type, and filtering the array. The code uses d3-selection’s `enter`, `merge`, and `exit` methods to handle updates, with `scaleOrdinal` mapping fruit types to colors and radii. Rendered as SVG, the bowl is a styled rectangle, and fruits are circles with labels, updated via `setTimeout` calls in d3.v5.

Nov 22, 2023

Loading thumbnail…

Fork of World Countries Tree

This fork of the D3.js world countries tree displays a hierarchical dataset of countries organized by continent and subregion. The visualization uses a horizontal tree layout with branching links, and text labels whose font size decreases with depth to show the classification from "World" down to individual countries. The code builds the layout with `d3.tree()` and `d3.hierarchy()`, renders the links with `d3.linkHorizontal()`, and enables pan and zoom through a custom `zoom()` extension that applies transformations to a group element. Data is loaded from `data.json`, and the SVG output is styled with custom CSS.

Nov 22, 2023

Loading thumbnail…

Temperature in San Francisco

This scatter plot visualizes the relationship between horsepower and weight for cars from the UCI Machine Learning Repository's Auto MPG data set. Each red semi-transparent circle represents a car, positioned by its horsepower on the x-axis and weight on the y-axis. The code uses D3 v5’s `csv` loader to fetch the data and `scaleLinear`, `axisBottom`, and `axisLeft` to construct the axes with grid lines. The SVG rendering includes labeled axes and a title, with styling applied via external CSS.

Nov 21, 2023

Loading thumbnail…

Fork of Cars Scatter Plot

This scatter plot visualizes the relationship between horsepower and weight for cars from the UCI Machine Learning Repository’s Auto MPG dataset. The visualization uses D3 v5 with an SVG rendering, implementing linear scales, axes, and circles to encode the data points. The code loads the CSV data asynchronously, parses numeric fields, and applies margin conventions to position the axes and title. The styling uses red semi-transparent circles and custom axis-label and title sizes.

Nov 20, 2023

Loading thumbnail…

Smiley face part 1

This example renders a yellow smiley face as a static SVG graphic using React and D3. The code constructs the face from a large circle for the head, two smaller circles for the eyes, and a D3 `arc` path for the mouth, all positioned relative to the center via a `g` transform. The `BackgroundCircle` React component draws the head with a yellow fill and black stroke, with the `strokeWidth` and radii defined as constants. The face is centered within a 960 by 500 viewport using D3’s `arc` helper to create the semi-circular mouth.

Nov 17, 2023