Skip to main content
100%

D3.js Boxplot working branch

✓ Published0🌍 Public
Aanaeliaovalle
Last edited Mar 17, 2017
Created on Mar 16, 2017

This boxplot visualization, built with D3.js v3, displays the distribution of response times across eight alarm incident types (Alarms, Fire, Hazard, Citizen Assist, Rescue, Vehicle-Related, Other, and Medical Incident). Based on Mike Bostock's boxplot implementation, this version renders all boxplots within a single root SVG element to simplify adding axes, with each column in the CSV representing an independent variable and each row containing measurements for all variables. The chart shows the quartiles, median, whiskers, and outliers for each category, with optional text labels that can be toggled via the `showLabels` variable. Unlike the original implementation, transitions are not used by default, but the code is structured to support them easily. The visualization uses D3.js v3 and is rendered as SVG.

AI-generated description

A box-and-whisker plot with axes. Based on Mike Bostock's implementation. Instead of using individual svg elements as in Mike's implementation, here all boxplots are rendered with in one root element. This makes it easy to add axes.

Further differences between the two implementations are:

  • visibility of boxplot labels can be switched with the labels variable
  • CSV files are supported in which each column is an independent variable and each row contains measurements for all variables (see data.csv)
  • transitions are not used here but can be easily added again

forked from <a href='http://bl.ocks.org/jensgrubert/'>jensgrubert</a>'s block: <a href='http://bl.ocks.org/jensgrubert/7789216'>D3.js Boxplot with Axes and Labels</a>

forked from <a href='http://bl.ocks.org/anaeliaovalle/'>anaeliaovalle</a>'s block: <a href='http://bl.ocks.org/anaeliaovalle/60a7ed1f4e55a9052caab3c69668a306'>D3.js Boxplot working branch</a>

mit Licensed

Similar vizzes

Loading thumbnail…

D3.js Boxplot with Axes and Labels

This example shows a box-and-whisker plot built with D3.js (v3) that visualizes measurements across multiple categorical variables, with each column in the CSV representing an independent variable and each row containing measurements for all variables. The chart renders all boxplots in a single root SVG element, making it straightforward to add axes and labels. The implementation supports toggling label visibility via a `showLabels` variable and accepts CSV input where each column is a variable. It is based on Mike Bostock's boxplot design, adapted to group all plots in one root element for easier axis integration. The visualization uses SVG rendering and is available under the MIT license.

Aanaeliaovalle
78% match
Loading thumbnail…

Untitled

This interactive stacked bar chart visualizes fire and alarm response times across San Francisco neighborhoods from 2012 to 2019. A dropdown menu switches between years, and a checkbox toggles sorting by total average response time or alphabetical order. Built with D3 v5 in a React-free HTML page, it uses `d3.csv`, `d3.stack`, `scaleBand`, `scaleLinear`, and `scaleOrdinal` to render SVG rectangles and total-value labels. Axes transition smoothly via d3 transitions, while the data comes from a CSV file with `Group`, `Neighborhoods`, `Year`, and `Avg` columns.

Pphamiter253
73% match
Loading thumbnail…

Assignment 10: Fixed A3 box plot

This example presents a horizontal box plot of National Aviation System delay counts, drawn with D3.js v7 and rendered as SVG. It visualizes the distribution of delays through a box spanning the interquartile range, whiskers, median line, and steel-blue outlier circles. The chart starts its x-axis at zero for accurate proportional comparison, as noted in an annotation. Using `d3.csv`, `d3.quantile`, and `d3.axisBottom`, the code computes summary statistics and plots them. English annotations, created with the `d3-svg-annotation` library, label the origin, IQR, median, and outliers, while the data comes from a remote CSV file.

Hhxu51@usfca.edu
72% match
Loading thumbnail…

D3.js Boxplot with Axes and Labels

This D3.js boxplot visualizes the distribution of revenue across four quarters, with data parsed from a CSV file. Each quarter is represented by a vertical box-and-whisker plot, showing the median, quartiles, and whiskers, with outliers indicated. The chart includes labeled axes and a title, and the boxplot elements are rendered as SVG shapes. The implementation uses the `d3.box` function, a custom module inspired by Mike Bostock's earlier version, and leverages D3's scaling and axis APIs to draw the chart.

AAjayyy
72% match
Loading thumbnail…

Boxplot in D3

This boxplot visualization displays the distribution of a dataset through a series of vertical box-and-whisker plots, with each plot summarizing key statistics such as the median, quartiles, and potential outliers. The chart is rendered using the D3.js library, specifically leveraging `d3.select` to append SVG elements and `d3.scaleLinear` for the y-axis mapping. Data values are drawn using SVG `rect` and `line` elements, while axes are annotated via `d3.axisLeft`. The example emphasizes standard boxplot conventions, with whiskers extending to the most extreme data points within 1.5 times the interquartile range, and individual outliers plotted as circle markers.

RRiya Mathur
71% match
Loading thumbnail…

Box Plots

This visualization demonstrates the classic box-and-whisker plot, summarizing the distribution of data from the Michelson–Morley experiment using five statistics: minimum, lower quartile, median, upper quartile, and maximum. The chart renders as SVG and includes smooth animated transitions, periodically randomizing values to highlight how the box, median line, whiskers, and outliers update. The d3.box reusable chart component draws each distribution’s center line, innerquartile box, median line, whiskers, and outlier points, with support for custom whisker definitions and quartile calculations.

Aalvinthai
71% match
Loading thumbnail…

radarChart

This interactive radar chart compares emergency call volumes across five geographic regions (NE, NW, SE, SW, TI) for three call types: Alarm, Fire, and Non-life-threatening, plus Potentially Life-Threatening. Built with D3 v3 and SVG, it renders polygonal areas per category with a hover focus effect that dims non-selected regions. The chart uses six axes with three concentric grid levels, and its tooltip displays exact values on mouseover. Data is embedded as CSV and parsed dynamically within the page.

CCatherine-Yu
70% match
Loading thumbnail…

Boxplot testing

This example demonstrates interactive box plots that visualize the distribution of selected numeric columns, optionally grouped by a categorical variable through dropdown menus. It shows quartiles, medians, and outliers, with tooltips revealing exact values on hover. The visualization is built with React and D3 v5, using `d3.nest()` to compute summary statistics and `d3.scaleLinear` for the y-axis. Rendered as SVG with animated transitions, box plots and outlier circles respond to mouse events, highlighting the interquartile range while dimming others.

SSchmittYannic
70% match