25:["$","title",null,{"children":"reusable circle legend | ikechennnn | Observable"}] 49: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(); }4a:[{"id":"debdc58f91c7bdee296bc41cc4092f5a1e87c10406c84f51c74d2a85f0d669c54a544e5d47167f39c5c7ad2e6a10492caa926783c245209f7bb4bbfc92d9faf2","href":"https://static.observableusercontent.com/files/debdc58f91c7bdee296bc41cc4092f5a1e87c10406c84f51c74d2a85f0d669c54a544e5d47167f39c5c7ad2e6a10492caa926783c245209f7bb4bbfc92d9faf2","name":"2021-youtube-trending-videos_entertainment-gaming-music.csv","type":"text/csv","lastModified":1675697504253.599,"size":954566}] 29:{"id":"f922e1c6ab972c11","slug":null,"title":"reusable circle legend","thumbnail":"4bd6eb45b10d3d3f7848e31f139f674cac1b486699bac89f354ff47a72fd3eda","access_level":"public","create_time":"$D2023-02-06T15:30:36.355Z","update_time":"$D2023-02-06T16:32:40.528Z","view_time":null,"first_public_time":"$D2023-02-06T15:30:36.355Z","has_unpublished_edits":null,"fork":{"id":"07d1be73dfb935d4","slug":"reusable-circle-legend","title":"reusable circle legend","owner":{"id":"956970941b62fd35","login":"eesur","name":"Sundar Singh"}},"stars":0,"starred":false,"owner":{"type":"team","id":"3fa399a7e3773e1e","login":"ikechennnn","name":"","avatar_url":"https://avatars-next.observableusercontent.com/a2034439cf44a563da383de835ee021f6b6b0fe384e6da3aac36176d6f7b8a0a","tier":"starter_2024","bio":"","following":false},"version":196,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"fa31e909f3ae71d4","login":"ikechennnn","name":"","avatar_url":"https://avatars-next.observableusercontent.com/a2034439cf44a563da383de835ee021f6b6b0fe384e6da3aac36176d6f7b8a0a","tier":null,"bio":"","following":false}],"members":[{"type":"individual","id":"fa31e909f3ae71d4","login":"ikechennnn","name":"","avatar_url":"https://avatars-next.observableusercontent.com/a2034439cf44a563da383de835ee021f6b6b0fe384e6da3aac36176d6f7b8a0a","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":103,"value":"// use a cell reference so observable waits for the dom before render\nsvgCell = { return html` \n \n`}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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 textPadding: 70\n})\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"$49","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"```\n __ __ _______ ___ _______ _______ ______ _______ ___ \n| | | || || | | || || _ | | || | \n| |_| || ___|| | | _ || ___|| | || | _____||___| \n| || |___ | | | |_| || |___ | |_|| | |_____ ___ \n| || ___|| |___ | ___|| ___|| __ ||_____ || | \n| _ || |___ | || | | |___ | | || _____| ||___| \n|__| |__||_______||_______||___| |_______||___| |||_______| \n\n\n```","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":92,"value":"

\n\n\n","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"}],"files":"$W4a","stdlib":"1"}} 24:null