Skip to main content
SimilarExport ZIP
100%

d3fc box plot

✓ Published0🌍 Public
CColinEberhardt
Last edited Aug 3, 2017
Created on Dec 4, 2016

This visualization uses d3fc (a library of D3 modules) to create a box plot chart showing revenue data for four quarters. The code calculates quartiles, whiskers, and outliers for each quarter using D3’s `d3.quantile` function, then renders the boxes, whisker lines, and outlier points using `fc.seriesSvgBoxPlot` and `fc.seriesSvgPoint`. A multi-series component (`fc.seriesSvgMulti`) combines these with labeled points showing whisker and quartile values. The chart is built with `fc.chartSvgCartesian`, using a point scale for quarters and a linear scale for revenue, with data loaded from `data.csv`.

AI-generated description
mit Licensed

Similar vizzes

Loading thumbnail…

Box/Whisker

This example visualizes the revenue of various companies across two categories using a box and whisker plot. The visualization displays individual data points as circles with jitter, overlaid on semi-transparent rectangles. Built with React and D3 v5, the code uses `d3.scaleBand`, `d3.scaleLinear`, and `d3.axisLeft` to construct the chart, while data is loaded from a CSV file. The SVG rendering includes interactive hover effects that change rectangle colors.

Bbertieip
76% match
Loading thumbnail…

Fork of first boxplot

This visualization shows a single boxplot of a small dataset, with the median line, interquartile range box, and whiskers extending to the most extreme non-outlier points. Outliers beyond the 1.5×IQR fence are rendered as small circles. The chart is built with D3 v5, using `d3.scaleLinear` for the y-axis, `d3.quantile` to compute quartiles and median, and `d3.axisLeft` for the tick labels. The box, whiskers, and outlier circles are drawn as SVG elements within a React application.

Ddaniel
75% match
Loading thumbnail…

D3 Line Chart

This example visualizes cumulative sales across four fiscal quarters (Q1–Q4) using a line chart rendered with SVG. The code loads quarter-by-quarter sales data from a CSV file and plots the trend, with a steelblue line connecting points positioned along a band scale for quarters and a linear scale for sales values in millions. The chart includes labeled axes, axis ticks, and a title, and it relies on D3 v7’s `d3.line`, `scaleBand`, `scaleLinear`, and axis methods. The visualization effectively communicates a steady upward sales trajectory, as the line clearly rises from 14 million to 37 million across the quarters.

KKwasi Acquaye
73% match
Loading thumbnail…

first boxplot

This example demonstrates a classic boxplot visualization of a numeric dataset, highlighting the median, interquartile range, whiskers, and any potential outliers. The chart computes the five-number summary using `d3.quantile` and draws the box, median line, and whiskers as SVG shapes, with circles marking values beyond 1.5 times the interquartile range. The y-axis is rendered with `d3.axisLeft`, and the scaling is handled by `d3.scaleLinear`. The dataset is hardcoded in the script, and the entire visualization is built with React and D3 v5, outputting to SVG.

SSchmittYannic
73% match
Loading thumbnail…

boxplot

Seven box plots compare timing distributions for seven cycle stages, with jittered scatter points overlaid for individual outliers. The visualization uses d3fc’s `seriesSvgBoxPlot`, `seriesSvgPoint`, and `seriesSvgMulti` to render boxes, whiskers, and labeled markers, while d3-scales compute quantiles and the whisker range. Data comes from `data.csv` with seven duration columns. The chart also labels each median and quartile value, and colors each segment distinctly.

JJLarseneur
73% 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
73% match
Loading thumbnail…

A4-3 TEST

This example shows a box plot of pork price observations loaded from a CSV file, with a horizontal line spanning the min and max, a box between the first and third quartiles, and labeled ticks for each statistic. The code computes quartiles, the interquartile range, and whisker boundaries using d3.median and d3.quantile. It renders the chart as an SVG with d3.v5, using a linear scale for the x-axis, custom tooltip on hover, and styling via external CSS.

MMike Z
72% match
Loading thumbnail…

boxplot

This example visualizes the distribution of automobile prices using a box plot, displaying the minimum, maximum, quartiles, median, and outliers. The code loads data from a CSV file hosted on GitHub, calculates the statistical measures with d3.min, d3.max, d3.quantile, and d3.median, and renders the chart as an SVG. It uses the d3-boxplot library to draw the box plot, with the chart titled "Box Plot of Car Prices" within a 600x400 viewport.

Iindushashi.g@gmail.com
71% match