Detailed selection from Multiple histograms / Malik Koné

Malik Koné

seed, teach, grow

Workspace

Published unlisted

Edited

Mar 17, 2020

chart = {

let _name = 'tiled';

const [rootdiv, svg, g] = initChart(tileConf.dim, _name);

append_legend(rootdiv, legend)

let _data = tiles;

/* "g" to group other elements */

let background = g.append('g').attr('id', 'g-background')

.selectAll("rect")

.data(_data)

.join('rect').attr("id", d=> `bkg-${_name}-${d.tileid}`)

.attr('class', 'bkg-tile')

.attr('x', (d) => d.pos.x)

.attr('y', (d) => d.pos.y)

.attr("width", d=> d.dim.gW)

.attr("height", d => d.dim.gH)

let histograms = g.append('g').attr('id', `g-${_name}-histo`)

.selectAll("g")

.data(_data)

.join('g').attr("id", d=> `g-${_name}-histo-${d.tileid}`)

.attr('class', `g-${_name}-histo`)

.attr('transform', move_to_position)

.attr("width", d=> d.dim.gW)

.attr("height", d => d.dim.gH)

.select(add_sub_chart);

/*let title = g.append('g')

.attr('id', 'labels')

.selectAll('text')

.data(tiles)

.enter().append('text')

.attr('id', d=>`label-${d.tileid}`).attr('class', 'label-tile')

.attr('x', (d) => d.pos.x_centered)

.attr('y', (d) => d.pos.y_centered)

.text(d=> d.tileid)*/

let _tileAxis = tileAxis(tileScale(_data, tileConf.dim), tileConf.dim)

g.append('g').attr('id', `g-${_name}-x-axis`)

.call(_tileAxis.x);

g.append('g').attr('id', `g-${_name}-y-axis`)

.call(_tileAxis.y);

rootdiv.appendChild(svg.node());

return rootdiv;

}

function add_sub_chart(datum, i, nodes){

let _data = datum.data

let _id = datum.tileid

let _dim = mk_dim({W:datum.dim.gW, H:datum.dim.gH, mgs:datum.dim.mgs})

//debugger;

// change draw basedon position TODO

let _draw = ({border: histConf.draw.border,

// draw for col and row (from bottom) 0 or checkboxes checked.

xAxis: (!datum.pos.row || histConf.draw.xAxis),

yAxis: (!datum.pos.col || histConf.draw.yAxis)

})

let res = append_chart(this, _data, _id, _dim, _draw)

return res;

}

/* Chart = {

let rootdiv = html`<div>`

let _name = "example"

let res = append_chart(rootdiv, relts, _name, histConf.dim, histConf.border)

return rootdiv;

}*/

function tileAxis(scale_, dim_) {

let x = g => g

.attr("transform", `translate(0,${dim_.gH})`)

.call(d3.axisBottom(scale_.x));

let y = g => g

.call(d3.axisLeft(scale_.y))

return {x, y}

}

function tileScale(data_, dim_) {

let xScale = d3.scaleBand()

.domain(days.o)

.range([0, dim_.gW])

.paddingInner(tileConf.paddingInner.x).paddingOuter(tileConf.paddingOuter.x);

let yScale = d3.scaleBand()

.domain(discussions.r)

.range([0, dim_.gH])

.paddingInner(tileConf.paddingInner.y).paddingOuter(tileConf.paddingOuter.y);

//debugger;

// scales to get tile position as rowID and col ID

let _row = (day_) => days.r.indexOf(day_)

let _col = (dis_) => discussions.o.indexOf(+dis_)

return ({x: xScale, y: yScale, row: _row, col: _col})

}

drawing_borders = (svg, g, dim, _name='test') => {

// toggle svg and g borders on and off

svg.append('rect')

.attr('id', `outer-border-${_name}`)

.attr('x', 0).attr('y', 0)

.attr('width', dim.W).attr('height', dim.H)

.attr('fill', 'none')

.attr('stroke', 'salmon')

.attr('stroke-width', '2');

g.append('rect')

.attr('id', `inner-border-${_name}`)

.attr('x', 0).attr('y', 0)

.attr('width', dim.gW).attr('height', dim.gH)

.attr('fill', 'none')

.attr('stroke', 'black')

.attr('stroke-width', '2')

.attr('stroke-dasharray', '10 10');

}

initChart = (dim_=null, name_='test-chart') => {

let div = html`<div>`,

svg = d3.select(DOM.svg(dim_.W, dim_.H)),

g = svg.append('g')

.attr('id', `g-${name_}`).attr('class', `${name_}-group`)

.attr('transform', `translate(${dim_.mgs.l}, ${dim_.mgs.t})`);

tileConf.border? drawing_borders(svg, g, dim_, name_) :null ;

return [div, svg, g]

}

// A dimension object to handle margins, Width and Height and possibly viewports (with mid sub-object)

legend = swatches({

color: d3.scaleOrdinal(["Any", "in a circuit"], d3.schemeTableau10),

columns: ""

})

/*swatches({

color: d3.scaleOrdinal(["Wholesale and Retail Trade", "Manufacturing", "Leisure and hospitality", "Business services", "Construction", "Education and Health", "Government", "Finance", "Self-employed", "Other"], d3.schemeTableau10),

columns: "180px"

})*/

viewof histForm = form(html`

<form>

<table>

<th>ScaleBand Padding</th>

<td>

<label><input name="bandInner" type="number" min=0 max=1 value=0.05 step=.05> <i>Innner</i></label>

</td>

<td>

<label><input name="bandOuter" type="number" min=0 max=1 value=0.05 step=.05> <i>Outer</i></label></td>

</tr>

<tr>

<th>Chart Inner Margins</th>

<td>

</td>

<td>

<label><input name="rightMargin" type="number" min=0 max=150 value=5 step=1> <i>right</i></label>

</td>

<td>

<label><input name="bottomMargin" type="number" min=0 max=150 value=20 step=1> <i>bottom</i></label>

</td>

<td>

</td>

</tr>

<tr>

<th>Divers</th>

<td> <label><input name="border" type="checkbox" checked > <i>Draw tile borders ?</i></label> </td>

</tr>

</table>

</form>

viewof tileForm = form(html`<form>

<table>

<tr>

<th>Padding X</th>

<td>

<label><input name="paddingInnerX" type="number" min=0 max=1 value=0.05 step=.05> <i>Innner</i></label>

</td>

<td>

<label><input name="paddingOuterX" type="number" min=0 max=1 value=0.05 step=.05> <i>Outer</i></label></td>

</tr>

<tr>

<th>Padding Y</th>

<td>

<label><input name="paddingInnerY" type="number" min=0 max=1 value=0.05 step=.05> <i>Innner</i></label>

</td>

<td>

<label><input name="paddingOuterY" type="number" min=0 max=1 value=0.05 step=.05> <i>Outer</i></label>

</td>

</tr>

<tr>

<th>Divers</th>

<td>

<label><input name="drawborder" type="checkbox" checked > <i>Draw main borders ?</i></label>

</td>

</tr>

<th>Margin</th>

<td><label><input name="rightMargin" type="number" min=0 max=200 value=5 step=1 > <i>Right</i></label></td>

<td><label><input name="botMargin" type="number" min=0 max=200 value=30 step=1 > <i>Bottom</i></label></td>

</tr>

</table>

</form>

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.

Learn more