2d:null 2e:["$","title",null,{"children":"Tiles with d3.scaleBand | Malik Koné | Observable"}] 33:T42c,viewof _form = form(html`

Dimensions	nb rows	nb columns
Padding X	Innner	Outer
Padding Y	Innner	Outer
Divers	Draw main borders ?

`)34:[] 31:{"id":"c6f71bac1a33c346","slug":"tiles-with-scaleband","title":"Tiles with d3.scaleBand","thumbnail":"7630029d5412bd16d836e9cd99ee1e4ad83597a87ce85812fdae6ae9c8b117e7","access_level":"public","create_time":"$D2020-03-11T11:41:40.002Z","update_time":"$D2020-03-13T12:32:11.587Z","view_time":null,"first_public_time":"$D2020-03-11T17:10:47.560Z","has_unpublished_edits":null,"fork":{"id":"2436ffc72b5e66ab","slug":"chart-base-template","title":"Chart base template","owner":{"id":"67e45a130f28cdf9","login":"maliky","name":"Malik Koné"}},"stars":1,"starred":false,"owner":{"type":"team","id":"67e45a130f28cdf9","login":"maliky","name":"Malik Koné","avatar_url":"https://avatars-next.observableusercontent.com/7674a5e40b2a6edaa5a2d627bbb5013cbe6fb6986b4d053167e52cfed5441c55","tier":"starter_2024"},"version":378,"publish_version":378,"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,"lapsed":null,"subscribed":null,"forks":3,"collection":null,"type":"notebook","body":{"title":"Tiles with d3.scaleBand","cells":[{"id":0,"value":"md`# Tiles with d3.scaleBand\nThis can be used as a background to build facets in d3`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":136,"value":"import {form} from \"@mbostock/form-input\"\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":75,"value":"import {mk_dim} from \"@maliky/dims\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":98,"value":"// A dimension object to handle margins, Width and Height and possibly viewports (with mid sub-object)\ndim = mk_dim({W:width, H:400, mgs:{t: 10, r: 10, b: 10, l:10}})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":135,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":142,"value":"// config object\nCF = ({nb: ({row: _form.row, col: _form.col}), nbTiles: _form.row* _form.col, border: _form.drawborder, paddingInner: ({x:_form.paddingInnerX, y: _form.paddingInnerY}), paddingOuter: ({x:_form.paddingOuterX, y: _form.paddingOuterY})})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"chart = { \n const [rootdiv, svg, g] = initChart();\n CF.border? drawing_borders(svg, g): null; // if necessary\n\n g.append('g')\n .selectAll(\"rect\")\n .data(tiles)\n .join('rect')\n .attr(\"id\", d=> d.id).attr('class', 'rect-tile')\n .attr(\"x\", d => scale.x(d.colID))\n .attr(\"y\", d => scale.y(d.rowID))\n .attr(\"width\", d=> scale.x.bandwidth(d.colID)) \n .attr(\"height\", d => scale.y.bandwidth(d.rowID));\n\n g.append('g')\n .selectAll('text')\n .data(tiles)\n .enter().append('text')\n .attr('id', d=>`label-${d.id}`).attr('class', 'label-tile')\n .attr('x', (d) => scale.x(d.colID) + scale.x.bandwidth()/2 )\n .attr('y', (d) => scale.y(d.rowID) + scale.y.bandwidth()/2)\n .text(d=> d.id)\n\n rootdiv.appendChild(svg.node());\n return rootdiv;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":237,"value":"html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":145,"value":"tiles = {\n \n let tiles = d3.range(CF.nbTiles);\n \n\n let pos = (tileID) => {\n let rowID = Math.floor(tileID/CF.nb.col);\n let colID = tileID - rowID * CF.nb.col;\n \n return ({colID, rowID})\n }\n return tiles.map(id => ({...pos(id), ...({id: `tile-${id}`})}));\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":131,"value":"scale = {\n\n let xScale = d3.scaleBand()\n .domain(d3.range(CF.nb.col))\n .range([0, dim.gW])\n .paddingInner(CF.paddingInner.x).paddingOuter(CF.paddingOuter.x);\n\n let yScale = d3.scaleBand()\n .domain(d3.range(CF.nb.row))\n .range([0, dim.gH])\n .paddingInner(CF.paddingInner.y).paddingOuter(CF.paddingOuter.y);\n\n return ({x: xScale, y: yScale})\n}\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":81,"value":"drawing_borders = (svg, g) => {\n // toggle svg and g borders on and off\n \n if (CF.border) svg.attr('style', 'border: 1px solid salmon'); \n if (CF.border) g.append('rect')\n .attr('id', 'drawing-border')\n .attr('width', dim.gW).attr('height', dim.gH)\n .attr('fill', 'none').attr('stroke', 'black').attr('stroke-dasharray', '10 10');\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":80,"value":"initChart = (d=dim) => {\n let div = html`

`,\n svg = d3.select(DOM.svg(d.W, d.H)),\n g = svg.append('g').attr('transform', `translate(${d.mgs.r}, ${d.mgs.t})`);\n return [div, svg, g]\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 32:"$31:body"