2c:null 2d:["$","title",null,{"children":"Aspect Ratio Test | Karl Sluis | Observable"}] 32:T592,boxes = { var div = d3.create("div") .style('height','800px') .style('padding-bottom','60px') .attr('class','graphContainer') var framework = [ ['current',currentTest(xD,yD),'purple'], ['slope',slopeTest(xD,yD),'red'], ['step',stepTest(xD,yD),'green'], ['area',areaTest(xD,yD),'blue'] ] for (var i = 0; i < framework.length; i++){ var thisBox = div.append('div') .style('width',xD/scale + 'px') .style('height',yD/scale + 'px') .style('display','inline-block') .style('position','relative') .style('border',d => '2px solid ' + framework[i][2]) .style('margin-bottom','8px') .style('margin-right','8px') .style('font-size','12px') .text(framework[i][0] + ', ' + framework[i][1]) if (framework[i][1] === 'horz'){ thisBox.append('div') .style('position','absolute') .style('bottom','0px') .style('width',xD/scale + 'px') .style('height',32/scale + 'px') .style('background-color',framework[i][2]) .style('opacity',0.25) } if (framework[i][1] === 'vert'){ thisBox.append('div') .style('position','absolute') .style('bottom','0px') .style('width',xD/scale + 'px') .style('height',yD*(0.4/scale) + 'px') .style('background-color',framework[i][2]) .style('opacity',0.25) } } return div.node() }33:[] 30:{"id":"8ac04137a2a84870","slug":"aspect-ratio-test","title":"Aspect Ratio Test","thumbnail":"9c5f9ff79c435125d716967018d9cf66c5872d89ea9fe48f9a32482b3a9cc0d3","access_level":"public","create_time":"$D2021-02-04T18:08:12.919Z","update_time":"$D2021-02-10T22:44:08.645Z","view_time":null,"first_public_time":"$D2021-02-04T22:14:51.664Z","has_unpublished_edits":null,"fork":false,"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":149,"publish_version":149,"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":"Aspect Ratio Test","cells":[{"id":0,"value":"md`# Aspect Ratio Test`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"viewof xD = slider({\n min: 100, \n max: 2000, \n step: 10, \n description: \"x dimension\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"viewof yD = slider({\n min: 100, \n max: 1000, \n step: 10, \n description: \"y dimension\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":117,"value":"viewof scale = radio({\n options: [\n { label: 'Full scale', value: 1 },\n { label: 'Half scale', value: 2 },\n ],\n value: 1\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":43,"value":"md`The legend goes into vertical mode too soon at small sizes and too late at large sizes.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":49,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":34,"value":"currentTest(xD,yD)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":37,"value":"slopeTest(xD,yD)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":39,"value":"stepTest(xD,yD)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":41,"value":"areaTest(xD,yD)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"function currentTest(x,y){\n if (x < 240 || y < 150) {\n return 'none'\n } else if (x/y < 2.8) {\n return 'vert'\n } else {\n return 'horz'\n }\n}\n\n// see https://github.com/DataDog/web-ui/blob/8adbe6e5ba7e01478dfce374d7eea4f0d1191c53/javascript/datadog/dashboard/lib/widgets/_graph.tsx#L361","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":28,"value":"function slopeTest(x,y){\n if (x < 240 || y < 150) {\n return 'none'\n } else if (y > (0.12*x + 240)) {\n return 'vert'\n } else {\n return 'horz'\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":29,"value":"function stepTest(x,y){\n if (x < 240 || y < 150) {\n return 'none'\n } else if (x < 550 && y > 280) {\n return 'vert'\n } else if (x < 1200 && y > 350) {\n return 'vert'\n } else if (y > 480) {\n return 'vert'\n } else {\n return 'horz'\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"value":"function areaTest(x,y){\n if (x < 240 || y < 150) {\n return 'none'\n } else if (x > 900 && y > 500) {\n return 'vert'\n } else {\n return 'horz'\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"import {slider,radio} from \"@jashkenas/inputs\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"d3 = require(\"d3@5\");","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1"}} 31:"$30:body"