Skip to main content
SimilarExport ZIP
100%

Let's make a face with D3.js!

✓ Published0🌍 Public
LLonwabo11
Last edited May 31, 2019
Created on May 29, 2019

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.

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 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`.

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…

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
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 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…

Line Chart

This example visualizes temperature over time with a line chart. The SVG rendering plots a line and points connecting daily temperature readings, with axes and tick labels generated from the data. Built with React and D3 v5, it uses `scaleLinear` for scaling, `line` from D3 for the path, and `timeFormat` for tick labels. The data is loaded as CSV from a remote URL using D3's `csv` utility, and React state manages the asynchronous data fetching.

Uuplusv
80% match
Loading thumbnail…

Let's make a face with D3.js!

This example shows a dual-line chart comparing stock close and open prices over time, with two colored axes (steel blue for close, red for open) to distinguish the scales. It uses D3 v5’s `d3.csv` to load the data, `d3.timeParse` to format dates, and `d3.scaleTime`/`d3.scaleLinear` for the x and y ranges. The lines are drawn with `d3.line` and appended as SVG paths, with axes rendered via `d3.axisBottom`, `d3.axisLeft`, and `d3.axisRight`. Data comes from `data4.csv`.

CCameron
80% match
Loading thumbnail…

D3 Line Chart with Multiple Lines

This example displays temperature readings from multiple cities over time as smoothed, multi-hued lines, with a color legend identifying each city. It uses the D3 v5 library, building the chart with SVG and relying on `scaleTime`, `scaleLinear`, and `scaleOrdinal` to map data. Data is loaded from a CSV file, and lines are generated using `line` with `curveBasis`, while axes use `axisBottom` and `axisLeft`. The visualization also employs a custom `colorLegend` function to render the categorical color key.

JJunilo Pagobo
80% match