ScaleBand Padding	Innner	Outer
Chart Inner Margins	top	right	bottom	left
Divers	Draw tile borders ?	Draw X Axis ?	Draw Y Axis ?

28:null 29:["$","title",null,{"children":"Detailed selection from Multiple histograms | Malik Koné | Observable"}] 2f:T56a,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; }30:T4bc,function get_tiles(relts_, dim_=tileConf.dim) { // return the tile objects // make it as a map let _tileScale = tileScale(relts_, dim_); let _tiles = ( { gp: d3a.groups(relts_, d=>d.disID, d=>d.day), set: d3a.groups(relts_, d=>`${d.disID}-${d.day}`) }) // each tile is composed of a datum object // a pos obj with x and y position // a dim // and a key let tiles = _tiles.set; function add_position(datum_){ // receive a datum d from _tiles.set and index i let [tileid, tiledata] = datum_ // tiledata is an arr of object // each object share the following disID and day let [_disID, _day] = tileid.split("-"); let pos = ({ row : _tileScale.row(_day), col : _tileScale.col(_disID), x : _tileScale.x(_day), y : _tileScale.y(+_disID), x_centered : _tileScale.x(_day) + _tileScale.x.bandwidth()/2, y_centered : _tileScale.y(_disID) + _tileScale.y.bandwidth()/2 }) let _dim = mk_dim({W:_tileScale.x.bandwidth(), H:_tileScale.y.bandwidth(), mgs:histConf.mgs }) return { tileid: tileid, pos: pos, dim: _dim, data: tiledata } }; return tiles.map(add_position); }31:T462,viewof histForm = form(html` `)32:T512,viewof tileForm = form(html`

Padding X	Innner	Outer
Padding Y	Innner	Outer
Divers	Draw main borders ?
Margin	Top	Right	Bottom	Left

`)33:[] 2c:{"id":"f73e65a9c4545ecd","slug":null,"title":"Detailed selection from Multiple histograms","thumbnail":"5b8de4b786ef464c55f9684ac8faaecc2958e8a0943139d476e0fa06fce4376e","access_level":"unlisted","create_time":"$D2020-03-15T21:20:50.404Z","update_time":"$D2020-03-17T10:27:54.111Z","view_time":null,"first_public_time":null,"fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"67e45a130f28cdf9","login":"maliky","name":"Malik Koné","avatar_url":"https://avatars-next.observableusercontent.com/7674a5e40b2a6edaa5a2d627bbb5013cbe6fb6986b4d053167e52cfed5441c55","tier":"starter_2024"},"version":2473,"publish_version":2473,"role":null,"authored":false,"authors":[{"type":"individual","id":"d3108f8c2ef2e746","login":"maliky","name":"Malik Koné","avatar_url":"https://avatars-next.observableusercontent.com/7674a5e40b2a6edaa5a2d627bbb5013cbe6fb6986b4d053167e52cfed5441c55","tier":null}],"members":[{"type":"individual","id":"d3108f8c2ef2e746","login":"maliky","name":"Malik Koné","avatar_url":"https://avatars-next.observableusercontent.com/7674a5e40b2a6edaa5a2d627bbb5013cbe6fb6986b4d053167e52cfed5441c55","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"Detailed selection from Multiple histograms","cells":[{"id":0,"value":"md`# Detailed selection from Multiple histograms\n- ~~add general axis~~\n- ~~add general axis labels~~ left with merging to other table\n- ~~toggle inner axis based on tile position~~, to difficult because need to take in account no below elemnts\n- ~~ajoute légende couleur~~\n- ~~récupère les messages~~`","pinned":false,"hidden":false,"mode":"ojs"},{"id":136,"value":"import {form} from \"@mbostock/form-input\"\n ","pinned":false,"hidden":false,"mode":"ojs"},{"id":500,"value":"import {button} from '@jashkenas/inputs'","pinned":false,"hidden":false,"mode":"ojs"},{"id":1379,"value":"d3a = require(\"d3-array@^2.2\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":75,"value":"import {mk_dim} from \"@maliky/dims\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1609,"value":"import {append_chart, mk_style, hist, get_conf, mutable selected_text} from \"3e4b061447e643e6\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":2393,"value":"import {swatches} from \"@d3/color-legend\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1294,"value":"import {relts} from \"ef6a1f93e5205b51\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":2067,"value":"html`

Tile parameters

${viewof histForm}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2069,"value":"html`

Main Tiled Chart parameters

${viewof tileForm}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":654,"value":"md`### parameters`","pinned":false,"hidden":false,"mode":"ojs"},{"id":142,"value":"// config object for tiles\ntileConf = {\n let _mgs = ({\n\tt: tileForm.topMargin,\n\tr: tileForm.rightMargin,\n\tb: tileForm.botMargin,\n\tl: tileForm.leftMargin\n });\n \n let _height = 400;\n let _width = width;\n \n return ({nb: ({row: tileForm.row, col: tileForm.col}), \n\t nbTiles: tileForm.row* tileForm.col, \n\t border: tileForm.drawborder, \n\t paddingInner: ({x:tileForm.paddingInnerX,\n\t\t\t y: tileForm.paddingInnerY}), \n\t paddingOuter: ({x:tileForm.paddingOuterX,\n\t\t\t y: tileForm.paddingOuterY}),\n\t dim: mk_dim({W:_width, H:_height, mgs:_mgs})\n })\n}\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":2132,"value":"histConf = get_conf(histForm)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2141,"value":"Selection = selected_text","pinned":false,"hidden":false,"mode":"ojs"},{"id":2430,"value":"function append_legend(svg_, legend_){\n svg_.append(legend_);\n return svg\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"$2f","pinned":true,"hidden":false,"mode":"ojs"},{"id":2423,"value":"function add_sub_chart(datum, i, nodes){ \n\n let _data = datum.data\n let _id = datum.tileid\n let _dim = mk_dim({W:datum.dim.gW, H:datum.dim.gH, mgs:datum.dim.mgs})\n\n //debugger;\n // change draw basedon position TODO\n let _draw = ({border: histConf.draw.border, \n // draw for col and row (from bottom) 0 or checkboxes checked.\n\n xAxis: (!datum.pos.row || histConf.draw.xAxis),\n yAxis: (!datum.pos.col || histConf.draw.yAxis)\n })\n\n let res = append_chart(this, _data, _id, _dim, _draw)\n\n return res;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1773,"value":"/* Chart = {\n let rootdiv = html`

`\n let _name = \"example\"\n let res = append_chart(rootdiv, relts, _name, histConf.dim, histConf.border) \n return rootdiv;\n}*/","pinned":false,"hidden":false,"mode":"ojs"},{"id":237,"value":"html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":1180,"value":"function move_to_position(tile) {\n // move a tile (or element) to the grid position\n return `translate(${tile.pos.x}, ${tile.pos.y})`\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1635,"value":"tiles = get_tiles(data)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2218,"value":"data = relts.slice(0,2)","pinned":false,"hidden":false,"mode":"ojs"},{"id":145,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":2048,"value":"function tileAxis(scale_, dim_) {\n let x = g => g\n .attr(\"transform\", `translate(0,${dim_.gH})`)\n .call(d3.axisBottom(scale_.x));\n\n let y = g => g\n .call(d3.axisLeft(scale_.y))\n \n return {x, y}\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":2216,"value":"days = {\n let _days= Array.from(new Set(data.map(d=>d.day)))\n let _rDays= Array.from(new Set(data.map(d=>d.day)));\n _rDays.reverse()\n return ({o: _days, r:_rDays});\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2213,"value":"discussions = {\n let o = Array.from(new Set(data.map(d=>d.disID)))\n let r = Array.from(new Set(data.map(d=>d.disID)));\n r.reverse()\n return ({o,r})\n}\n;\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":1703,"value":"function tileScale(data_, dim_) {\n\n\n let xScale = d3.scaleBand()\n .domain(days.o)\n .range([0, dim_.gW])\n .paddingInner(tileConf.paddingInner.x).paddingOuter(tileConf.paddingOuter.x);\n\n let yScale = d3.scaleBand()\n .domain(discussions.r)\n .range([0, dim_.gH])\n .paddingInner(tileConf.paddingInner.y).paddingOuter(tileConf.paddingOuter.y);\n\n //debugger;\n // scales to get tile position as rowID and col ID\n\n let _row = (day_) => days.r.indexOf(day_)\n let _col = (dis_) => discussions.o.indexOf(+dis_)\n\n return ({x: xScale, y: yScale, row: _row, col: _col})\n}\n","pinned":true,"hidden":false,"mode":"ojs"},{"id":779,"value":"md`### Utils`","pinned":false,"hidden":false,"mode":"ojs"},{"id":81,"value":"\ndrawing_borders = (svg, g, dim, _name='test') => {\n // toggle svg and g borders on and off\n svg.append('rect')\n .attr('id', `outer-border-${_name}`)\n .attr('x', 0).attr('y', 0)\n .attr('width', dim.W).attr('height', dim.H)\n .attr('fill', 'none')\n .attr('stroke', 'salmon')\n .attr('stroke-width', '2');\n\n g.append('rect')\n .attr('id', `inner-border-${_name}`)\n .attr('x', 0).attr('y', 0)\n .attr('width', dim.gW).attr('height', dim.gH)\n .attr('fill', 'none')\n .attr('stroke', 'black')\n .attr('stroke-width', '2')\n .attr('stroke-dasharray', '10 10');\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":80,"value":"initChart = (dim_=null, name_='test-chart') => {\n let div = html`

`,\n svg = d3.select(DOM.svg(dim_.W, dim_.H)),\n g = svg.append('g')\n .attr('id', `g-${name_}`).attr('class', `${name_}-group`)\n .attr('transform', `translate(${dim_.mgs.l}, ${dim_.mgs.t})`);\n\n tileConf.border? drawing_borders(svg, g, dim_, name_) :null ;\n\n return [div, svg, g]\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":98,"value":"// A dimension object to handle margins, Width and Height and possibly viewports (with mid sub-object)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2395,"value":"legend = swatches({\n color: d3.scaleOrdinal([\"Any\", \"in a circuit\"], d3.schemeTableau10),\n columns: \"\"\n})\n/*swatches({\n color: d3.scaleOrdinal([\"Wholesale and Retail Trade\", \"Manufacturing\", \"Leisure and hospitality\", \"Business services\", \"Construction\", \"Education and Health\", \"Government\", \"Finance\", \"Self-employed\", \"Other\"], d3.schemeTableau10),\n columns: \"180px\"\n})*/","pinned":true,"hidden":false,"mode":"ojs"},{"id":1140,"value":"md`### views`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1908,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":135,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}} 2d:"$2c:body"