3f:null 40:["$","title",null,{"children":"HTML-only Data Vis | Ross Mills | Observable"}] 46:T61c,function lineChart(lineData, w, h) { const unitX = w / lineData.length; const unitXSquared = unitX * unitX; const maxVal = Math.max(...lineData); const yScale = (d) => d * (h / maxVal); function getWidth(y1, y2) { return Math.sqrt(unitXSquared + Math.pow(y2 - y1, 2)); } let prev = yScale(lineData[0]); const angles = lineData.slice(1).map( (d, i) => { const value = yScale(d); const start = prev; const angle = Math.atan2(prev - value, unitX); const width = getWidth(value, prev); prev = value; const ret = { angle, width, value, start }; return ret; }); return html`

${maxVal}

${angles.map( (d, i) => { return `

` }).join('') }

` }47:T5d8,function histogram(data) { const groupCount = data.reduce( (map, value) => { if (map[value]) map[value]++; else map[value] = 1; return map; }, {}); const w = width; const h = 200; const itemWidth = Math.min(w / Object.keys(groupCount).length, 50); const maxValue = Math.max(...Object.values(groupCount)); const yScale = (d) => d * h / maxValue; return html`

${new Array(maxValue).fill('').map( (val, i) => `

${maxValue - i}

` )}

${new Array(maxValue).fill('').map( (val, i) => `

` )}

${Object.values(groupCount).map( val => `

` ).join('')}

${Object.keys(groupCount).map(key => `

${key}

` ).join('')}

`; }48:[] 44:{"id":"b5b39084261753b8","slug":"html-only-data-vis","title":"HTML-only Data Vis","thumbnail":"78a5581599476cfc7ccfd85a72195a4eab5431467589873693daa358ad33491b","access_level":"public","create_time":"$D2021-03-19T23:02:00.739Z","update_time":"$D2021-03-24T23:11:05.716Z","view_time":null,"first_public_time":"$D2021-03-24T23:12:02.787Z","has_unpublished_edits":null,"fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"55e9268ccca383a5","login":"rossmills99","name":"Ross Mills","avatar_url":"https://avatars-next.observableusercontent.com/edf6d8f13cc81ae6ed5c2a7f7911f9b522006a0413d822217f3666daf05d1366","tier":"starter_2024","bio":"Software engineer and hands-on tech leader. Creating and collaborating on interesting software projects gets me out of bed in the morning.","following":false},"version":620,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"3d55deecec17df75","login":"rossmills99","name":"Ross Mills","avatar_url":"https://avatars-next.observableusercontent.com/edf6d8f13cc81ae6ed5c2a7f7911f9b522006a0413d822217f3666daf05d1366","tier":null,"bio":"Software engineer and hands-on tech leader.\n","following":false}],"members":[{"type":"individual","id":"3d55deecec17df75","login":"rossmills99","name":"Ross Mills","avatar_url":"https://avatars-next.observableusercontent.com/edf6d8f13cc81ae6ed5c2a7f7911f9b522006a0413d822217f3666daf05d1366","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"HTML-only Data Vis","cells":[{"id":0,"value":"md`# HTML-only Data Vis\n\n(and a little CSS and JavaScript)\n\n## Why?\n\nI thought it would be an interesting challenge to recreate some common charts without using Canvas or SVG. In general, I don't recommend this approach!`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":43,"value":"md`## Bar Chart\n\nBar charts lend themselves to rendering using a table. We can use the \\`colspan\\` attribute to dictate the width of a cell to form the bar. Labels and numbers can be added easily using separate cells in each table row.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":49,"value":"barChart([ { label: 'Red', value: 1 },\n {label: 'Blue', value: 5 },\n {label: 'Green', value: 3 }, \n { label: 'Pink', value: 6 }], d => d.value, d => d.label)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":46,"value":"function barChart (data, accessor, labelAccessor) {\n \n if (!accessor) {\n accessor = (d) => d;\n }\n if (!labelAccessor) {\n labelAccessor = (d) => ''; \n }\n \n const labels = data.map(labelAccessor);\n const values = data.map(accessor);\n const max = Math.max(...values);\n \n let extent = '';\n for (let i = 0; i < max; i++) {\n extent += '';\n }\n \n return html`\n\n\n ${extent}\n ${data.map(d => `\n \n \n \n \n `).join('')}\n

${labelAccessor(d)}

${accessor(d)}

\n `;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":136,"value":"md`## Line Chart\n\nThis line chart is implemented using the borders of absolute-positioned 1px \\`div\\` elements. The CSS \\`transform\\` property is used to translate and rotate elements into the correct positions. The simplistic y-axis is achieved using CSS \\`flex\\` layout.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":424,"value":"lineChart([ 2, 4, 5, 1, 2, 5, -1, 2, 1, 12, 13, 10, 1, 1, 1, 2 ], width, 150)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":143,"value":"$46","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":280,"value":"md`## Scatter Plot\n\nThe scatter chart uses absolute-positioned divs with rounded borders for the scatter points.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":486,"value":"scatterPlot('The quick brown fox jumped over the lazy dog. You don\\'t need a weatherman to know which way the wind blows. Make love, not war. Stop.'.split(' ').map(w => w.length), width/2, 150)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":284,"value":"function scatterPlot (data, w, h) {\n const pointSize = 5;\n const maxY = Math.max(...data);\n const scaleY = (d) => d * (h / maxY);\n const unitX = w / data.length;\nreturn html`

${maxY}

\n ${data.map( (d, i) => `

`)}\n

`\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":509,"value":"md`## Histogram\n\nA histogram based on using flex layout and setting appropriate div heights. The y-axis uses \\`flex-direction: column\\` to layout the numbers and ticks.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":519,"value":"histogram([\n 3,1,2,3,2,5,6,63,1,2,3,5,4,2,2,2,3,4,6,6,3,7,2,7,12,5,36,3,6,2,6,4 \n])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":513,"value":"$47","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W48","stdlib":"1"}} 45:"$44:body"