PabloEscargot

@PabloEscargot·11 public vizzes

worm v0.1

This visualization displays a worm-like chart of cricket ball-by-ball data, with each rectangle representing a delivery from a bowler. The x-axis maps the ball number within an innings, while the y-axis shows runs scored, and the height of each rectangle encodes the runs scored on that delivery. It uses d3's `select`, `csv`, `scaleLinear`, and `sum` functions, along with the `nest` and `rollup` API to aggregate batting metrics by striker. The data is loaded from a CSV file, and the SVG output is rendered via d3.v5.

Jan 6, 2020

Loading thumbnail…

full mact v0.1

This visualization displays ball-by-ball data from a single T20 cricket match between Sri Lanka and New Zealand, showing runs scored on each delivery. The code imports match data from a JSON file using `d3.json` and renders the information as an SVG graphic. Built with React and D3 v5, the example uses selections and scales to map individual deliveries, with the raw data structure visible in the console output for debugging purposes.

Jan 5, 2020

Loading thumbnail…

playing with json

This visualization displays cricket batting data from a T20 match, showing each batsman’s innings as a horizontal bar spanning from their first to last ball faced. The bar’s height and color encode runs scored before dismissal and strike rate, respectively, using a sequential color scale. Circles mark the final ball of each innings, while text labels annotate standout performances. The chart is rendered as SVG using D3 v5, with data parsed from CSV and scales built via `d3.scaleLinear` and `d3.scaleSequential`, axes via `d3.axisLeft` and `d3.axisBottom`, and color interpolation from `d3.interpolateRdYlGn`.

Jan 5, 2020

Loading thumbnail…

custom chart v2.3

This custom chart visualizes cricket batting performance for a single innings, plotting each batsman's runs scored against the number of balls faced. Rectangles represent each player's innings length, positioned by their first ball faced, while circles mark their last ball faced and the fill color indicates strike rate. The chart uses D3 v5's scaleLinear, scaleBand, and sequentialScale with an interpolateRdYlGn color scheme. Data is loaded from a CSV file and rendered as SVG, with text labels displaying player names, runs, and strike rate.

Jan 4, 2020

Loading thumbnail…

Migrant Deaths Linked Views with Brushing

The visualization depicts migrant deaths and missing persons through a world map of proportional circles, paired with a time-series histogram of monthly totals. Brushing a date range in the histogram filters the map circles to show only incidents within that period, using linked views. The map uses `d3.geoPath` with a Natural Earth projection for landmasses and graticules, while the histogram employs `d3.scaleTime`, `d3.brushX`, and `d3.bin`. Data comes from the Missing Migrants Project, with React’s `useMemo` optimizing performance.

Jan 2, 2020

Loading thumbnail…

api test

This example demonstrates the initial stages of fetching and handling data from the Sportmonks Cricket API, specifically retrieving continent information. The code uses the `fetch` API to request data from the API endpoint, but the response handling is incomplete, with most operations commented out and the `then` callback only logging the raw response object. The visualization itself remains empty, as the SVG element is never populated with any data-driven graphics. The example relies on D3 v5 loaded via CDN, but no D3 functions are actively called, leaving the data pipeline and rendering process unfinished.

Jan 2, 2020

Loading thumbnail…

custom chart v2.0

A custom SVG chart visualizes cricket batting performance across an innings, with each batsman represented by a horizontal bar positioned by their first ball faced and sized by innings length and runs scored. The bars stack vertically based on cumulative runs before each batsman, showing their contribution relative to the team total. The visualization uses d3.csv to load the data, d3.scaleLinear for both x and y positioning, and SVG rectangles appended via d3.selectAll and data joins, with the axis scales hardcoded to a 300-ball innings.

Jan 2, 2020

Loading thumbnail…

custom chart v2.2

This chart displays cricket batting data, mapping each player’s innings as a horizontal bar positioned by their first ball faced and height by runs scored before them. The SVG rendering uses d3.scaleLinear for both axes, d3.axisLeft and d3.axisBottom for scales, and d3.csv to load the dataset. Rectangles encode innings length, runs, and cumulative runs, with axis ticks showing balls faced.

Dec 29, 2019

Loading thumbnail…

custom chart v2.1

This example visualizes a cricket batting innings by mapping each batsman’s performance as a rectangular block. The chart shows the number of runs scored (rectangle height) against the sequence of balls faced, with each player’s block positioned according to their first ball and cumulative team runs. Using d3.csv, d3.scaleLinear, and SVG rectangles, the code computes scales from the parsed data to render the custom chart. The visualization relies on data.csv containing batting statistics and displays the progression of individual contributions across the innings.

Dec 29, 2019

Loading thumbnail…

custom chart v2.0

This custom chart visualizes cricket batting performance, showing each player’s innings as a horizontal bar positioned along the ball count, with bar height representing runs scored and vertical offset reflecting cumulative team runs before that batsman. The SVG rendering uses d3.scaleLinear for both axes, d3.csv for data loading, and d3.select to bind CSV data to rectangles. The chart encodes individual innings length, start ball, and runs in a single coordinated view.

Dec 29, 2019

Loading thumbnail…

face again

A yellow circular face with black-outlined features sits centered on an SVG canvas. Two black eyes and a curved mouth are positioned symmetrically relative to the center. The code uses D3 v5’s `select` and `arc` APIs to construct the shape, with the mouth drawn via an arc path using inner and outer radii and specified start and end angles. The face is rendered entirely with SVG elements, sized relative to the canvas height.

Dec 28, 2019