Skip to main content
SimilarExport ZIP
100%

Let's make a face with D3.js!

✓ Published0🌍 Public
Hhireign
Last edited Feb 13, 2020
Created on Feb 13, 2020

This example combines a bar chart with a playful animated face. The bar chart plots the data from `datosd3.csv`, using `scaleBand` for the categorical time variables and `scaleLinear` for the numeric totals. D3.js v5 selects the SVG element and appends axes and rectangles. The chart's axes are created with `axisBottom` and `axisLeft`. The face is an SVG overlay, and the entire visualization is rendered client-side using standard DOM manipulation, with the SVG output styled via CSS.

AI-generated description

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

MIT Licensed

Similar vizzes

Loading thumbnail…

Let's make a face with D3.js!

A bar chart displays the CSV data with names on the y-axis and numeric values on the x-axis. The values are multiplied by one million before rendering. Using D3 v5, the code employs `scaleLinear` and `scaleBand` for scaling, `axisLeft` and `axisBottom` for axes, and `selectAll().data().enter()` to append SVG `rect` elements. The bars are styled with a steelblue fill, and the chart is drawn within an SVG with margins.

KKuerzibe
86% match
Loading thumbnail…

Let's make a face with D3.js!

This example demonstrates a horizontal bar chart of country populations using D3.js v5, with SVG rendering. The chart displays population data from a CSV file, where each country’s bar width is scaled by population using `d3.scaleLinear`, and the y-axis positions are set via `d3.scaleBand`. It loads data asynchronously with `d3.csv` and appends rectangles to the SVG. The accompanying README includes a linked YouTube tutorial, referencing “Let's make a face!” as the project’s playful title.

Mmdfmk
86% match
Loading thumbnail…

Let's make a face with D3.js!

This example demonstrates how to create D3.js visualizations by rendering a horizontal bar chart of country populations from a CSV data file, using `d3.csv`, `scaleLinear`, and `scaleBand`. The chart applies `axisBottom` and `axisLeft` for axes, removes default domain lines, and formats tick labels with `.3s` and a replace function. Bars are appended as SVG `rect` elements, with margins and an axis label added. The included README references a YouTube video about making a smiley face with animated eyebrows, though the primary code shown focuses solely on the population bar chart, not the face.

SSwathi Chittani
85% match
Loading thumbnail…

Let's make a face with D3.js!

This visualization demonstrates a bar chart of cumulative sample data by year from a CSV file, rendered as SVG using D3.js v5. The chart uses `d3.scaleTime` for the x-axis and `d3.scaleLinear` for the y-axis, with `d3.axisBottom` and `d3.axisLeft` for tick marks. Bars are appended via `selectAll('rect')` and `enter()`, with height mapped to the `running_total` values. The example also includes a video tutorial link in its README, focusing on fundamental DOM manipulation with D3.

Ddarshue
85% match
Loading thumbnail…

Let's make a face with D3.js!

This example shows a bar chart of country populations using D3.js v5, with each bar representing a country from a CSV file. The visualization renders an SVG with scaled linear and band axes, displaying population data for ten countries. The code imports specific D3 modules like `select`, `csv`, `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to build the chart. While the title references a smiley face, the actual implementation focuses on fundamental DOM manipulation through data binding and rectangle elements styled with steelblue fill.

Iimoutidi
85% match
Loading thumbnail…

Let's make a face with D3.js!

This example renders a horizontal bar chart from population data in data.csv, using d3.scaleBand to map country names to y-axis positions and d3.scaleLinear to map population counts to bar widths. The code loads data with d3.csv, converts the population values to thousands, and appends SVG rect elements within a fixed 960×500 viewport. Although the title promises a face, the visible implementation only draws bars, with console logging showing the scale domain and raw data.

PPatrick White
85% match
Loading thumbnail…

Let's make a face with D3.js!

This example displays a horizontal bar chart of country populations using D3.js v5, with each bar’s length scaled linearly against population values and countries ordered along a band scale. The SVG rendering relies on `d3.scaleLinear`, `d3.scaleBand`, `d3.axisLeft`, and `d3.axisBottom` to compose axes, while data loads from a CSV file via `d3.csv` and populates `rect` elements dynamically.

DDifan Gu
85% match
Loading thumbnail…

Let's make a face with D3.js!

This example demonstrates a horizontal bar chart of country populations using D3 version 6, rendered as SVG. It loads data from a CSV file, scales the population values with `scaleLinear` and maps country names via `scaleBand`, then draws rectangles for each bar. The chart includes axes created with `axisBottom` and `axisLeft`, custom tick formatting using `format` to abbreviate large numbers, and styling from an external CSS file.

LLidiamir
85% match