31:T760,function circleLegend (data, { svg = null, // pass in a d3 selection domain = [0, 100], // the values min and max range = [0, 80], // the circle area/size mapping width = range[1] * 2, height = range[1] * 2, suffix ='', // ability to pass in a suffix circleColor = '#888', textPadding = 30, textColor = '#454545', fontSize = 14, } = {}) { const sqrtScale = d3.scaleSqrt() .domain(domain) .range(range); svg.selectAll('g').remove() const sel = svg.append('g') .attr('class', 'cl-wrap') // push down to radius of largest circle .attr('transform', 'translate(0,' + sqrtScale(d3.max(data)) + ')'); // append the values for circles sel.append('g') .attr('class', 'cl-circle-wrap') .attr('transform', 'translate(200, 200') .selectAll('circle') .data(data).join('circle') .attr('r', d => sqrtScale(d)) .attr('cx', width/2) .attr('cy', d => height/2 - sqrtScale(d)) .style('fill', 'none') .style('stroke', circleColor) .style('opacity', 0.8) ; // append some lines based on values sel.append('g') .attr('class', 'cl-line-wrap') .selectAll('line') .data(data).join('line') .attr('x1', d => width/2 + sqrtScale(d)) .attr('x2', width/2 + sqrtScale(domain[1]) + 10) .attr('y1', d => height/2 - sqrtScale(d)) .attr('y2', d => height/2 - sqrtScale(d)) .style('stroke', textColor) .style('stroke-dasharray', ('2,2')); // append some labels from values sel.append('g') .attr('class', 'cl-text-wrap') .selectAll('text') .data(data).join('text') .attr('x', width/2 + sqrtScale(domain[1]) + textPadding) .attr('y', d => height/2 - sqrtScale(d) + 5) .attr('shape-rendering', 'crispEdges') .style('text-anchor', 'end') .style('fill', textColor) .style('font-size', fontSize) .text(d => d + suffix); return sel.node(); }32:[] 2f:{"title":"reusable circle legend","cells":[{"id":0,"value":"# reusable circle legend\n\nupdated from one of my old blocks: https://bl.ocks.org/eesur/7b63401950344f2dca1025d09cc7386d\n\nappends to a `g` over creating an `svg`","pinned":false,"hidden":false,"mode":"md"},{"id":103,"value":"// use a cell reference so observable waits for the dom before render\nsvgCell = { return html` \n \n`}","pinned":true,"hidden":false,"mode":"ojs"},{"id":21,"value":"circleLegend([8, 34, 89], { // pass in array of values (e.g. min,mean/median & max)\n // overide defaults\n circleColor: 'tomato',\n textColor: 'tomato',\n svg: d3.select(svgCell).select('g.cl'),\n})\n","pinned":true,"hidden":false,"mode":"ojs"},{"id":148,"value":"circleLegend([25, 50, 75], { \n // overide defaults\n circleColor: '#19cc33',\n textColor: '#19cc33',\n fontSize: 11,\n svg: d3.select(svgCell).select('g.cl-2'),\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":156,"value":"circleLegend([50, 600, 900], { \n // overide defaults\n circleColor: '#3400a3',\n textColor: '#3400a3',\n domain: [0, 1000],\n textPadding: 45,\n svg: d3.select(svgCell).select('g.cl-3'),\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":11,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"```\n __ __ _______ ___ _______ _______ ______ _______ ___ \n| | | || || | | || || _ | | || | \n| |_| || ___|| | | _ || ___|| | || | _____||___| \n| || |___ | | | |_| || |___ | |_|| | |_____ ___ \n| || ___|| |___ | ___|| ___|| __ ||_____ || | \n| _ || |___ | || | | |___ | | || _____| ||___| \n|__| |__||_______||_______||___| |_______||___| |||_______| \n\n\n```","pinned":false,"hidden":false,"mode":"md"},{"id":92,"value":"

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