2d:null 2e:["$","title",null,{"children":"Same Stats Interactive Visualization | Chris L Buie | Observable"}] 33:T4a6,descript=math.round([d3.mean(data.filter(a => a.name === selectData)[0].data, d => d.x), d3.median(data.filter(a => a.name === selectData)[0].data, d => d.x), ss.mode(data.filter(a => a.name === selectData)[0].data.map(a => a.x)), d3.max(data.filter(a => a.name === selectData)[0].data, d => d.x) - d3.min(data.filter(a => a.name === selectData)[0].data, d => d.x), d3.variance(data.filter(a => a.name === selectData)[0].data, d => d.x), d3.deviation(data.filter(a => a.name === selectData)[0].data, d => d.x), ss.sampleKurtosis(data.filter(a => a.name === selectData)[0].data.map(a => a.x)), ss.sampleSkewness(data.filter(a => a.name === selectData)[0].data.map(a => a.x)) ],4) // ,ss.median(randomNormalData(N+1)),ss.modeSorted(randomNormalData(N-1)),ss.max(randomNormalData(N+1))-ss.min(randomNormalData(N+1)),ss.variance(randomNormalData(N+1)),ss.standardDeviation(randomNormalData(N+1)),ss.sampleKurtosis(randomNormalData(N+1)),ss.sampleSkewness(randomNormalData(N+1))] // ,2)34: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; }35:[] 31:{"id":"400ecc595d4ad686","slug":"same-stats-interactive-visualization","title":"Same Stats Interactive Visualization","thumbnail":"d85ad827945f00d257a03b3776de12352f3c27d2ab3f3bb19d8a751967556621","access_level":"public","create_time":"$D2019-06-24T01:07:39.585Z","update_time":"$D2019-07-19T18:30:55.447Z","view_time":null,"first_public_time":"$D2019-06-24T01:51:28.374Z","has_unpublished_edits":null,"fork":{"id":"f54c0f5aebc8c942","slug":"same-stats-interactive-visualization","title":"Same Stats Interactive Visualization","owner":{"id":"22e692495fe9cf27","login":"khlick","name":"Khris Griffis"}},"stars":1,"starred":false,"owner":{"type":"team","id":"5ff335675a444f4e","login":"cbuie","name":"Chris L Buie","avatar_url":"https://avatars-next.observableusercontent.com/b68b101792a9b0a1bdd51d7424d01cd84dea6bd34ad829460c93e27aad96ebb2","tier":"starter_2024"},"version":451,"publish_version":451,"role":null,"authored":false,"authors":[{"type":"individual","id":"fb193f2e50e06492","login":"cbuie","name":"Chris L Buie","avatar_url":"https://avatars-next.observableusercontent.com/b68b101792a9b0a1bdd51d7424d01cd84dea6bd34ad829460c93e27aad96ebb2","tier":null}],"members":[{"type":"individual","id":"fb193f2e50e06492","login":"cbuie","name":"Chris L Buie","avatar_url":"https://avatars-next.observableusercontent.com/b68b101792a9b0a1bdd51d7424d01cd84dea6bd34ad829460c93e27aad96ebb2","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":{"id":"821ee9f12cfb3077","slug":"algorithms","title":"Algorithms","owner":{"id":"5ff335675a444f4e","login":"cbuie","name":"Chris L Buie"}},"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 selectData = radio({\n title: 'Data sets',\n description: \"Choose a data set to view.\",\n options: dataSets,\n value: dataSets[1]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":78,"value":"sameStats={\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 === selectData)[0].data)\n .enter().append(\"circle\").transition()\n .duration(900)\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":338,"value":"viewof sumTable = html`\n \n

Descriptive Statistics:

\n \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n

Mean	Median	Mode	Range	Variance	Standard Deviation	Kurtosis	Skewness
${descript[0]}	${descript[1]}	${descript[2]}	${descript[3]}	${descript[4]}	${descript[5]}	${descript[6]}	${descript[7]}

\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":344,"value":"$33","pinned":false,"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/cbuie/18e899a1ab1e0582ce512d2928bfcc08/raw/39cf7f6f6bb7a0352dddacfd43318468ca871b6a/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":true,"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":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"height = 400","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":450,"value":"width=800","pinned":true,"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 === selectData)[0].data, d => d.x).reduce((a,b) => b-a)*0.1\n scl.domain(\n [\n d3.min(data.filter(a => a.name === selectData)[0].data, d => d.x)-rg,\n d3.max(data.filter(a => a.name === selectData)[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 === selectData)[0].data, d => d.y).reduce((a,b) => b-a)*0.1\n scl.domain(\n [\n d3.min(data.filter(a => a.name === selectData)[0].data, d => d.y)-rg,\n d3.max(data.filter(a => a.name === selectData)[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 === selectData)[0].data, d => Math.abs(d.y));\n return d3.scaleSequential(d3.interpolateCool).domain([max, -max]);\n}","pinned":true,"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(`${selectData} 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":339,"value":"ss = require(\"simple-statistics@6.0.0/dist/simple-statistics.min.js\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":342,"value":"math =require(\"https://cdnjs.cloudflare.com/ajax/libs/mathjs/5.10.3/math.min.js\")","pinned":true,"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":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W35","stdlib":"1","titling":"auto"}} 32:"$31:body"