Skip to main content
100%

Selfies: confidence vs. smiling

✓ Published0🌍 Public
Aannabsmylie
Last edited Oct 27, 2015
Created on Oct 27, 2015

A scatterplot visualizes the relationship between confidence and smiling in selfie data from Selfiecity, plotting five data points with circle size scaled to the smiling value. The visualization includes axes, hover effects that change circle color to yellow, and a tooltip displaying coordinate percentages. Built with D3.js version 3.5.5, it uses linear scales, SVG axes, and mouseover events to show interactive details, with a click feature allowing users to update the value range and zoom into new ranges.

AI-generated description

Built with blockbuilder.org

Made with data from selfiecity

Similar vizzes

Loading thumbnail…

DataViz Sec1

This example renders an interactive scatterplot of simulated data points, arranged to gradually form a smiley face as the visualization progresses. It uses a force-directed layout via `d3.forceSimulation` to position nodes, with each point’s color and size mapped from its initial random coordinates. The underlying data is generated procedurally, and the canvas drawing leverages D3’s selection and transition methods to update node positions in real time. The piece demonstrates how a simple dataset can be transformed into a playful, recognizable shape through iterative physics-based adjustments.

Mmichael.rehnberg@noaa.gov
70% match
Loading thumbnail…

Smiley Face

The gallery displays a grid of eighteen identical smiling faces, each rendered as a yellow circle with black stroke, two eyes, and an arc-shaped mouth. Built with React and D3 v7, the visualization uses reusable components like `FaceContainer` and `Mouth`, where the mouth is generated using the `d3.arc()` API. Data is procedurally created via `d3.range(6*3)`, and the faces are output as SVG elements, with each face’s geometry defined through props for offsets, radii, and stroke width.

OOleg Zhernovoy
69% match
Loading thumbnail…

Data Visualization with D3 - Smiley Part I

This example shows a simple smiley face built with two-dimensional SVG shapes. It draws a large yellow circle with a red stroke for the head, plus two smaller red circles for the eyes, all placed on a 960x500 canvas. The code uses basic SVG elements—`circle`—with explicit `cx`, `cy`, `r`, `fill`, and `stroke` attributes, rendered directly in the browser. No JavaScript libraries or data sources are involved; the static composition demonstrates manual positioning and styling without interaction or animation.

AAurore Paligot
69% match
Loading thumbnail…

Smile 1

A grid of 18 smiley faces, each rendered as a yellow circle with black strokes, eyes, and an arc-based mouth. The faces vary randomly in eye radius due to `Math.random()`, creating subtle differences across the repeated components. Built with React and D3 v7, the visualization uses reusable components like `Face`, `BackgroundCircle`, `Eyes`, and `Mouth`, with the mouth path generated by `d3.arc()`. Each face is drawn into an SVG via a `FaceContainer` that centers a `<g>` element using a transform.

KKIRRAN P L
68% match
Loading thumbnail…

2018: Smiley Face

This example visualizes a timeline of tweets as a scatterplot, where each tweet’s vertical position reflects its impact (number of favorites) and its horizontal position reflects the time it was posted. Circle size and color also encode impact, using a linear scale for both radius and a color range from white to purple. The visualization uses D3 v5 to load the tweet data, map time with `d3.scaleTime`, and map impact with `d3.scaleLinear`. It renders circles and text labels as SVG elements, then filters out tweets with zero impact by removing their corresponding nodes.

YYasara Peiris
68% match
Loading thumbnail…

Data Viz - D3 smilie

A yellow smiley face rendered in SVG sits at the center of a 960-by-500 canvas. Two solid black circles form the eyes, while a thick black stroke outlines the face against a dark background. The visualization uses static SVG markup with `<circle>` elements and inline styling, not D3.js functions or data bindings. It demonstrates basic shape composition and stroke styling in a minimal HTML page.

Ssgc1026@gmail.com
68% match
Loading thumbnail…

Smiley Face Pt I

A grid of 18 small smiling faces, each rendered as an SVG circle with a yellow fill, black stroke, two eyes, and a curved mouth. The faces vary randomly in eye position, eye radius, and mouth dimensions, creating subtle differences across the grid. Built with React and D3 v7, the visualization uses reusable components like `Face`, `Eyes`, and `Mouth`, and leverages D3's `arc` API to generate the mouth paths. Data is synthetic, generated with `range` and random offsets.

CChris Briggs
68% match
Loading thumbnail…

Smileysss

Fifteen yellow smiley faces float across the screen, each with randomized eye size, eye offset, stroke width, and smile curvature. Built with React components for the face, eyes, and smile, the visualization uses SVG circles for the face and eyes, while the smile is drawn as a D3 arc path. The randomized parameters create a playful grid of slightly varying expressions.

Sszchee1
68% match