31: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; }32:[] 2f:{"title":"Data and Axes Transitions","cells":[{"id":0,"value":"md`\n# Data and Axes Transitions\n\nRefactored to support data and axes transitions.\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"},{"id":80,"value":"viewof currentDatasetName = 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"},{"id":346,"value":"chart = d3.select(DOM.svg(width, height))\n .attr('style', 'border: 1px solid lightgray')\n .node()","pinned":false,"hidden":false,"mode":"ojs"},{"id":523,"value":"currentData = data.filter(a => a.name === currentDatasetName)[0].data","pinned":false,"hidden":false,"mode":"ojs"},{"id":561,"value":"initialData = data.filter(a => a.name === 'dino')[0].data","pinned":false,"hidden":false,"mode":"ojs"},{"id":495,"value":"update(currentData)","pinned":true,"hidden":false,"mode":"ojs"},{"id":348,"value":"{\n d3.select(chart).append(\"g\")\n .attr('id', 'vis')\n .attr(\"transform\", \"translate(\" + margin.left + \",\" + margin.top + \")\")\n .append('rect')\n .attr(\"width\", width - (margin.left + margin.right))\n .attr(\"height\", height - (margin.top + margin.bottom))\n .attr('fill', 'yellow')\n .attr('fill-opacity', 0.05)\n \n setScale(initialData)\n initAxis()\n\n return md`Add group 'vis' and init axes.`\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":503,"value":"function initAxis() {\n let vis = d3.select(chart)\n vis.append(\"g\")\n .attr(\"id\", \"xaxis\")\n .attr(\"transform\", \"translate(\" + 0 + \",\" + (height- margin.bottom) + \")\")\n .call(xAxisCall)\n\n vis.append(\"g\")\n .attr(\"id\", \"yaxis\")\n .attr(\"transform\", \"translate(\"+[margin.left, margin.top]+\")\")\n .call(yAxisCall)\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":351,"value":"function update(data){\n setScale(data)\n\n let vis = d3.select('#vis'),\n tr = d3.transition()\n .duration(4000)\n .ease(d3.easeQuad),\n u = vis.selectAll(\"circle\")\n .data(data);\n u.enter()\n .append(\"circle\")\n .attr(\"cx\", (d) => xScale(d.x))\n .attr(\"cy\", (d) => yScale(50))\n .transition(tr)\n .attr(\"cy\", (d) => yScale(d.y))\n .attr(\"fill\", (d) => col(d.y))\n .attr(\"r\", 3.5);\n u\n .transition(tr)\n .attr(\"cx\", (d) => xScale(d.x))\n .attr(\"cy\", (d) => yScale(d.y))\n // exit will not run because array lengths are consistent\n u.exit()\n .transition(tr)\n .attr(\"cy\", 0)\n .remove();\n updateAxis()\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":387,"value":"function setScale(data){\n let rgx = d3.extent(data, d => d.x).reduce((a,b) => b-a)*0.1\n xScale.domain(\n [\n d3.min(data, d => d.x)-rgx,\n d3.max(data, d => d.x)+rgx\n ]\n ).nice();\n xScale.range([margin.left, width-(margin.right+margin.left)])\n\n let rgy = d3.extent(data, d => d.y).reduce((a,b) => b-a)*0.1\n yScale.domain(\n [\n d3.min(data, d => d.y)-rgy,\n d3.max(data, d => d.y)+rgy\n ]\n ).nice(); \n yScale.range([height - (margin.bottom+margin.top),margin.bottom])\n xAxisCall.scale(xScale)\n yAxisCall.scale(yScale) \n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":393,"value":"function updateAxis(){\n var t = d3.transition()\n .duration(500)\n\n d3.select(\"#xaxis\")\n .transition(t)\n .call(xAxisCall)\n\n d3.select(\"#yaxis\")\n .transition(t)\n .call(yAxisCall)\n} ","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":67,"value":"dataSets = Array.from(new Set(data.map(x=> x.name)))","pinned":false,"hidden":false,"mode":"ojs"},{"id":22,"value":"margin = ({top:10, right:10, bottom: 30, left: 30})","pinned":false,"hidden":false,"mode":"ojs"},{"id":18,"value":"height = 550","pinned":false,"hidden":false,"mode":"ojs"},{"id":269,"value":"width = 550","pinned":false,"hidden":false,"mode":"ojs"},{"id":30,"value":"xScale = d3.scaleLinear()","pinned":false,"hidden":false,"mode":"ojs"},{"id":32,"value":"yScale = d3.scaleLinear()","pinned":false,"hidden":false,"mode":"ojs"},{"id":34,"value":"col = {\n //const r = d3.extent(data, d => d.y)\n const max = d3.max(currentData, d => d.y);\n const min = d3.min(currentData, d => d.y);\n return d3.scaleSequential(d3.interpolateViridis).domain([max,min]);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":385,"value":"xAxisCall = d3.axisBottom()","pinned":false,"hidden":false,"mode":"ojs"},{"id":389,"value":"yAxisCall = d3.axisLeft()","pinned":false,"hidden":false,"mode":"ojs"},{"id":40,"value":"d3 = require(\"https://d3js.org/d3.v5.min.js\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":72,"value":"//import {radio} from \"@jashkenas/inputs\"\nfunction 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"},{"id":75,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}