2d:null 2e:["$","title",null,{"children":"Same Stats Interactive Visualization | Khris Griffis | Observable"}] 33:T5ed,function input(config) { let {form, type = "text", attributes = {}, action, getValue, title, description, submit, options} = config; if (!form) form = html``; const input = form.input; Object.keys(attributes).forEach(key => { const val = attributes[key]; if (val != null) input.setAttribute(key, val); }); if (submit) form.append(html``); form.append(html``); if (title) form.prepend(html`

${title}

`); if (description) form.append(html`

${description}

`); if (action) { action(form); } else { const verb = submit ? "onsubmit" : type == "button" ? "onclick" : type == "checkbox" || type == "radio" ? "onchange" : "oninput"; form[verb] = (e) => { e && e.preventDefault(); const value = getValue ? getValue(input) : input.value; if (form.output) form.output.value = value; form.value = value; if (verb !== "oninput") form.dispatchEvent(new CustomEvent("input")); }; if (verb !== "oninput") input.oninput = e => e && e.stopPropagation() && e.preventDefault(); if (verb !== "onsubmit") form.onsubmit = (e) => e && e.preventDefault(); form[verb](); } return form; }34:[] 31:{"id":"f54c0f5aebc8c942","slug":"same-stats-interactive-visualization","title":"Same Stats Interactive Visualization","thumbnail":"bc969da1ae4c2d1a8cf3f5d9ad2c83b61d8934af550d91c471abdda834e5d190","access_level":"public","create_time":"$D2018-04-10T12:44:24.496Z","update_time":"$D2018-09-11T16:37:18.716Z","view_time":null,"first_public_time":"$D2018-07-26T15:38:09.504Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"22e692495fe9cf27","login":"khlick","name":"Khris Griffis","avatar_url":"https://avatars-next.observableusercontent.com/cf292a07d0a4a35dc630260f74dcebe58301d5ecf0babe1b1150762beb1336cb","tier":"starter_2024"},"version":334,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"bb90f6c4f06742e0","login":"khlick","name":"Khris Griffis","avatar_url":"https://avatars-next.observableusercontent.com/cf292a07d0a4a35dc630260f74dcebe58301d5ecf0babe1b1150762beb1336cb","tier":null}],"members":[{"type":"individual","id":"bb90f6c4f06742e0","login":"khlick","name":"Khris Griffis","avatar_url":"https://avatars-next.observableusercontent.com/cf292a07d0a4a35dc630260f74dcebe58301d5ecf0babe1b1150762beb1336cb","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":null,"type":"notebook","body":{"title":"Same Stats Interactive Visualization","cells":[{"id":0,"value":"md`\n# Same Stats Interactive Visualization\n\nData from the post:\n__Same Stats, Different Graphs: Generating Datasets with Varied Appearance and Identical Statistics through Simulated Annealing__ located at https://www.autodeskresearch.com/publications/samestats\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":80,"value":"viewof r = radio({\n title: 'Data sets',\n description: \"Choose a data set to view.\",\n options: dataSets,\n value: dataSets[0]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":78,"value":"{\n const container = d3.select(DOM.svg(width+margin.left+margin.right, height+margin.top+margin.bottom));\n \n const svg = container.append('g')\n .attr('width', width)\n .attr('height', height)\n .attr('transform', 'translate(' + margin.left + '.' + margin.top + ')');\n \n svg.append(\"g\")\n .call(xAx);\n \n svg.append(\"g\")\n .call(yAx);\n \n svg.append(\"g\")\n .attr(\"stroke\", \"#000\")\n .attr(\"stroke-opacity\", 0.2)\n .selectAll(\"circle\")\n .data(data.filter(a => a.name === r)[0].data)\n .enter().append(\"circle\").transition().duration(300)\n .attr(\"cx\", (d,i) => xScale(d.x))\n .attr(\"cy\", (d,i) => yScale(d.y))\n .attr(\"fill\", (d,i) => col(d.y))\n .attr(\"r\", 3.5);\n \n return container.node();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"data = {\n let datat = [];\n //DatasaurusDozen.tsv\n await d3.tsv(\"https://gist.githubusercontent.com\"\n + \"/Khlick/a6b95da78bdd02ac79bd791ca6b0616a/raw\"\n + \"/39cf7f6f6bb7a0352dddacfd43318468ca871b6a\"\n + \"/DatasaurusDozen.tsv\", (dat, i , cl) => {\n datat.push({name: dat.dataset, x: +dat.x, y: +dat.y});\n });\n let ids = Array.from(new Set(datat.map(x=> x.name)));\n //console.log('ids',ids)\n const data = [];\n ids.forEach(c => {\n data.push({\n name: c,\n data: datat.filter(v => v.name === c).map(v => {return {x: v.x, y: v.y}}) \n });\n });\n \n return data;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":67,"value":"dataSets = Array.from(new Set(data.map(x=> x.name)))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"height = 800","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":269,"value":"width = 900","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"margin = ({top:10, right:10, bottom: 20, left: 20})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":30,"value":"xScale = {\n const scl = d3.scaleLinear()\n let rg = d3.extent(data.filter(a => a.name === r)[0].data, d => d.x).reduce((a,b) => b-a)*0.1\n scl.domain(\n [\n d3.min(data.filter(a => a.name === r)[0].data, d => d.x)-rg,\n d3.max(data.filter(a => a.name === r)[0].data, d => d.x)+rg\n ]\n ).nice(); \n scl.range([margin.left, width - margin.right]);\n return scl;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":32,"value":"yScale = {\n const scl = d3.scaleLinear()\n let rg = d3.extent(data.filter(a => a.name === r)[0].data, d => d.y).reduce((a,b) => b-a)*0.1\n scl.domain(\n [\n d3.min(data.filter(a => a.name === r)[0].data, d => d.y)-rg,\n d3.max(data.filter(a => a.name === r)[0].data, d => d.y)+rg\n ]\n ).nice()\n \n scl.range([height - margin.bottom, margin.top]);\n return scl;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":34,"value":"col = {\n const max = d3.max(data.filter(a => a.name === r)[0].data, d => Math.abs(d.y));\n return d3.scaleSequential(d3.interpolateViridis).domain([max, -max]);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":36,"value":"xAx = g => g\n .attr(\"transform\", `translate(0,${height - margin.bottom})`)\n .call(d3.axisBottom(xScale).ticks(width / 80))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":38,"value":"yAx = g => g\n .attr(\"transform\", `translate(${margin.left},0)`)\n .call(d3.axisLeft(yScale).ticks(6))\n .call(g => g.append(\"text\")\n .attr(\"fill\", \"#000\")\n .attr(\"x\", 5)\n .attr(\"y\", margin.top)\n .attr(\"dy\", \"0.32em\")\n .attr(\"text-anchor\", \"start\")\n .attr(\"font-weight\", \"bold\")\n .text(`${r} Data`))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":40,"value":"d3 = require(\"https://d3js.org/d3.v5.min.js\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":71,"value":"md`---\n## Radio Buttons\n\n\\`import {radio} from \"@jashkenas/inputs\"\\``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":72,"value":"function radio(config = {}) {\n let {value: formValue, title, description, submit, options} = config;\n if (Array.isArray(config)) options = config;\n options = options.map(o => typeof o === \"string\" ? {value: o, label: o} : o);\n const form = input({\n type: \"radio\", title, description, submit, \n getValue: input => {\n const checked = Array.prototype.find.call(input, radio => radio.checked);\n return checked ? checked.value : undefined;\n }, \n form: html`\n \n `\n });\n form.output.remove();\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":75,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 32:"$31:body"