benholvey

@benholvey·6 public vizzes

Cars Scatter Plot

This scatter plot shows football match data from the English Premier League, with each circle representing a match and colored by the number of goals scored. The visualization maps match days on the x-axis and total goals per match on the y-axis, using a linear scale for both. The code uses D3 v5’s `csv`, `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` functions to load data, compute scales, and render axes with SVG circles. It also computes rolling averages for home and away performance before rendering.

Aug 5, 2020

Loading thumbnail…

Cars Scatter Plot

This scatter plot tracks Wigan Athletic’s home performance across the 2018-19 Championship season. The chart plots match dates on the x-axis against two metrics: average home goals scored (black line) and average points won per home game (gold line), with green circles marking each individual fixture. The visualization uses d3.csv for data loading, d3.scaleTime and d3.scaleLinear for axes, and d3.line with curveBasis to smooth the trend lines. SVG rendering handles the titles, gridlines, and circle markers.

Jul 27, 2020

Loading thumbnail…

Cars Scatter Plot

This example visualizes the relationship between miles per gallon and horsepower for a dataset of cars from the auto-mpg CSV. Each car is represented as a steel-blue circle with a black stroke, positioned using d3.scaleLinear with d3.extent to map data domains to screen coordinates. The code renders SVG elements and includes customizable axes with tick lines and titles, built using d3.axisLeft and d3.axisBottom. The data is loaded asynchronously via d3.csv, with numeric fields coerced to numbers before rendering.

Jul 23, 2020

Loading thumbnail…

Scatter Plot

This scatter plot displays the final Premier League standings, plotting each team’s points total along the x-axis against team names on the y-axis using a categorical scale. It uses d3.csv to load the data, d3.scaleLinear for the point values, and d3.scalePoint for team ordering, with axes from d3.axisLeft and d3.axisBottom. Circles are rendered via SVG, with gridlines generated through tickSize, and margin-based positioning via a translated group.

Jul 23, 2020

Loading thumbnail…

Customising Axes

This example shows current Premier League standings as a horizontal bar chart, with teams sorted by points and a custom-styled axis layout. It uses d3.scaleLinear for the x-axis, d3.scaleBand for the y-axis, and d3.axisLeft and d3.axisBottom to render the axes. The code removes default tick lines and domain paths for the y-axis, adds rotated titles, and uses CSS classes to style tick text and axis labels. The SVG rendering loads data from a CSV file.

Jul 23, 2020

Loading thumbnail…

Hello World

This example shows a minimal React starter app that displays the make of the first car from a hard-coded JSON array. The code parses the embedded `carsJSON` string with `JSON.parse` and renders the text into a `<pre>` element using the DOM API `document.getElementById` and `textContent`. It also exports a constant string from a separate module and logs it to the console. The visualization is static, with no interactive or graphical chart, relying solely on plain HTML and JavaScript.

Jul 21, 2020