30:T8e4,function concentricPctLines (datum, { bind = null, // pass in a d3 selection i.e d3.select('class/div') margin = {top: 10, right: 10, bottom: 30, left: 10}, circleSize = 100, width = (circleSize * 2) + (margin.left + margin.right), height = circleSize * 1.8 + (margin.top + margin.bottom), modulus = 5, // what % each circle represents col = { active: '#1b3644', passive: '#ffa6d9' }, strokeWidth = 1, domain = [0, 100], range = [0, circleSize], scaleSqrt = true // if to use scaleSqrt scale or even distribution } = {}) { // set the dimensions and margins of the graph const w = width - margin.left - margin.right const h = height - margin.top - margin.bottom bind.selectAll('svg').remove(); const sel = bind.append('svg') .attr('width', width) .attr('height', height) .append('g') .attr('transform', `translate(${margin.left},${margin.top})`); const scale = (scaleSqrt)? d3.scaleSqrt() : d3.scaleLinear(); scale.domain(domain).range(range); const r = scale(circleSize); // radius of full circle const translate = `translate(${width / 2},${(height - margin.bottom) / 2 })`; const passive = sel.append('g') .attr('class', 'g-passive-wrap') .attr('transform', translate); const active = sel.append('g') .attr('class', 'g-active-wrap') .attr('transform', translate); // passive (background) circle(s) passive.selectAll('circle') .data(d3.range(domain[1])) .join('circle') .attr('r', d => { if ((d % modulus) == 0){ return scale(d + 1) } else { return 0 } }) .attr('fill', 'transparent') .attr('stroke', col.passive) .style('opacity', 0.4) .attr('stroke-width', strokeWidth); // active circle(s) active.selectAll('circle') .data(d3.range(datum)) .join('circle') .attr('r', d => { if ((d % modulus) == 0){ return scale(d + 1) } else { return 0 } }) .attr('fill', 'transparent') .attr('stroke', col.active) .attr('stroke-width', strokeWidth); // show pct active.append('text') .attr('class', 'percent-label') .attr('y', r) .attr('dy', 15) .style('text-anchor', 'middle') .text(datum + '%'); return sel; }31:[] 2e:{"title":"concentric pct lines","cells":[{"id":0,"value":"# concentric pct lines\n\nconcentric circles to show percentages. The circles can use sqrtScale or even distribution for display. This version is\ndesigned for values to match the division of the number of concentric circles in this version i.e if the `modulus`in api is 5, then % values should be rounded to the nearest 5","pinned":false,"hidden":false,"mode":"md"},{"id":193,"value":"vis = html`

`","pinned":true,"hidden":false,"mode":"ojs"},{"id":23,"value":"concentricPctLines(value, {\n bind: d3.select(vis), // pass in the selection\n modulus: 5, // i.e each circle is 5%\n scaleSqrt: scaleToggle\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":248,"value":"viewof value = Inputs.range([5, 100], {label: \"Pct\", step: 5, value: 30})","pinned":false,"hidden":false,"mode":"ojs"},{"id":115,"value":"viewof scaleToggle = Inputs.toggle({label: \"use sqrt scale\", value: true})","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"$30","pinned":true,"hidden":false,"mode":"ojs"},{"id":4,"value":"---------\n```\n __ __ _______ ___ _______ _______ ______ _______ ___ \n| | | || || | | || || _ | | || | \n| |_| || ___|| | | _ || ___|| | || | _____||___| \n| || |___ | | | |_| || |___ | |_|| | |_____ ___ \n| || ___|| |___ | ___|| ___|| __ ||_____ || | \n| _ || |___ | || | | |___ | | || _____| ||___| \n|__| |__||_______||_______||___| |_______||___| |||_______| \n\n\n```","pinned":false,"hidden":false,"mode":"md"},{"id":271,"value":"to use in your notebook, create a js cell and add:\n\n```js\nimport { concentricPctLines } from '@eesur/concentric-pct-lines'\n```\n\nthen another js cell for the container: \n```js\nvis = html`

\n```\n\nand finally a js cell to render (pass in any overrides):\n\n```js\nconcentricPctLines(30, {\n bind: d3.select(vis), // pass in the selection\n})\n```\n\nIf you want to use outside of observable you need to copy `concentricPctLines` function and then call the function in the same manner e.g. pass in a value, selection/bind and any overrides and initiate the function\n\n------------------","pinned":false,"hidden":false,"mode":"md"},{"id":243,"value":"show an example using css flex grid to display multiple renders:","pinned":false,"hidden":false,"mode":"md"},{"id":163,"value":"visWrap = html`

`","pinned":true,"hidden":false,"mode":"ojs"},{"id":133,"value":"[30, 45, 25, 80, 60, 5, 20, 25, 15, 10, 90, 50].forEach((d, i) => {\n const div = d3.select(visWrap).append('div').attr('class', 'ref-' + i)\n concentricPctLines(d, {\n bind: d3.select(visWrap).select('.ref-' + i),\n margin: {top: 30, right: 30, bottom: 50, left: 10},\n modulus: 5, // i.e each circle is 5%\n scaleSqrt: scaleToggle,\n col: {\n active: '#ed3d66',\n passive: '#33ff7d'\n }\n })\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":6,"value":"

\n\n\n","pinned":true,"hidden":false,"mode":"html"}],"files":"$W31","stdlib":"1","titling":"auto"}