blockup

100%

✓ Published0🌍 Public

Last edited Jan 5, 2018

Created on Jan 5, 2018

The visualization animates Formula 1 cars racing around the Melbourne Grand Prix circuit, with a real-time leaderboard tracking position, gaps, and lap times alongside a line chart plotting each car's speed fluctuations. Car movements are simulated with randomized speed changes, and the code uses d3.interval to drive the animation, d3.line and d3.scaleLinear for the chart, and SVG paths for the track.

AI-generated description

Made with blockup

This simulates cars going around the Melbourne, Australia racing track. The circles are moving about three times faster than their real-life counterparts.

The car-circles change speed randomly, as displayed on the line chart.

See my previous work:

forked from <a href='http://bl.ocks.org/gabrielflorit/'>gabrielflorit</a>'s block: <a href='http://bl.ocks.org/gabrielflorit/70bace15a196959075ccc2effbeb6064'>Speedy Racer</a>

mit Licensed

Similar vizzes

Loading thumbnail…

blockup

This animation shows a car racing around the Australian Grand Prix circuit, with its speed visibly adjusting based on the curvature of the track. The vehicle accelerates on straights and brakes into corners, while vector lines indicate the steepness of each curve. A speedometer dial and a lap-time chart track the car’s progress. Built with Vue, the visualization uses D3 v4’s `d3.interval`, `d3.line`, `d3.scaleLinear`, and SVG transitions to move the car and render dynamic elements.

TThanaporn-sk

89% match

Loading thumbnail…

Untitled

This interactive parallel coordinates plot uses the D3.js v3 library to visualize a dataset of car characteristics, including fuel economy, engine displacement, power, weight, and acceleration. The SVG rendering shows each car as a polyline crossing multiple vertical axes, with steelblue foreground lines for focus and grey lines for background context. Users can drag the axis labels to reorder the dimensions and use the built-in brush component on each axis to filter the displayed cars dynamically, updating the foreground paths in real time.

Eeugene-gilmore

66% match

Loading thumbnail…

Blocks Graph VI

A force-directed graph of d3.js blocks, where each node represents a block and links show connections between them. Nodes are colored by author, and hovering over a node displays that block's thumbnail image in a tooltip. The visualization uses d3.forceSimulation for layout and renders to a Canvas element via its 2D context. Dragging nodes is supported through d3.drag, and block data is loaded from a JSON file.

PPooky2011

66% match

Loading thumbnail…

fresh block

This example shows a simple line chart of 21 random data points, with each point represented as a circle. The visualization uses D3.js v4 to generate an SVG, with a black line connecting the dots and interactive hover effects that turn the circles red on mouseover and fade back to black on mouseout. The code applies the margin convention, scales the data with `d3.scaleLinear`, and uses the `d3.line` generator to draw the path. Axes are rendered with `d3.axisBottom` and `d3.axisLeft`, and the chart fills the browser window.

663anp3ca

65% match

Loading thumbnail…

Untitled

This visualization displays a parallel coordinates plot of automobile data from the cars.csv file, with each line representing a car and each vertical axis a numeric attribute such as economy, horsepower, or weight. The axes can be dragged to reorder dimensions, and brushing on an axis filters the foreground lines to highlight cars matching the selected range. The implementation uses D3 v3 with d3.svg.line for paths, d3.svg.axis for scales, and d3.svg.brush for interactive filtering, rendered as animated SVG.

WWei-Che Chang

64% match

Loading thumbnail…

My Formula 1 Championship Standings

This chart visualizes Formula 1 championship standings across a season, tracking each driver’s rank over successive races using colorful connected line paths. The data comes from a Google Sheets feed, with race positions converted to points and ranks recalculated after each round. The code uses d3.json to load the data, d3.scaleBand for both axes, and d3.line to draw the paths. A rainbow color scale differentiates drivers, while SVG axes with tick marks highlight race names and rank positions.

AAlexDaGr8

64% match

Loading thumbnail…

Parallel Coordinates

This parallel coordinates chart from Mike Bostock’s classic block, forked and extended by Gerardo Furtado, visualizes automotive data from the 1970s and 1980s using D3 v3’s SVG renderer. Each car is drawn as a polyline crossing seven vertical axes for economy, cylinders, displacement, power, weight, and acceleration. The axes are reorderable by dragging, and brushing along any axis filters the dataset, highlighting the selected range while dimming the rest. The example includes a hover-based animation of data updates and was forked from Jason Davies’s version to demonstrate interactive brushing.

GGerardoFurtado

64% match

Loading thumbnail…

Untitled

This interactive parallel coordinates chart visualizes a dataset of cars and their specifications, such as fuel economy, horsepower, and weight. Each car is represented by a line connecting its attribute values across multiple vertical axes. Users can drag axes to reorder them and use brush controls on each axis to filter which vehicles remain highlighted, with the background context paths hidden while dragging. The visualization is built with D3.js v3, using SVG for rendering, `d3.svg.axis` for axes, and `d3.behavior.drag` and `d3.svg.brush` for interaction.

QqOp3

64% match