Skip to main content
SimilarExport ZIP
100%

Lets make a face

✓ Published0🌍 Public
MMacoiami
Last edited May 17, 2020
Created on May 17, 2020
Forked from HTML Starter

This visualization displays a dataset of bank branch records across Nigerian states, with each row assigned to a position on an SVG canvas. The code loads the CSV data using d3.csv and logs it to the console, while the HTML page sets a red background on the SVG element using D3’s selection and style methods. The visualization’s title, “Lets make a face,” hints at a playful mapping of data points to facial features, though the current implementation only prepares the data and canvas.

AI-generated description

A bare minimum HTML page.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Let's make a face with D3.js!

An interactive face built from SVG shapes uses D3.js v5 to map data from `data.csv` into facial features. The `index.js` imports `select` and `arc` from D3, applying the arc generator to create curved elements like eyes and a smile. The visualization responds to the dataset’s values, positioning each facial part based on the loaded numbers. The SVG canvas, sized at 960 by 500 pixels, renders the face with a clean, minimal aesthetic, demonstrating how basic D3 primitives can transform tabular data into a recognizable, playful form.

LLonwabo11
80% match
Loading thumbnail…

Lets make a face

This visualization demonstrates how to construct a face-like figure using basic SVG shapes, populated with data from a CSV file containing country population figures. The code uses d3.csv to load the data, parses population values, and then appends rectangles to the SVG canvas via d3’s selection and data join methods. The example highlights the use of SVG attributes and D3 v5’s selection API to bind data to visual elements, with a simple stylesheet removing page margins for a full-viewport display.

AAchrafHNAKA911
79% match
Loading thumbnail…

Let's Make a Face with D3,js!

D3.js maps population statistics onto a playful SVG face, with country data from `data.csv` determining facial features such as eye size and mouth width. The visualization leverages D3’s `csv` loader to parse the population values and renders the resulting face using declarative SVG elements. Written in React and D3 v5, the example demonstrates how to bind external tabular data to visual properties, with the initial face state shown before any user interaction. The SVG canvas is fixed at 960 by 500 pixels, and the face appears immediately after the data loads.

Aanant
79% match
Loading thumbnail…

Let's make a face with D3.js

This example uses D3.js v6 to render a simple, expressive face as an SVG graphic. The visualization draws distinct facial features—such as eyes and a mouth—onto a fixed 960×500 canvas, driven entirely by hardcoded SVG attributes rather than external data. The code loads D3’s `select` and `csv` functions, though the included `data.csv` file (containing country populations) is not referenced in the rendering logic. The visual output is static, with no interaction or animation. Styles are minimal, setting the body margin to zero and hiding overflow, while the SVG is sized directly via its width and height attributes.

DDerek2Dai
79% match
Loading thumbnail…

Fork of Let's make a face with D3.js!

This visualization uses D3.js v5 to draw simple geometric shapes—a red circle and a black line—directly onto an SVG canvas. The code appends these elements using D3’s selection and attribute methods, setting coordinates and styling properties. It also logs a middle value from a JavaScript array to the console. The included data.csv file lists city names and populations, though the current script does not load or display that data, focusing instead on basic SVG primitives.

QQuentino
79% match
Loading thumbnail…

Lets make a face

A red SVG canvas fills the viewport. The example demonstrates a minimal setup for building a custom visualization, with the D3.js library loaded from a CDN. The code selects the `svg` element and applies a red background style, while a separate ES6 module exports a message string that is not yet rendered. The visualization shows only this static colored rectangle, providing a starting point for adding facial features or other shapes using D3's data-binding and SVG generation capabilities.

VVivek H
78% match
Loading thumbnail…

Let's make a face with D3.js

A face emerges from a scatter of points, each assigned a role in the facial layout—eyes, nose, mouth—positioned across a 960×500 SVG canvas. The visualization demonstrates how a static dataset (`data.csv`) can be transformed into a recognizable shape using D3 version 5, with `d3.select` and SVG attribute manipulation to set the frame. The code reads the SVG’s height and width dynamically, then uses that geometry to map the coordinate points, rendering the face purely through SVG elements without interaction or animation.

Kksdumont
78% match
Loading thumbnail…

Let's make a face!

A blank SVG canvas with a red background is rendered, and the visualization is titled "Let's make a face!" The example uses D3 version 7.3.0 to select the SVG element via the `d3.select` API and apply a background style. The code sets the canvas size to 960 by 500 pixels but draws no additional shapes or interactive elements. The data source is not explicit, and the rendering relies entirely on the SVG structure defined in the HTML file.

FFederico Caruso
78% match