2b:null 2c:["$","title",null,{"children":"Legends v0.2 (prototype) | Karl Sluis | Observable"}] 31:Tc49,legend = { // fixed font size var a4 = 11; // row count var a6 = 0; // row columns var a7 = 0; var max_row_height_from_x = Math.round((a0-150)/100); // magic numbers var max_row_height_from_y = Math.round((a10-150)/50); // magic numbers // console.log(a6,max_row_height_from_x,max_row_height_from_y); a6 = (max_row_height_from_x < max_row_height_from_y) ? max_row_height_from_x : max_row_height_from_y; // more rough calculations based on series (step two) // we're going to make an array of estimated lengths and then do some maths var label_lengths = []; for (var label in series){ var est_px_width = series[label].length*0.52*a4; label_lengths.push(est_px_width); } var horz_length = d3.sum(label_lengths)+label_lengths.length*13; // adding chip length var label_avg = d3.mean(label_lengths); var label_deviation = d3.deviation(label_lengths); // console.log(horz_length,label_avg,label_deviation); // if similar lengths and not space filling, add columns // embarrassing code if (label_deviation/label_avg < 0.5 && horz_length > a0) { var label_size = label_avg + 13; if (label_size/a0 > 1) a7 = 1; // truncate if too long if (label_size/a0 < 0.75) a7 = 2; if (label_size/a0 < 0.5) a7 = 3; if (label_size/a0 < 0.33) a7 = 4; if (label_size/a0 < 0.25) a7 = 5; if (label_size/a0 < 0.2) a7 = 6; if (label_size/a0 < 0.15) a7 = 8; if (label_size/a0 < 0.10) a7 = 10; if (label_size/a0 < 0.05) a7 = 20; a6 = Math.ceil(series.length/a7); } if (horz_length < a0) a6 = 1; // rough calculation for responsive design (step one) var least = (max_row_height_from_x < max_row_height_from_y) ? max_row_height_from_x : max_row_height_from_y; if (least < a6) a6 = least; console.log(a6); var div = d3.create("div") .style('padding-bottom','60px') .attr('class','legendContainer') div.append('div') .text(d => a0 + 'px x ' + a10 + 'px') .style('color','red') .style('width',d => a0 + 'px') .style('height',d => a10 + 'px') .style('border','1px solid red') var div2 = div.append('div') .attr('class','legendContainerResize') .style('border-bottom','1px solid red') .style('padding-top','8px') .style('padding-bottom','4px') .style('width',d => a0 + 'px') .style('overflow','hidden') .style('height',function(d){ // this controls graph height return a6*((parseInt(a4)*1.5+3)+0) + '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('padding-right','8px') .style('color','#1C2B34') .style('font-size',d => a4 + 'px') .style('margin-bottom','0px') .style('white-space','nowrap') .style('overflow','hidden') .style('word-break','break-word') .style('text-overflow','ellipsis') colorChip(legendItem); legendItem.append('span') .text(d => d) return div.node() }32:[] 2f:{"id":"f7862ffe96c30696","slug":"legends-v0-2","title":"Legends v0.2 (prototype)","thumbnail":"21208425f644db74ee6ed9450d432d1768871088dcd39ad0bcd840e3be47e4b5","access_level":"public","create_time":"$D2020-12-14T22:04:32.061Z","update_time":"$D2020-12-18T22:49:41.536Z","view_time":null,"first_public_time":"$D2020-12-14T23:55:02.486Z","fork":{"id":"f7c6e8081b42d7c0","slug":"legends-v0-1","title":"Legends v0.1","owner":{"id":"d634400caf83bc48","login":"karlsluis","name":"Karl Sluis"}},"stars":0,"starred":false,"owner":{"type":"team","id":"d634400caf83bc48","login":"karlsluis","name":"Karl Sluis","avatar_url":"https://avatars-next.observableusercontent.com/d3f8923d69e5c626d76f26069e32d0b5142927dd86162a7d0c2b632bbea8a557","tier":"starter_2024"},"version":580,"publish_version":580,"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,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"Legends v0.2 (prototype0","cells":[{"id":0,"value":"md`# Legends v0.2 (prototype)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"value":"viewof a1 = slider({\n min: 0, \n max: 100, \n step: 1, \n value: 5, \n title: \"Number of Series\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":47,"value":"viewof a2 = slider({\n min: 3, \n max: 500, \n step: 1, \n value: 25, \n title: \"Length of Series Names\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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","output":"$undefined","database":"$undefined"},{"id":210,"value":"viewof a0 = slider({\n min: 200, \n max: 980, \n step: 20, \n value: 800, \n title: \"Graph Container Width\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":447,"value":"viewof a10 = slider({\n min: 200, \n max: 980, \n step: 20, \n value: 800, \n title: \"Graph Container Height\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":346,"value":"function colorChip(selection){\n selection.append('div')\n .style('display','inline-block')\n .style('width',d => (a4 - 3) + 'px')\n .style('height',d => (a4 - 3) + 'px')\n .style('margin-right','4px')\n .style('border-radius','2px')\n .style('background-color',function(d,i){\n return colors[i%6]\n })\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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","output":"$undefined","database":"$undefined"},{"id":149,"value":"colors = ['#99CCE5','#3399CC','#BBA4D1','#927FB9','#FFEDA3','#FFCC00']","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":458,"value":"a4 = 11; // font size","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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","output":"$undefined","database":"$undefined"},{"id":34,"value":"import {slider} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":75,"value":"import {checkbox} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":190,"value":"import {text} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":349,"value":"import {radio} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"d3 = require('d3@5.8')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W32","stdlib":"1","titling":"auto"}} 30:"$2f:body"