mgl12432

@mgl12432·4 public vizzes

Let's make a face with D3

A small web page demonstrates D3.js data binding by attaching an array of five numbers to a collection of empty paragraph elements. The code uses `d3.selectAll('p')` to select all paragraphs, chains the `.data()` method with the array, and applies `.text()` to output each value into its corresponding paragraph. The example also logs both the data and its index to the browser console, showing the iterative binding process. The HTML structure includes a series of empty `<p>` tags and loads D3 version 6 from a CDN.

Aug 30, 2020

Loading thumbnail…

Hello D3 Version 6

This example introduces D3 version 6 by rendering eight colored rectangles as a bar chart. Each rectangle animates its height upward over 1343 milliseconds using the `transition` method. The code selects a `.canvas` div, appends an SVG of 600 by 600 pixels, and iterates through an inline array of objects containing `size` and `color` properties. It uses `d3.select`, `append`, `attr`, and `transition` to position and animate the bars, demonstrating basic SVG creation and data binding.

Aug 29, 2020

Loading thumbnail…

Making bar chart

This example demonstrates how to build a horizontal bar chart from a CSV dataset using D3 version 6. The chart displays the `detailnumber` values for each country, with blue rectangles sized proportionally to the data. The code uses `d3.csv` to load the dataset, `d3.scaleLinear` for the x-axis, and `d3.scaleBand` for the y-axis positioning. The SVG is pre-selected, and the `enter()` selection appends the rectangles directly to the rendered chart.

Aug 29, 2020

Loading thumbnail…

Hello D3 Version 6

This example shows a simple animated smiley face drawn in an SVG canvas using D3 version 6. It demonstrates basic shape creation and chained transitions: the left eye blinks by shrinking and growing its radius, while the right eye performs a similar pulse with different timing. The face uses yellow and black circles for the eyes and a path generated with `d3.arc` for the mouth. The code selects the SVG with `d3.select`, appends elements, and applies transitions via `transition().duration()`. A separate `index.js` file uses `select` from the D3 module to display a text message.

Aug 29, 2020