sapan2997

@sapan2997·2 public vizzes

Learn D3.js

A bar chart visualizes tennis match data from the 2009 Australian Open, showing the progression of players through rounds like 'Final', 'semi', and 'quarter'. The chart uses D3.js to generate an SVG, with the page background styled red via inline CSS. The code loads the CSV data file and logs it to the console, while D3's selection and styling methods are used to set up the visualization's canvas.

Jun 30, 2020

Loading thumbnail…

Let's make a face with D3.js!

A D3.js animation builds a yellow smiley face centered in an SVG canvas, with eyebrows that repeatedly move upward and then return to their original position. The face is constructed from SVG circles for the eyes, rectangles for the eyebrows, and a path for the mouth generated with the `d3.arc` API. D3’s `transition` method animates the eyebrow group’s `transform` attribute over two-second intervals. The code uses D3 v5’s `select` and `append` functions to manipulate the SVG DOM directly.

Jun 29, 2020