Skip to main content
100%

Selfiecity - Self-portraits (selfies) in five cities across the world

✓ Published0🌍 Public
Aadilyalcin
Last edited Jan 9, 2016
Created on Jan 9, 2016

Selfiecity visualizes 3,200 self-portraits from five global cities, arranged in a grid where each thumbnail displays a face alongside demographic and emotional attributes. Viewers explore distributions of city, sex, age, eye closure, happiness, sadness, glasses, and mouth openness via left and right summary panels, with linked highlighting and hover magnification. The interface uses a custom grid layout with CSS transitions for scaling, while data comes from a CSV file loaded through the KSHF framework, rendering each record as an image sourced from external cloud storage.

AI-generated description

Similar vizzes

Loading thumbnail…

Selfies: confidence vs. smiling

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.

Aannabsmylie
68% match
Loading thumbnail…

Fork of Cities on a Globe

This interactive globe displays over 100,000 cities as circles sized by population, with hover tooltips showing names and population counts. Users can pan by dragging and zoom via scroll or pinch gestures, swapping between 110m and 50m resolution land boundaries during motion for performance. The visualization uses d3.geoOrthographic for projection, d3.geoPath for rendering, d3.drag and d3.zoom for interaction, and d3-tip for tooltips. City data comes from a preprocessed GeoNames CSV, while geographic shapes use TopoJSON world-atlas data.

Zzenoalive
60% match
Loading thumbnail…

Fork of Cities on a Globe

This visualization presents an interactive orthographic globe displaying circles for cities with populations exceeding 100,000, sourced from preprocessed Geonames data. Users can pan and zoom the globe using drag gestures and the mouse wheel, with low-resolution country boundaries shown during movement and high-resolution shapes rendered when stopped. The code leverages d3.geoOrthographic, d3.geoPath, topojson, and d3-tip for hover tooltips, while a square-root scale maps population to circle radius. Hovering over a city reveals its name and population in a formatted tooltip.

EEngineerRajeev
60% match
Loading thumbnail…

Untitled

This example visualizes eye-tracking data across multiple city images, plotting fixation points on a scatterplot with a timeline slider for temporal exploration. Users can select stimuli via a dropdown menu and apply K-means clustering with adjustable cluster counts and iteration limits. The visualization uses D3 v5 for SVG rendering and animation, with React for structure, dynamically scaling axes to each image’s resolution from a CSV file.

JJiapengFan
60% match
Loading thumbnail…

Fork of Cities on a Globe

This interactive globe visualizes cities with populations over 100,000 and flight routes between airports, rendered as animated arcs on a WebGL sphere using Three.js and globe.gl. Users can pan and zoom the Earth, with dark terrain and point markers colored by GDP per capita. The visualization incorporates submarine cable paths and a time-based solar position indicator, updating a clock and sun position every frame. It loads geographic data from GeoJSON and OpenFlights datasets, employing D3 for color scales and data parsing.

PPatrickVienne
59% match
Loading thumbnail…

Scatter Plot

This interactive scatter plot visualizes eye-tracking data, plotting the mapped fixation point coordinates for viewers as they examine images of city landmarks. Users can select a specific city image from a dropdown menu, which updates the plot’s background and overlays the corresponding fixation points as circles. The visualization uses D3.js with SVG and animation, applying linear scales based on resolution data and implementing k-means clustering to group fixation points by color. Hovering reveals a tooltip with details like user, coordinates, fixation duration, and description.

JJiapengFan
59% match
Loading thumbnail…

Scatter Plot

This interactive scatter plot visualizes eye-tracking fixation data across different city map stimuli. Users select a city from a dropdown menu, which filters the data and displays fixation points as blue circles overlaid on the corresponding city image. The visualization uses D3.js with an SVG renderer, incorporating d3.scaleLinear for axes, d3.scaleOrdinal from d3-scale-chromatic for color coding, and interactive tooltips showing user, coordinates, fixation duration, and description. The background image resolution is mapped to the coordinate system using data from a separate CSV file.

KKanishka33
59% match
Loading thumbnail…

Cities on a Globe

An interactive globe displays pink circles for cities with populations over 100,000, sized by population and hoverable for tooltips. Users can drag to rotate the globe via `d3.drag` and zoom with `d3.zoom`, which adjusts an orthographic projection’s scale. The visualization draws country boundaries from TopoJSON `world-110m` and `world-50m` files, using `d3.geoPath` to project shapes and city coordinates, while switching resolution during rotation. City data comes from preprocessed GeoNames CSV, and tooltips are generated with `d3-tip`.

KKusum Naithani
59% match