Published
Edited
Nov 21, 2021
5 forks
Importers
35 stars
NOAA Hourly Weather DataCorrelation over timeHow Has Men’s Tennis Changed From 1973–2021?AWS HTTP Status DashboardCyclePlot w/ Energy DataTry to impeach this? Challenge accepted!Ping chartWhat's That Noise?Most Popular Programming Languages, 2004–2021Mapping gridded data with a Voronoi diagramStreamgraph transitionsTidy Stacked Area ChartZoomable circle packingCharting with Vega-Lite
🔮Bubble Matrix🔮 Component
Also listed in…
1. DataVis Components
viewof options = form(html`
<form style="font-size: 11pt">
<div style="display: flex; flex-direction: column">
<div style="display: flex">
Width:
<input name="width" type="range" min="300" max=${width} value=${width} style="width: 150px">
<span style="margin-left: 10px">Height: <input name="height" type="range" min="300" max=${height} value=${height} style="width: 150px"></span>
<!--<span style="margin-left: 10px">Font Size: <input name="fontsize" type="range" min="8" max="14" value="11" style="width: 50px"></span>-->
</div>
<div style="display: flex">
Column:
<select name="column">
<option value="Month of Year" selected>Month of Year</option>
<option value="Sales Territory Region">Sales Territory Region</option>
</select>
Measure:
<select name="measure">
<option value="Sales Amount">Sales Amount</option>
<option value="Gross Profit">Gross Profit (Neg. numbers)</option>
<option value="Ratio to All Products">Ratio to All Products (%)</option>
</select>
Highlight:
<input name="highlight" id="matrix" type="radio" value="matrix" group="h" checked><label for="matrix">Matrix</label>
<input name="highlight" id="row" type="radio" value="byRow" group="h"><label for="row">Row</label>
<input name="highlight" id="top" type="radio" value="top" group="h"><label for="top">Top</label>
<input name="highlight" id="bottom" type="radio" value="bottom" group="h"><label for="bottom">Bottom</label>
<select name="num">
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5" selected>5</option>
</select>
</div>
<div style="display: flex">
<span>Above: <input type="color" name="above" value="#ffd166" style="height:16px"></span>
<span style="margin-left: 10px">Below: <input type="color" name="below" value="#118ab2" style="height:16px"></span>
<span style="margin-left: 10px">Row: <input type="color" name="row" value="#caf0f8" style="height:16px"></span>
</div>
<div style="font-size: small; font-weight: bold; font-style: italic; border-bottom: 1px dotted #aaa; margin-top: 0.5em">Click any row or column label to sort, keep clicking to toggle sort orders. Click bubble to show annotation.</div>
</div>
</form>
`)
chart = new BubbleMatrix()
.size([options.width, options.height])
.options({
preserveColumnOrder: options.column === "Month of Year",
numberIsPercentage: options.measure === "Ratio to All Products",
sliderCaption: options.measure,
highlightScope: options.highlight,
numberOfTopBottom: options.num
})
.font({
size: 11,
})
.columns({
row: "Subcategory",
column: options.column,
value: options.measure
})
.colors({
above: options.above,
below: options.below,
row: options.row
})
.data(data)
.render()
import {reference} from "@analyzer2004/bcgmatrix"
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.