Published
Edited
Nov 21, 2021
5 forks
Importers
35 stars
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"
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
