fabricio3g

@fabricio3g·3 public vizzes

HTML Starter

This example displays a bar chart of menu items from a JSON file, showing the quantity ordered for each item. The bars are rendered as orange SVG rectangles using D3 v6’s `scaleLinear` and `scaleBand` for scaling the y-axis and x-axis positions. Data is loaded via `json('menu.json')`, and the chart updates through D3’s `select` and `enter` APIs.

Dec 13, 2020

Loading thumbnail…

Chart

This chart displays the populations of seven countries as horizontal bars, with bar length proportional to population and each country labeled on the y-axis. Built with React and D3, it loads data from a CSV file, scales the population values by a thousand, and uses `d3.scaleLinear` for the x-axis and `d3.scaleBand` for the y-axis. The visualization is rendered as SVG elements within a 960-by-500 canvas.

Sep 29, 2020

Loading thumbnail…

Let's make a face with D3!

A yellow face with black outlines is drawn using D3 selections and SVG shapes, including circles for the head and eyes and rectangles for eyebrows. The eyebrows animate up and down via chained `transition().duration()` calls, while a mouth is created using the `d3.arc()` generator. The code uses `d3.select` and `d3.arc` from D3 v6, with explicit SVG attributes for positioning and sizing.

Sep 23, 2020