blockup

100%

✓ Published0🌍 Public

Last edited Jan 25, 2018

Created on Jan 25, 2018

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.

AI-generated description

Made with blockup

The car accelerates and brakes depending on the curvature vectors of the Australian Grand Prix circuit. The longer the vector lines, the steeper the curve.

Don't be fooled by the car's incredibly life-like speed! It is not!

See my previous work:

forked from <a href='http://bl.ocks.org/gabrielflorit/'>gabrielflorit</a>'s block: <a href='http://bl.ocks.org/gabrielflorit/cfe6b1f7698ce3a62e609564ee1cde10'>Curvature speeds</a>

mit Licensed

Similar vizzes

Loading thumbnail…

blockup

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.

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

67% match

Loading thumbnail…

fresh blockhtuj!!!!!!!

This example displays a randomized, canvas-based visualization built with Vue and D3 v4. It initializes a force-directed layout using `d3.forceSimulation`, though the visible output is a static pixel pattern. The block loads data from a Google Sheets document and renders it into a `<div>` on a gray background. The code bundles dependencies with `bundle.min.js` and relies on D3’s standard API for sizing and styling.

MMraleksa

65% match

Loading thumbnail…

Cars

This dashboard, built with Vue and D3 v7, visualizes a dataset of car owners from CSV data, allowing users to filter by country. It displays four coordinated views: a line chart of cars manufactured over time, a bar chart of top car brands, a pie chart of car color counts, and a scatter plot comparing brand counts to average manufacture year. The visualization uses D3's `d3.rollups`, `d3.scaleLinear`, `d3.line`, and SVG rendering to create interactive charts with tooltips, while a dropdown menu drives the country-based filtering.

Mmichael_chuxs@yahoo.com

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…

(Q3)

This example visualizes a car dataset as a scatter plot of horsepower against torque, with each point colored by the car’s make and an opacity of 0.7. It uses D3.js v7 (loaded via UNPKG) to fetch a CSV from a GitHub repository, then employs `d3.scaleLinear` for both axes, `d3.extent` for domains, and `d3.scaleOrdinal` with `d3.schemeCategory10` for colors. SVG rendering is used for circles, axis labels via `d3.axisBottom` and `d3.axisLeft`, and a legend built with `selectAll` and `append`.

Rreddyswethuvahana@gmail.com

64% match

Loading thumbnail…

Untitled

A single blue rectangle animates its width and height over five seconds using a custom tween that interpolates numeric values, while its fill color transitions from blue to red to green in sequence over four seconds. The example demonstrates JavaScript modules for car data handling and report generation, though the visualization itself relies on D3 v4 selections, transitions, and interpolate functions to drive SVG attribute changes.

Jjesramyep1263

64% match

Loading thumbnail…

DV A6 T3

This visualization shows a parallel coordinates plot for six numeric car attributes—miles per gallon, cylinders, displacement, horsepower, weight, and acceleration—with lines colored by the vehicle’s origin (USA, Japan, Europe) using a small embedded CSV dataset. Using D3 v7, the code constructs vertical linear scales for each dimension via `d3.scaleLinear` and `d3.extent`, positions axes with `d3.scalePoint` and `d3.axisLeft`, and draws the polylines with `d3.line()`. The SVG rendering applies hover effects that increase stroke width and opacity, making individual car records easier to trace.

Vvineelaviswanadham07@gmail.com

64% match