45:["$","title",null,{"children":"d3.scaleBand, tiles, barchart & padding | Malik Koné | Observable"}] 4d:T4ad,hist2 = { // sample for the image let histDim = mk_dim({W:width, H:300, mgs:{t:_histConf.topMargin, r: _histConf.rightMargin, b: _histConf.bottomMargin, l: _histConf.leftMargin}}) const [root, svg, g] = initChart( histDim); drawing_borders(svg, g, _histConf.border, histDim) let xScale = d3.scaleBand() .domain(d3.range(histData.length)) .range([0, histDim.gW]) .paddingInner(_histConf.bandInner) .paddingOuter(_histConf.bandOuter); let yScale = d3.scaleLinear() .domain([0, d3.max(histData, d=>d.length)]) .range([histDim.gH, 0]); g.append('g').selectAll("rect") .data(histData) .join("rect") .attr('id', (d,i) => `rnd-bar-${i}`).attr('class', 'rnd-bar') .attr("x", (d, i) => xScale(i)) .attr("y", d => yScale(d.length)) .attr("height", d => histDim.gH - yScale(d.length)) .attr("width", xScale.bandwidth()); let xAxis = g => g .attr("transform", `translate(0,${histDim.gH})`) .call(d3.axisBottom(xScale).tickFormat(i => `bar-${i}`).tickSizeOuter(0)) g.append("g") .call(xAxis); /*svg.append("g") .call(axis.y);*/ root.appendChild(viewof new_data_button); root.appendChild(svg.node()); return root } 4e:T42c,viewof _form = form(html`

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

`)4f:T48f,hist = { let histDim = mk_dim({W:width, H:300, mgs:{t:_histConf.topMargin, r: _histConf.rightMargin, b: _histConf.bottomMargin, l: _histConf.leftMargin}}) const [root, svg, g] = initChart( histDim); drawing_borders(svg, g, _histConf.border, histDim) let xScale = d3.scaleBand() .domain(d3.range(histData.length)) .range([0, histDim.gW]) .paddingInner(_histConf.bandInner) .paddingOuter(_histConf.bandOuter); let yScale = d3.scaleLinear() .domain([0, d3.max(histData, d=>d.length)]) .range([histDim.gH, 0]); g.append('g').selectAll("rect") .data(histData) .join("rect") .attr('id', (d,i) => `rnd-bar-${i}`).attr('class', 'rnd-bar') .attr("x", (d, i) => xScale(i)) .attr("y", d => yScale(d.length)) .attr("height", d => histDim.gH - yScale(d.length)) .attr("width", xScale.bandwidth()); let xAxis = g => g .attr("transform", `translate(0,${histDim.gH})`) .call(d3.axisBottom(xScale).tickFormat(i => `bar-${i}`).tickSizeOuter(0)) g.append("g") .call(xAxis); /*svg.append("g") .call(axis.y);*/ root.appendChild(viewof new_data_button); root.appendChild(svg.node()); return root } 50:[] 49:{"id":"646ea5a141db4a61","slug":"d3-scaleband-tiles-barchart-padding","title":"d3.scaleBand, tiles, barchart & padding","thumbnail":"40a8145e080486732bbd60858d27b0d3d9a8ed41a6516db902a845fc96fb2e71","access_level":"public","create_time":"$D2020-03-11T19:58:45.202Z","update_time":"$D2020-03-13T12:31:58.822Z","view_time":null,"first_public_time":"$D2020-03-11T22:37:50.462Z","has_unpublished_edits":null,"fork":{"id":"c6f71bac1a33c346","slug":"tiles-with-scaleband","title":"Tiles with d3.scaleBand","owner":{"id":"67e45a130f28cdf9","login":"maliky","name":"Malik Koné"}},"stars":2,"starred":false,"owner":{"type":"team","id":"67e45a130f28cdf9","login":"maliky","name":"Malik Koné","avatar_url":"https://avatars-next.observableusercontent.com/7674a5e40b2a6edaa5a2d627bbb5013cbe6fb6986b4d053167e52cfed5441c55","tier":"starter_2024","bio":"seed, teach, grow","followed_by_you":false,"follows_you":false},"version":604,"publish_version":604,"role":null,"authored":false,"authors":[{"type":"individual","id":"d3108f8c2ef2e746","login":"maliky","name":"Malik Koné","avatar_url":"https://avatars-next.observableusercontent.com/7674a5e40b2a6edaa5a2d627bbb5013cbe6fb6986b4d053167e52cfed5441c55","tier":null,"bio":"seed, teach, grow","followed_by_you":false,"follows_you":false}],"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":2,"collection":null,"type":"notebook","body":{"titling":"auto","title":"d3.scaleBand, tiles, barchart & padding","cells":[{"id":0,"value":"md`# d3.scaleBand, tiles, barchart & padding\nThis can be used as a background to build facets in d3 `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":586,"value":"$4d","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":75,"value":"import {mk_dim} from \"@maliky/dims\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":135,"value":"$4e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"chart = { \n const [rootdiv, svg, g] = initChart();\n drawing_borders(svg, g, CF.border, dim);\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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":237,"value":"html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":81,"value":"drawing_borders = (svg, g, border, dim) => {\n // toggle svg and g borders on and off\n \n if (border) svg.attr('style', 'border: 1px solid salmon'); \n if (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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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.l}, ${d.mgs.t})`);\n return [div, svg, g]\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":384,"value":"md`### Making a simple barchart with random data`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":392,"value":"rnddata = get_data(new_data_button)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":394,"value":"/* **** Génère le data **** */ \nfunction get_data(gen) {\n // Returns a set of v.a following a specific random func\n // and global parameters, Nbins\n // random function and parameters\n // - gen is just a reference to the button to update the cell\n let rv = ({func: d3.randomNormal,\n func_name: \"normale\",\n params: [0, 5]\n });\n\n // number of va\n let NX = 100;\n\n return {set: d3.range(NX).map(rv.func(rv.params[0], rv.params[1])),\n rnd_var: rv,\n Nbins: 10};\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":409,"value":"histData = d3.histogram()(rnddata.set)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":478,"value":"viewof _histConf = form(html`\n

\n \n \n \n \n\n\n \n \n \n \n \n\n\n\n \n \n\n

ScaleBand Padding	\n Innner\n	\n Outer
Chart Inner Margins	\n top\n	\n right\n	\n bottom\n	\n left\n
Divers	\n Draw main borders ?\n

\n\n`)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":387,"value":"$4f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":501,"value":"viewof new_data_button = button({value: \"New random Data\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":500,"value":"import {button} from '@jashkenas/inputs'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":388,"value":"html`\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W50","stdlib":"1"}} 44:null