Skip to main content
SimilarExport ZIP
100%

Let's make a face with D3.js!

✓ Published1🌍 Public
LLonwabo11
Last edited May 23, 2019
Created on May 6, 2019

This example demonstrates a bar chart of telescope data with fixed red, black, and green bars, arranged using D3's `scaleBand` and `scaleLinear`. The SVG axes are generated with `axisBottom` and `axisLeft`, and the chart includes padding and a title. Although the README describes an animated smiley face with moving eyebrows, the visible code instead renders static bar heights for each telescope, colored per data index. The implementation uses D3 v5 selections, scales, and axis components, with data sourced from an in-code array.

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!

This example shows a bar chart of telescope data, comparing average values across three named telescopes using colored bars. The chart is built with D3.js v5, using `scaleLinear` for the y-axis, `scaleBand` for the x-axis, and `axisBottom` and `axisLeft` for the axes. The SVG renders the bars with padding and custom colors, while the data is hardcoded in the script. The visualization demonstrates fundamental D3 DOM manipulation and scale-based layout for categorical and numerical data.

Jjuanandressr97
91% match
Loading thumbnail…

Let's make a face with D3.js!

This example shows a bar chart of telescope data, comparing average values across three named telescopes using colored bars. The chart is built with D3.js v5, using `scaleLinear` for the y-axis, `scaleBand` for the x-axis, and `axisBottom` and `axisLeft` for the axes. The SVG renders the bars with padding and custom colors, while the data is hardcoded in the script. The visualization demonstrates fundamental D3 DOM manipulation and scale-based layout for categorical and numerical data.

Jjuanandressr97
91% match
Loading thumbnail…

Let's make a face with D3.js!

This example creates an animated smiley face using D3.js, with eyebrows that move to demonstrate fundamental DOM manipulation. The visualization builds the face from SVG elements, including eyes, a mouth, and interactive eyebrows. The code imports specific D3 modules such as `select`, `arc`, and `scaleLinear` to construct the face and manage its components. While the primary focus is the face, the code also includes a bar chart with telescope data, mapped using `scaleBand` and `axisBottom`, though this chart is not the main visual output. The face itself is rendered entirely through SVG.

LLonwabo11
86% match
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
85% match
Loading thumbnail…

Let's make a face with D3.js!

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.

Hhireign
85% 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 example demonstrates how to build a playful face visualization using D3.js, rendering the result as an SVG graphic within a 960x500 canvas. The code initializes with a blank SVG element and uses D3’s selection API to prepare for dynamic updates. It queries an external API for telescope observation data over the past 30 days, formatting dates with custom JavaScript functions and calculating start/end query parameters. While the face-drawing logic is not fully implemented in the visible code, the example showcases D3’s integration with SVG structures and data-fetching workflows.

LLonwabo11
84% match
Loading thumbnail…

Let's make a face with D3.js!

This example displays a bar chart of character names and their numeric values, encoded as steel-blue rectangles on an SVG canvas. Using D3 v5, it loads data from a CSV file and scales the values linearly, while a band scale positions the names along the vertical axis. The code leverages `d3.csv`, `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to render the axes and bars. The dataset is transformed by multiplying each value by 1000 before visualization.

KKuerzibe
84% match