Codu_presentation

100%

Codu_presentation

✓ Published0🌍 Public

Last edited Jul 26, 2024

Created on Jul 26, 2024

Forked from Fork of Outlier 2024 Unconf

A scatterplot of fruit-flavored water ratings animates its points into random positions on load. The visualization maps data showing whether each option is worse or better than water, with points colored by category such as orange, lemon, lime, and cucumber. Built with Svelte, it uses d3's scaleLinear and extent to position SVG circles along axes, while GSAP's gsap.to applies a bounce-out easing to displace each circle. Hover states are defined but not displayed.

AI-generated description

Outlier 2024 Unconf session

MIT Licensed

Similar vizzes

Loading thumbnail…

Codu demo

A scatterplot maps orange, lemon, lime, and cucumber data points from a CSV file along two axes that measure whether fruit-flavored water is perceived as worse or better than plain water. Each circle, rendered with Svelte and SVG, uses a random radius and displays its group label on hover. The visualization uses D3's `scaleLinear` and `extent` to position the points, with `autoType` parsing the data.

Rrudi.oreillymeehan@gmail.com

92% match

Loading thumbnail…

Fork of Outlier 2024 Unconf

A scatterplot of fruit-flavored water ratings maps each drink to an X axis of "worse than water" to "better than water" against a Y axis of flavor quality. Orange, lemon, lime, and cucumber groups are rendered as colored circles via Svelte components and SVG, using D3's `scaleLinear` and `extent` for positioning. Hovering a circle reveals its group label.

SSteve Melnikoff

81% match

Loading thumbnail…

Fork of Outlier 2024 Unconf

This fork of the Outlier 2024 Unconf visualization plots survey responses comparing fruit-flavored water to plain water, with each colored circle representing a participant's answer. The SVG chart uses d3-scale linear scales to map position data to coordinates, while GSAP animates every circle with a random bounce effect upon load. A white axis line divides responses into "worse than water" and "better than water" categories. The visualization is built with Svelte components and rendered as an SVG with a dark background.

Rrudi.oreillymeehan@gmail.com

80% match

Loading thumbnail…

Fork of Outlier 2024 Unconf

A scatterplot of survey responses positions fruit-flavored water brands along axes of "worse than water" to "better than water" and a second perceptional dimension. Each colored circle represents a group, coded by fruit type like orange, lemon, lime, and cucumber, sourced from a CSV of position, group, and color values. Built with Svelte, the visualization uses d3's `scaleLinear` and `extent` to map data coordinates to the SVG canvas, while custom components render axes and interactive circles that reveal their group label on hover.

DDameAnneSo

80% match

Loading thumbnail…

D3 Bowl of Fruit - Click to Select

A dynamic scatterplot uses SVG circles to represent a bowl of fruit that changes over time. Apples and lemons are distinguished by color and size, and clicking a fruit selects it with a black outline. The visualization animates data additions, removals, and type changes using D3’s transition API with a one-second duration. The code imports `scaleOrdinal` and `select` from D3 v5, and initial fruit data is generated with `range` and `Math.random`.

Rrdeichert

77% match

Loading thumbnail…

Outlier 2024 Unconf

The visualization displays survey responses comparing drinks to water, plotting opinions on a scatterplot with a horizontal axis from “worse than water” to “better than water.” Orange, lemon, lime, and cucumber groups are color-coded per the CSV data, with hover interactions revealing group labels. Built with Svelte and D3’s `scaleLinear` and `extent`, it renders SVG circles whose radii are randomized, while mouseenter events trigger text display and scaling transformations.

MMatthias Stahl

77% match

Loading thumbnail…

Bowl of Fruit - Clicking is life

A dynamic scatterplot visualizes fruit data as colored circles representing types—apple, lemon, melon—with size encoding type and color encoding category. Users click or hover over circles to select or highlight them, which updates stroke, opacity, and triggers animated transitions via d3.transition. The example uses d3.scaleOrdinal for color mapping and d3.selection with .merge for incremental updates, rendering through SVG. Data originates from an in-memory fruit array, with interactions managed by event handlers for click and mouseover.

Ddaanasma

76% match

Loading thumbnail…

Scatter Plot

This scatter plot demonstrates animated transitions of fruit-shaped circles, updating as fruits are added, removed, or change type. The visualization uses D3 v5’s data join pattern with key functions, merging enter and update selections, while applying ordinal color and radius scales. A 1000-millisecond transition animates circle positions and radii when the dataset changes. The code imports `scaleOrdinal`, `select`, and `range` from D3, rendering SVG circles inside a 960×500 viewport, with transitions triggered by timed `setTimeout` modifications to the fruit array.

SSadafNaseem

76% match