Skip to main content
SimilarExport ZIP
100%

Fork of Outlier 2024 Unconf

✓ Published0🌍 Public
SSteve Melnikoff
Last edited Dec 5, 2025
Created on Dec 5, 2025

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.

AI-generated description
MIT Licensed

Similar vizzes

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
94% 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
89% 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
87% match
Loading thumbnail…

Codu_presentation

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.

Rrudi.oreillymeehan@gmail.com
81% match
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
79% match
Loading thumbnail…

Fork of HTML Starter

This visualization shows a scatter plot of fruit dataset attributes, with each point colored by fruit type (apple, orange, banana, grape) and positioned by width on the x-axis and height on the y-axis. The code uses D3.js v6 functions including `scaleLinear`, `extent`, `axisLeft`, `axisBottom`, and `csv` to load data from a GitHub gist. It renders SVG circles with a radius of 5 pixels and includes custom axis labels for "Width" and "Height" in green, with a red title heading. The plot fills the browser window using dynamic width and height values.

Ssahithya.voleti@gmail.com
67% match
Loading thumbnail…

Fork of HTML Starter

This scatter plot displays the relationship between two continuous variables across a dataset of wine quality metrics, plotting each sample as a circle. Built with D3 v7, the visualization uses `d3.scaleLinear` to map data values to pixel coordinates and `d3.axisBottom` and `d3.axisLeft` to render labeled axes. The SVG output includes interactive-friendly features like configurable margins, point radius, and opacity, with a chainable API for setting the x and y accessor functions and axis labels.

Bbassansackey@gmail.com
67% match
Loading thumbnail…

Fork of Fork 1

This example shows a bar chart comparing average sleep quality across different water consumption levels, with each bar colored by gender. Built with D3.js v7, the visualization loads CSV data from a GitHub gist and aggregates it using `d3.rollups` to compute group means. The SVG rendering includes an ordinal color scale, rotated bottom axis labels, and interactive tooltips that display additional details on mouseover.

Bboinapallyhimaja657@gmail.com
67% match