TollyCoburn

@TollyCoburn·14 public vizzes

Building a bar chart

Five purple bars display a small static dataset, with bar height proportional to values of 100, 250, 175, 200, and 120. Using D3 v4, the SVG selects all rectangles, binds the data, and appends a rect for each entry, setting x positions by index and y based on a fixed chart height minus the value. The bars are filled purple with white strokes, and the SVG fills the entire viewport.

May 22, 2020

Loading thumbnail…

Shotmappingtest

A scatterplot of Arsenal shots maps each attempt by pitch coordinates, with circle size scaled to expected goals (xG) via `d3.scaleSqrt` and color indicating goals (red) versus non-goals (grey). Hovering triggers a `transition` that triples the radius, while a `title` tooltip reveals player, team, xG, and match details. The SVG uses a rotated soccer-field background image and loads player data from ArsenalShots.csv, leveraging `d3.csv` and linear scales for positioning.

Oct 25, 2018

Loading thumbnail…

Aster Plot in D3

This aster plot in D3 renders pie slices as radial bars, where the length of each slice (from inner to outer radius) encodes a score from 0 to 100, and the angular width represents the weight of each metric. The visualization uses the d3.layout.pie with the weight as the value, and each arc’s outer radius is scaled proportionally to its score. A gray outline arc is drawn for each slice, and hover tooltips via d3-tip display the metric label and score. A weighted mean score is shown in the center. The chart is built with SVG and D3 v3, and includes a linear gradient fill across the arcs. Data is loaded from a CSV with columns for id, order, score, weight, color, and label, and the visualization was originally developed as part of the NCEAS Open Science CodeFest.

Oct 24, 2018

Loading thumbnail…

drawpitch

This visualization displays the locations and outcomes of soccer shots during matches, plotted on a scaled pitch. Each shot is represented by a circle, with the x and y coordinates mapped from the CSV data onto the field. The size of each circle encodes the expected goal (xG) value, while color distinguishes whether the shot resulted in a goal or not. Hovering or interacting with the circles reveals player names, teams, and shot details. The SVG rendering uses D3 v4 to draw the pitch outline and position the shots, providing a clear spatial overview of shot distribution and quality across teams.

Sep 26, 2018

Loading thumbnail…

PitchMapping

The visualization maps a soccer pitch using an SVG overlay on a fixed background image of a field, loaded from an external URL via CSS. The code renders a single text element that prompts editing, positioned at the top of the 600-by-392-pixel canvas. It relies on D3 v4’s `d3.select` and `append` methods to construct the SVG structure. The pitch background is applied through SVG CSS properties, while the text uses monospace styling. The example demonstrates a static, annotated field diagram rather than dynamic data, with the source being the background image itself.

Sep 13, 2018

Loading thumbnail…

ScatterRecentBackground

A scatterplot displays 50 randomly generated data points on an SVG canvas overlaid on a soccer field background image. D3 v4 creates linear scales for the x- and y-axes, which render with tick marks. Clicking the text above the chart regenerates the dataset and animates the circles to their new positions using a 1-second transition. The visualization uses d3.scaleLinear, d3.axisBottom, d3.axisLeft, and the transition method to update the chart dynamically.

Sep 13, 2018

Loading thumbnail…

Scatter Transition

A scatterplot of fifty random points animates when the user clicks the text prompt. The axes rescale dynamically to fit the new data range, and all circles transition smoothly to their updated positions over one second. Built with D3 v4, the example uses `d3.scaleLinear` for coordinate mapping, `d3.axisBottom` and `d3.axisLeft` for axes, and the `transition` method to interpolate circle positions via SVG attributes.

Sep 6, 2018

Loading thumbnail…

Scatter Transition

A scatterplot of 50 random points updates with new data each time the user clicks the text prompt, smoothly transitioning the circles to new positions over one second. The example uses D3 v4 to generate random datasets, map values through linear scales, and render SVG circles with axes. Clicking triggers a data reset, scale domain recalculation, and a `transition()` with `duration(1000)` to animate the `cx` and `cy` attributes.

Sep 6, 2018

Loading thumbnail…

BarChart Transitions

A bar chart displays a fixed dataset of twenty values, rendered as blue SVG rectangles with white numeric labels. Clicking the text triggers a transition that replaces the data with random values between 0 and 100, recalibrating the linear y-scale domain to the new maximum. Using d3.v4, the chart updates all rectangles and labels with a one-second animated transition and a bounce-out easing function (`d3.easeBounceOut`), smoothly adjusting bar heights, positions, and fill colors based on the new values.

Sep 6, 2018

Loading thumbnail…

Scatter

This example shows a scatterplot of 50 randomly generated data points, with each point’s position determined by its x and y values and its size scaled by the y value using a square-root scale. The visualization uses D3 v4 with an SVG rendering approach, employing `d3.scaleLinear` for the axes, `d3.scaleSqrt` for the point radii, and `d3.axisBottom` and `d3.axisLeft` to draw the axes. The dataset is created on the fly with `Math.random`, so the plot changes each time the page loads.

Aug 31, 2018

Loading thumbnail…

SimpleBar

This bar chart displays the total distance covered by Arsenal players in a single match, sorted in descending order from Ramsey’s 12,134.88 meters to Welbeck’s 2,137.31 meters. It loads data from Physical.csv using d3.csv, then uses d3.scaleBand for the x-axis, d3.scaleLinear for the y-axis, and d3.axisBottom and d3.axisLeft for the axes. Rectangles are appended with a steelblue fill, and the bars’ heights are computed from the data values using the height minus y scale.

Aug 29, 2018

Loading thumbnail…

fresh block

A time-series bubble chart displays daily numeric values across ten dates in early July 2017, with each circle’s vertical position and radius encoding the number. The code uses D3 v4 with `d3.scaleTime` for the x-axis, `d3.scaleLinear` for the y-axis, and `d3.scaleSqrt` for circle areas. Date strings are parsed via `d3.timeParse` and formatted with `d3.timeFormat`. Labels show formatted dates, while SVG rendering places circles and text on a light gray background.

Aug 6, 2018

Loading thumbnail…

fresh block

A set of vertical bars displays a small numeric array, with bar heights proportional to values and fill colors interpolating from red to green based on each value’s position in the data range. The visualization uses d3.scaleLinear for the y-axis and color mapping, d3.scaleBand for horizontal positioning, and d3.schemeCategory20 as a fallback palette. Each rectangle is appended to an SVG canvas, with blue strokes outlining the bars. The code computes bar positions and heights directly from the scales, rendering the chart entirely with D3 v4.

May 17, 2018

Loading thumbnail…

[introd3] scatterplot using iris dataset (template)

This scatterplot visualizes the classic Iris dataset, mapping sepal length to the x-axis, sepal width to the y-axis, and petal length to the circle radius, while species determines color via d3.schemeCategory10. Built with D3 v4 and rendered in SVG, it includes labeled axes for sepal length and width. Circles are interactive: clicking highlights a point with a red stroke, and hovering displays a large text label showing the point’s sepal coordinates. A legend for species is scaffolded but not implemented.

May 16, 2018