Untitled

100%

✓ Published0🌍 Public

Last edited Jun 9, 2021

Created on Jun 9, 2021

This example presents horizontal box plots that summarize highway fuel efficiency (hwy) across different vehicle classes from the ggplot2 mpg dataset. Each box shows the interquartile range, median, and whiskers, with individual data points overlaid. The visualization uses d3.v4 with SVG and animation, employing d3.nest for grouping and summary statistics, d3.scaleBand for the categorical y-axis, d3.scaleLinear for the numeric x-axis, and a d3.scaleSequential with an Inferno color interpolator. A custom tooltip appears on hover, while the axes are drawn using d3.axisLeft and d3.axisBottom.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

Similar vizzes

Loading thumbnail…

Untitled

A scatterplot displays the relationship between highway miles per gallon and horsepower for a dataset of cars. Each car is represented by a small circle, with the x-axis mapped to mpg and the y-axis to horsepower. The visualization uses d3.csv to load the data, then d3.scaleBand and d3.scaleLinear to position the circles within an SVG. Axes are rendered with d3.axisBottom and d3.axisLeft, and the chart includes a title and axis labels. The circles have a radius of 1.5 pixels.

Eeranyoung

78% match

Loading thumbnail…

Box Plot - hover test

This box plot shows the distribution of fuel efficiency (mpg) for five car makes, with individual model data points overlaid on each box. The chart uses a D3.js v4 SVG renderer with `d3.csv` to load data, `d3.nest()` to compute quartiles and medians per make, and `d3.scaleBand` with `d3.scaleLinear` for the axes. Jittered circles display each vehicle, while a tooltip div is appended but remains non-functional.

Ddriftcafe

78% match

Loading thumbnail…

D3 Boxplot with Jitter for Assignment 4

This D3.js v4 visualization presents a boxplot of BMW model fuel efficiency (mpg) across model years 2009–2012, sourced from boxplot.csv. It summarizes the distribution per model using d3.nest() to compute quartiles and the interquartile range, which are drawn as a box-and-whisker plot via SVG shapes. Individual data points are overlaid as red circles with a fixed x-offset, and hover interactions (configured via d3.select and tooltip transitions) reveal exact mpg values. The chart uses d3.scaleBand for the categorical axis, d3.scaleLinear for the numeric axis, and d3.axisBottom/Left for tick marks.

Vvishusikka

76% match

Loading thumbnail…

MPG Scatter Plot, Color & Interactive Legend

This scatter plot displays vehicle MPG highway ratings against a selected attribute, with each point colored by car make. Users can change the y-axis attribute via a dropdown menu. The interactive color legend highlights points of a specific make on mouse hover while fading others. Built with React and D3 v6, it uses `scaleOrdinal` for color mapping, `scaleLinear` for axes, and SVG circles with tooltips for data inspection.

AAndre J Denais

75% match

Loading thumbnail…

Untitled

This example presents a static scatter plot that visualizes the relationship between engine horsepower and fuel efficiency (MPG) for a small set of car brands, including Ford and BMW. Built with React and D3.js (v7), the SVG visualization uses `d3.scaleLinear` to map data to axes and `d3.schemeCategory10` for color coding, with a legend identifying each brand. Mouse interactions trigger a tooltip that displays the brand, horsepower, and MPG values. The chart includes labeled axes and a title, all rendered through SVG elements.

Ssaikrishnabussa

75% match

Loading thumbnail…

Untitled

This scatter plot visualizes the relationship between vehicle weight and horsepower, with each circle representing a car from the auto-mpg dataset. The visualization uses d3.scaleLinear for both axes, d3.axisLeft and d3.axisBottom for tick marks, and d3.format for axis labels, rendered as SVG. The chart includes axis labels, a title, and grid lines created via tickSize, with data loaded asynchronously from a CSV file.

RReekMajumder

75% 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

75% match

Loading thumbnail…

Box Plot

This example visualizes the distribution of miles per gallon (mpg) for 2012 vehicles using a box plot. It shows the minimum, first quartile, median, third quartile, and maximum values as horizontal lines and a shaded box, with numerical labels for each statistic. The chart is built with D3.js v4 and rendered as SVG, reading data from a CSV file. The code uses `d3.csv`, `d3.quantile`, and `d3.scaleLinear` to compute summary statistics and map the data to screen coordinates.

Pprateekvasi

74% match