1995ana

@1995ana·7 public vizzes

Making a Bar Chart

This example demonstrates a horizontal bar chart of the ten most populous countries, using population data loaded from a CSV file by the D3 `csv` function. The visualization maps population counts to bar widths with `d3.scaleLinear` and countries to vertical positions with `d3.scaleBand`, rendered as SVG rectangles. Axes are added using `d3.axisLeft` and `d3.axisBottom`, with the initial SVG canvas defined in the HTML and styled via CSS.

Sep 3, 2020

Loading thumbnail…

Customizing Axes

A horizontal bar chart shows the population of the ten most populous countries, ordered from largest to smallest. The example customizes D3 axes by removing default domain lines and tick marks on the y-axis, adding grid lines with negative tick sizes on the x-axis, and formatting population labels with a custom tick formatter that converts billions to "B". It uses d3.csv, d3.scaleLinear, d3.scaleBand, d3.axisLeft, d3.axisBottom, and d3.format, rendering population values multiplied by 1,000 as SVG rectangles filled with steelblue.

Aug 5, 2020

Loading thumbnail…

Basic Bar Chart - Country Population

A basic bar chart displays population sizes for ten countries, with horizontal bars sorted by country name, using an SVG rendering and D3 v5. The visualization encodes population values through bar length via `d3.scaleLinear` and country names on a categorical band scale, `d3.scaleBand`. Axes are generated with `d3.axisLeft` and `d3.axisBottom`, while data loading and joining rely on `d3.csv` and the enter selection pattern. The chart’s styling applies a steelblue fill to all rectangles.

Apr 2, 2020

Loading thumbnail…

Basic Bar Chart - Country Population

This example shows a horizontal bar chart comparing the populations of ten countries, using a static SVG rendering with D3 v5. It loads data from a CSV file and maps each country’s population to a bar’s width via a linear scale, while a band scale positions countries along the y-axis. The code explicitly uses d3.csv, d3.scaleLinear, d3.scaleBand, and d3.axisLeft/axisBottom to construct the visualization. Bars are drawn as SVG rect elements, and axes are appended to a translated group, with a steelblue fill applied via CSS.

Apr 2, 2020

Loading thumbnail…

D3 Lets make a face

A cheerful cartoon face drawn with SVG animates its features using D3 transitions. The code selects an SVG element and uses D3’s `arc` generator to morph a mouth from an open grin to a filled shape over three seconds. Eyes blink by scaling their radius, while rectangular eyebrows shift vertically in sync. Built with React and D3 v5, the example leverages chained `transition().duration()` calls to create simple, looping motion between states.

Apr 1, 2020

Loading thumbnail…

COVID19 Cases TOP 10 countries-March 19

A horizontal bar chart ranks the ten countries with the most COVID-19 cases as of March 19, using grey bars and sans-serif labels from data.csv. The visualization loads CSV data via `d3.csv`, maps country names to a `scaleBand` y-axis and case counts to a `scaleLinear` x-axis, then renders SVG rectangles. It includes axes generated by `axisLeft` and `axisBottom`, with tick formatting via `format('.2s')`, and appends a title text element inside the SVG group.

Apr 1, 2020

Loading thumbnail…

Let's make a face with D3.js!

This example uses D3.js v5 to draw a stylized face composed of thick, round-ended lines, rendered as SVG paths. The face is constructed from simple geometric shapes, with the `stroke-linejoin` and `stroke-linecap` properties giving the lines their smooth, playful appearance. The code defines a static layout within an SVG canvas, using D3’s selection and attribute methods to set path data and styling. No data source is loaded; instead, the visualization is entirely hand-coded, focusing on the aesthetic potential of SVG stroke properties.

Apr 1, 2020