2f:Ta36,chart = { // for (let i in data.length){ // const discDataB = _.map(data, 'radB'); const svg = d3.select(DOM.svg(width, height)) .style("width", "60%") .style("height", "auto") .style("font", "4.5px sans-serif") // .style("text.axis-tick-marks", "7px") ; svg.append("rect") // background .attr("width", "100%") .attr("height", "100%") .attr("fill", "powderblue") ; svg.append("circle") // circle-A .attr("r", data[i]['radA']) .attr("cx", centerx) .attr("cy", centery) .attr("fill", "white") .attr("stroke", "ghostwhite") .attr("fill-opacity", 0.8) .attr("stroke-opacity", 0.8) ; svg.append("circle") // circle-B, static .attr("r", data[i]['radB']) .attr("cx", centerx) .attr("cy", centery) .attr("fill", "plum") ; // svg.append("circle") // circle-B, animated // .attr("cy", centery) // .attr("cx", centerx) // // .attr("r", 25) // works! // .style("fill", "red") // .style("fill-opacity", 0.25) // .attr("id", "bsc") // ; // svg // circle-B, animated // .selectAll("circle") // .data(discDataB) // .enter() // .append("circle") // .attr("cy", centery) // .attr("cx", centerx) // // .attr("r", function(d) {return (d); }) // shows all circles at once, no animation // .attr('r', function(d, i) {return i; }) // .style("fill", "red") // .style("fill-opacity", 0.25) // .attr("id", "bsc") // ; svg.append("circle") // circle-C .attr("r", data[i]['radC']) .attr("cx", centerx) .attr("cy", centery) .attr("fill", "black") ; svg.append("text") .style("font", "12px Source Serif Pro") .attr("x", 10) .attr("y", 20) .text("Prototype: 2d plan view of 3d form") ; svg.append("text") .style("font", "7px Source Serif Pro") .attr("x", 12) .attr("y", 30) .text("visual bootstrap") ; // function bootstrapIt() { // svg.selectAll("#bsc") // .data(discDataB) // .enter() // .transition() // .attr("cx", centerx) // .attr("cy", centery) // // .attr("r", function(d) {return (d);} ) // shows all circles at once, no animation // .attr('r', function(d, i) {return i; }) // // .attr("r", 50) // works! // ; // } // if (animate) {setInterval(bootstrapIt, 500)} return svg.node(); // } } 30:T883,chart2 = { const svg = d3.select(DOM.svg(width, height)) .style("width", "60%") .style("height", "auto") .style("font", "4.5px sans-serif") // .style("text.axis-tick-marks", "7px") ; svg.append("rect") // background .attr("width", "100%") .attr("height", "100%") .attr("fill", "powderblue") ; svg.append("rect") // rect-A, right .attr("width", barwidth) .attr("height", barheight) .attr("x", centerx) .attr("y", centery) .attr("fill", "white") // .attr("stroke", "ghostwhite") .attr("fill-opacity", 0.8) // .attr("stroke-opacity", 0.8) ; svg.append("rect") // rect-A, left .attr("width", barwidth) .attr("height", barheight) .attr("x", centerx) .attr("y", centery) .attr("fill", "white") // .attr("stroke", "ghostwhite") .attr("fill-opacity", 0.8) // .attr("stroke-opacity", 0.8) .attr("transform", "scale(-1, 1)") .attr("transform-origin", "center") ; svg.append("rect") // rect-B, right .attr("width", 40) .attr("height", barheight) .attr("x", centerx) .attr("y", centery) .attr("fill", "plum") ; svg.append("rect") // rect-B, left .attr("width", 40) .attr("height", barheight) .attr("x", centerx) .attr("y", centery) .attr("fill", "plum") .attr("transform", "scale(-1, 1)") .attr("transform-origin", "center") ; svg.append("rect") // rect-C, right .attr("width", 15) .attr("height", barheight) .attr("x", centerx) .attr("y", centery) .attr("fill", "black") ; svg.append("rect") // rect-C, left .attr("width", 15) .attr("height", barheight) .attr("x", centerx) .attr("y", centery) .attr("fill", "black") .attr("transform", "scale(-1, 1)") .attr("transform-origin", "center") ; svg.append("text") .style("font", "12px Source Serif Pro") .attr("x", 10) .attr("y", 20) .text("Prototype: 2d section view of 3d form") ; svg.append("text") .style("font", "7px Source Serif Pro") .attr("x", 12) .attr("y", 30) .text("visual bootstrap") ; return svg.node(); }31:Taee,{ const svg = DOM.svg(1200, 1800); const yearMinMax = d3.extent(data, (d) => +d.Year); const circaMinMax = d3.extent(data, (d) => +d.radA); const circbMinMax = d3.extent(data, (d) => +d.radB); const circcMinMax = d3.extent(data, (d) => +d.radC); const xScale = d3.scaleLinear().domain(yearMinMax).range([0, 1200]); const sizeScale = d3.scaleLinear().domain([0, 100]).range([0.25, 1]); const background = d3.select(svg) .append("rect") // background .attr("width", "100%") .attr("height", "100%") .attr("fill", "powderblue"); const discDataC = _.map(data, 'radC'); const discDataB = _.map(data, 'radB'); const discDataA = _.map(data, 'radA'); const labelData = _.map(data, 'Year'.replace(',','')); const discsA = d3.select(svg) .selectAll('circle.white') .data(discDataA) .enter() .append('circle') .attr("cy", 175) // .attr("cx", function(d, i) {return i * 250; }) .attr('transform', (d, i) => `translate(${(i % 5) * 225 + 125},${Math.floor(i / 5) * 250})`) .attr("r", function(d) { return d; }) .style("fill", "white") .style("fill-opacity", 0.8) .attr("class", "white"); const discsB = d3.select(svg) .selectAll('circle.poc') .data(discDataB) .enter() .append('circle') .attr("cy", 175) // .attr("cx", function(d, i) {return i * 250; }) .attr('transform', (d, i) => `translate(${(i % 5) * 225 + 125},${Math.floor(i / 5) * 250})`) .attr("r", function(d) { return d; }) .style("fill", "plum") .attr("class", "poc"); const discsC = d3.select(svg) .selectAll('circle.mixed') .data(discDataC) .enter() .append('circle') .attr("cy", 175) // .attr("cx", function(d, i) {return i * 250; }) .attr('transform', (d, i) => `translate(${(i % 5) * 225 + 125},${Math.floor(i / 5) * 250})`) .attr("r", function(d) { return d; }) .attr("class", "mixed"); const labels = d3.select(svg) .selectAll('text.year') .data(labelData) .enter() .append("text") .attr("y", function(d, i) {return Math.floor(i / 5) * 250 + 290}) .attr("x", function(d, i) {return (i % 5) * 225 + 112.5; }) .text(function(d) { return d; }) .style("font", "12px Source Serif Pro") .attr("class", "year") ; // const title = d3.select(svg) // .append("text.title") // .style("font", "20px Source Serif Pro") // .attr("x", "500") // .attr("y", "500") // .attr("class", "title") // .text("Prototype: 2d plan view of 3d form") // ; // const subtitle = d3.select(svg) // .append("text.subtitle") // .style("font", "7px Source Serif Pro") // .attr("x", 12) // .attr("y", 30) // .attr("class", "subtitle") // .text("visual bootstrap") // ; return svg; }32:Tdbd,{ const svg = DOM.svg(1200, 800); const yearMinMax = d3.extent(data, (d) => +d.Year); const circaMinMax = d3.extent(data, (d) => +d.radA); const circbMinMax = d3.extent(data, (d) => +d.radB); const circcMinMax = d3.extent(data, (d) => +d.radC); const xScale = d3.scaleLinear().domain(yearMinMax).range([0, 1200]); const sizeScale = d3.scaleLinear().domain([0, 100]).range([0.25, 1]); const background = d3.select(svg) .append("rect") // background .attr("width", "100%") .attr("height", "100%") .attr("fill", "powderblue"); const discDataC = _.map(data, 'radC'); const discDataB = _.map(data, 'radB'); const discDataA = _.map(data, 'radA'); const labelData = _.map(data, 'Year'.replace(',','')); const discsA = d3.select(svg) .selectAll('rect.whiteR') .data(discDataA) .enter() .append('rect') .attr("width", function(d) { return d; }) .attr("height", 10) .attr("y", 175) // .attr("cx", function(d, i) {return i * 250; }) .attr('transform', (d, i) => `translate(${550},${Math.floor(i) * 15})`) .style("fill", "white") .style("fill-opacity", 0.8) .attr("class", "whiteR"); const discsA2 = d3.select(svg) .selectAll('rect.whiteL') .data(discDataA) .enter() .append('rect') .attr("width", function(d) { return d; }) .attr("height", 10) .attr("y", 175) .attr('transform', (d, i) => `translate(${450},${Math.floor(i) * 15})`) .style("fill", "white") .style("fill-opacity", 0.8) .attr("class", "whiteL"); const discsB = d3.select(svg) .selectAll('rect.pocR') .data(discDataB) .enter() .append('rect') .attr("width", function(d) { return d; }) .attr("height", 10) .attr("y", 175) // .attr("cx", function(d, i) {return i * 250; }) .attr('transform', (d, i) => `translate(${550},${Math.floor(i) * 15})`) .style("fill", "plum") .attr("class", "pocR"); const discsB2 = d3.select(svg) .selectAll('rect.pocL') .data(discDataB) .enter() .append('rect') .attr("width", function(d) { return d; }) .attr("height", 10) .attr("y", 175) // .attr("x", 250) .attr('transform', (d, i) => `translate(${450},${Math.floor(i) * 15})`) // .attr('transform', `translate(0, -100)`) // .attr('transform', `scale(-1, 1)`) // .attr('transform', (d, i) => `translate(100, 0)`) .style("fill", "plum") .attr("class", "pocL"); const discsC = d3.select(svg) .selectAll('rect.mixedR') .data(discDataC) .enter() .append('rect') .attr("width", function(d) { return d; }) .attr("height", 10) .attr("y", 175) // .attr("cx", function(d, i) {return i * 250; }) .attr('transform', (d, i) => `translate(${550},${Math.floor(i) * 15})`) .attr("class", "mixedR"); const discsC2 = d3.select(svg) .selectAll('rect.mixedL') .data(discDataC) .enter() .append('rect') .attr("width", function(d) { return d; }) .attr("height", 10) .attr("y", 175) // .attr("cx", function(d, i) {return i * 250; }) .attr('transform', (d, i) => `translate(${450},${Math.floor(i) * 15})`) .attr("class", "mixedL"); const labels = d3.select(svg) .selectAll('text.year') .data(labelData) .enter() .append("text") .attr("y", function(d, i) {return Math.floor(i) * 15 + 185}) .attr("x", 400) .text(function(d) { return d; }) .style("font", "12px Source Serif Pro") .attr("class", "year") ; return svg; }33:T782,data = [ { "Year": 2023, "radA": 100, "radB": 22, "radC": 11 }, { "Year": 2022, "radA": 100, "radB": 15, "radC": 8 }, { "Year": 2021, "radA": 100, "radB": 27, "radC": 9 }, { "Year": 2020, "radA": 100, "radB": 14, "radC": 8 }, { "Year": 2019, "radA": 100, "radB": 35, "radC": 9 }, { "Year": 2018, "radA": 100, "radB": 30, "radC": 8 }, { "Year": 2017, "radA": 100, "radB": 20, "radC": 8 }, { "Year": 2016, "radA": 100, "radB": 18, "radC": 6 }, { "Year": 2015, "radA": 100, "radB": 18, "radC": 6 }, { "Year": 2014, "radA": 100, "radB": 18, "radC": 6 }, { "Year": 2013, "radA": 100, "radB": 22, "radC": 6 }, { "Year": 2012, "radA": 100, "radB": 21, "radC": 6 }, { "Year": 2011, "radA": 100, "radB": 12, "radC": 4 }, { "Year": 2010, "radA": 100, "radB": 15, "radC": 5 }, { "Year": 2009, "radA": 100, "radB": 13, "radC": 5 }, { "Year": 2008, "radA": 100, "radB": 10, "radC": 4 }, { "Year": 2007, "radA": 100, "radB": 12, "radC": 3 }, { "Year": 2006, "radA": 100, "radB": 15, "radC": 4 }, { "Year": 2005, "radA": 100, "radB": 11, "radC": 3 }, { "Year": 2004, "radA": 100, "radB": 13, "radC": 3 }, { "Year": 2003, "radA": 100, "radB": 12, "radC": 2 }, { "Year": 2002, "radA": 100, "radB": 9, "radC": 3 }, { "Year": 2001, "radA": 100, "radB": 10, "radC": 3 }, { "Year": 2000, "radA": 100, "radB": 9, "radC": 2 }, { "Year": 1999, "radA": 100, "radB": 8, "radC": 2 }, { "Year": 1998, "radA": 100, "radB": 8, "radC": 2 }, { "Year": 1997, "radA": 100, "radB": 8, "radC": 2 }, { "Year": 1996, "radA": 100, "radB": 6, "radC": 2 }, { "Year": 1995, "radA": 100, "radB": 6, "radC": 1 }, { "Year": 1994, "radA": 100, "radB": 4, "radC": 1 } ]34:Ta3d,function Scrubber(values, { format = value => value, initial = 0, delay = 200, autoplay = true, loop = true, loopDelay = 100, alternate = false } = {}) { values = Array.from(values); const form = html``; let frame = null; let timer = null; let interval = null; let direction = 1; function start() { form.b.textContent = "Pause"; if (delay === null) frame = requestAnimationFrame(tick); else interval = setInterval(tick, delay); } function stop() { form.b.textContent = "Play"; if (frame !== null) cancelAnimationFrame(frame), frame = null; if (timer !== null) clearTimeout(timer), timer = null; if (interval !== null) clearInterval(interval), interval = null; } function running() { return frame !== null || timer !== null || interval !== null; } function tick() { if (form.i.valueAsNumber === (direction > 0 ? values.length - 1 : direction < 0 ? 0 : NaN)) { if (!loop) return stop(); if (alternate) direction = -direction; if (loopDelay !== null) { if (frame !== null) cancelAnimationFrame(frame), frame = null; if (interval !== null) clearInterval(interval), interval = null; timer = setTimeout(() => (step(), start()), loopDelay); return; } } if (delay === null) frame = requestAnimationFrame(tick); step(); } function step() { form.i.valueAsNumber = (form.i.valueAsNumber + direction + values.length) % values.length; form.i.dispatchEvent(new CustomEvent("input", {bubbles: true})); } form.i.oninput = event => { if (event && event.isTrusted && running()) stop(); form.value = values[form.i.valueAsNumber]; form.o.value = format(form.value, form.i.valueAsNumber, values); }; form.b.onclick = () => { if (running()) return stop(); direction = alternate && form.i.valueAsNumber === values.length - 1 ? -1 : 1; form.i.valueAsNumber = (form.i.valueAsNumber + direction) % values.length; form.i.dispatchEvent(new CustomEvent("input", {bubbles: true})); start(); }; form.i.oninput(); if (autoplay) start(); else stop(); Inputs.disposal(form).then(stop); return form; }35:[{"id":"730abb1f1522fd6238ded706f553cefc878cede6305c9012f65062a350e230787d8dd9995a998fc6bb480ba926fdfeca32d7b9cb05d72472a269d149ea711761","href":"https://static.observableusercontent.com/files/730abb1f1522fd6238ded706f553cefc878cede6305c9012f65062a350e230787d8dd9995a998fc6bb480ba926fdfeca32d7b9cb05d72472a269d149ea711761","name":"Screen Shot 2023-02-27 at 1.36.37 PM.jpg","type":"image/png","lastModified":1679592705277.789,"size":706082},{"id":"c96d2498d98e4401a76142402f095c6c4432271d175c23e45ffa493abf07c344047e4aa3cb662e1db4c0046c907d63cfc0bba9f9b3ba9c6666b91bc1ddae176b","href":"https://static.observableusercontent.com/files/c96d2498d98e4401a76142402f095c6c4432271d175c23e45ffa493abf07c344047e4aa3cb662e1db4c0046c907d63cfc0bba9f9b3ba9c6666b91bc1ddae176b","name":"Screen Shot 2023-03-09 at 9.14.24 PM.png","type":"image/png","lastModified":1679592705277.789,"size":60348},{"id":"57b1552b5f438a1c0a00f31c2dfc3627de0d99a61acf7015f5e54becb191207f416720ec8c6f13eee642eacc0506ee08b9931f01dc13f869442dee81ced9a981","href":"https://static.observableusercontent.com/files/57b1552b5f438a1c0a00f31c2dfc3627de0d99a61acf7015f5e54becb191207f416720ec8c6f13eee642eacc0506ee08b9931f01dc13f869442dee81ced9a981","name":"Screen Shot 2023-03-21 at 12.22.21 PM.png","type":"image/png","lastModified":1679592705277.789,"size":1560257}] 2d:{"title":"Tatiana Thesis","cells":[{"id":0,"value":"# Tatiana Thesis","pinned":false,"hidden":false,"mode":"md"},{"id":5,"value":"screenShot20230227At13637Pm = FileAttachment(\"Screen Shot 2023-02-27 at 1.36.37 PM.jpg\").image()","pinned":true,"hidden":false,"mode":"ojs"},{"id":215,"value":"md`### Precedent:\nhttp://shirleywu.studio/legends/`","pinned":true,"hidden":false,"mode":"ojs"},{"id":214,"value":"screenShot20230309At91424Pm = FileAttachment(\"Screen Shot 2023-03-09 at 9.14.24 PM.png\").image()","pinned":true,"hidden":false,"mode":"ojs"},{"id":210,"value":"md`### 3D Prototype:\nhttps://observablehq.com/d/4b2976505a029433`","pinned":true,"hidden":false,"mode":"ojs"},{"id":180,"value":"animationStatus = {\n if (animate) {return md`### animation on`}\n else {return md`### animation off`}\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":178,"value":"viewof animate = {\n let value = false;\n const button = html`