Skip to main content
SimilarExport ZIP
100%

Solution: Outlier 2024 Unconf

• Draft2🔗 Unlisted
MMatthias Stahl
Last edited Jun 13, 2024
Created on Jun 13, 2024

A scatterplot maps survey responses about fruit-flavored water against two axes, "worse than water" and "better than water." Each point’s color indicates a category (orange, lemon, lime, cucumber), while its radius is randomized. Built with Svelte and rendered as SVG, the visualization uses d3's `scaleLinear` and `extent` to position the data from a local CSV. Hovering a circle reveals its group label, and the circle scales up via CSS.

AI-generated description

Outlier 2024 Unconf session

MIT Licensed

Similar vizzes

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
92% 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
91% 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
89% 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…

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
82% 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
82% match
Loading thumbnail…

Fork of Solution: Outlier 2024 Unconf

This example displays a scatter plot of cucumber data on a black background, with points colored by category and a crosshair of white axes through the center. Hovering over a point reveals its associated name via a text label and scales the circle. The visualization uses Svelte components, D3 scales (`scaleLinear`, `extent`) for positioning, and renders SVG elements. Data is loaded from a local `test.csv` file and parsed with `autoType`, with coordinates mapped to pixel space before rendering.

CCurran Kelleher
79% match
Loading thumbnail…

Untitled

This visualization shows survey responses across six professional categories, with bars colored by five response levels ranging from "Not at all" to "Tremendously." Each category displays a cluster of bars for the different response rates. The chart uses d3.scale.ordinal for the x-axis, d3.scale.linear for the y-axis, and d3.svg.axis for the axes. Rectangles are animated into place using transition with random delays, and hover effects darken bar colors. A legend appears sequentially, and the y-axis fades in after the bars animate. The data comes from data.json.

EEagleV22
68% match