SillySuperhero21

@SillySuperhero21·3 public vizzes

Most runs in cricket world cup

This visualization displays the most runs scored by batsmen in Cricket World Cup history using an SVG-based bar chart. Built with D3.js v5, it uses `select` to target the SVG element and dynamically reads its width and height attributes to size the visualization. The chart, styled with basic CSS for a full-screen layout, relies on D3's data-binding and DOM manipulation capabilities to render the ranking data, though the specific run values and player names are not visible in the provided code snippet.

Jun 29, 2019

Loading thumbnail…

Most runs in cricket world cup

A horizontal bar chart ranks the top fifteen batsmen by total runs scored in Cricket World Cup history. The chart displays player names against a quantitative axis representing cumulative runs, with bars sorted in descending order. The visualization loads tabular data from a CSV file using `d3.csv` and renders the chart as SVG elements. The code uses D3 v5 selection methods like `select` from the `d3` module to target the SVG container and append bars based on the parsed data.

Jun 29, 2019

Loading thumbnail…

Let's make a face with D3.js!

This example demonstrates how D3.js v5 can manipulate SVG elements to create an animated smiley face. It shows fundamental DOM selection and appending via `d3.select`, `d3.arc` for the mouth path, and `transition.attr` to animate the eyebrows by shifting their vertical offset over two 2-second intervals. The face is rendered as a yellow circle with black strokes, positioned using SVG transformations, with rectangles acting as eyebrows that move up and down while the eyes and mouth remain static.

Jun 29, 2019