Horsey Race

100%

✓ Published0🌍 Public

Last edited May 7, 2017

Created on May 5, 2017

This animated SVG race simulation uses a Monte Carlo random walk to model 20 horses over a race, drawing their changing rankings as colored, labeled paths across a time axis. Each horse moves forward or backward based on assigned probabilities, and its position is computed from cumulative steps, then converted to ordinal ranks. The visualization, built with D3.v3, uses `d3.scale.ordinal` with `rangeRoundBands` for vertical placement, `d3.svg.line` for path generation, and SVG clipping to reveal the race as it progresses, recreating the FiveThirtyEight Lucky Derby analysis.

AI-generated description

Simulating the <a href='https://fivethirtyeight.com/features/who-will-win-the-lucky-derby/'>538 Horsey Race</a>.

forked from <a href='http://bl.ocks.org/bricedev/'>bricedev</a>'s block: <a href='http://bl.ocks.org/bricedev/fd0a8ee9429117b900e4'>French soccer championship replay</a>

mit Licensed

Similar vizzes

Loading thumbnail…

Racecard Bar Graph with D3.js

This example shows a horizontal bar chart of horse-race betting odds for eight horses, with each bar’s length representing the fractional odds and the y-axis labeling the horse names. The visualization uses D3.js v7 and renders as an SVG, with scales created via `d3.scaleLinear` for the x-axis and `d3.scaleBand` for the y-axis. The code loads data from a CSV file using `d3.csv`, applies axes with `d3.axisLeft` and `d3.axisBottom`, and appends rectangles for the bars.

Ssandugabriel2019

76% match

Loading thumbnail…

Racecard 2 Bar Graph with D3.js

A horizontal bar chart displays the forecast odds for eight racehorses, with each bar labeled by the horse's name. The chart uses D3.js v7, loading data from a CSV file and rendering SVG elements. The code applies `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to position bars and axes, with bars styled in steelblue. The layout includes explicit margins and an inner plotting area.

Ssandugabriel2019

75% match

Loading thumbnail…

Horse Scatterplot

The visualization plots the racehorse "Hot Relation's" performance by comparing track condition against race distance. Each point's size represents the number of starts, with an overlay of places and wins on the same axes, using yellow, orange, and red circles. The data is derived from a JSON file containing the horse's form history, processed into a custom dataset before being rendered as an SVG scatterplot with D3.js v5. The chart uses `d3.scaleLinear`, `d3.scalePoint`, `d3.axisBottom` and `d3.axisLeft` to construct the axes.

Eemberix@gmail.com

73% match

Loading thumbnail…

Racing Bar Chart Animation Test

This interactive racing bar chart animates six labeled bars whose values increment randomly over time, displaying the data as a dynamic ranking. Built with React and D3 v5, it uses `scaleBand` and `scaleLinear` for axes, joins data with keyed selections, and transitions bar and label positions with `rect` and `text` elements. A custom `useInterval` hook drives the animation, triggered by a Start/Stop button, while a ResizeObserver adapts the SVG canvas to its container.

Rre-q

69% match

Loading thumbnail…

Racing Bar Chart Animation Test

A racing bar chart animation demonstrates changing quantitative values over time. Six named categories (alpha through foxtrot) increment their values by ten at random intervals, with each update triggering a smooth 750-millisecond transition of bar widths and labels using D3’s `select`, `scaleBand`, `scaleLinear`, and the `.join()` operation. Bars and text labels are rendered as SVG elements within a React component, driven by a custom `useInterval` hook that calls `setInterval` to update state. The chart uses D3 v5 and React, with data initially hardcoded in the app’s state.

Wwinner106

69% match

Loading thumbnail…

Racing Bar Chart Animation Test

Six labeled bars race in ascending order, with values expressed in meters, as randomized increments of ten repeatedly re-sort the ranking. The React component uses D3 v5’s `scaleBand`, `scaleLinear`, and `selectAll().data().join().transition()` to animate rectangle widths and text labels over 750 milliseconds per step. A custom `useInterval` hook drives updates every 750 milliseconds, triggered by a Start/Stop button, with iteration count displayed. Bars and labels transition smoothly while maintaining SVG rendering.

AArriannePandaraoan

68% match

Loading thumbnail…

Racing Bar Chart Animation Test

A racing bar chart animates six named categories as their values incrementally increase over time, with bars re-sorting by value and labels updating to show current distances. A React component renders SVG bars and text using d3-scale’s `scaleBand` and `scaleLinear`, while a custom `useInterval` hook triggers state updates every 750 milliseconds. The chart redraws with 750-millisecond transitions on the `rect` and `text` elements, and a start/stop button controls the animation loop.

TTom-S82

67% match

Loading thumbnail…

Marey’s Trains

This visualization recreates Marey’s classic train schedule as a stringline chart, showing train trajectories as sloped lines across a station-by-distance vertical axis and a time-based horizontal axis. The slope of each line encodes train speed, with orange limited-service trains and red baby bullets overlaid on black regular trains. The code uses D3 v3 with `d3.svg.line`, `d3.time.scale`, and `d3.svg.axis`, rendering in SVG. It loads station positions and stop times from a TSV file, filtering train types and clipping paths to show the full schedule.

Mmbostock

64% match