2e:null 2f:["$","title",null,{"children":"Dust & Magnet | Zev Isert | Observable"}] 34:T79d,magnet_representation = { // Get the new selected magnets let active_magnets = magnets.filter(m => checkbox_selections.includes(m.name)) // Bind to the svg let u = d3.select(vis) .select('svg') .selectAll('g.magnet') .data(active_magnets, function(d) { return d ? d.name : this.id } ) // Remove unselected magnets, they shouldn't be visible // And should be removed first, since they aren't re-used due to us retaing their position when disabled u.exit().remove(); // Make any new magnets we need u = u.enter() .append( d => svg` ${d.name.toUpperCase()} ` ) .attr('id', d => d.name) .call(d3.drag() .on("start", handlers.drag.started) .on("drag", handlers.drag.update) .on("end", handlers.drag.ended)) .on('click', handlers.click.magnet) .merge(u) // Update Magnet rect styles u.attr('transform', d => `translate(${d.x}, ${d.y})`) return u._groups[0] }35:Tbfa,handlers = { return { drag: { /*================================================================ DRAG HANDLERS ================================================================*/ started: function (d) { d3.select(this) .classed("active", true) .on('click').call(this) }, update: function (d) { d.x = d3.event.x d.y = d3.event.y let magnet = d3.select(this) magnet .attr("transform", `translate(${d.x}, ${d.y})`) let pts = d3.select(vis) .select('svg') .selectAll('circle') .each(function (pt) { let cir = d3.select(this) let magnets = d3.select(vis).select('svg').selectAll('g.magnet') let { ax, ay } = simulate(cir, magnets) pt[props.data.meta].cx -= ax pt[props.data.meta].cy -= ay cir .attr('cx', pt[props.data.meta].cx) .attr('cy', pt[props.data.meta].cy) }) }, ended: function (d) { let magnet = d3.select(this) magnet.classed("active", false) if (d.x < 0 || d.x > props.view.width || d.y < 0 || d.y > props.view.height) { magnet.remove() let { x, y } = props.magnet.generate(props) d.x = x, d.y = y document.querySelector(`input[value="${d.name}"]`).checked = false mutable selected_magnet = null } } }, hover: { /*================================================================ HOVER HANDLERS ================================================================*/ enter: function (d, i) { let dust = d3.select(this) dust .attr('data-oldfill', dust.style('fill')) .style('fill', "orange") .attr('r', props.data.radius * 1.2) d3.select(dust.node().parentNode) .append("text") .attr('id', `t--${i}`) .attr('x', () => d[props.data.meta].cx - 30) .attr('y', () => d[props.data.meta].cy - 15) .style('font-family', 'sans-serif') .style('font-size', 'small') .style('text-transform', 'capitalize') .text(() => d.name) }, exit: function (d, i) { let dust = d3.select(this) dust .style('fill', dust.attr('data-oldfill')) .attr('r', props.data.radius) dust.attr('data-oldfill', null) d3.select(`#t--${i}`).remove() } }, click: { /*================================================================ CLICK HANDLERS ================================================================*/ datum: function () { mutable selected_datum = d3.select(this).datum() }, magnet: function () { mutable selected_magnet = d3.select(this).datum() } } } } 36:T63a,data = { const maps = new Map([ ['shelf', new Map([ ['1', 'Bottom'], ['2', 'Middle'], ['3', 'Top'] ])], ['type', new Map([ ['C', 'Cold'], ['H', 'Hot'] ])], ['manufacturer', new Map([ ['A', 'American Home Food Products'], ['G', 'General Mills'], ['K', 'Kelloggs'], ['N', 'Nabisco'], ['P', 'Post'], ['Q', 'Quaker Oats'], ['R', 'Ralston Purina'] ])] ]) return d3.csv(source, row => { switch (source_radio) { case 'cereal.csv': return { name: row.name, manufacturer: maps.get('manufacturer').get(row.manufacturer), type: maps.get('type').get(row.type), calories: +row.calories, protein: +row.protein, fat: +row.fat, sodium: +row.sodium, fiber: +row.fiber, carbohydrates: +row.carbohydrates, sugars: +row.sugars, potassium: +row.potassium, vitamins: +row.vitamins, shelf: maps.get('shelf').get(row.shelf), weight: +row.weight, cups: +row.cups, rating: +row.rating } case 'auto-mpg.csv': return { name: row.name, mpg: +row.mpg, cylinders: +row.cylinders, displacement: +row.displacement, horsepower: +row.horsepower, weight: +row.weight, acceleration: +row.acceleration, model_year: +row.model_year, origin: +row.origin } default: throw Error('unknown source - cannot parse') } }) }37:T6d2,slide = { function slide() { const container = document.createElement("div") container.className = "slide" container.appendChild(md.apply(this, arguments)) return container } slide.end = function end() { const container = document.createElement("div") container.className = "end" return container } slide.html = function html(strings) { const container = document.createElement("div"); container.innerHTML = strings; container.className = "slide slide--html"; return container; } slide.htmldark = function htmldark(strings) { const container = document.createElement("div"); container.innerHTML = strings; container.className = "slide slide--html dark"; return container } slide.code = function code(strings) { const container = document.createElement("div") const pre = container.appendChild(document.createElement("pre")) const code = pre.appendChild(document.createElement("code")) let string = strings[0] + "", i = 0, n = arguments.length while (++i < n) string += arguments[i] + "" + strings[i] code.textContent = string.trim() container.className = "slide slide--code" return container } slide.js = function() { const container = slide.code.apply(this, arguments) const content = container.firstChild.firstChild content.className = "js hljs javascript" hl.highlightBlock(content) return container } slide.img = function(strings) { const img = new Image let string = strings[0] + "", i = 0, n = arguments.length while (++i < n) string += arguments[i] + "" + strings[i] img.src = string.trim() img.className = "slide slide--img" return img } return slide }38:T740,slide_style = { return html`

Slide styles

` }39:[] 32:{"id":"a99db9bad974db57","slug":"dust-and-magnet","title":"Dust & Magnet","thumbnail":"9829d77e91e3499d528e154258229df7bb8820988058beed0ff565baf77a9972","access_level":"public","create_time":"$D2019-02-17T22:53:54.756Z","update_time":"$D2019-03-14T19:40:34.874Z","view_time":null,"first_public_time":"$D2019-03-04T06:46:38.914Z","has_unpublished_edits":null,"fork":false,"stars":3,"starred":false,"owner":{"type":"team","id":"7b6d9c11dab5424a","login":"zevisert","name":"Zev Isert","avatar_url":"https://avatars-next.observableusercontent.com/813ad1faec7614c9e55b81655d7f92aeda3cc90e0d93f6b20eaf1fcee5ac74e2","tier":"starter_2024"},"version":1267,"publish_version":1267,"role":null,"authored":false,"authors":[{"type":"individual","id":"20b856b057c3b253","login":"zevisert","name":"Zev Isert","avatar_url":"https://avatars-next.observableusercontent.com/813ad1faec7614c9e55b81655d7f92aeda3cc90e0d93f6b20eaf1fcee5ac74e2","tier":null}],"members":[{"type":"individual","id":"20b856b057c3b253","login":"zevisert","name":"Zev Isert","avatar_url":"https://avatars-next.observableusercontent.com/813ad1faec7614c9e55b81655d7f92aeda3cc90e0d93f6b20eaf1fcee5ac74e2","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Dust & Magnet","cells":[{"id":1241,"value":"md`\n# Dust & Magnet\n### UVIC CSC 511 - Info Vis - Research paper presentations\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1204,"value":"slide.img`https://gist.githubusercontent.com/zevisert/71eb521f2efdc60cb3b124c532f469f3/raw/97e0c8806f7c7ca13da48c5d2573c70b3601d685/paper-preview.png`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":902,"value":"slide`${\n html`\n Multivariate Visualizations\n

\n Most of data from the engineering, science, and business domains is multivariate.\n Statistical methodologies used for analysis of multivariate data tend to\n summarize and compress the amount of information.\n

\n - Parallel Coordinates
\n - Star Coordinates
\n - Scatterplot Matrix
\n

\n ${t_remaining}\n `\n}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":924,"value":"slide.img`https://gist.githubusercontent.com/zevisert/71eb521f2efdc60cb3b124c532f469f3/raw/3e00788ae7195e95fa48a34847c8ff46a94448a3/cars-parallel.png`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":936,"value":"slide.img`https://gist.githubusercontent.com/zevisert/71eb521f2efdc60cb3b124c532f469f3/raw/3e00788ae7195e95fa48a34847c8ff46a94448a3/cars-star.jpg`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":927,"value":"slide.img`https://gist.githubusercontent.com/zevisert/71eb521f2efdc60cb3b124c532f469f3/raw/3e00788ae7195e95fa48a34847c8ff46a94448a3/cars-scattermat.jpg`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":940,"value":"slide`${\n html`\n Paper's opinion\n

\n \"... multivariate information visualization techniques\n inherently have a dimensionality distortion problem.\"\n

\n Not going to solve dimensionality reduction, but can focus on relieving the complexity.\n

\n Goal is to introduce a new MV vis technique that is easy to \n learn and use.\n

\n ${t_remaining}\n `\n}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1169,"value":"slide.img`https://www.cc.gatech.edu/gvu/ii/dnm/interface.jpg`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1174,"value":"slide`${\n html`\n An implementation\n

Built in Observable d3.

\n ${t_remaining}\n `\n}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1250,"value":"slide.js`\n function update_particle(dust, magnets) { \n return magnets.data()\n .map( magnet => { // Attraction vector for each magnet\n const direction = unit_vec(dust.position, magnet.position)\n const attraction = force(direction, magnet)\n return { ... attraction }\n })\n .reduce((sum, val) => { // Vector summation\n return {\n x: sum.x + val.x,\n y: sum.y + val.y\n }\n })\n }\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":81,"value":"viewof source_radio = radio({\n title: 'Data Source',\n description: 'Please select a data source',\n options: [\n { value: 'auto-mpg.csv', label: 'Automotive MPG' },\n { value: 'cereal.csv', label: 'Cereals' },\n ],\n value: 'cereal.csv'\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":255,"value":"viewof checkbox_selections = {\n let boxes = checkbox({\n title: 'Select Magnets',\n description: 'Activate magnets using these checkboxes',\n options: magnets.map(mag => mag.name)\n })\n \n Array.from(boxes.getElementsByTagName('label')).forEach(el => {\n el.style.fontWeight = 'bold'\n el.style.textTransform = 'Capitalize'\n })\n \n return boxes\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":963,"value":"viewof magnitude = {\n const min = 0, max = 20, value = 1;\n const mags = Array(...Array(20).keys());\n let i = 0;\n while(mags[i+1] <= value) i++;\n \n if (mutable selected_magnet === null) {\n return md`Click an active magnet to change it's attraction magnitude`\n } \n return slider({\n value: selected_magnet.magnitude, step: 1, max: mags.length - 1,\n title: `Magnitude of: ${(selected_magnet).name}`,\n getValue: n => ((mutable selected_magnet).magnitude = mags[n.value])\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1260,"value":"viewof repellent = {\n const min = 0, max = 10, value = 0;\n const thresh = Array(...Array(10).keys());\n let i = 0;\n while(thresh[i+1] <= value) i++;\n \n if (mutable selected_magnet === null) {\n return md`and it's repellent threshold`\n } \n return slider({\n value: selected_magnet.repellent, step: 1, max: thresh.length - 1,\n title: `Repellent threshold of: ${(selected_magnet).name}`,\n getValue: n => ((mutable selected_magnet).repellent = thresh[n.value])\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":317,"value":"vis = html`\n \n \n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1016,"value":"viewof radio_color_attr = {\n let categoricals = Object.entries(ranges)\n .filter(([name, value]) => name !== 'name' && Number.isNaN(value.max))\n .map(([name, _]) => name)\n \n if (categoricals.length === 0) {\n return md`No categorical attributes found to apply colours upon`\n } else {\n categoricals = ['None', ...categoricals]\n }\n \n let boxes = radio({\n title: 'Colorize by:',\n description: 'select an attribute for data colorization',\n options: categoricals,\n value: categoricals[0]\n })\n \n Array.from(boxes.getElementsByTagName('label')).forEach(el => {\n el.style.fontWeight = 'bold'\n el.style.textTransform = 'Capitalize'\n })\n \n return boxes\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":686,"value":"md`\n| Name | ${mutable selected_datum.name} |\n|----------|------------------------|${\n Object.entries(selected_datum)\n .filter( ([key, value]) => key != 'name')\n .map( ([key, value]) => `\n| ${key} | ${value} |`\n)}\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1064,"value":"slide`${\n html`\n Issues with the technique\n

\n - Reproducablility
\n - Occulusion
\n - Scalability\n

\n - Good potential tool for first pass analysis,
\n | but needs some motivation
\n - Scalability issues unsolved
\n - Predecessor for force layouts\n

observablehq.com/@zevisert/dust-and-magnet

\n ${t_remaining}\n `\n }`\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":879,"value":"md`\n## Implementation\nEverything below this is part of the implementation of this presentation\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":838,"value":"mutable selected_datum = { return { name: \"Click a dust speck for details\" } } ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":958,"value":"mutable selected_magnet = null","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1012,"value":"colorize = {\n const dust = d3\n .select(vis)\n .selectAll('circle')\n\n if (radio_color_attr !== 'None') {\n const scheme = d3.interpolateRainbow\n const order = Array.prototype.indexOf.bind(Array.from(new Set(dust.data().map(d => d[radio_color_attr]))))\n dust.style('fill', d => scheme(order(d[radio_color_attr]) / ranges[radio_color_attr].unique))\n\n return [...Generators.range(ranges[radio_color_attr].unique)].map(v => scheme(v / ranges[radio_color_attr].unique))\n } else {\n dust.style('fill', _ => props.data.color)\n return [ props.data.color ]\n }\n\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":479,"value":"data_representation = { \n let cir = d3.select(vis)\n .select('svg')\n .selectAll('circle')\n .data(data)\n \n cir.exit().remove()\n \n cir = cir.enter()\n .append(() => svg``)\n .attr('data-name', d => d.name)\n .attr('r', _ => props.data.radius)\n .style('stroke', 'blue')\n .style(\"fill\", _ => props.data.color)\n .merge(cir)\n \n cir\n .attr(\"cx\", d => { \n if (d[props.data.meta] && d[props.data.meta].cx)\n return d[props.data.meta].cx\n else \n return (d[props.data.meta] = { ...d[props.data.meta], cx: props.data.generate(props).x }).cx\n })\n .attr(\"cy\", d => { \n if (d[props.data.meta] && d[props.data.meta].cy)\n return d[props.data.meta].cy\n else \n return (d[props.data.meta] = { ...d[props.data.meta], cy: props.data.generate(props).y }).cy\n })\n .on('mouseover', handlers.hover.enter)\n .on('mouseout', handlers.hover.exit)\n .on('click', handlers.click.datum)\n \n return cir._groups[0]\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":123,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":557,"value":"function simulate(dust, magnets) { \n let d = dust.datum()\n let minmax = attr => ranges[attr].max - ranges[attr].min\n let force = mag => mag.magnitude * (d[mag.name] - mag.repellent)\n let unit_v = (a, b) => {\n let len = Math.sqrt((a.x - b.x)**2 + (a.y - b.y)**2)\n return { ux: (a.x - b.x) / len, uy: (a.y - b.y) / len }\n }\n \n return magnets.data()\n .map( mag => {\n let pt_dust = {\n x: d[props.data.meta].cx,\n y: d[props.data.meta].cy\n }\n \n let pt_mag = {\n x: mag.x + props.magnet.width / 2,\n y: mag.y + props.magnet.height / 2\n }\n \n let {ux, uy} = unit_v(pt_dust, pt_mag)\n \n let ax = ux * force(mag) / minmax(mag.name)\n let ay = uy * force(mag) / minmax(mag.name)\n\n return { name: mag.name, ax, ay }\n })\n .reduce((agg, v) => {\n return { ax: agg.ax + v.ax, ay: agg.ay + v.ay }\n })\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":208,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":174,"value":"props = {\n return {\n view: {\n height: +d3.select(\"svg\").attr(\"height\"),\n width: +d3.select(\"svg\").attr(\"width\")\n },\n magnet: {\n width: 50,\n height: 30,\n bar: {\n width: 10,\n pos_color: d3.color('rgba(255, 0, 0, 0.5)'),\n neg_color: d3.color('rgba(0, 0, 255, 0.5)')\n },\n color: d3.color('rgba(69, 90, 100, 0.7)'),\n generate: (p) => {\n return {\n magnitude: 5,\n repellent: 0,\n x: Math.round(Math.random() * (p.view.width - p.magnet.width)),\n y: Math.round(Math.random() * (p.view.height - p.magnet.height))\n }\n }\n },\n data: {\n meta: Symbol('data-meta'),\n radius: 10,\n color: d3.color('rgba(117, 212, 255, 0.25)'),\n generate: (p) => {\n return {\n // Data generates at the center initally\n x: Math.round(p.view.width / 2),\n y: Math.round(p.view.height / 2)\n }\n }\n }\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":579,"value":"ranges = { \n // Convert array of objects to single object with values for each key reduced to an array \n let values = data.reduce((y, obj) => {\n Object.keys(obj).forEach(key => {\n y[key] = (y[key] || []).concat([obj[key]] || [])\n })\n return y\n }, {})\n \n let ranges = Object.entries(values)\n // Take measurements of each array key\n .map(([key, arr]) => { return { [key]: { max: Math.max(...arr), min: Math.min(...arr), unique: new Set(arr).size } } })\n // .. and reduce individual objects into one\n .reduce((agg, obj) => { return { ...agg, ...obj } }, {})\n \n return ranges\n}\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":364,"value":"mutable magnets = data.columns.map(name => {\n return {\n name,\n ... props.magnet.generate(props)\n }\n}).filter(mag => ! Number.isNaN(ranges[mag.name].max))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":772,"value":"source = {\n let base = file => {\n let id = 'da5cea5773fe864692e8ddb75d240f4e'\n let commit = '82a640444f8f86d14784354eba2596ea9b394e41'\n return `https://gist.githubusercontent.com/zevisert/${id}/raw/${commit}/${file}`\n }\n \n return base(source_radio)\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":263,"value":"d3 = require('d3')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":100,"value":"import {checkbox, radio, slider} from '@jashkenas/inputs'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1088,"value":"t_remaining = {\n const finish = new Date(new Date(Date.now()).getTime() + 8*60000)\n let i = 480;\n while (true) {\n i--\n yield `${i > 0 ? \"\" : \"-\"}${Math.floor(Math.abs(i) / 60).toFixed(0)}:${`${Math.abs(i) % 60}`.padStart(2, \"0\")}`\n await Promises.tick(1000);\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":884,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":883,"value":"hl = require(\"@observablehq/highlight.js@1.0.0/highlight.min.js\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":892,"value":"$38","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W39","stdlib":"1","titling":"auto"}} 33:"$32:body"