Skip to main content
SimilarExport ZIP
100%

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

✓ Published0🌍 Public
MMbabazi Elizabeth Shirley
Last edited Jun 16, 2023
Created on Jun 16, 2023

This visualization maps water quality measurements from a CSV file across villages in Uganda, rendering turbidity data as colored rectangles. The code uses D3 v5’s `select`, `csv`, `scaleLinear`, and `max` functions to load the data, compute a domain based on maximum turbidity, and append SVG rectangles with fixed dimensions. A smiley face design with animated eyebrows serves as the visual framework, while the data-driven rectangles are positioned without explicit coordinates, leaving placement to the default SVG layout. The page includes a linked tutorial video and uses a minimal SVG container with CSS styling.

AI-generated description

Demonstrates fundamental DOM manipulation using D3.js by making a smiley face whose eyebrows move.

MIT Licensed

Similar vizzes

Loading thumbnail…

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

A smiley face made of bar-chart rectangles changes its expression based on population data from `data.csv`, which the code loads with D3's `csv` function. The visualization uses D3.js v5 to select the SVG element and bind the data to `rect` elements via `selectAll('rect').data(data)`, though the example only defines this rendering step without an explicit face-drawing function. The face itself is implied through the DOM manipulation pattern. The page includes a video explaining the process, and the code imports `select` and `csv` from `d3`.

SSShresthaTufts
83% match
Loading thumbnail…

Data Visualisation

This visualization displays water quality measurements from villages in Uganda, plotting each sample as a rectangle positioned by latitude and longitude. The SVG rendering uses D3 v5’s `csv` loader to parse the tab-delimited data and `scaleLinear` for coordinate mapping. Each rectangle is appended via `selectAll('rect').data().enter()`, though the current code only sets a fixed 300-pixel width and height without encoding other variables. The example serves as a basic template for geospatial data plotting with D3’s data-binding approach.

MMbabazi Elizabeth Shirley
82% match
Loading thumbnail…

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

This fork of “Let's make a face with D3.js!” demonstrates fundamental DOM manipulation by rendering a static smiley face with movable eyebrows. The example loads a CSV file containing country population data, parsing and scaling the population values by 1000 using the `d3.csv` method. The visualization uses D3 v5 to select an SVG element and bind data, though the face itself is constructed with basic SVG shapes rather than data-driven elements. The code highlights asynchronous data loading and console logging before any visual update occurs.

Bbyiringirodalio
82% match
Loading thumbnail…

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

This fork of "Let's make a face with D3.js!" demonstrates fundamental SVG manipulation by rendering a smiley face whose eyebrows move. The page loads a CSV file using the `d3.csv` and `d3.select` APIs from D3 v5, logging the data to the console. The visualization relies on a simple SVG canvas created with D3, though the interactive facial animation details are not implemented beyond the initial data loading, as the code only logs the parsed CSV.

Llinwk666
81% match
Loading thumbnail…

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

This example demonstrates fundamental DOM manipulation with D3.js by constructing a smiley face whose eyebrows move, driven by loading population data from a CSV file. The visualization uses d3.select to target an SVG element and d3.csv to fetch and parse data.csv, logging the parsed rows to the console. The page is rendered as SVG within a fixed-size viewport, with D3 v5 handling the asynchronous data loading. The code currently only reads the data and does not yet apply it to animate the face.

Llizard1111
81% match
Loading thumbnail…

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

This example demonstrates foundational D3.js DOM manipulation by loading oxygen level data from a CSV file and rendering the values as SVG text elements. The code uses `d3.select`, `.data()`, `.enter()`, and `.append()` to bind the parsed data to text nodes, positioning them horizontally with a fixed vertical offset. The visualization relies on the `d3.csv` method to fetch the external dataset, while the SVG canvas is configured with a width of 960 and height of 500. Although the title suggests a smiley face with moving eyebrows, the current implementation only displays the numerical oxygen readings.

EEmma Schaale
81% match
Loading thumbnail…

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

A D3.js visualization draws an animated smiley face using SVG shapes. The face consists of a yellow circle, two eyes, movable eyebrows, and a mouth created with the `d3.arc` path generator. Eyebrows animate vertically through chained `transition` calls, moving down and back up over two seconds each. The code imports `select` and `arc` from D3 v5 and manipulates SVG elements directly, with data from `data.csv` displayed as an accompanying table.

YYang Shun Yu
81% match
Loading thumbnail…

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

This fork of “Let’s make a face with D3.js!” displays a smiley face whose eyebrows move. It demonstrates fundamental DOM manipulation by loading tabular population data via `d3.csv` from a Google Sheets URL. The code uses `d3.select`, `d3.scaleLinear`, and `d3.max` to map the data to horizontal positions, then appends rectangles to the SVG with `selection.append`, though the rendered output is not visible in the provided snippet.

MMercPai
80% match