Skip to main content
Log in
U

uttam-vish

@uttam-vish·8 public vizzes

Loading thumbnail…

Bowl of Fruit - General Update Pattern Special Cases

This example demonstrates the general update pattern with special cases, showing a bowl of fruit where apples are added, removed, and replaced by lemons over time. Using D3 v5 with SVG rendering, the code employs data joins with key functions to track fruit identities, handling enter, update, and exit selections. Ordinal scales map fruit types to colors and radii, while click events select individual fruits with a highlighted stroke. The bowl itself is a static rectangle, and the animation sequence reveals how D3’s selection.merge and exit methods manage dynamic data changes.

Mar 5, 2020
Loading thumbnail…

SVG face

This visualization displays a horizontal bar chart showing the number of Men_line data points for various movie titles, with each bar’s length proportional to the value. It uses React and D3.js v5, specifically `csv` for data loading, `scaleLinear` and `scaleBand` for scaling, and `axisLeft` and `axisBottom` for axes. The bars are rendered as SVG rectangles within a 900x500 pixel canvas, sourced from the provided `data.csv` file.

Mar 5, 2020
Loading thumbnail…

Lets make a map

This example shows a simple world map rendered as light green ocean and blue landmasses. It loads country boundary data from the world-atlas TopoJSON dataset and projects it with d3.geoNaturalEarth1, drawing the sphere background and country paths using d3.geoPath. The code uses d3.json to fetch the data, topojson.feature to convert it to GeoJSON, and d3.select with SVG path elements. Country styling is applied via the stylesheet, with a blue fill and half-transparent stroke.

Mar 2, 2020
Loading thumbnail…

Bowl fruit swapper

This example shows a simple animated data transition of fruit items arranged in a horizontal row. Five red apples initially render as circles; after one second, the last apple is removed, and after another second, the second apple changes into a yellow lemon. The visualization uses D3.js (v5) to bind data to SVG circle elements, employing `scaleOrdinal` for both radius and color mappings based on fruit type. The `select` and `range` utilities manage element selection and data generation, with state changes triggered by `setTimeout`. The rendering is entirely SVG-based, with custom fill colors for each fruit category.

Feb 28, 2020
Loading thumbnail…

SVG face

This example shows a scatter plot of dialog lines in movies, with the number of men’s lines on the x-axis and women’s lines on the y-axis. Each circle represents a film, colored from blue to red based on men’s line count, and hovering reveals a tooltip with the movie title and both line counts. Built with React and D3 v5, it uses `csv`, `scaleLinear`, `axisLeft`, `axisBottom`, and `select` to load data, scale axes, and render SVG circles with interactive mouse events.

Feb 21, 2020
Loading thumbnail…

SVG face

A scatter plot visualizes movie dialogue data, with each circle representing a film. The x-axis shows the number of men's lines and the y-axis shows women's lines from the provided CSV dataset. Hovering reveals the movie title and exact line counts via a tooltip. The visualization uses D3 v5 APIs including `scaleLinear`, `axisBottom`, `axisLeft`, and `csv` for data loading, with circles styled in steelBlue. Animated transitions occur on the tooltip's opacity changes.

Feb 20, 2020
Loading thumbnail…

SVG face

This example shows a cartoon face built from SVG primitives, with a yellow circular head, two black eyes, and a curved mouth rendered using D3’s `arc` generator. Eyebrows are added as rectangles positioned via SVG transforms. The code uses D3 selections to create and style elements, relying on hardcoded dimensions from the SVG attributes rather than external data.

Feb 18, 2020
Loading thumbnail…

HTML Starter

This example demonstrates basic SVG graphics rendered directly in an HTML page, featuring primitive shapes like circles, rectangles, lines, and a path. The visualization uses the `svg` element and its attributes such as `transform` and `fill` to group and style shapes, with cascading stylesheets (`styles.css`) applying stroke colors and line-join properties to specific classed elements. The code relies on React as the framework but executes without external charting libraries, showcasing raw SVG markup for simple, static compositions.

Feb 18, 2020