31:T9ce,packsData = { regenerateData; const precision = 3; const _packs = [ { id: 0, name: "Current", imageUrl: await FileAttachment("0_current.png").url(), zones: [ { x: 132, y: 324, w: 132, h: 48, name: "Activity Icons" }, { x: 160, y: 36, w: 80, h: 92, name: "Big C" }, { x: 154, y: 246, w: 80, h: 24, name: "Flavor Name" }, { x: 154, y: 272, w: 112, h: 48, name: "Health Claims" }, { x: 136, y: 12, w: 124, h: 16, name: "No Sugar/Preservatives" }, { x: 172, y: 180, w: 64, h: 60, name: "Orange Slice" }, { x: 154, y: 136, w: 100, h: 32, name: "Product Name" }, ], }, { id: 1, name: "Design 1", imageUrl: await FileAttachment("1_design1.png").url(), zones: [ { x: 140, y: 330, w: 120, h: 40, name: "Activity Icons" }, { x: 146, y: 26, w: 116, h: 16, name: "Flavor" }, { x: 146, y: 230, w: 108, h: 72, name: "Health Claims" }, { x: 140, y: 120, w: 120, h: 40, name: "Product Name" }, { x: 154, y: 310, w: 92, h: 20, name: "Tastes Great" }, ], }, { id: 2, name: "Design 2", imageUrl: await FileAttachment("2_design2.png").url(), zones: [ { x: 136, y: 312, w: 120, h: 52, name: "Activity Icons" }, { x: 160, y: 54, w: 80, h: 80, name: "Big C" }, { x: 160, y: 258, w: 80, h: 12, name: "Flavor Name" }, { x: 154, y: 274, w: 108, h: 40, name: "Health Claims" }, { x: 146, y: 26, w: 116, h: 16, name: "No Sugar/Preservatives" }, { x: 160, y: 196, w: 80, h: 56, name: "Orange Slice" }, { x: 154, y: 142, w: 92, h: 32, name: "Product Name" }, ], }, ]; _packs.forEach(pack => { // create 'results' objects pack.zones.forEach(zone => zone.results = {}); ['like', 'dislike', 'newAndDiff'].forEach(key => { // make array that sums to 100% const len = pack.zones.length; const rand = [...Array(len)].map(x => Math.random()); const sum = rand.reduce((a, b) => a + b); const arr = rand.map(x => x / sum); // assign values to zone 'results' pack.zones.forEach((zone, index) => { zone.results[key] = arr[index].toFixed(2 + precision); }); }); }); // 'true' => make zone names unique between packs if (false) { _packs.map((pack, i) => { pack.zones.map(zone => { zone.name = `Pack#${i}: ${zone.name}`; }); }); } return _packs; }32:T430b,// opacity viz = { const height = 500; const html = ``; const div = d3.create("div").html(html); const svg = div.select("svg"); const metrics = { like: { label: "Like", titleColor: "#08306b", barColor: "#3787c0", }, dislike: { label: "Dislike", titleColor: "#67000d", barColor: "#e23028", }, newAndDiff: { label: "New/Different", titleColor: "#3f007d", barColor: "#796eb2", }, }; metrics.keys = Object.keys(metrics); // table positioning // ============================ const table = (() => { const x = 400; const y= 0; const colWidth= 120; // range: 60 - const colMargin= 10; const rowHeight= 16; const rowMargin= 4; const barHeight= 16; const totalColWidth = colWidth + colMargin * 2; const totalRowHeight = rowHeight + rowMargin * 2; const getCellX = (c) => x + (totalColWidth * c); const getCellY = (r) => y + (totalRowHeight * r + 1); return { x, y, colWidth, colMargin, rowHeight, rowMargin, barHeight, totalColWidth: totalColWidth, totalRowHeight: totalRowHeight, getCellX: getCellX, getCellY: getCellY, getZoneLineX: (r) => getCellX(0) - 4, getZoneLineY: (r) => getCellY(r) + totalRowHeight / 2, getHeaderX: (c) => getCellX(c) + totalColWidth / 2, getHeaderY: (r) => getCellY(0) - rowMargin, getBarX: (c) => getCellX(c) + colMargin, getBarY: (r) => getCellY(r) + totalRowHeight - rowMargin - barHeight, getValueX: (c) => getCellX(c) + colWidth + colMargin, getValueY: (r) => getCellY(r) + (totalRowHeight / 2), getAxisX: (c) => getCellX(c) + colMargin, getAxisY: (r) => getCellY(r) + rowMargin, }; })(); const ZONES_OPACITY = 0.50; const ZONELINES_OPACITY = 0.70; const TABLEBARBKGDS_OPACITY = 0.70; const TABLEBARS_OPACITY = 0.70; const TABLEVALUES_OPACITY = 1.00; function update(packObject) { // prepare data // ============================ const packObj = JSON.parse(JSON.stringify(packObject)); packObj.zones.forEach((zone, index) => { zone.centroid = { x: zone.x + zone.w/2, y: zone.y + zone.h/2, }; zone.index = index; }); packObj.zones.sort((zoneA, zoneB) => zoneA.centroid.y - zoneB.centroid.y); // value formats, scales, & axes // ============================ const valueMax = Math.max(...packObj.zones.map(zone => Math.max(...Object.values(zone.results)))); const valueFormat = d3.format(".0%"); const barScale = d3.scaleLinear() .domain([0, Math.ceil(valueMax * 10) / 10]) .range([0, table.colWidth]) .nice(); const axis = d3.axisBottom() .scale(barScale) .tickValues(barScale.domain()) .tickFormat(valueFormat) .tickSize(4); // schedule transitions // ============================ const TRANSITION = svg.transition().duration(1000); // remove previous events (before modifying elements) // ============================ removeEventListeners(); // update image // ==================== svg.select("g#packImage") .selectAll("image") .data([ packObject ], pack => pack.id) .join("image") .attr("x", 0) .attr("y", 0) .attr("width", 400) .attr("height", 400) .attr("href", d => d.imageUrl); // update zones // ==================== svg.select("g#zones") .selectAll("rect") .data(packObj.zones, zone => zone.name) .join( enter => enter .append("rect") .attr("fill", "gray") .attr("stroke", "white") .attr("stroke-width", 1) .attr("mix-blend-mode", "multiply") .transition(TRANSITION) .on("start", function() { d3.select(this) .attr("opacity", ZONES_OPACITY) .attr("x", d => d.x + (d.w / 2)) .attr("y", d => d.y + (d.h / 2)) .attr("width", 0) .attr("height", 0); }) .on("interrupt", function() { d3.select(this) .attr("x", d => d.x) .attr("y", d => d.y) .attr("width", d => d.w) .attr("height", d => d.h); }) .attr("x", d => d.x) .attr("y", d => d.y) .attr("width", d => d.w) .attr("height", d => d.h), update => update .attr("opacity", ZONES_OPACITY) .transition(TRANSITION) .on("start", function() { d3.select(this) .attr("opacity", ZONES_OPACITY); }) .on("interrupt", function(){ d3.selection(this) .attr("opacity", ZONES_OPACITY); }) .attr("x", d => d.x) .attr("y", d => d.y) .attr("width", d => d.w) .attr("height", d => d.h), ) .call(sel => sel .transition(TRANSITION) .transition().duration(1000) .attr("opacity", 0.00) .on("interrupt", function() { d3.select(this).attr("opacity", 0.00); }) ); // update zoneLines // ==================== const line = d3.line(d => d.x, d => d.y); svg.select("g#zoneLines") .selectAll("line") .data(packObj.zones, zone => zone.name) .join( enter => enter .append("line") .attr("x1", (zone) => zone.centroid.x) .attr("y1", (zone) => zone.centroid.y) .attr("x2", (zone, i) => table.getZoneLineX(i)) .attr("y2", (zone, i) => table.getZoneLineY(i)) .attr("fill", "none") .attr("stroke", "darkgray") .attr("stroke-width", 1) .attr("opacity", ZONELINES_OPACITY) .attr("mix-blend-mode", "multiply") .each(function revealPath(d, i, nodes) { const length = this.getTotalLength(); d3.select(this) .attr("stroke-dasharray", `${length} ${length}`) .attr("stroke-dashoffset", length) .transition(TRANSITION) .attrTween("stroke-dashoffset", (d, i) => d3.interpolateNumber(length, 0)) .on("end", function(d, i) { d3.select(this) .attr("stroke-dasharray", null) .attr("stroke-dashoffset", null); }); }), update => update .transition(TRANSITION) .attr("x1", (zone) => zone.centroid.x) .attr("y1", (zone) => zone.centroid.y) .attr("x2", (zone, i) => table.getZoneLineX(i)) .attr("y2", (zone, i) => table.getZoneLineY(i)), ); // tableHeaders (no update) // ==================== svg.select("g#tableHeaders") .selectAll("text") .data(metrics.keys, k => k) .join("text") .attr("x", (d, i) => table.getHeaderX(i)) .attr("y", (d, i) => table.getHeaderY(i)) .attr("text-anchor", "middle") .attr("dominant-baseline", "auto") .attr("fill", k => metrics[k].titleColor) .text(k => metrics[k].label); // tableBarBkgds // ==================== svg.select("g#tableBarBackgrounds") .selectAll("g") .data(packObj.zones, zone => zone.name) .join( enter => enter .append("g") .each(function enterBars(zone, r) { d3.select(this) .selectAll("rect") .data(metrics.keys, k => k) .join("rect") .attr("x", (k, c) => table.getBarX(c)) .attr("y", (k, c) => table.getBarY(r)) .attr("height", table.barHeight) .attr("width", table.colWidth) .attr("fill", "lightgray") .attr("mix-blend-mode", "multiply") .transition(TRANSITION) .attrTween("opacity", () => d3.interpolateNumber(0.00, TABLEBARBKGDS_OPACITY)); }), update => update .each(function updateBars(zone, r) { d3.select(this) .selectAll("rect") .data(metrics.keys, k => k) .join("rect") .transition(TRANSITION) .attr("x", (k, c) => table.getBarX(c)) .attr("y", (k, c) => table.getBarY(r)) .attr("height", table.barHeight) .attr("width", table.colWidth) }), ); // tableBars // ==================== svg.select("g#tableBars") .selectAll("g") .data(packObj.zones, zone => zone.name) .join( enter => enter .append("g") .each(function enterBars(zone, r) { d3.select(this) .selectAll("rect") .data(metrics.keys, k => k) .join("rect") .attr("x", (k, c) => table.getBarX(c)) .attr("y", (k, c) => table.getBarY(r)) .attr("height", table.barHeight) .attr("fill", k => metrics[k].barColor) .attr("mix-blend-mode", "multiply") .attr("filter", "url(#shadow)") .transition(TRANSITION) .attrTween("width", (k, i) => d3.interpolateNumber(0, barScale(zone.results[k]))) .attrTween("opacity", () => d3.interpolateNumber(0.00, TABLEBARS_OPACITY)); }), update => update .each(function updateBars(zone, r) { d3.select(this) .selectAll("rect") .data(metrics.keys, k => k) .join("rect") .transition(TRANSITION) .attr("x", (k, c) => table.getBarX(c)) .attr("y", (k, c) => table.getBarY(r)) .attr("height", table.barHeight) .attr("width", (k, c) => barScale(zone.results[k])) }), ); // tableValues // ==================== svg.select("g#tableValues") .selectAll("g") .data(packObj.zones, zone => zone.name) .join( enter => enter .append("g") .each(function enterValues(zone, r) { d3.select(this) .selectAll("text") .data(metrics.keys, k => k) .join("text") .attr("text-anchor", "end") .attr("dominant-baseline", "central") .attr("x", (d, c) => table.getValueX(c)) .attr("y", (d, c) => table.getValueY(r)) .transition(TRANSITION) .textTween(function tween(k, i) { const a = +parseFloat(this.textContent)/100 || 0; const b = +zone.results[k]; return (t) => valueFormat(a * (1 - t) + b * t); }) .attrTween("opacity", () => d3.interpolate(0.00, TABLEVALUES_OPACITY)); }), update => update .transition(TRANSITION) .each(function updateValues(zone, r) { d3.select(this) .selectAll("text") .data(metrics.keys, k => k) .join("text") .transition(TRANSITION) .attr("x", (d, c) => table.getValueX(c)) .attr("y", (d, c) => table.getValueY(r)) .textTween(function tween(k, i) { const a = +parseFloat(this.textContent)/100 || 0; const b = +zone.results[k]; return (t) => valueFormat(a * (1 - t) + b * t); }); }), ); // tableBarAxes // ==================== svg.select("g#tableBarAxes") .selectAll("g") .data(metrics.keys, k => k) .join( enter => enter .append("g") .attr("transform", (k, i) => `translate(${table.getAxisX(i)} ${table.getAxisY(packObj.zones.length)})`) .call(axis), update => update .transition(TRANSITION) .attr("transform", (k, i) => `translate(${table.getAxisX(i)} ${table.getAxisY(packObj.zones.length)})`) .call(axis), ); // tableRowHoverTargets // ==================== svg.select("g#tableRowHoverTargets") .selectAll("g") .data(packObj.zones, zone => zone.name) .join( enter => enter .append("g") .each(function enterRows(zone, r) { d3.select(this) .selectAll("rect") .data([zone]) .join("rect") .attr("x", table.getCellX(0)) .attr("y", table.getCellY(r)) .attr("width", table.totalColWidth * (Object.keys(metrics).length - 1)) .attr("height", table.totalRowHeight); }), update => update .each(function updateRows(zone, r) { d3.select(this) .selectAll("rect") .data([zone]) .join("rect") .transition(TRANSITION) .attr("x", table.getCellX(0)) .attr("y", table.getCellY(r)) }), ) addEventListeners(packObj); if (useMarkers) svg.select("g#main").call(appendMarkers); } // mouseover / mouseout events // ============================ function addEventListeners() { svg.select("g#zones") .selectAll("rect") .on("mouseover", handleMouseover) .on("mouseout", handleMouseout); svg.select("g#tableRowHoverTargets") .selectAll("g") .selectAll("rect") .on("mouseover", handleMouseover) .on("mouseout", handleMouseout); } function removeEventListeners() { svg.select("g#zones") .selectAll("rect") .on("mouseover", null) .on("mouseout", null); svg.select("g#tableRowHoverTargets") .selectAll("g") .selectAll("rect") .on("mouseover", null) .on("mouseout", null); } function handleMouseover(event) { event.stopPropagation() highlightZone(d3.select(this).datum()); } function handleMouseout(event) { event.stopPropagation() highlightZone(null); } function highlightZone(zone) { if (zone === null) { svg.select("g#zones") .selectAll("rect") .attr("opacity", 0.00); svg.select("g#zoneLines") .selectAll("line") .attr("opacity", ZONELINES_OPACITY); svg.select("g#tableBarBackgrounds") .selectAll("g") .selectAll("rect") .attr("opacity", TABLEBARBKGDS_OPACITY); svg.select("g#tableBars") .selectAll("g") .selectAll("rect") .attr("opacity", TABLEBARS_OPACITY); svg.select("g#tableValues") .selectAll("g") .selectAll("text") .attr("opacity", TABLEVALUES_OPACITY); } else { svg.select("g#zones") .selectAll("rect") .attr("opacity", d => d == zone ? ZONES_OPACITY : 0.00); svg.select("g#zoneLines") .selectAll("line") .attr("opacity", d => d == zone ? ZONELINES_OPACITY : 0.00); svg.select("g#tableBarBackgrounds") .selectAll("g") .each(function(d, i, nodes) { d3.select(this).selectAll("rect").attr("opacity", () => d == zone ? TABLEBARBKGDS_OPACITY : 0.20); }); svg.select("g#tableBars") .selectAll("g") .each(function(d) { d3.select(this).selectAll("rect").attr("opacity", () => d == zone ? TABLEBARS_OPACITY : 0.20); }); svg.select("g#tableValues") .selectAll("g") .each(function(d) { d3.select(this).selectAll("text").attr("opacity", () => d == zone ? TABLEVALUES_OPACITY : 0.20); }); } } return Object.assign(div.node(), { update }); }33:[{"id":"eb75614e69ed8149ccd655303d8d97e4d519cf39baf8aff511de965c25ff6fc4bbc7dc3f365e4a2389c712d33835b62f1d44f2cd2105250c656f499a72746e42","href":"https://static.observableusercontent.com/files/eb75614e69ed8149ccd655303d8d97e4d519cf39baf8aff511de965c25ff6fc4bbc7dc3f365e4a2389c712d33835b62f1d44f2cd2105250c656f499a72746e42","name":"0_current.png","type":"image/png","lastModified":1639163348600.734,"size":97477},{"id":"04a65b4e0b91b9506fd66bd2afe1d9cc5cda6a728571a182032291c6f3e18ee699200e5f3018ab73d1a472b963113f7d27667a137ca2a825c254e1a93ebf4e6f","href":"https://static.observableusercontent.com/files/04a65b4e0b91b9506fd66bd2afe1d9cc5cda6a728571a182032291c6f3e18ee699200e5f3018ab73d1a472b963113f7d27667a137ca2a825c254e1a93ebf4e6f","name":"1_design1.png","type":"image/png","lastModified":1639163348596.656,"size":111264},{"id":"b38fe11f88f0fb6d241de8f5489188780d545d765f64358e328f999f858ff0160d328f04c5ff4b239d6e6621815a7613fb17813fa54bb6bba1087f7230a2b77f","href":"https://static.observableusercontent.com/files/b38fe11f88f0fb6d241de8f5489188780d545d765f64358e328f999f858ff0160d328f04c5ff4b239d6e6621815a7613fb17813fa54bb6bba1087f7230a2b77f","name":"2_design2.png","type":"image/png","lastModified":1639163348525.558,"size":54332}] 2f:{"title":"HotZones DataViz","cells":[{"id":25,"value":"# HotZones DataViz","pinned":false,"hidden":false,"mode":"md"},{"id":1420,"value":"","pinned":false,"hidden":false,"mode":"html"},{"id":1431,"value":"# Let's build this thing...","pinned":false,"hidden":false,"mode":"md"},{"id":1435,"value":"## Dependencies","pinned":false,"hidden":false,"mode":"md"},{"id":39,"value":"d3 = require('d3');","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"## Data","pinned":false,"hidden":false,"mode":"md"},{"id":10,"value":"viewof regenerateData = Inputs.button(\"Regenerate Data\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":13,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":379,"value":"## Visualization","pinned":false,"hidden":false,"mode":"md"},{"id":496,"value":"viz.update(selectedPack);","pinned":false,"hidden":false,"mode":"ojs"},{"id":20,"value":"viewof selectedPack = Inputs.select(packsData, { label: \"Select pack:\", format: x => x.name})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1368,"value":"viewof useMarkers = Inputs.toggle({label: \"Show markers\", value: false});","pinned":false,"hidden":false,"mode":"ojs"},{"id":498,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":369,"value":"## Helper Functions","pinned":false,"hidden":false,"mode":"md"},{"id":1364,"value":"appendMarkers = (sel) => {\n sel.selectAll(\"g[transform]\")\n .append(\"circle\")\n .attr(\"cx\", 0)\n .attr(\"cy\", 0)\n .attr(\"r\", 2)\n .attr(\"fill\", \"red\");\n sel.selectAll(\"text\")\n .each(function() {\n const el = d3.select(this);\n sel.append(\"circle\")\n .attr(\"cx\", el.attr(\"x\"))\n .attr(\"cy\", el.attr(\"y\"))\n .attr(\"r\", 2)\n .attr(\"fill\", \"orange\");\n });\n sel.selectAll(\"rect\")\n .each(function() {\n const el = d3.select(this);\n sel.append(\"circle\")\n .attr(\"cx\", el.attr(\"x\"))\n .attr(\"cy\", el.attr(\"y\"))\n .attr(\"r\", 2)\n .attr(\"fill\", \"green\");\n });\n};","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}