Skip to main content
SimilarExport ZIP
100%

Let's make a face with D3.js!

✓ Published1🌍 Public
LLonwabo11
Last edited May 29, 2019
Created on May 27, 2019

A line chart displays weekly averaged measurements from the Lesedi and meter telescopes between 2000 and 2010. D3.js selects SVG elements, applies time and linear scales, and renders paths with curved interpolation. A nested dataset groups values by telescope, with a custom color legend component. Axis ticks extend across the chart as gridlines, and the y-axis includes a domain without explicit removal. The visualization demonstrates reusable D3 modules, including `scaleTime`, `scaleOrdinal`, `line`, and `nest`.

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 multi-line chart of temperature readings over time, using a dataset of hourly measurements from the Lesedi telescope site. The visualization is built with D3.js v5 and rendered as SVG, featuring a timeline axis, gridlines, and a color legend mapping each line to a data category. The code demonstrates core D3 APIs including `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, `line`, `nest`, and a custom `colorLegend` component, with data loaded via `csv` and parsed into `Date` objects for the time scale.

LLonwabo11
89% match
Loading thumbnail…

Let's make a face with D3.js!

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.

LLonwabo11
81% match
Loading thumbnail…

Graph with four lines

This visualization shows how hourly measurements for a telescope named Lesedi vary over several days in March 2015, using a colored line chart with four distinct lines. It loads data from a CSV file and renders it as an SVG using D3 v5, with a time-scaled x-axis and a linear y-axis. The chart employs `d3.nest` to group data by telescope, `d3.line` with `curveBasis` to smooth each series, and `d3.scaleOrdinal` with `schemeCategory10` to assign stroke colors to each line.

LLonwabo11
81% 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
80% 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
80% 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
79% 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
76% 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 APIs such as `select`, `csv`, `scaleLinear`, `scaleBand`, and `max`. The SVG canvas is 960 by 500 pixels, and bars are appended as `rect` elements with heights set by bandwidth and widths scaled to population values loaded from a local `data.csv` file. The chart sorts countries along the y-axis alphabetically, with populations multiplied by 1000 to reflect actual figures.

LLonwabo11
76% match