Skip to main content
SimilarExport ZIP
100%

1988 Porsche 959 Sport

✓ Published0🌍 Public
663anp3ca
Last edited Oct 10, 2018
Created on Oct 10, 2018

This example visualizes the value of a 1988 Porsche 959 Sport over time, using a responsive multiline chart rendered with D3 v3 and SVG. Four condition-based series (Concours, Excellent, Good, Fair) are plotted from CSV data, with toggleable legend entries that let users show or hide individual lines. The chart features a tooltip, custom colors, and axis labels, and it adjusts its size to fit the screen. Built as a reusable module, it supports configurable margins, selectors, and colors, and was adapted from a previous block by asielen.

AI-generated description

An implementation of a reusable responsive multiline chart. Based on the concept outlined in Mike Bostocks blog post Towards Reusable Charts.

Features:

  • Reusable modular design
  • Responsive design, chart size adjusts with screen size
  • Customizable options
    • Chart Size
    • Margins
    • Div Selector
    • Chart Colors
    • Axis labels
  • Toggleable series (click on the legend to toggle series)

Previous version: Reusable Responsive Multiline Chart

forked from <a href='http://bl.ocks.org/asielen/'>asielen</a>'s block: <a href='http://bl.ocks.org/asielen/50a527004cb79facf219'>Reusable Line Chart v2</a>

forked from <a href='http://bl.ocks.org/ptvans/'>ptvans</a>'s block: <a href='http://bl.ocks.org/ptvans/f88602355ecd06bca068b42565416a00'>1988 Porsche 959 Sport</a>

forked from <a href='http://bl.ocks.org/ptvans/'>ptvans</a>'s block: <a href='http://bl.ocks.org/ptvans/8fc90a54688dd9bc7c1136a6e5d42e51'>1988 Porsche 959 Sport</a>

mit Licensed

Similar vizzes

Loading thumbnail…

2003 BMW Z8

This example shows a responsive multiline chart tracking the value of a 2003 BMW Z8 across four condition categories—Concours, Excellent, Good, and Fair—over time. Built with D3.js v3 and SVG, the chart demonstrates reusable chart architecture based on Mike Bostock's "Towards Reusable Charts" concept. The implementation supports interactive series toggling via legend clicks, customizable chart size, margins, colors, and axis labels, and uses a tooltip for detailed value inspection. The chart responds to screen size changes, adjusting its dimensions automatically, and renders smooth animated transitions when data or series are toggled.

663anp3ca
76% match
Loading thumbnail…

Parallel Coordinates

This parallel coordinates visualization displays automotive data from the 1970s and 1980s, with each car represented as a polyline crossing seven axes for metrics like economy, cylinders, power, and weight. Using D3 v3, the SVG-based chart renders gray background lines for all cars and steelblue foreground lines that filter interactively. A d3.svg.brush component on each axis allows users to drag and select ranges along a dimension, dynamically hiding lines that fall outside the brushed extent. The code loads car data from a CSV file and applies linear scales with d3.scale.linear for normalization.

Mmbostock
68% match
Loading thumbnail…

Fork of HTML Starter

This example demonstrates a D3.js v7 line chart that visualizes the profit trends of an automobile sales company from 1985 to 2024. The visualization uses SVG rendering with a band scale for the years on the x-axis and a linear scale for profit values (in millions) on the y-axis. Red circular points mark yearly data values with tooltips on hover, connected by a red line to emphasize trends. The chart includes labeled axes, a title, and uses the Poppins font, with margins calculated from the window dimensions for a responsive layout. The source data is fetched from a CSV file hosted on GitHub.

Ppavan vasamsetti
67% match
Loading thumbnail…

HTML Starter

This example visualizes automobile data by plotting a scatterplot of weight against horsepower, with each vehicle represented by a semi-transparent red circle rendered in SVG. The chart uses D3 v5 scales, axes, and the `csv` loader to fetch and parse the auto-mpg dataset from an external URL. It applies linear scales for both variables, adds gridlines via tick sizing, and includes a title within the chart area. The visualization is built within a React and D3 framework.

CChika
67% 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
67% 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
66% match
Loading thumbnail…

T9Q1

This example renders a donut chart of total horsepower aggregated by car make from a CSV dataset hosted on GitHub. It uses D3 v7 modules including `d3.rollup`, `d3.pie`, `d3.arc`, and `d3.scaleOrdinal` with `d3.schemeCategory10` to create colored arcs with labeled slices. A legend is appended to the SVG, and the chart is generated inside a group transformed to the center of the canvas.

Cchintamanenithp@gmail.com
66% 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
66% match