30:T878,person1 = "M74.78 78.61c-.19-.97-1.53-.2-2.27-.43-1.37-.43-2.84-.62-4.06-1.54-2.22-1.68-5.39-6.52-6.24-9.7-5.19-19.34 14.24-30.61 25.95-28.5 7.75 1.4 10.94 15.7 10.08 24.11-.26 2.69-1.09 5.23-1.67 7.83a71.2 71.2 0 01-.73 2.82c-.14.53-.68 2.06-.48 1.56 1.5-3.62 2.26-7.86 4.33-10.95.9-1.36 6.21-.74 7.21-.63 6.48.68 12.96 1.6 19.46 2.2 1.33.11 9.88-.36 11.05 1.24 1.13 1.57.13 12.79.23 14.4.64 9.23 1.96 18.35 2.65 27.56.22 2.81-.78 8.25.72 10.96.74 1.32 4.57-.45 5.05-.31 3.76 1.08 10.7 4.25 7.93 11.27-2.9 7.34-10.54 8-15.72 9.37-1.19.31-4.4 1.55-5.66.02-1.6-1.92-1.59-6.76-1.93-9.08a576.63 576.63 0 00-2.71-16.87c-1.14-6.32-.3-16.47-5.07-18.32-2.38-.92-5.67.7-7.83.75-1.19.03-5.18-1.82-6.49 0-1.13 1.58 1.9 5.85 2.1 6.28 2.84 6.07 4.72 9.8 5.48 16.98 1.69 15.93-3.95 27.4-9.02 41.56-.45 1.24-3.37 8.74-2.89 10.33.5 1.62 6.9 4.35 7.69 5 5.35 4.53 10.34 9.76 15.62 14.41 1.55 1.36 6 3.41 6.73 6.27.45 1.8-2.48 5.91-3.13 6.88-2.42 3.65-4.74 7.43-7.32 10.88-1.97 2.63-6.31 6.99-9.26 7.6-8.6 1.77-3.36-12.55-2.16-16.28 0-.04 2.72-3.95 2.16-4.7-1.34-1.83-5.84-1.76-7.44-2.2-4.43-1.2-8.8-2.74-13.22-4.06-1.16-.35-5.63-1.02-6.24-3.13-1.2-4.12 1.31-9.99 1.68-13.78.5-5.3.43-10.65.72-15.97.09-1.68 1.64-9.22-1.44-9.7-3.97-.63-4.36 1.67-8.17 2.18-3.19.44-6.4.24-9.62.32-1.03.02-2.44-1.04-3.12 0-1.21 1.86.27 8.56.49 10.33 1.17 9.6 2.22 19.2 3.36 28.8.63 5.33 1.37 10.64 1.92 15.98.17 1.65 1.07 3.73.24 5-.94 1.44-6.94.32-7.93.32-10.7.03-12.93 1.52-23.55-1.25-1.99-.52-3.52-2.83-3.36-5.54.3-5.15.86-8.1 4.34-10.29a7.9 7.9 0 013.59-1.08c1.13-.1 3.04 1.71 3.36.31.36-1.52-1.94-4.04-2.16-5-.66-2.95-.88-6.04-1.2-9.09-1.05-10.1-1.85-20.26-2.88-30.37-.14-1.34-1.47-7.23-.49-8.77 2.12-3.31 9.68-7.91 12.5-9.7 2.79-1.78 4.88-1.18 3.84-6.27-2.53-12.44-5.87-24.59-8.64-36.95-.5-2.18-1.37-10.5-2.89-12.2-1.09-1.24-6.17.64-7.2.62-6.02-.14-12.01-.97-18.02-1.26-2.8-.13-5.73 1.06-8.41 0-.9-.35 0-7.02 0-7.2-.24-5.65-.81-11.27-1.2-16.9-.18-2.4.46-5.13-.48-7.2-1.58-3.46-10.47-7.55-8.42-14.1 3.01-9.56 14.87-9.28 18.98-1.25 2.8 5.46 3.31 13.2 3.85 19.41.09 1.03-.03 7.8 1.2 8.46 1.93 1.03 4.16-.28 6.25-.32 5.12-.07 10.24-.06 15.37 0 3.21.04 12.82.32 9.61.32 2.14 9.92 5.88 17.76 14.98 18.56z"31:T6c1,person2 = "M42.48 97.64c-4.27-5-3.95-3.57-5.93-5.35l-6.13-1.47s-20.2 1.64-23.02 11.44c-1.9 6.59 1.2 14.26 8.97 15.25 4.38.56 8.78.62 13.05-.58l6.53-1.85s-3.72 1.07-5.6 1.54c-2.13.52-7.81.08-9.02 2.46-1.58 3.13 2.41 24.2 3.66 27.98.87 2.67 3.63 8.22 2.14 11.2-1.22 2.4-8.36 4.42-10.58 5.25-11.72 4.35-16.16 7.76-9.37 18 1.75 2.65 7 5.15 9.93 2.82 2.6-2.08 2.97-3.93 3.44-7.14.08-.58-.7-3.94-.6-4.04.75-.76 7 .02 8.08.02 3.87.01 14.35-1.57 17.1-4.3 1.12-1.12.32-5.1.32-6.84.02-6.53.67-14.28-.25-20.82-.2-1.47-1.17-6.9.02-8.08 1.77-1.75 7.34 3.17 8.7 3.75 9.99 4.31 21.42 7.42 30.41 13.45 4.63 3.1-4.2 9.57-6.25 12.41-6.27 8.75-14.84 16.63-22.43 24.18-2.47 2.45-4.68 7.13-7.5 9-1.48.97-3.92.02-5.9-.64-5.7-1.93-16.92-8.4-19.26.87-.33 1.27-1.1 2.96-.64 4.35 2.14 6.48 9.95 9.07 14.89 12.79 2.01 1.51 5.48 5.95 8.37 5 7.04-2.33 13.41-9.9 18.06-15.19 6.83-7.75 14-15.24 20.9-22.93 4.03-4.52 8.22-8.77 12.15-13.33 1.71-2 3.47-3.46 5.3-5.27.37-.37.93-1.24.93-1.24v1.55c-.01 3-.37 5.73-.65 8.7a187.1 187.1 0 00-.66 17.09c0 .73-.57 4.74-.02 5.28 1.1 1.12 5.96.95 7.45.96 3.84 0 17.6.23 20.2 2.85 5.37 5.4-8.32 20.8 6.47 20.84 2.42 0 3.07-.43 4.98-1.85 2.97-2.22 3.74-7.56 5.61-10.55a43.3 43.3 0 004.07-8.38c.58-1.57 6.67-12.61 5-14.28-6.45-6.5-20.3-2.98-25.45-8.15-.45-.45.01-4.16.01-4.67.02-4.97 1.17-10.55.36-15.53-1.91-11.67-9.43-25.07-15.44-35.16-8.73-14.63-23.74-23.46-38.77-29.94-5.44-2.35-11.67-4.2-17.38-5.65-1.54-.39-4.47-.12-5.6-1.26-.97-.97 1.52-6.29 1.89-7.14C58.06 68 60.99 60.4 64.4 53.62c.53-1.05 4.06-6.5 2.82-7.76-5.3-5.32-16.93-5.27-21.72-12.49-1.44-2.17 4.2-10.4.96-11.5-9.64-3.24-22.03 10.39-19 19.53 1.25 3.8 7.08 8.54 10.22 10.9.82.63 6.83 3.13 5.9 4.06-5.13 5.1-7.96 14.25-11.25 20.8-3.75 5.35-1.23 15.03 4.22 15.13"32:T472,person3 = "M23 31.82c-6.87-1.65-15.13-12.87-4.94-17.37 9.21-5.93 20.12-1.33 21.77 9.58 8.44 17 1.65 36.48 6.42 54.31 1.3 8.75 8.75 17.79 18.01 17.04-6.83-2.79-17.36-4.98-16.06-14.73.27-13.09 14.57-19.66 26.1-19.1C84.52 63.21 87.78 76.41 84.58 85c-1.12 6.61 3.5-7.15 8.25-6.07 8.15-3.5 17.36-1.83 25.88-4.29 6.96-.6 17.8-2.45 22.4 1.98-.7 12.39-1.69 24.8-4.04 37.01 7.78-.52 16.33 11.4 4.89 14.61-7.16.42-25.99 5.31-19.15-7.83 2.12-8.8 3.47-18.16 2.63-27.14-8.26-.13-20.9.54-26.09 5.65 2.43 11.9 1.22 24.11 1.75 36.15 3.98 7.58 15.9 2.58 22.96 4.16.65 10.13.53 21.5-.03 32.12 1.05 6.03-3.8 16.84-.18 20.03 8.47-.93 21.64 1.55 22.03 11.9-2.29 9.04-13.95 8.16-21.3 8.4-7 1.04-14.78 1.14-14.55-8.07-5.8-14.41-10.08-30.1-7.91-45.73-4.76-6.33-15.34-2.38-22.56-2.45-4.18.12-11.6-.03-5.19 5.09 3.68 6.62 14.22 11.26 15.03 18.15-7.42 7.6-13.7 16.22-20.75 24.1-10.94 6.63 5.72 11.56 6.95 19.3-.58 11.62-15.87 3.54-22.75 2.55-5.93-2.86-16.07-3.45-19.23-8.48 7.46-12.44 16.55-23.86 25.8-35.02 2.15-4.9-7.68-8.02-9.03-13.67-8.66-11.97-20.76-22.22-25.09-36.76-1.57-9.92-2.62-19.86-5.66-29.47-3.76-8.5-3.7-17.88-2.16-26.89.45-11.64 2.2-31.14 5.52-42.51"33:Tce0,{ const svg = d3 .create('svg') .attr("viewBox", [0,0, 1000, 800]) // TODO give the SVG a yellow background with a rect svg.append("rect") .attr("width", "100%") .attr("height", "100%") .attr("fill", "#FEF713"); const title = svg.append("text") .attr("x", 640) .attr("y", 150) .attr("text-anchor", "middle") .style("font-size", "150px") .style("font-family", "Londrina Outline") .style("font-weight", 500) .text("2019 NYE"); const ltitle1 = svg.append("text") .attr("x", 640) .attr("y", 490) .attr("text-anchor", "middle") .style("font-size", "30px") .style("font-family", "Londrina Outline") .style("font-weight", 700) //.style("fill", "#c2bc0a") .text("Minutes"); const ltitle2 = svg.append("text") .attr("x", 645) .attr("y", 300) .attr("text-anchor", "middle") .style("font-size", "30px") .style("font-family", "Londrina Outline") .style("font-weight", 700) //.style("fill", "#c2bc0a") .text("Debuted"); // make a grid to put the figures in const figures = svg .selectAll('path') .data(peopleData) .enter() .append('path') .attr('transform', (d, i) => `translate(${(i % 10) * 50 + 80},${Math.floor(i / 10) * 60 + 170})scale(0.3)`) .attr('d', d => d.personPath) .attr('stroke', 'black') .attr('stroke-linecap', 'round') .attr('stroke-width', '5') .attr('fill', d => colorScale(d.outline)) figures.append("title") .text(d => `${d.title}`); /* Annotation */ const legend = svg.append("g"); legend.selectAll("rect") .data(mylegend) .join('rect') .attr('x', 600) .attr('y', 500) .attr('width', 50) .attr('height', 20) .attr('stroke', 'black') .attr('stroke-width', '2') .attr('fill', (d,i) => colorScale(i+1)) .attr('transform', (d,i) => "translate(0," + i * 25 + ")") legend.selectAll("g") .data(mylegend) .join('text') .attr('x', 625) .attr('y', 515) .attr('transform', (d,i) => "translate(0," + i * 25 + ")") .attr("font-size", "1em") .attr("color", "black") .text(function(d){ return d;}) .attr("text-anchor", "middle") .attr("font-family", "Montserrat") const legend2 = svg.append("g"); legend2.selectAll('path') .data(mylegend2) .enter() .append('path') .attr('transform', (d, i) => `translate(${(i % 10) * 35 + 600},${Math.floor(i / 10) * 60 + 310})scale(0.2)` ) .attr('d', d => shapeFunc(d)) .attr('stroke', 'black') .attr('stroke-linecap', 'round') .attr('stroke-width', '10') .attr('fill', 'none') legend2.selectAll("g") .data(mylegend2) .join('text') .attr('x', 615) .attr('y', 370) .attr('transform', (d,i) => "translate(" + i * 35 + ",0)") .attr("font-size", "1em") //.attr("fill", "#c2bc0a") .text(function(d){ return d;}) .attr("text-anchor", "middle") .attr("font-family", "Montserrat") return svg.node(); }34:T1256,data = [{"group":"3.0","outline":1,"title":"Evening Song"},{"group":"3.0","outline":3,"title":"No Men In No Man's Land"},{"group":"1.0","outline":3,"title":"Down with Disease"},{"group":"3.0","outline":1,"title":"20-20 Vision"},{"group":"1.0","outline":3,"title":"Ghost"},{"group":"1.0","outline":2,"title":"Gumbo"},{"group":"1.0","outline":2,"title":"Rift"},{"group":"1.0","outline":2,"title":"Weigh"},{"group":"1.0","outline":1,"title":"Dog Faced Boy"},{"group":"3.0","outline":2,"title":"Twenty Years Later"},{"group":"1.0","outline":2,"title":"Tube"},{"group":"3.0","outline":2,"title":"Say It To Me S.A.N.T.O.S."},{"group":"3.0","outline":3,"title":"Everything's Right"},{"group":"3.0","outline":2,"title":"Beneath a Sea of Stars Part 1"},{"group":"3.0","outline":2,"title":"Set Your Soul Free"},{"group":"1.0","outline":2,"title":"Gotta Jibboo"},{"group":"1.0","outline":2,"title":"Free"},{"group":"1.0","outline":3,"title":"Piper"},{"group":"1.0","outline":3,"title":"Drowned"},{"group":"3.0","outline":1,"title":"Ass Handed"},{"group":"1.0","outline":1,"title":"Chalk Dust Torture Reprise"},{"group":"1.0","outline":2,"title":"Character Zero"},{"group":"3.0","outline":2,"title":"A Life Beyond The Dream"},{"group":"1.0","outline":1,"title":"Rocky Top"},{"group":"3.0","outline":2,"title":"Turtle in the Clouds"},{"group":"1.0","outline":2,"title":"The Moma Dance"},{"group":"3.0","outline":2,"title":"Kill Devil Falls"},{"group":"3.0","outline":2,"title":"Yarmouth Road"},{"group":"1.0","outline":2,"title":"The Wedge"},{"group":"3.0","outline":2,"title":"Beauty of a Broken Heart"},{"group":"3.0","outline":2,"title":"Fuego"},{"group":"1.0","outline":2,"title":"My Friend, My Friend"},{"group":"1.0","outline":2,"title":"Birds of a Feather"},{"group":"1.0","outline":2,"title":"While My Guitar Gently Weeps"},{"group":"2.0","outline":3,"title":"Walls of the Cave"},{"group":"1.0","outline":3,"title":"Carini"},{"group":"1.0","outline":2,"title":"Back on the Train"},{"group":"1.0","outline":4,"title":"Bathtub Gin"},{"group":"3.0","outline":3,"title":"Golden Age"},{"group":"1.0","outline":2,"title":"Also Sprach Zarathustra"},{"group":"1.0","outline":2,"title":"Sneakin' Sally Through the Alley"},{"group":"1.0","outline":2,"title":"Chalk Dust Torture"},{"group":"1.0","outline":4,"title":"Harry Hood"},{"group":"3.0","outline":2,"title":"Show of Life"},{"group":"1.0","outline":2,"title":"Run Like an Antelope"},{"group":"1.0","outline":1,"title":"Wilson"},{"group":"3.0","outline":2,"title":"The Final Hurrah"},{"group":"2.0","outline":2,"title":"46 Days"},{"group":"1.0","outline":2,"title":"The Ballad of Curtis Loew"},{"group":"3.0","outline":4,"title":"Blaze On"},{"group":"1.0","outline":2,"title":"Corinna"},{"group":"1.0","outline":2,"title":"Mike's Song"},{"group":"1.0","outline":2,"title":"Contact"},{"group":"1.0","outline":1,"title":"Weekapaug Groove"},{"group":"3.0","outline":2,"title":"About to Run"},{"group":"3.0","outline":2,"title":"More"},{"group":"1.0","outline":5,"title":"Tweezer"},{"outline":1,"title":"Banter (Hit With Pan)"},{"group":"3.0","outline":3,"title":"Ruby Waves"},{"group":"3.0","outline":2,"title":"Steam"},{"group":"1.0","outline":1,"title":"Tweezer"},{"group":"3.0","outline":1,"title":"Ruby Waves"},{"group":"1.0","outline":2,"title":"Slave to the Traffic Light"},{"group":"1.0","outline":2,"title":"Rock and Roll"},{"group":"3.0","outline":1,"title":"Martian Monster"},{"group":"1.0","outline":1,"title":"Buried Alive"},{"group":"1.0","outline":2,"title":"AC/DC Bag"},{"group":"1.0","outline":3,"title":"Halley's Comet"},{"group":"1.0","outline":1,"title":"Prince Caspian"},{"group":"1.0","outline":1,"title":"Sparkle"},{"group":"1.0","outline":1,"title":"Axilla"},{"outline":2,"title":"Banter (Zamfir, Master of the Pan Flute)"},{"group":"1.0","outline":2,"title":"Maze"},{"group":"1.0","outline":3,"title":"Fluffhead"},{"group":"3.0","outline":2,"title":"Rise/Come Together"},{"group":"1.0","outline":2,"title":"Punch You in the Eye"},{"group":"1.0","outline":3,"title":"Wolfman's Brother"},{"group":"3.0","outline":3,"title":"Light"},{"group":"1.0","outline":3,"title":"Twist"},{"group":"3.0","outline":2,"title":"Soul Planet"},{"group":"3.0","outline":2,"title":"Mercury"},{"group":"1.0","outline":2,"title":"Possum"},{"outline":2,"title":"Send in the Clones"},{"group":"1.0","outline":2,"title":"First Tube"},{"group":"1.0","outline":1,"title":"Auld Lang Syne"},{"group":"1.0","outline":4,"title":"Sand"},{"group":"3.0","outline":3,"title":"Drift While You're Sleeping"},{"group":"1.0","outline":2,"title":"What's the Use?"},{"group":"1.0","outline":4,"title":"You Enjoy Myself"},{"group":"1.0","outline":1,"title":"Tweezer Reprise"}] 35:[{"id":"21f33d3de2b65f107f617c85571454a18e7bd87151ee9818722272080f13e70ebf0f10e6af8dc436b2b7cbb1a6a230dad6f8e813052e97bbc5ec1eb14f09533c","href":"https://static.observableusercontent.com/files/21f33d3de2b65f107f617c85571454a18e7bd87151ee9818722272080f13e70ebf0f10e6af8dc436b2b7cbb1a6a230dad6f8e813052e97bbc5ec1eb14f09533c","name":"Screen Shot 2021-04-02 at 9.55.52 AM.png","type":"image/png","lastModified":1617395709047.147,"size":335472}] 2e:{"title":"Day 2: Pictograms","cells":[{"id":0,"value":"md`# Day 2: Pictograms\n\nTrying to channel my inner Shirley Wu (https://observablehq.com/@mayagans/shirly-wu-x-coding-train-flower-tutorial)\n\nBut first I need to learn A LOT more about SVGs. TODO:\n\n1. ✔️ Create pictograms and body class to use for fill. I reduced these two a single path with a combination of Inkscape and OMGSVG! \n2. ✔️ Place pictograms in a grid using shape and color corresponding to data\n3. ✔️ Create a shape legend and color legend -- there's probably a neater way of doing this but whatever!`","pinned":false,"hidden":false,"mode":"ojs"},{"id":337,"value":"md `# Shapes!`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2,"value":"html ``","pinned":true,"hidden":false,"mode":"ojs"},{"id":233,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":107,"value":"html ``","pinned":true,"hidden":false,"mode":"ojs"},{"id":157,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":115,"value":"html ``","pinned":true,"hidden":false,"mode":"ojs"},{"id":164,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":340,"value":"md `# Plot!`","pinned":false,"hidden":false,"mode":"ojs"},{"id":137,"value":"$33","pinned":true,"hidden":false,"mode":"ojs"},{"id":495,"value":"mylegend = [\"<5\",\"5-10\",\"10-15\",\"15-20\", \"20+\"]","pinned":true,"hidden":false,"mode":"ojs"},{"id":565,"value":"mylegend2 = [\"1.0\", \"2.0\", \"3.0\"]","pinned":true,"hidden":false,"mode":"ojs"},{"id":355,"value":"// 0-5\n// 5-10\n// 10-15\n// 15-20\n// 20+\ncolorScale = d3.scaleOrdinal([\"#F37C14\", \"#29A9E6\", \"#E7325B\", \"#8DD77E\", \"#BD6CC5\"])","pinned":true,"hidden":false,"mode":"ojs"},{"id":371,"value":"md `# Data Cleanup`","pinned":false,"hidden":false,"mode":"ojs"},{"id":128,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":150,"value":"function shapeFunc(x) {\n if (x === \"1.0\") return person1\n else if (x === \"2.0\") return person2\n return person3\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":476,"value":"html ``","pinned":true,"hidden":false,"mode":"ojs"},{"id":169,"value":"peopleData = data.map(d => { \n const personPath = shapeFunc(d.group)\n return {\n personPath,\n outline: d.outline,\n title: d.title\n }\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":374,"value":"md `# Appendix`","pinned":false,"hidden":false,"mode":"ojs"},{"id":140,"value":"d3 = require('d3')","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W35","stdlib":"1","titling":"auto"}