2f:T6de,SCHOOLSMOBILE = [ {"abbr": "Divinity", "x": 77, "y": 13, "dy": 9, "full": "School of Divinity"}, {"abbr": "YSE", "x": 54, "y": 20, "dy": 23, "full": "School of the Environment"}, {"abbr": "SOM", "x": 76, "y": 28, "dy": 35, "full": "School of Management"}, {"abbr": "SEAS", "x": 60, "y": 50, "dy": 55, "full": "School of Engineering & Applied Sciences"}, {"abbr": "Music", "x": 32, "y": 34, "dy": 35, "full": "School of Music"}, {"abbr": "GSAS", "x": 73, "y": 60, "dy": 63, "full": "Graduate School of Arts and Sciences"}, {"abbr": "YLS", "x": 18, "y": 27, "dy": 30, "full": "School of Law"}, {"abbr": "YSOA", "x": 19, "y": 60, "dy": 60, "full": "School of Architecture"}, {"abbr": "Art", "x": 10, "y": 73, "dy": 73, "full": "School of Art"}, {"abbr": "Drama", "x": 35, "y": 47, "dy": 74, "full": "David Geffen School of Drama"}, {"abbr": "JGA", "x": 74, "y": 43, "dy": 79, "full": "Jackson School of Global Affairs"}, {"abbr": "YC", "x": 43, "y": 64, "dy": 60, "full": "Yale College"}, {"abbr": "YSPH", "x": 64, "y": 80, "dy": 85, "full": "School of Public Health"}, {"abbr": "Medicine", "x": 34, "y": 81, "dy": 87, "full": "School of Medicine"}, {"abbr": "YSN", "x": 14, "y": 87, "dy": 92, "full": "School of Nursing"} ] /* school set is artisan crafted unfortunately * the x and y are ideal locations on an imaginary map * dy is not used rn but was there to help scoot packs downward as the map narrowed with width * of course anti-collision d3 could be used in future but we can't have random contextual placement * https://observablehq.com/@clhenrick/dorling-cartogram-circle-packs */30:T405,SCHOOLSWIDE = [ {"abbr": "Divinity", "x": 80, "y": 6, "dy": 45, "full": "School of Divinity"}, {"abbr": "YSE", "x": 67, "y": 14, "dy": 70, "full": "School of the Environment"}, {"abbr": "SOM", "x": 79, "y": 18, "dy": 119, "full": "School of Management"}, {"abbr": "SEAS", "x": 70, "y": 26, "dy": 155, "full": "School of Engineering & Applied Sciences"}, {"abbr": "Music", "x": 52, "y": 17, "dy": 155, "full": "School of Music"}, {"abbr": "GSAS", "x": 56, "y": 27, "dy": 235, "full": "Graduate School of Arts and Sciences"}, {"abbr": "YLS", "x": 41, "y": 15, "dy": 140, "full": "School of Law"}, {"abbr": "YSOA", "x": 43, "y": 24, "dy": 215, "full": "School of Architecture"}, {"abbr": "YSPH", "x": 31, "y": 28, "dy": 235, "full": "School of Public Health"}, {"abbr": "Medicine", "x": 19, "y": 30, "dy": 265, "full": "School of Medicine"}, {"abbr": "YSN", "x": 8, "y": 31, "dy": 315, "full": "School of Nursing"} ]31:T55e,appendPersons = (selection, fill, rkey) => { let data = [...roster_map.values()].sort((b, a) => { return a.last - b.last; }) selection .selectAll(".gardencell") .data(data, d => `y_${d.id}`) .join( enter => enter .append("div") .classed("gardencell", true) .on('click', show_bio) .attr("id", d => `y_${d.id}`) .attr('style', d => `flex: 0 0 0; white-space: nowrap; padding: 0 14px 0 24px; background-color: #00065B; color: white; border: 1px solid #00065B`) .call(appendPersonname) .call(appendHeadshot), update => update .attr('style', d => `flex: 0 0 0; white-space: nowrap; padding: 0 14px 0 24px; ${(rkey !== null && d.topics.indexOf(rkey) < 0) ? (FULLWIDTH ? null : 'display: none') : null }; border: 1px solid ${(rkey !== null && d.topics.indexOf(rkey) >= 0) ? ( viewof solidback.value == 'solid' ? fill : d3.color(fill).darker(3)) : '#00065B' }; color: ${(rkey !== null && d.topics.indexOf(rkey) >= 0) ? ( viewof solidback.value == 'solid' ? 'white' : d3.color(fill).darker(3)) : 'white'}; background-color: ${(rkey !== null && d.topics.indexOf(rkey) >= 0) ? ( viewof solidback.value == 'solid' ? fill : d3.color(fill).copy({opacity: 0.15})) : '#00065B'}`) .transition() .duration(500) .ease(d3.easeLinear) //.style('background-color', "white") ) }32:T423,appendTopics = (selection, updates, topicx) => { selection .selectAll('g') .data(updates, d => d.id) .join( enter => enter .append("g") .classed("topic-pack", true) .classed("topic-show", false) .attr("id", d => d.id) .style("opacity", 0) .attr("transform", d => `translate(${d.x}, ${d.y})`) // add fancy text defs in svg, before adding text. Each site gets its own def due to pack size. .call(appendTextPaths, 'topic') // add text .call(appendTextElements, 'topic') .call(appendCircle), update => update .classed('topic-show', d => (topicx !== null && topicx >= 0 && topic_packs && [...topic_packs.values()][topicx].id && d.id == [...topic_packs.values()][topicx].id) ? true : false ) .transition() .duration(TRAFFICINTERVAL/10) .ease(d3.easeLinear) .style("opacity", d => (topicx !== null && topicx >= 0 && topic_packs && [...topic_packs.values()][topicx].id && d.id == [...topic_packs.values()][topicx].id) ? 1 : 0 ) ) }33:T4fd,appendTextElements = (selection, type) => { let rotate_from = (type && type == 'topic') ? '360' : '0'; let rotate_to = (type && type == 'topic') ? '0' : '90'; let animate_dur = (type && type == 'topic') ? '8s' : '1s'; let attr_xkey = (type && type == 'topic') ? 'repeatCount' : 'fill'; let attr_xval = (type && type == 'topic') ? 'indefinite' : 'freeze'; let textEl = selection .append('text') .attr("stroke-width", ".75px") .style('fill', d => d3.hsl(d.fill).darker(1)) .style('stroke', d => d3.hsl(d.fill).darker(1)) .attr('text-anchor','middle') textEl .append('textPath') .attr("startOffset", '50%') .attr('xlink:href', d => `#textpathfor${d.id}`) .text(d => `${d.full}`) //school full if (type && type == 'topic'){ textEl .append('animateTransform') .attr('attributeType', "xml") .attr('attributeName',"transform") .attr('type', 'rotate') .attr('from', rotate_from) //school 0, topic 360 .attr('to', rotate_to) //school 90, topic 0 .attr('begin','0') .attr('dur', animate_dur) //school 1s, topic 8s .attr(attr_xkey,attr_xval) //school ('fill', 'freeze') topic ('repeatCount','indefinite') } return textEl }34:T4be,appendTravellers = (selection, assignments) => { //discs that represent a faculty member //they move from school to topic and change color on the trip. selection .selectAll("circle") .data(assignments, d => `disc_${d.id}`) .join( enter => enter .append("circle") .classed("disc", true) .attr("id", d => `weedisc_${d.id}`) .attr("cx", function(d) { return d.x; }) .attr("cy", function(d) { return d.y; }) .attr("r", DISCRADIUS) .style("stroke", d => d3.hsl(d.f).darker(2)) .style("fill", d => d.f ) .style("opacity", 0) .transition().delay((d,i) => sprinkles(i)).duration(TRAFFICINTERVAL/10) .style("opacity", 1), update => update .transition() .duration(3000) .style("opacity", 1) .ease(d3.easePolyOut) .attr("cx", function(d) { return d.x; }) .attr("cy", function(d) { return d.y; }) .attr("r", DISCRADIUS) .style("stroke", d => d3.hsl(d.f).darker(2)) .style("fill", d => d.f ) ) }35:T4d6,appendBios = (selection, showid) => { //get the data from roster //we use join update based on passed showid //showid targets a bio and changes opacity and zindex let data = [...roster_map.values()].sort((b, a) => { return a.last.length - b.last.length; }) //manage zindex with mutables on panels //in mobile we need to create three layers that stack //according to need if (showid != null){ mutable ubxzidx_biobox = 10 mutable ubxzidx_roster = FULLWIDTH ? 0 : -2 } else { mutable ubxzidx_biobox = -1 } selection .selectAll(".node-person") .data(data, d => `biobox_${d.id}`) .join( enter => enter .append("div") .attr("id", d => `biobox_${d.id}`) .classed("node-person", true) .style("opacity", 0) .style("z-index", -1) .append("div") .call(removeBionode) .call(appendBionode), update => update .classed("show-bio", d => (d.id == showid) ? true : false) .transition() .duration(1500) .style("z-index", d => (d.id == showid) ? 11 : -1) .style("opacity", d => (d.id == showid) ? 1 : 0) .ease(d3.easePolyOut) ) }36:T4d1,createPacks = (filter, predicates, collection) => { // TODO - allow packs to drift, possibly x only, and adjust contour buffer/bandwidth/etc const packed = new Map(); let num = 0; for (let [key, row] of predicates) { //add members first -was it unncessary to map the schools? we could have just grabbed the abbr. let props = (Array.isArray(row)) ? row[0] : row; let members = matchMembers(filter, collection, key); members.sort((a, b) => (a.topics.length - b.topics.length)); // step 0 - largest pack to base frozen contour peak members = members.map(d => ({ id: d.id, r: DISCRADIUS + 1 })); let nodes = d3.packSiblings(members) // step 1 if (nodes.length > 0){ let { r } = d3.packEnclose(nodes) // step 2 let id = key.replace(/[^a-z]/gi, ''); let abbr = props.abbr; let x = props.x * CAMPUSWIDTH/90; //d3.min([width/100, 12]) let y = props.y * CAMPUSWIDTH/90; //+ ((props.dy && width < BREAKPOINT) ? props.dy : 0); let fill = props.fill || DEFAULTCOLOR; let full = props.full || key; let cnt = num packed.set(key, { nodes, key, id, abbr, cnt, full, fill, r, x, y }); // step 4 num++ } } return packed; }37:T591,function directTraffic(command) { let signalsays = viewof trafficsign.value; let signalnext = (signalsays && signalsays == "stop") ? "go" : "stop"; let statusnext = (signalnext && signalnext == "stop") ? "Paused. Select a research area, click on faculty to see more info, or press play to cycle the map." : "Cycling. Select a research area, click on faculty to see more info, or press pause to halt the map."; let rosternext = (signalnext && signalnext == "stop") ? true : false; let statusnow = (command && command == "stop") ? "Paused. Select a research area, click on faculty to see more info, or press play to cycle the map." : "Cycling. Select a research area, click on faculty to see more info, or press pause to halt the map."; let rosternow = (command && command == "stop") ? true : false; switch(command){ case 'stop': mutable trafficmessage = statusnow; setidx(viewof trafficsign, command) break; case 'go': mutable trafficmessage = statusnow; setidx(viewof trafficsign, command) mutable ubxzidx_roster = FULLWIDTH ? 0 : -2 biobox_root.call(appendBios, null) break; default: //no command mutable trafficmessage = statusnext; setidx(viewof trafficsign, signalnext) if (signalnext == "go") { mutable ubxzidx_roster = FULLWIDTH ? 0 : -2 biobox_root.call(appendBios, null) } } } 38:T29b6,CSS_UBXMAIN = htl.html` `39:T4b8,settledwidth = Generators.observe(notify => { let timer = null; let delay = 5000; let value; function get_settledwidth() { if (timer !== null) return; notify(value = checkwidth()); timer = setTimeout(delayed, delay); } function checkwidth() { return (document.body.clientWidth > WIDTH) ? WIDTH : document.body.clientWidth; } // After a delay, check if the last-reported value is the current value. // If it’s not, report the new value. function delayed() { timer = null; if (value === checkwidth()) return; notify(value = checkwidth()); } get_settledwidth(); addEventListener("resize", get_settledwidth); return () => removeEventListener("resize", get_settledwidth); }); /* settledwidth * generator to debounce resize and clamp width of contour map * in this narrow case we were just calming the redraws assuming any resize on desktop * should only have impact on roster, not map, but allow phone sizes to adjust * to get better needs to feed scale clamps, and/or indicator for gt lt for breakpoint * keep it to one axis at a time bc breakpoints could differ * ty @mbostock/debouncing-input */3a:[] 2d:{"title":"Urban Faculty Topics Visual VarA","cells":[{"id":0,"value":"# Urban Faculty Topics Visual VarA","pinned":false,"hidden":false,"mode":"md"},{"id":423,"value":"UBX_FACULTYVIZ = htl.html`\n

\n ${UBX_INTRO}\n

\n ${UBX_BIOS}\n ${UBX_CHART}\n

\n ${UBX_ROSTER}\n

`","pinned":true,"hidden":false,"mode":"ojs"},{"id":149,"value":"SCHOOLS = SCHOOLSMOBILE;\n//original moved from landscape to portrait, now static in portrait\n//SCHOOLS = (width > BREAKPOINT) ? SCHOOLSWIDE : SCHOOLSMOBILE;","pinned":false,"hidden":false,"mode":"ojs"},{"id":137,"value":"TOPICCOORDSWIDE = new Object({ x: 65, y: 47 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":135,"value":"TOPICCOORDSMOBILE = new Object({ x: 67, y: 112 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":129,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs"},{"id":127,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":403,"value":"CAMPUSLEGENDBOX = {\n let legendbox_root = d3\n .create('div').attr(\"id\", \"CAMPUSLEGENDBOX\")\n .attr('style', 'display: flex; flex-wrap: wrap;')\n .append('div').attr(\"class\", \"legend-rows-div\")\n .call(appendLegendHTML, [...topic_packs.values()], null)\n \n return legendbox_root.node()\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":337,"value":"ROSTERPILLBOX = {\n //fill with roster pills\n let fill = \"#00356B\";\n let rkey = null\n\n if (topicslot !== undefined && topicslot !== null && topicslot >= 0){\n rkey = [...topic_packs.values()][topicslot].key\n fill = [...topic_packs.values()][topicslot].fill\n } \n roster_root.call(appendPersons, fill, rkey)\n yield roster_root.node()\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":415,"value":"CAMPUSTOPO = {\n \n svg_topo.call(appendContours)\n svg_schools.call(appendSchoolsites, [...school_packs.values()])\n svg_packs.call(appendTopics, [...topic_packs.values()], null)\n svg_places.call(appendMarkers, [...starting_positions.values()])\n svg_traffic.call(appendTravellers, [...starting_positions.values()])\n \n yield campus_root.node();\n // timing/topic control has been ceded to the topicslot mutable via topiccycle generators. \n // As it gets topicslot updated, all the cells that use it respond. \n await Promises.delay(TRAFFICINTERVAL, directTraffic('go'))\n // while (await Promise.race([invalidation, Promises.delay(TRAFFICINTERVAL, svg_traffic.node())]));\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2672,"value":"UBX_INTRO = htl.html`

Focus Areas of Faculty Research

The following bodies of knowledge: history, theory and contemporary analysis of urban morphologies, spaces, societies, and political economies; conceptual tools and analytical methods to understand urban environments and issues through spatial terms; and practices of and speculative approaches to urban planning and design.

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":497,"value":"### Campus Topo DOM collections\nHopefully with these split up we can refresh less","pinned":false,"hidden":false,"mode":"md"},{"id":480,"value":"campus_root = d3.create('div').attr(\"id\", \"campus_root\")\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":1249,"value":"roster_root = d3.create('div').attr(\"id\", \"roster_root\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":1789,"value":"biobox_root = d3.create('div').attr(\"id\", \"biobox_root\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":482,"value":"svg_root = campus_root.append('svg')\n .attr(\"id\", \"svg_root\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":484,"value":"svg_topo = svg_root.append(\"g\")\n .attr(\"class\", \"topo-lines\").attr(\"id\", \"topo_lines\")\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":489,"value":"svg_schools = svg_root.append('g')\n .attr(\"class\", \"school-packs\").attr(\"id\", \"school_packs\")\n //.call(appendSchoolsites, [...school_packs.values()])","pinned":false,"hidden":false,"mode":"ojs"},{"id":492,"value":"svg_places = svg_root.append('g')\n .attr(\"class\", \"placeholders\").attr(\"id\", \"placeholders\")\n// .call(appendMarkers, [...starting_positions.values()])","pinned":false,"hidden":false,"mode":"ojs"},{"id":502,"value":"svg_packs = svg_root.append('g')\n .attr(\"class\", \"topic-packs\").attr(\"id\", \"topic_packs\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":504,"value":"svg_traffic = svg_root.append('g')\n .attr(\"class\", \"traffic-area\").attr(\"id\", \"traffic-area\")\n// .call(appendTravellers, [...starting_positions.values()])","pinned":false,"hidden":false,"mode":"ojs"},{"id":109,"value":"refreshCampus = {\n let coords = new Map([...starting_positions, ...Object.values(topic_positions)[topicslot]])\n mutable topicabbr = [...topic_packs.values()][topicslot].abbr\n svg_traffic.call(appendTravellers, [...coords.values()])\n svg_packs.call(appendTopics, [...topic_packs.values()], topicslot)\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1384,"value":"appendContours = (selection) => {\n selection\n .attr(\"fill\", \"none\").attr(\"stroke\", \"steelblue\").attr(\"stroke-linejoin\", \"round\")\n .selectAll(\"path\")\n .data(contours)\n .join(\"path\")\n .attr(\"stroke-width\", (d, i) => i % 5 ? 0.25 : .5)\n .attr(\"d\", d3.geoPath())\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1876,"value":"appendHeadshot = (selection) => { \n selection\n .append(\"img\")\n .attr(\"src\", d => `${d.imgdataurl}`)\n .classed(\"pillimg\", true)\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":111,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":2042,"value":"appendPersonname = (selection) => {\n selection\n .append(\"span\")\n .text(d => FULLWIDTH ? `${d.full}` : `${d.first.charAt(0)} ${d.last}`)\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":105,"value":"appendLegendHTML = (selection, topics, topicx) => {\n selection\n .selectAll(\".legend-row-div\") \n .data(topics, d => `leg_${d.id}`)\n .join(\n enter => enter\n .append(\"div\")\n .classed(\"legend-row-div\", true)\n .classed(\"active-topic\", false)\n .attr(\"style\", d => `color: ${d.fill}`)\n// .on('click', (e, d) => topicSelectIndexReset(e, d.cnt))\n .on('click', (e, d) => chooseTopicFromLegend(e, d.cnt)) \n .call(appendLegendHTMLMark)\n .call(appendLegendHTMLText)\n //,\n //update => update\n // .classed('active-topic', (d, i) => ((topicx || topicx === 0) && i == topicx) ? true : false)\n )\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":103,"value":"appendLegendHTMLMark = (selection) => {\n selection \n .append(\"div\")\n .classed(\"legend-row-disc\", true)\n .append(\"span\")\n .append('text')\n .text(\"◉\")\n //.text(\"⬤\")\n //.text(\"•\")\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":101,"value":"appendLegendHTMLText = (selection) => {\n selection\n .append(\"div\")\n .classed(\"legend-row-text\", true)\n .append('text')\n .text(d => `${d.full}`)\n \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":99,"value":"appendLegendText = (selection, y) => {\n selection\n .append('text')\n .classed(\"legendtext\", true)\n .attr(\"x\", 30)\n .attr(\"y\", (d,i) => (y * i * 1.25) + y + 4)\n .text(d => `${d.full}`)\n .attr(\"stroke-width\", \".75px\")\n .style('fill', d => d3.hsl(d.fill).darker(3))\n //.style('stroke', d => d3.hsl(d.fill).darker(2))\n .attr('text-anchor','left') \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":97,"value":"appendLegendMark = (selection, y) => {\n selection\n .append(\"circle\")\n .classed(\"legendmark\", true)\n .attr(\"id\", d => d.id)\n .attr(\"cx\", y)\n .attr(\"cy\", (d,i) => (y * i * 1.25) + y)\n .attr(\"r\", y/3)\n .style(\"stroke\", d => d3.hsl(d.fill).darker(2))\n .style(\"fill\", d => d.fill )\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":91,"value":"appendSchoolsites = (selection, data) => { \n selection\n .selectAll(\"g\")\n .data(data, d => d.id)\n .join(\n enter => enter\n .append(\"g\")\n .classed(\"school-pack\", true)\n .attr(\"id\", d => d.id)\n .attr(\"transform\", d => `translate(${d.x}, ${d.y})`)\n // add fancy text defs in svg, before adding text. Each site gets its own def due to pack size.\n .call(appendTextPaths, 'school')\n // add text\n .call(appendTextElements, 'school') \n )\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":87,"value":"appendCircle = (selection) => {\n selection\n .append(\"circle\")\n .attr(\"r\", d => d.r + 4)\n .attr(\"fill\", \"none\")\n .attr(\"stroke-width\", \"1px\")\n .attr(\"stroke-dasharray\", \"4 2\")\n .attr(\"stroke\", d => d.fill) \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":85,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":83,"value":"appendTextPaths = (selection, type) => {\n let txr = 12; // default radius buffer for text\n let str_pad = 5; // end padding for min circ calc\n let chr_avg = 4.6; // rough avg width of characters for min circ calc\n \n selection\n .append('defs')\n .append('path')\n .attr(\"d\", d => {\n let stock = (d.r + txr); \n let needed = ((d.full.length + str_pad) * chr_avg)/(2 * Math.PI)\n let adjr = Math.max( stock, needed );\n return `M ${adjr}, ${adjr} m 0, -${adjr} a ${adjr},${adjr} 0 0 1 -${(adjr)*2}, 0 a ${adjr},${adjr} 0 0 1 ${(adjr)*2}, 0`})\n .attr(\"id\", d => `textpathfor${d.id}`)\n .attr(\"transform\", d => `rotate(90)`)\n \n \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":81,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":79,"value":"appendMarkers = (selection, markers) => {\n // visual placeholders for discs, when discs move these stay in place\n // showing the absence of a travelling disc\n selection\n .selectAll(\".dots\")\n .data(markers, d => d.id)\n .join(\n enter => enter\n .append(\"circle\")\n .classed(\"disc\", true)\n .attr(\"id\", d => `dot_${d.id}`)\n .attr(\"cx\", function(d) {\n return d.x;\n })\n .attr(\"cy\", function(d) {\n return d.y;\n })\n .attr(\"r\", 1)\n .style(\"stroke\", d => d3.hsl(d.f).darker(2))\n .style(\"fill\", d => d.f )\n .style(\"opacity\", 1),\n update => update\n .selectAll('.nope')\n )\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":77,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":1854,"value":"removeBionode = (selection) => {\n selection\n .append(\"div\")\n .classed(\"close_me\", true)\n .on('click', hide_bio)\n .append(\"span\")\n .classed('material-symbols-outlined', true)\n .text(\"close\")\n}\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":1836,"value":"appendBionode = (selection) => {\n selection\n .append(function(d){\n return htl.html`

$\"${d.full}\"$

${d.full}

${d.titles}

${d.tos}

View bio $\"Open$

` \n })\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1780,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":73,"value":"calculatePositions = (data) => {\n // this works with packs, the position is relative to \n // the whole svg space, so the center of the pack is given\n // as well as the place for each dot/disc\n let stops = {};\n for (let [pid,pack] of data.entries()){\n let stop = new Map();\n for (let node of pack.nodes){\n stop.set(\n node.id, \n { \n x: (pack.x + node.x), \n y: (pack.y + node.y), \n r: node.r, \n f: pack.fill || \"#00356B\",\n id: node.id \n });\n }\n stops[pid] = stop;\n }\n return stops;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":71,"value":"$36","pinned":false,"hidden":false,"mode":"ojs"},{"id":69,"value":"matchMembers = (filter, collection, key) => {\n let candidates = [];\n if (collection instanceof Map){\n // if we get a Map, spread the values to filter as array\n // id would be redundantly stored in each value obj\n candidates = [...collection.values()];\n } else {\n candidates = collection;\n }\n let outbound = [];\n switch (filter){\n case \"topics\":\n //need to match in the topics array of topic keys per candidate\n outbound = candidates.filter(d => {return d.topics.indexOf(key) >= 0});\n break;\n case \"school\":\n //simple val match for school key per candidate\n outbound = candidates.filter(d => {return d.school == key});\n break;\n }\n return outbound;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2154,"value":"hide_bio = (event,d) => {\n //avoiding circular ref from appendBios update to null\n let bye_o = `#biobox_${d.id}`;\n d3.select(bye_o).classed(\"show-bio\", false).style(\"z-index\", -1).style(\"opacity\", 0 )\n mutable ubxzidx_biobox = -1\n mutable ubxzidx_roster = FULLWIDTH ? 0 : 9\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1799,"value":"show_bio = (event, d) => {\n directTraffic(\"stop\")\n mutable trafficmessage = \"Paused. Select a research area, click on faculty to see more info, or press play to cycle the map.\"\n if (d && d.id) biobox_root.call(appendBios, d.id)\n mutable ubxzidx_roster = FULLWIDTH ? 0 : -2\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":55,"value":"contours = d3.contourDensity()\n .x(d => d.x)\n .y(d => d.y)\n .size([CAMPUSWIDTH, MAINHEIGHT])\n .bandwidth(BANDWIDTH)\n .thresholds(THRESHOLD)\n (contour_positions)\n\n// .x(d => contourX(d.x))\n// .y(d => contourY(d.y))","pinned":false,"hidden":false,"mode":"ojs"},{"id":53,"value":"contour_margin = ({top: 40, right: 0, bottom: 60, left: 0}) // ({top: 20, right: 30, bottom: 30, left: 40})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1753,"value":"gather_contour_positions = () => {\n // client option is to remove topic pack location from overall contour input\n if (include_topic_contours){\n return [...starting_positions.values(), ...Object.values(topic_positions)[0].values()];\n } else {\n return [...starting_positions.values()]\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":51,"value":"contour_positions = gather_contour_positions()\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":49,"value":"topic_positions = calculatePositions(topic_packs)","pinned":false,"hidden":false,"mode":"ojs"},{"id":47,"value":"topic_packs = createPacks('topics', topic_map, roster_map)","pinned":false,"hidden":false,"mode":"ojs"},{"id":45,"value":"topic_map = {\n let topic_set = [];\n for (let r of roster_map.values()){\n topic_set = new Set([...topic_set, ...r.topics])\n }\n return new Map([...topic_set].sort().map(\n (t, i) => ([t, {topic: t, fill: topics_map.get(t).color, abbr: topics_map.get(t).abbr, x: TOPICCOORDS.x, y: TOPICCOORDS.y}])));\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":43,"value":"school_positions = calculatePositions(school_packs)","pinned":false,"hidden":false,"mode":"ojs"},{"id":41,"value":"starting_positions = Object.values(school_positions).reduce( (previousValue, currentValue, currentIndex, array) => new Map([...previousValue, ...currentValue]))","pinned":false,"hidden":false,"mode":"ojs"},{"id":35,"value":"school_packs = createPacks('school', schools_map, roster_map)","pinned":true,"hidden":false,"mode":"ojs"},{"id":33,"value":"schools_map = new Map(SCHOOLS.map(obj => ([obj[\"abbr\"], {...obj}])));","pinned":true,"hidden":false,"mode":"ojs"},{"id":31,"value":"roster_map = new Map([...roster_json].map(obj => ([obj[\"id\"], {...obj}])));","pinned":true,"hidden":false,"mode":"ojs"},{"id":321,"value":"topics_map = new Map([...topics_json].map(obj => ([obj[\"full\"], {...obj}])));","pinned":true,"hidden":false,"mode":"ojs"},{"id":25,"value":"DISCRADIUS = 4","pinned":true,"hidden":false,"mode":"ojs"},{"id":17,"value":"TOPICCOORDS = TOPICCOORDSMOBILE;\n//TOPICCOORDS = (width > BREAKPOINT) ? TOPICCOORDSWIDE : TOPICCOORDSMOBILE;","pinned":true,"hidden":false,"mode":"ojs"},{"id":183,"value":"## Data Fetching\nWe can use `/urbanex/roster/full/list.json` or a version of `/urbanex/roster/{schoolabbr}/{themeabbr}/list.json`, with 'all' as the wildcard for school and/or theme.","pinned":false,"hidden":false,"mode":"md"},{"id":188,"value":"topics_json = d3.json(\"https://urban.yale.edu/urbanex/terms/topics/all/list.json\").then(d => { d.map(r => {r.full = r.full.replace(\"&\", \"&\")}); return d})","pinned":true,"hidden":false,"mode":"ojs"},{"id":181,"value":"roster_json = d3.json(\"https://urban.yale.edu/urbanex/roster/full/list.json\").then(d => { d.map(r => {r.topics = r.topics.replace(\"&\", \"&\").split(',')}); return d})","pinned":true,"hidden":false,"mode":"ojs"},{"id":177,"value":"urbanschools = d3.json(\"https://urban.yale.edu/urbanex/terms/organizational_units/schools/list.json\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":1785,"value":"ROSTERBIOBOX = {\n //fill with bioboxes\n biobox_root.call(appendBios, null)\n yield biobox_root.node()\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2333,"value":"mutable ubxzidx_biobox = -1","pinned":false,"hidden":false,"mode":"ojs"},{"id":332,"value":"UBX_CHART = htl.html`

${CAMPUSTOPO}

${CAMPUSLEGENDBOX}

Click on a research area in the legend to highlight faculty.

`","pinned":true,"hidden":false,"mode":"ojs"},{"id":2112,"value":"UBX_BIOS = htl.html`

${ROSTERBIOBOX}

`","pinned":true,"hidden":false,"mode":"ojs"},{"id":1946,"value":"ROSTERTRAFFICCONTROL = htl.html`

${BUTTONPLAYPAUSE} ${trafficmessage}${viewof topicSelectIdx}

`","pinned":true,"hidden":false,"mode":"ojs"},{"id":2287,"value":"mutable ubxzidx_roster = FULLWIDTH ? 0 : -2","pinned":false,"hidden":false,"mode":"ojs"},{"id":374,"value":"UBX_ROSTER = htl.html`

${ROSTERTRAFFICCONTROL}

${ROSTERPILLBOX}

`","pinned":true,"hidden":false,"mode":"ojs"},{"id":1627,"value":"mahoraga = topiccycle(this, trafficsign);\n// this starts the counter regenerating and displays status?\n// I might have the control aspect incorrect here. trafficsign seems to reinstantiate the generator not pause it.\n// maybe a mutable would have a real pause rather than reset.","pinned":false,"hidden":false,"mode":"ojs"},{"id":1601,"value":"function* topiccycle(i = TRAFFICINTERVAL/1000, control) {\n if (control == \"stop\") return \"halted\";\n yield i;\n while (true) {\n if (i == 0) {\n yield topic_ratchet();\n yield* topiccycle(this, trafficsign);\n }\n yield Promises.tick(1000, --i);\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1403,"value":"### Traffic","pinned":false,"hidden":false,"mode":"md"},{"id":151,"value":"viewof TRAFFICINTERVAL = Inputs.range([3000, 50000], {value: 5000, step: 1000, label: \"TRAFFICINTERVAL\"})\n//topics will cycle and object will travel during this interval","pinned":false,"hidden":false,"mode":"ojs"},{"id":123,"value":"viewof trafficsign = Inputs.radio([\"stop\", \"go\"], {value: \"stop\", label: \"Trafficsign\"})\n// changed initial value to 'stop' until firstpaint\n// used Input for control while building, might use mutable next time!","pinned":false,"hidden":false,"mode":"ojs"},{"id":163,"value":"$37","pinned":false,"hidden":false,"mode":"ojs"},{"id":165,"value":"function returnTrafficState() {\n let light = viewof trafficsign.value;\n return light;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1976,"value":"mutable trafficmessage = \"Loading data...\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1005,"value":"BUTTONPLAYPAUSE = htl.html``","pinned":true,"hidden":false,"mode":"ojs"},{"id":1016,"value":"BUTTONPLAYPAUSE.onclick = function(){ directTraffic( ) };","pinned":true,"hidden":false,"mode":"ojs"},{"id":1161,"value":"### Topic Ratcheting and Choice","pinned":false,"hidden":false,"mode":"md"},{"id":171,"value":"//viewof topicslot = Inputs.input(-1)\nmutable topicslot = null","pinned":false,"hidden":false,"mode":"ojs"},{"id":2756,"value":"mutable topicabbr = 'biodiversity'","pinned":false,"hidden":false,"mode":"ojs"},{"id":167,"value":"function topic_ratchet() {\n let slot = clampcycle(mutable topicslot, topic_packs.size);\n mutable topicslot = slot\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2215,"value":"chooseTopicFromLegend = (e, n) => {\n let xxx = d3.selection().select('#ubx_roster');\n mutable ubxzidx_roster = FULLWIDTH ? 0 : 9\n topicSelectIndexReset(e, n)\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":951,"value":"topicSelectIndexReset = (e, value) => {\n let choice = value ? value : 0;\n mutable topicslot = choice\n directTraffic('stop')\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":931,"value":"viewof topicSelectIdx = Inputs.select(new Map([...topics_json].map((top, idx) => ([top[\"full\"], idx]))), {value: topicslot});","pinned":true,"hidden":false,"mode":"ojs"},{"id":986,"value":"viewof topicSelectIdx.oninput = function(e){ topicSelectIndexReset( e, this.value ) };","pinned":true,"hidden":false,"mode":"ojs"},{"id":1155,"value":"### Stylesheets and Colors","pinned":false,"hidden":false,"mode":"md"},{"id":709,"value":"ns = Inputs.text().classList[0]\n//ty @saneef/is-observable-inputs-style-able\n//ty @mootari","pinned":false,"hidden":false,"mode":"ojs"},{"id":21,"value":"DEFAULTCOLOR = \"#00365B\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":3,"value":"$38","pinned":true,"hidden":false,"mode":"html"},{"id":1141,"value":"### Dimensions","pinned":false,"hidden":false,"mode":"md"},{"id":13,"value":"//BREAKPOINT will be used for collapsing from desktop/tablet to mobile\nBREAKPOINT = 650","pinned":false,"hidden":false,"mode":"ojs"},{"id":131,"value":"MAINHEIGHT = yLog(CAMPUSWIDTH);","pinned":false,"hidden":false,"mode":"ojs"},{"id":19,"value":"WIDTH = 400","pinned":false,"hidden":false,"mode":"ojs"},{"id":2227,"value":"TOTALWIDTH = 810","pinned":false,"hidden":false,"mode":"ojs"},{"id":1342,"value":"CAMPUSWIDTH = settledwidth","pinned":false,"hidden":false,"mode":"ojs"},{"id":2231,"value":"FULLWIDTH = settledtotalwidth","pinned":false,"hidden":false,"mode":"ojs"},{"id":1337,"value":"$39","pinned":false,"hidden":false,"mode":"ojs"},{"id":2224,"value":"settledtotalwidth = Generators.observe(notify => {\n let timer = null;\n let delay = 1500;\n let value;\n\n function get_settledtotal() {\n if (timer !== null) return;\n notify(value = checktotal());\n timer = setTimeout(delayed, delay);\n }\n\n function checktotal() {\n return (document.body.clientWidth > TOTALWIDTH) ? true : false;\n }\n\n // After a delay, check if the last-reported value is the current value.\n // If it’s not, report the new value.\n function delayed() {\n timer = null;\n if (value === checktotal()) return;\n notify(value = checktotal());\n }\n \n get_settledtotal();\n addEventListener(\"resize\", get_settledtotal);\n return () => removeEventListener(\"resize\", get_settledtotal);\n });","pinned":false,"hidden":false,"mode":"ojs"},{"id":304,"value":"GARDENWIDTH = gardenWidthScale(width)","pinned":false,"hidden":false,"mode":"ojs"},{"id":39,"value":"maxX = d3.max([...starting_positions.values()].map(obj => (obj.x)));","pinned":false,"hidden":false,"mode":"ojs"},{"id":37,"value":"maxY = d3.max([...starting_positions.values()].map(obj => (obj.y)));","pinned":false,"hidden":false,"mode":"ojs"},{"id":1411,"value":"### Contour Settings","pinned":false,"hidden":false,"mode":"md"},{"id":159,"value":" - MOBILE THRESHOLD 8 BANDWIDTH 7 for cool biolooking things\n - 28 28 for a more connected fam","pinned":false,"hidden":false,"mode":"md"},{"id":157,"value":"viewof BUFFER = Inputs.range([0, 100], {value: 50, step: 1, label: \"BUFFER\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":155,"value":"viewof THRESHOLD = Inputs.range([0, 50], {value: 28, step: 1, label: \"THRESHOLD\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":153,"value":"viewof BANDWIDTH = Inputs.range([0, 50], {value: 27, step: 1, label: \"BANDWIDTH\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1136,"value":"### Helper Functions","pinned":false,"hidden":false,"mode":"md"},{"id":27,"value":"function setidx(input, value) {\n input.value = value;\n input.dispatchEvent(new Event(\"input\", {bubbles: true}));\n}\n// This is used to force a new value into an input field from outside a form","pinned":false,"hidden":false,"mode":"ojs"},{"id":1092,"value":"circumference = r => 2 * Math.PI * (r + 4)","pinned":false,"hidden":false,"mode":"ojs"},{"id":61,"value":"sprinkles = (i) => { let arrival = d3.randomUniform(700, 3000)(); return arrival }","pinned":false,"hidden":false,"mode":"ojs"},{"id":133,"value":"yLog = d3.scaleLog()\n .domain([390, 400, 410]).clamp(true)\n .range([600, 620, 640])","pinned":false,"hidden":false,"mode":"ojs"},{"id":147,"value":"xLog = d3.scaleLog()\n .domain([300, 500]).clamp(true)\n .range([-30, 0])","pinned":false,"hidden":false,"mode":"ojs"},{"id":300,"value":"gardenWidthScale = d3.scaleLog()\n .domain([390, 800, 1210])\n .range([120, 300, 400])","pinned":false,"hidden":false,"mode":"ojs"},{"id":169,"value":"// input is index (idx) against length (count) of the list to cycle back to first when last has been used\nfunction clampcycle(idx, count) { let s = idx === null ? 0 : idx < (count - 1) ? (idx + 1) : idx == (count - 1) ? 0 : 0; return s}\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":2371,"value":"## Client Options","pinned":false,"hidden":false,"mode":"md"},{"id":1676,"value":"viewof fontName = Inputs.select([\"Actor\", \"Work Sans\", \"Geologica\", \"Gothic A1\", \"Atkinson Hyperlegible\", \"Krub\"], {label: \"Pill Fontname\"})","pinned":true,"hidden":false,"mode":"ojs"},{"id":1743,"value":"viewof include_topic_contours = Inputs.toggle({label: \"Topics in contours?\", value: true})\n//client option","pinned":true,"hidden":false,"mode":"ojs"},{"id":1716,"value":"viewof solidback = Inputs.radio([\"solid\", \"semi\"], {value: \"solid\"})","pinned":true,"hidden":false,"mode":"ojs"},{"id":9,"value":"## Helpful things\n\n@makio135/utilities\nhttps://observablehq.com/@d3/contourdensity-linear-binning\nhttps://observablehq.com/@argyleink/a-reusable-way-to-present-fresh-dom\nhttps://observablehq.com/@clhenrick/dorling-cartogram-circle-packs\nhttps://observablehq.com/@plmrry/animated-contours\nhttps://observablehq.com/@jashkenas/simple-canvas-animation-with-pause\nhttps://observablehq.com/@saneef/is-observable-inputs-style-able","pinned":false,"hidden":false,"mode":"md"}],"files":"$W3a","stdlib":"1","titling":"auto"}