Fork of Outlier 2024 Unconf

100%

Fork of Outlier 2024 Unconf

✓ Published2🌍 Public

Last edited Jul 25, 2024

Created on Jul 23, 2024

Forked from 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.

AI-generated description

Outlier 2024 Unconf session

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

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…

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

80% 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

77% match

Loading thumbnail…

Fork of Fork of Fork of HTML Starter

This example visualizes a survey-like question, "DO YOU FEEL THE HEAT?", presented as a horizontal gradient bar with numeric endpoints (1 to 5) and a central line marker. The SVG drawing uses embedded CSS classes and a linear gradient definition to style the graphic. The visualization is embedded in an HTML page that also loads a Roboto font and an external Observable notebook iframe. The rendering relies on SVG elements like `<rect>`, `<line>`, and `<text>` with custom styling, while the iframe fetches data from Observable. The static SVG structure is fixed, with no interactive or dynamic behavior.

Ssirenajbpearl@gmail.com

71% 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

70% match

Loading thumbnail…

Fork of Fork of HTML Starter

This interactive scatterplot displays survey data as hexagonal polygons positioned by x and y values, with color encoding categorical attributes. Users toggle between two color schemes via buttons representing 2009 and 2014 data. Built with React and D3 v7, it uses `scaleLinear` and `scaleOrdinal` for scales, `extent` for domains, and renders SVG polygons with rotation, scaling, and stroke styling. Data loads asynchronously from a CSV via `d3.csv`.

Pppal41366@gmail.com

70% match