Let's make a face!

100%

Let's make a face!

✓ Published0🌍 Public

Last edited Oct 22, 2020

Created on Oct 22, 2020

This example visualizes 13 days of data with a bar chart showing trends over time, using a date-based y-axis and a numeric x-axis. The bars are rendered as SVG rectangles filled with steelblue, driven by the `data.csv` file containing date, actual, and trend columns. The code builds the chart with d3.v6, React, and the `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` APIs, while `select` and `csv` handle DOM selection and data loading. The chart includes axes and margins, but the focus is on the clean, minimal bar representation.

AI-generated description

Making shapes with HTML, CSS and SVG.

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

84% 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

82% 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

82% match

Loading thumbnail…

Let's make a face!

A horizontal bar chart maps country names to bar lengths, using the provided CSV data where each number is multiplied by 1000. Rects are appended to an SVG and positioned with `scaleBand` for the y-axis and `scaleLinear` for the x-axis, with bar widths proportional to the scaled values. The visualization uses d3.v5, specifically the `select`, `csv`, `scaleLinear`, `max`, and `scaleBand` APIs, rendering as static SVG output.

UUGarCil

81% match

Loading thumbnail…

Lets make a face with D3 js!

This example displays a horizontal bar chart of population data for the ten most populous countries, using a linear scale for population values and a band scale for country names. The visualization is rendered as SVG within a React framework, with D3 v6 handling data loading via `csv`, scales via `scaleLinear` and `scaleBand`, and axes via `axisLeft` and `axisBottom`. The bars are styled with steelblue fill, and the chart includes margins and a padded band scale to separate each bar.

Nnsadath

81% 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

81% match

Loading thumbnail…

Let's make a face with D3.js!

This example visualizes a population bar chart using D3.js, drawing each country as a rectangle scaled by its population data from a CSV file. It uses `d3.csv` to load the data, `d3.scaleLinear` and `d3.scaleBand` for positioning, and `d3.axisLeft` and `d3.axisBottom` to render axes. Bars are appended as SVG rectangles in steel blue, with all rendering handled in the browser via SVG.

Bbenroston

81% 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

81% match