2018: Smiley Face

100%

2018: Smiley Face

✓ Published0🌍 Public

Last edited Jul 27, 2020

Created on Jul 26, 2020

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

AI-generated description

2018 Data Vis Course - Smiley Face

MIT Licensed

Similar vizzes

Loading thumbnail…

2018: Smiley Face

A yellow smiley face with black eyes, eyebrows, and a curved mouth is drawn in the center of an SVG canvas. The eyebrows shift up and then back down through a two-stage D3 transition. The visualization uses d3.arc to create the mouth path, while circles and rectangles form the face and features, with all elements positioned relative to the canvas center.

SSam Jukes

73% match

Loading thumbnail…

Interactive scatterplot

This interactive scatterplot visualizes Twitter user activity by plotting tweets based on quantitative dimensions on logarithmic x and y scales, with each point colored and sized by tweet type and a related metric. The visualization includes a custom legend with lines and circles to explain the size mapping. Built with D3.js version 3.5.5, the code uses d3.svg.axis, d3.scale.log, d3.scale.ordinal, and d3.scale.linear to construct the axes and scales, with SVG rendering for all graphical elements. The dataset is loaded from a CSV file containing tweet samples, and the graph includes a title and axis labels.

AAndresAnayaIsaza

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

71% match

Loading thumbnail…

2018: Smiley Face

A yellow smiley face with black eyes, eyebrows, and an arc-shaped mouth is drawn in the center of an SVG canvas. The eyebrows initially animate downward and then settle into a raised position, with the right eyebrow transitioning vertically via `transition()`. The mouth is created with `d3.arc()`, while circles and rectangles are positioned using centered coordinates. The code imports `select` and `arc` from D3 v5 and uses SVG attributes for rendering.

MMuthukumar Rajendran

70% match

Loading thumbnail…

Smiley Face

A grid of eighteen smiley faces is rendered, each with randomly varied stroke width, eye offset, eye radius, and mouth dimensions, creating a playful array of subtly different expressions. The visualization is built with React and D3 v5, using SVG shapes for the background circle, eyes, and mouth. The mouth is drawn as an arc path generated by d3.arc, and each face is composed via reusable React components within an SVG container.

Nnkohdatavis

70% match

Loading thumbnail…

Dataviz 2018 - 2. D3 starter, SVG DOM manipulation, transition(animation), Smile Face - Ep4

This example shows a yellow smiley face built from SVG elements, with animated eyebrows that move up and down in a looping transition. The code creates a circle for the face, two circles for eyes, a mouth drawn with `d3.arc`, and rectangles for eyebrows using D3 selections. It demonstrates SVG DOM manipulation by appending elements to groups, and animates the eyebrow group’s `transform` attribute with chained `transition().duration()` calls. The visualization runs in D3 v7 and renders to a 960×500 SVG canvas.

MMinwoo Pak

69% match

Loading thumbnail…

DataViz_d3_face

A yellow circle with black outline and two smaller dark circles forms a partial smiley face, shown without a mouth or other features. The visualization uses inline SVG elements—three circle shapes with fixed coordinates and radii—rendered directly in an HTML page. The code relies on no JavaScript libraries, instead using static SVG markup with CSS styling for the page layout and message text. The title suggests a DataViz with D3, but the actual implementation is plain SVG without D3 APIs or data binding.

EEloy Vallina

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

69% match