28:null 29:["$","title",null,{"children":"Histograme messages groupés | Malik Koné | Observable"}] 2f:T49d,viewof histForm = form(html`

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

`)30:Tc74,function hist(data_, name_ = null, dim_ = null, draw_ = {}, scale_ = null) { // data_ : the data to be binned in histogram. It's an array of values with // d.theID attribute // name_ : name used in id and class style attributes // dim_: the dimension object for this chart (margin, width ect...) // draw_: the draw object controling if to draw axis, borders ect.. // scale_ : scale function. If null initialize a scale base on chart's data and dim let _histName = name_; let _reltsInCir = data_.filter(d => d.inCir); let _data = d3.histogram().value(d => d.theID)(data_); let _dataInCir = d3.histogram().value(d => d.theID)(_reltsInCir); let _scale = scale_ ? scale_ : scale(_data, dim_); let _axis = axis(_scale, dim_); let _baseOpacity = 0.6; const [svg, g] = initChart(dim_, _histName, draw_.border); //g.attr("viewBox", [dim.mid.nW, dim.mid.nH, dim.W, dim.H]); //centering coordinates in g //g.attr("viewBox", [0, 0, dim.W, dim.H]); /* main bars */ g.append("g") .classed(`g-main-bar-${_histName} g-main-${_histName}`, true) .selectAll("rect") .data(_data) .join("rect") .attr("id", (_, i) => `g-main-bar-${_histName}-${i}`) .attr("class", (_, i) => `g-main-${_histName}-${i} transparent`) .attr("x", (d, i) => _scale.x(i)) .attr("y", d => _scale.y(d.length)) .attr("height", d => _scale.yHeight(d)) .attr("width", _scale.x.bandwidth()) .on("mouseover", mb_on_mover) .on("click", mb_on_click) .on("mouseout", mb_on_mout); g.append("g") .classed(`g-main-label-${_histName} g-main-${_histName}`, true) .selectAll("text") .data(_data) .join("text") .attr("id", (_, i) => `g-main-label-${_histName}-${i}`) .attr("class", (_, i) => `g-main-${_histName}-${i} transparent`) .attr("x", (d, i) => _scale.xLabelMainPos(d, i)) .attr("y", (d, i) => setYlabel(d, i, _scale).get("pos")) .text(d => d.length) .on("mouseover", mb_on_mover) .on("mouseout", mb_on_mout); /* bar for in Circuit */ g.append("g") .classed(`g-inCir-bar-${_histName} g-inCir-${_histName}`, true) .selectAll("rect") .data(_dataInCir) .join("rect") .attr("id", (d, i) => `g-inCir-bar-${_histName}-${i}`) .attr("class", (_, i) => `g-inCir-${_histName}-${i} transparent`) .attr("x", (d, i) => _scale.xInCirPos(d, i)) .attr("y", d => _scale.y(d.length)) .attr("height", d => _scale.yHeight(d)) .attr("width", _scale.x.bandwidth() / 2) .on("mouseover", mb_on_mover) .on("click", mb_on_click) .on("mouseout", mb_on_mout); g.append("g") .attr("class", `g-inCir-label-${_histName} g-inCir-${_histName}`) .selectAll("text") .data(_dataInCir) .join("text") .attr("id", (d, i) => `g-inCir-label-${_histName}-${i}`) .attr("class", (_, i) => `g-inCir-${_histName}-${i} transparent`) .attr("x", (d, i) => _scale.xInCirPos(d, i)) .attr("y", (d, i) => setYlabel(d, i, _scale).get("pos")) .text(d => d.length) .on("mouseover", mb_on_mover) .on("mouseout", mb_on_mout); draw_.xAxis ? g.append("g").call(_axis.x) : null; draw_.yAxis ? g.append("g").call(_axis.y) : null; return svg; }31:[] 2c:{"id":"3e4b061447e643e6","slug":null,"title":"Histograme messages groupés","thumbnail":"a6abc93baec23b7976a4121bf37aa2425f7518e3cfbb09fe692b9acd238e6d22","access_level":"unlisted","create_time":"$D2020-02-17T10:12:23.617Z","update_time":"$D2020-03-17T21:27:57.143Z","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":1051,"publish_version":1051,"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":"Histograme messages groupés","cells":[{"id":1,"value":"md`# Histograme messages groupés`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1008,"value":"import {form} from \"@mbostock/form-input\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":392,"value":"import {relts} from \"ef6a1f93e5205b51\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1046,"value":"relts","pinned":false,"hidden":false,"mode":"ojs"},{"id":236,"value":"dim = mk_dim({H:400, W: width, mgs:{t:10, r:20, b:20, l:40}})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1010,"value":"html`

Histogram parameters

${viewof histForm}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1006,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs"},{"id":1014,"value":"histConf = get_conf(histForm)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1013,"value":"function get_conf(form_){\n \n let _mgs = ({t:form_.topMargin, r:form_.rightMargin, b:form_.bottomMargin, l:form_.leftMargin});\n let _band = ({inner: form_.bandInner, outer: form_.bandOuter});\n \n let _dim = mk_dim({mgs:_mgs});\n let _draw = ({border: form_.border, xAxis: form_.xAxis, yAxis:form_.yAxis});\n \n return ({\n draw: _draw, \n mgs: _mgs,\n band: _band,\n dim: _dim\n });\n \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":681,"value":"mutable selected_text = null","pinned":false,"hidden":false,"mode":"ojs"},{"id":742,"value":"Chart = {\n let _rootdiv = html`

`\n let _name = \"example\"\n let _draw = histConf.draw\n return append_chart(_rootdiv, relts, _name, dim, _draw)\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":960,"value":"function append_chart(root, data_, name_, dim_, draw_={}, scale_=null){\n// root: the root element to attache the graph\n // data: a table to build the histogram\n // name: the name of the chart, used in class and id\n // dim: a dim objet to handle margins\n // border: a object of boolean to toggle border and axis drawing\n let _svg = hist(data_, name_, dim_, draw_, scale_);\n let _style = mk_style(name_);\n \n root.appendChild(_style)\n root.appendChild(_svg.node());\n \n return root;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":780,"value":"mk_style = (name_) => {\n return html`\n`\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":235,"value":"$30","pinned":true,"hidden":false,"mode":"ojs"},{"id":608,"value":"mb_on_mover = function(d,i){\n // main bar on enter\n let classList = this.attributes.class.value;\n\n // l'ordre d'insertion des classes est important\n let selector = classList.split(\" \")[0]\n\n d3.selectAll(`.${selector}`).classed(\"transparent\", false)\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":679,"value":"mb_on_click = function(d,i) {\n mutable selected_text = d\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":606,"value":"// Callback Function set green\nmb_on_mout = function(){\n let classList = this.attributes.class.value;\n \n // l'ordre d'insertion des classes est important\n let selector = classList.split(\" \")[0]\n \n d3.selectAll(`.${selector}`).classed(\"transparent\", true)\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":490,"value":"setYlabel = (d, i, scale) => {\n \n let params = new Map()\n let p = scale.label(d.length) // return the catégorie 0, 1, 2 or 3 of d\n \n params.set('color', 'black')\n params.set('pos', scale.y(d.length) -10)\n \n if (p == 0){\n params.set('color', 'black')\n params.set('pos', scale.y(d.length) )\n }\n //debugger\n return params \n}\n","pinned":true,"hidden":false,"mode":"ojs"},{"id":537,"value":"function scale(data_, dim_) {\n\n let y = d3.scaleLinear()\n .domain([0, d3.max(data_, d => d.length)]).nice()\n .range([dim_.gH, 0]);\n\n let x = d3.scaleBand()\n .domain(d3.range(data_.length))\n .range([0, dim_.gW])\n .padding(0.1)\n\n let label = d3.scaleQuantile().range(d3.range(data_.length)) // scale for label placement\n\n let yHeight = (d) => y(0) - y(d.length);\n \n let xInCirPos = (d,i) => x(i) + x.bandwidth()/4 ;\n \n let xLabelMainPos = (d,i) => x(i) + x.bandwidth()\n \n return ({x, y, label, yHeight, xInCirPos, xLabelMainPos})\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":544,"value":"function axis(scale_, dim_) {\n let x = g => g\n .attr(\"transform\", `translate(0,${dim_.gH})`)\n .call(d3.axisBottom(scale_.x).tickFormat(i => `the${i}`).tickSizeOuter(0))\n\n let y = g => g\n // .attr(\"transform\", `translate(${dim_.mgs.l},0)`)\n .call(d3.axisLeft(scale_.y))\n // .call(g => g.select(\".domain\").remove())\n \n return {x, y}\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":242,"value":"drawing_borders = (svg, g, dim_, name_) => {\n // toggle svg and g borders on and off\n\n svg.append('rect').attr('id', `outter-border-${name_}`)\n .attr('width', dim_.W).attr('height', dim_.H)\n .attr('stroke', 'salmon')\n .attr('stroke-width', 5)\n .attr('fill', 'none');\n\n g.append('rect')\n .attr('id', `inner-border-${name_}`)\n .attr('width', dim_.gW).attr('height', dim_.gH)\n .attr('fill', 'none').attr('stroke', 'black').attr('stroke-dasharray', '10 10');\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":6,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":240,"value":"initChart = (dim_=dim, name_='test-chart', border_=false) => {\n \n let svg = d3.select(DOM.svg(dim_.W, dim_.H))\n .attr('id', `svg-${name_}`).attr('class', `${name_}-group`),\n \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 border_? drawing_borders(svg, g, dim_, name_) :null ;\n\n return [svg, g]\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":664,"value":"import {checkbox} from \"@jashkenas/inputs\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":238,"value":"import {mk_dim} from \"e52eb8c1ed8e0b33\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":663,"value":"viewof drawch = checkbox({\n description: \"draw the borders\",\n options: [{ value: \"toggle\", label: \"On\" }],\n value: null\n})","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}} 2d:"$2c:body"