${d => d.description || ''}

30:T1af7,matrix = ({data, row_array, column_array, width=300, padding=4, margin=4, label_width=40, label_height=40, bars_height=0, bars_width=0, selection=null, selectable=false, column_header='', row_header='', title='', subtitle='', box_margin=5, cell_tooltip=(c => '['+c.join(', ')+']'), column_bar_tooltip=(d => d.value), row_bar_tooltip=(d => d.value)}) => { const ROWS = data.length const COLUMNS = data[0].length const ASPECT = ROWS/COLUMNS let height = width*ASPECT // support for multivalue cells data = data.map(r => r.map(c => c instanceof Array ? c : [c])) const x = d3.scalePoint() .domain(column_array.map(d => d.id)) .range([0, width]) .padding(0.5) const y = d3.scalePoint() .domain(row_array.map(d => d.id)) .range([0, height]) .padding(0.5) const radius = x.step()*0.5 const z = d3.scaleSqrt() .domain([0, d3.max(data, r => d3.max(r, c => d3.sum(c)))]) .range([0, radius]) const zx = d3.scaleLinear() .domain([0, d3.max(row_array, d => d.value)]) .range([0, bars_width]) const zy = d3.scaleLinear() .domain([0, d3.max(column_array, d => d.value)]) .range([0, bars_height]) const multivalue_color = d3.scaleOrdinal() .domain(d3.range(data[0][0].length)) .range(data[0][0].map((d,i) => d3.interpolateGreys(0.5 + 0.5*i/data[0][0].length))) const svg = html` ` if(selectable) { d3.select(svg).selectAll('.active').on('click', function (d) { mutable selection = d3.select(this).attr('data-ids').split(',') }) } return svg }31:[] 2e:{"title":"Rectangular matrix","cells":[{"id":0,"value":"md`# Rectangular matrix`","pinned":false,"hidden":false,"mode":"ojs"},{"id":93,"value":"mat = d =>\n d3.dsvFormat(' ')\n .parseRows(String(d).trim())\n .map(r => r.map(c => isNaN(c) ? c : +c))","pinned":false,"hidden":false,"mode":"ojs"},{"id":96,"value":"m = mat`\n- X Y Z\na 0 0 1\nb 2 0 1\nc 1 1 3\nd 2 0 0\ne 2 0 0\nf 0 0 1\ng 1 2 0\nh 0 1 1\ni 1 3 1\nj 1 2 3\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":111,"value":"column_array = m[0].slice(1).map((d,j) => ({id: d, label: d, value: d3.sum(m, (r => r[j+1]))}))","pinned":false,"hidden":false,"mode":"ojs"},{"id":113,"value":"row_array = m.slice(1).map(d => ({id: d[0], label: d[0], value: d3.sum(d.slice(1))}))","pinned":false,"hidden":false,"mode":"ojs"},{"id":119,"value":"data = m.slice(1).map(r => r.slice(1)).map(r => r.map(c => [c, 1]))","pinned":false,"hidden":false,"mode":"ojs"},{"id":124,"value":"viewof width = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":126,"value":"viewof label_width = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":128,"value":"viewof label_height = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":243,"value":"mutable selection = null","pinned":false,"hidden":false,"mode":"ojs"},{"id":40,"value":"$30","pinned":true,"hidden":false,"mode":"ojs"},{"id":89,"value":"matrix({data, row_array, column_array, width, label_width, label_height, bars_width: 50, bars_height: 50, selection, selectable: true, column_header: 'Set', row_header: 'Element', title: 'Title', subtitle: 'Subtitle'})","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"md`## Dependencies`","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"d3 = require('d3-selection', 'd3-dsv', 'd3-scale', 'd3-array', 'd3-scale-chromatic')","pinned":false,"hidden":false,"mode":"ojs"},{"id":45,"value":"import {$each} from '@nitaku/sugar-strings'","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}