Skip to main content
SimilarExport ZIP
100%

Fork of Solution: Outlier 2024 Unconf

• Draft0🔗 Unlisted
CCurran Kelleher
Last edited Jun 13, 2024
Created on Jun 13, 2024

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.

AI-generated description

Outlier 2024 Unconf session

MIT Licensed

Similar vizzes

Loading thumbnail…

Solution: Outlier 2024 Unconf

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.

MMatthias Stahl
79% 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
76% 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
75% 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
75% 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
75% match
Loading thumbnail…

Fork of Fork of Fork of HTML Starter

A scatter plot of CSV data renders each point as a hexagonal polygon, rotated and scaled, with fill color mapped from a selected categorical attribute. Users toggle between white and color via a dropdown. The React app uses `d3.scaleLinear`, `d3.scaleOrdinal`, `d3.extent`, and `d3.format`, with D3 v7, drawing SVG polygons with tooltips.

Pppal41366@gmail.com
73% match
Loading thumbnail…

Fork of Fork of Fork of Fork of HTML Starter

This visualization displays a scatterplot of point data from a CSV file, where each point is rendered as a rotated, scaled hexagonal polygon. The viewer can toggle between white and colored fills using a dropdown menu, while polygons feature a dark stroke outline for clarity. Built with React and D3 v7, the code uses `d3.scaleLinear`, `d3.scaleOrdinal`, and `d3.extent` to map coordinates and colors. The SVG rendering applies polygon transformations with `translate`, `scale`, and `rotate` to create a geometric pattern, with tooltips showing formatted x and y values.

Ssahildesignzz@gmail.com
72% match
Loading thumbnail…

Fork of Outlier Visualization 2B

This fork of Outlier Visualization 2B displays a scatter plot matrix of the Auto MPG dataset, repeating 12 columns against 3 rows to reveal pairwise relationships among numerical attributes. Circles are colored red to highlight outliers, with a user-driven brush selection (triggered by control-click) that adjusts the color mapping. The visualization is built with Vega-Lite and the Vega-Lite API, configured with a custom dark theme and interactive pan/zoom via the PanZoom library. Data is loaded as CSV from a Gist, and the tooltip handler is registered for hover details.

OOleJRask
72% match