2c:null 2d:["$","title",null,{"children":"Legends v0.1 | Karl Sluis | Observable"}] 32:Tccf,legend = { var div = d3.create("div") .style('width',width*0.5) .style('margin-top','8px') .style('padding-bottom','60px') .attr('class','legendContainer') // TK use select all to apply the right font-family div.append('div') .text(d => a0 + 'px') .style('color','red') var div2 = div.append('div') .attr('class','legendContainerResize') .style('border-top','1px solid red') .style('padding-top','8px') .style('width',d => a0 + 'px') .style('overflow','hidden') // .style('line-height',1) .style('height',function(d){ if (a6 === 0){return 'inherit'} else {return a6*((parseInt(a4)*1.5+3)+a5) + 'px'} }) var legendItem = div2.selectAll('div.item') .data(series) .enter() .append('div') .attr('class','item') .style('display','inline-block') // .style('width',function(d){ // if (a7 === 0) {return 'none'} else // {return a0/a7 - 8 + 'px'} // }) .style('max-width',function(){ if (a1 === 1) { return 'calc(100% - 8px)' } else if (a1 >= 2 && a0 < 300) { return 'calc(100% - 8px)' } else if (a1 === 2) { return 'calc(50% - 8px)' } else if (a1 >= 3 && a0 < 600) { return 'calc(50% - 8px)' } else if (a1 === 3) { return 'calc(33% - 8px)' } else if (a1 >= 4 && a0 < 900) { return 'calc(33% - 8px)' } else if (a1 === 4) { return 'calc(25% - 8px)' } else if (a1 >= 5 && a0 < 1200) { return 'calc(25% - 8px)' } else { return 'calc(20% - 8px)' } // if (a0 < 300) { return 'calc(100% - 8px)' } else // if (a0 < 600) { return 'calc(50% - 8px)' } else // if (a0 < 900) { return 'calc(33% - 8px)' } else // if (a0 < 1200) { return 'calc(25% - 8px)' } else // if (a0 < 1500) { return 'calc(20% - 8px)' } else // if (a0 < 1800) { return 'calc(16.6% - 8px)' } else // if (a0 < 2100) { return 'calc(14.3% - 8px)' } // if (a0 < 300) { return 'calc(100% - 8px)' } else // if (a0 < 600) { return 'calc(50% - 8px)' } else // if (a0 < 900) { return 'calc(33% - 8px)' } else // if (a0 < 1200) { return 'calc(25% - 8px)' } else // if (a0 < 1500) { return 'calc(20% - 8px)' } else // if (a0 < 1800) { return 'calc(16.6% - 8px)' } else // if (a0 < 2100) { return 'calc(14.3% - 8px)' } // else { return 'calc(12.5% - 8px)' } // if (a1 === 1) { return '100%' } // else if (a1 === 2) { // if (a0 < 300) { return '100%' } // else { return '50%' } // } // else if (a1 === 3) { }) // .style('min-width','200px') .style('padding-right','8px') .style('color','#1C2B34') .style('font-size',d => a4 + 'px') .style('margin-bottom',d => a5 + 'px') .style('white-space','nowrap') .style('overflow','hidden') .style('word-break','break-word') .style('text-overflow','ellipsis') // .style('background-color','red') colorChip(legendItem,a8); legendItem.append('span') .text(d => d) if (a9) { legendItem.append('span') .text("99.9%") .style('margin-left','4px') .style('font-weight','bold') } return div.node() }33:T711,function colorChip(selection,value){ if (value === 'circle') { selection.append('div') .style('display','inline-block') .style('width',d => (a4 - 3) + 'px') .style('height',d => (a4 - 3) + 'px') .style('margin-right','4px') .style('border-radius','50%') .style('background-color',function(d,i){ return colors[i%6] }) } else if (value === 'squircle') { selection.append('div') .style('display','inline-block') .style('width',d => (a4 - 3) + 'px') .style('height',d => (a4 - 3) + 'px') .style('margin-right','4px') .style('border-radius','33%') .style('background-color',function(d,i){ return colors[i%6] }) } else if (value === 'box') { selection.append('div') .style('display','inline-block') .style('width',d => (a4 - 3) + 'px') .style('height',d => (a4 - 3) + 'px') .style('margin-right','4px') .style('border-radius','2px') .style('background-color',function(d,i){ return colors[i%6] }) } else if (value === 'rect') { selection.append('div') .style('display','inline-block') .style('width',d => (a4-3) + 'px') .style('height',d => (a4-3)*0.66 + 'px') .style('margin-bottom',d => (a4-((a4-3)*0.66))/3 + 'px') .style('margin-right','4px') .style('border-radius','1px') .style('background-color',function(d,i){ return colors[i%6] }) } else if (value === 'line') { selection.append('div') .style('display','inline-block') .style('width',d => (a4 - 3) + 'px') .style('height','2px') .style('margin-right','4px') .style('margin-bottom',d => (a4-2)/3 + 'px') .style('background-color',function(d,i){ return colors[i%6] }) } }34:[] 30:{"id":"f7c6e8081b42d7c0","slug":"legends-v0-1","title":"Legends v0.1","thumbnail":"258ccdd646a118844c0d14a534b61664a3971d5ef84b50f52334a5ab2fba6cde","access_level":"public","create_time":"$D2020-11-20T19:51:54.780Z","update_time":"$D2021-02-05T20:37:29.765Z","view_time":null,"first_public_time":"$D2020-11-25T00:24:21.479Z","has_unpublished_edits":null,"fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"d634400caf83bc48","login":"karlsluis","name":"Karl Sluis","avatar_url":"https://avatars-next.observableusercontent.com/d3f8923d69e5c626d76f26069e32d0b5142927dd86162a7d0c2b632bbea8a557","tier":"starter_2024"},"version":467,"publish_version":467,"role":null,"authored":false,"authors":[{"type":"individual","id":"ec2cd8cdfe14fb79","login":"karlsluis","name":"Karl Sluis","avatar_url":"https://avatars-next.observableusercontent.com/d3f8923d69e5c626d76f26069e32d0b5142927dd86162a7d0c2b632bbea8a557","tier":null}],"members":[{"type":"individual","id":"ec2cd8cdfe14fb79","login":"karlsluis","name":"Karl Sluis","avatar_url":"https://avatars-next.observableusercontent.com/d3f8923d69e5c626d76f26069e32d0b5142927dd86162a7d0c2b632bbea8a557","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Legends v0.1","cells":[{"id":0,"value":"md`# Legends v0.1`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":210,"value":"viewof a0 = slider({\n min: 0, \n max: 1200, \n step: 20, \n value: 800, \n title: \"Legend Container Size\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"value":"viewof a1 = slider({\n min: 1, \n max: 10, \n step: 1, \n value: 5, \n title: \"Number of Series\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":47,"value":"viewof a2 = slider({\n min: 10, \n max: 150, \n step: 1, \n value: 25, \n title: \"Length of Series Names\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":71,"value":"viewof a3 = checkbox({\n options: [{ value: \"toggle\", label: \"Randomize length of series names\" }],\n value: \"\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":193,"value":"viewof a4 = text({\n title: \"Text Size\",\n value: 10,\n placeholder: \"Placeholder text\",\n description: \"XS = 11px, S = 12px, M = 13px, L = 15px\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":202,"value":"viewof a5 = slider({\n min: 0, \n max: 16, \n step: 1, \n value: 0, \n title: \"Row Spacing\",\n description: \"Unitless, just for exploration\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":307,"value":"viewof a6 = slider({\n min: 0, \n max: 8, \n step: 1, \n value: 0, \n title: \"Row Count\",\n description: \"Set to 0 for no row limit\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":239,"value":"viewof a7 = slider({\n min: 0, \n max: 10, \n step: 1, \n value: 0, \n title: \"Legend Item Columns\",\n description: \"Set to 0 for no columns\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":353,"value":"viewof a8 = radio({\n title: 'Color Chip',\n options: [\n { label: 'circle', value: 'circle' },\n { label: 'squircle', value: 'squircle' },\n { label: 'box', value: 'box' },\n { label: 'rect', value: 'rect' },\n { label: 'line', value: 'line' },\n ],\n value: 'box'\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":422,"value":"viewof a9 = checkbox({\n options: [{ value: \"inData\", label: \"Data in Legend\" }],\n value: \"\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":346,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":29,"value":"series = {\n var series = [];\n for(var i = 0; i < a1; i++){\n var thisWord = \"\";\n var stringLength;\n if (a3 === \"toggle\"){\n stringLength = 1 + parseInt(Math.random()*a2);\n } else {\n stringLength = a2;\n }\n for(var k = 0; k < stringLength; k++){\n var thisLetter = 97 + parseInt(Math.random()*27+1)\n thisWord = thisWord + String.fromCharCode(thisLetter)\n }\n series[i] = thisWord;\n }\n return series\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":149,"value":"colors = ['#99CCE5','#3399CC','#BBA4D1','#927FB9','#FFEDA3','#FFCC00']","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":97,"value":"// google font\n\nstyle = html`\n\n\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":34,"value":"import {slider} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":75,"value":"import {checkbox} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":190,"value":"import {text} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":349,"value":"import {radio} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"d3 = require('d3@5.8')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1"}} 31:"$30:body"