2b:null 2c:["$","title",null,{"children":"hexagon dataViz | E. Kerney | Observable"}] 31:T876,hexNew = { const p = [(600/2),(400/2)] //basePosition const i = [35,80] // hexcoords const hexGridData = hexGrid2.map((d,i) => [...d, filterData[i]]) const getHexagraphSummary = (data) => { let s = {HIGH: [], MED:[], LOW: []}; data.forEach(d => { d[2] === 200 ? s.HIGH.push(d[2]) : d[2] === 50 ? s.MED.push(d[2]) : s.LOW.push(d[2]) }) return {HIGH: `% score 200 - ${s.HIGH.length}`, MED: `% score 50 - ${s.MED.length}`, LOW: `% score 50 - ${s.LOW.length}` }; // return sums } console.log(getHexagraphSummary(hexGridData)); const hexColors = {5: "rgba(0, 224, 135, 0.7)", 50: "rgba(0, 168, 224, 0.8)", 200: "rgba(135, 0, 224, 0.9)"} const hexPos = (d) => [(p[0]+d[0]),(p[1]+d[1])] const coords = [[i[0], i[1]],[i[0]-i[0], (i[1]*.75)],[(i[0]-i[0]), (i[1]*.25)], [i[0], (i[1]-i[1])],[i[0]*2, i[1]*.25], [i[0]*2, i[1]*.75]] const svg = d3.create("svg") .attr('width', 580) .attr('height', 460) svg.selectAll('path') .data(hexGridData) .join( enter => { enter.append('path') .transition() .duration(1000) .attr('transform', (d, i) => `translate(${hexPos(d)})`) .attr('d', `M${coords.join("L")}Z`) .attr('fill', d => hexColors[d[2]] || "rgba(0, 224, 135, 0.7)") .attr('stroke', 'white') .attr('stroke-width', 2) .transition() .attr('coords', d => d) svg.append("text") .attr("x", (width / 2)) .attr("y", 35) .style("font-size", "10px") .transition() .duration(2000) .attr("text-anchor", "middle") .style("font-size", "22px") .attr("font-family", "palatino linotype") .text("Michigan Regions Covid Data") }, update => update .transition() .duration(5000) .attr('d', function(d) { return d; }) .selection(), exit => exit .transition().duration(2000) .selection(), ) //console.log(svg.node()) return svg.node() }32:Tce0,hexNew2 = { const p = [(600/2),(400/2)] //basePosition const i = [35,80] // hexcoords const hexGridData = filDat2; const hexColors = {5: "rgba(0, 224, 135, 0.4)", 50: "rgba(0, 168, 224, 0.8)", 200: "rgba(135, 0, 224, 0.9)"} const hexPos = (d) => [(p[0]+d[0]),(p[1]+d[1])] const coords = [[i[0], i[1]],[i[0]-i[0], (i[1]*.75)],[(i[0]-i[0]), (i[1]*.25)], [i[0], (i[1]-i[1])],[i[0]*2, i[1]*.25], [i[0]*2, i[1]*.75]]; const coordsInit = [[i[0]+10, i[1]-10],[i[0]-i[0]+10, (i[1]*.75)-10],[(i[0]-i[0]+10), (i[1]*.25)-10], [i[0], (i[1]-i[1])],[i[0]*2, i[1]*.25], [i[0]*2, i[1]*.75]]; const element = this || scrollSVG(html``) const svg = d3.select(element).select('svg') const t = svg.transition().duration(1000) const g = svg.selectAll('g') .data(hexGridData, d => d.id) .join( enter => { const g = enter.append('g') .attr('opacity', 0) // .attr('faksdsde', d => console.log(d)) .attr('transform', (d, i) => `translate(${hexPos(d.translate)})`) g.selectAll('svg') .data(hexGridData, d => d) .attr('faksdsde', d => console.log('fakeski')) //.attr('faksdsde', d => console.log(d)) .join('path') .attr('opacity', 0.3) .attr('d', `M${coords.join("L")}Z`) .attr('fill', d => hexColors[d.score] || "rgba(0, 224, 135, 0.3)") .attr('fill-opacity', 0.5) //.attr('transform', (d, i) => `translate(${hexPos(d.translate)})`) .attr('stroke', 'white') .attr('stroke-width', 2) .transition(t) //.attr('transform', (d, i) => `translate(${hexPos(d.coords)})`) //.attr('d', `M${coords.join("L")}Z`) //.attr('fill', d => hexColors[d.score] || "rgba(0, 224, 135, 0.3)") console.log('enter') svg.append("text") .attr("x", (width / 2)) .attr("y", 35) .style("font-size", "4px") .transition() .duration(2000) .attr("text-anchor", "bottom") .style("font-size", "22px") .attr("font-family", "palatino linotype") .text("Michigan Regions Covid Data") g.append('text') .attr('text-anchor', 'middle') .attr('dy', '0') .style('font-size', '.7em') .style('font-style', 'italic') //.attr('transform', (d, i) => `translate(${hexPos(d.coords)})`) .text(d => d.score) // .text(d => _.truncate(d.title, {length: 20})) return g }, update => update, exit => { exit.transition(t) .attr('opacity', 0) .remove() console.log('exit') } ) g.transition(t) // // // after the flowers have been entered, animate its opacity to 1 .attr('opacity', 0.5) .attr('test', d => console.log(d)) // .attr('d', `M${coordsInit.join("L")}Z`) .attr('transform', (d, i) => `translate(${hexPos(d.coords)})`) //return element }33:T839,hexNew3 = { const rectWidth = 40 const svgHeight = 460 const svg = html`` const code = html`

`
  const button = html``
  const p = [(600/2),(400/2)] //basePosition
  const i = [35,80] // hexcoords
  const hexGridData = filDat2;
  const hexColors = {5: "rgba(0, 224, 135, 0.4)", 50: "rgba(0, 168, 224, 0.8)", 200: "rgba(135, 0, 224, 0.9)"}
  const hexPos = (d) => [(p[0]+d[0]),(p[1]+d[1])]
  const coords = [[i[0], i[1]],[i[0]-i[0], (i[1]*.75)],[(i[0]-i[0]), (i[1]*.25)],
                    [i[0], (i[1]-i[1])],[i[0]*2, i[1]*.25], [i[0]*2, i[1]*.75]]
  const coordsInit = [[i[0]+10, i[1]-10],[i[0]-i[0]+10, (i[1]*.75)-10],[(i[0]-i[0]+10), (i[1]*.25)-10],
                    [i[0], (i[1]-i[1])],[i[0]*2, i[1]*.25], [i[0]*2, i[1]*.75]]
  
  function updateBars() {
    // select svg so that transition can be localized within selection
    const t = d3.select(svg).transition().duration(1000)
    const rect = d3.select(svg)
      .selectAll('path')
      .data(hexGridData, d => d)
      .join(
        enter => {
          const rect = enter.append('path')
              //.attr('fill-opacity', 0.5)  
              .attr('fill', d => hexColors[d.score] || "rgba(0, 224, 135, 0.3)")    
              .attr('stroke', 'white')
              .attr('stroke-width', 2)
              .attr('d', `M${coordsInit.join("L")}Z`) 
              .attr('transform', (d, i) => `translate(${hexPos(d.translate)})`)
          return rect
        },
        update => update,
        exit => {
          exit.transition(t)
             .attr('transform', (d, i) => `translate(${hexPos(d.translate)})`) 
             .attr('d', `M${coordsInit.join("L")}Z`) 
            .remove()
        },
      )
      // animate enter + update selection
      .attr('transform', (d, i) => `translate(${hexPos(d.translate)})`) 
      .transition(t) 
      .attr('d', `M${coords.join("L")}Z`) 
      .attr('transform', (d, i) => `translate(${hexPos(d.coords)})`) 
      
    }
  // updateBars()
  //   return html`
  //   ${svg}

  // `
}  
34:T463,hexGrid = [[0,0],[(i[0]*2),0],[i[0],(-i[1]*.75)],[-i[0], (-i[1]*.75)],[-i[0]*2,0],[-i[0],(i[1]*.75)],[i[0],(i[1]*.75)],
  [i[0]*3,(i[1]*.75)],[i[0]*4,(0)],[i[0]*3,(-i[1])*.75],[i[0]*2,(-i[1])*1.5],[0,(-i[1])*1.5],[-i[0]*2,(-i[1])*1.5],
  [-i[0]*3,(-i[1])*.75],[-i[0]*4,(0)],[-i[0]*3,(i[1]*.75)],[-i[0]*2,(i[1]*1.5)],[(0),(i[1]*1.5)],
          [i[0]*2,(i[1]*1.5)],
                   [i[0]*5,(i[1]*.75)],
                   [i[0]*5,(-i[1]*.75)],
                   [-i[0]*5,(-i[1]*.75)],
                   [-i[0]*5,(i[1]*.75)],
                   [i[0]*6,(0)],
                   [-i[0]*6,(0)],
                   [i[0],(-i[1]*2.25)],
                   [-i[0],(-i[1]*2.25)],
                   [i[0],(i[1]*2.25)],
                   [-i[0],(i[1]*2.25)],
                   [-i[0]*3,(-i[1]*2.25)],
                   [i[0]*4,(-i[1]*1.5)],
                   [i[0]*4,(i[1]*1.5)],
                   [i[0]*3,(i[1]*2.25)],
                   [i[0]*3,(-i[1]*2.25)],
                   [-i[0]*4,(-i[1]*1.5)],
                   [-i[0]*4,(i[1]*1.5)],
                   [-i[0]*3,(i[1]*2.25)],                  
                ]35:[{"id":"137564d1f3c7d94191e584f8d2138265065fa52f1cef94094ddf350e4ec020c557efd55cfc6cff1c4549d57d55b8691045c57a862a99fc7d29602af8d77e226c","href":"https://static.observableusercontent.com/files/137564d1f3c7d94191e584f8d2138265065fa52f1cef94094ddf350e4ec020c557efd55cfc6cff1c4549d57d55b8691045c57a862a99fc7d29602af8d77e226c","name":"testSurfaceAPI.geojson","type":"application/geo+json","lastModified":1676911533702.533,"size":39358815}]
2f:{"id":"852b91e4adfaad2b","slug":null,"title":"hexagon dataViz","thumbnail":"3e4d9c27bd91e06c711569c1d333bf51ca7ab7b0a2a340a0b89f8c51cd9b9fd8","access_level":"public","create_time":"$D2023-02-19T14:15:21.124Z","update_time":"$D2023-03-03T01:18:44.067Z","view_time":null,"first_public_time":"$D2023-02-19T14:15:21.124Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"6773b9d940faa10e","login":"location-artistry","name":"E. Kerney","avatar_url":"https://avatars-next.observableusercontent.com/6a41b9491e318e4761cdb6210d6adb0880ed593495f2090cabed95169e3165f2","tier":"starter_2024"},"version":2012,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"06ed914427a4c051","login":"location-artistry","name":"E. Kerney","avatar_url":"https://avatars-next.observableusercontent.com/6a41b9491e318e4761cdb6210d6adb0880ed593495f2090cabed95169e3165f2","tier":null}],"members":[{"type":"individual","id":"06ed914427a4c051","login":"location-artistry","name":"E. Kerney","avatar_url":"https://avatars-next.observableusercontent.com/6a41b9491e318e4761cdb6210d6adb0880ed593495f2090cabed95169e3165f2","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"hexagon dataViz","cells":[{"id":0,"value":"# hexagon dataViz","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":5,"value":"html`` ","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"html`\n\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"html`\n\n100px\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"petalPath = `\nM 0 0\nC 50 55 40 90 0 100\nC -40 90 -50 55 0 0`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"{\n  \n  const rectWidth = 50, barData = [45, 67, 96, 84, 41]\n  const svg = html`\n    \n  `\n  d3.select(svg).selectAll('rect')\n    .data(barData).enter().append('rect')\n    // calculate x-position based on its index\n    .attr('x', (d, i) => i * rectWidth)\n    // set height based on the bound datum\n    .attr('height', d => d)\n    // rest of attributes are constant values\n    .attr('width', rectWidth)\n    .attr('stroke-width', 3)\n    .attr('stroke', 'plum')\n    .attr('fill', 'pink')\n  \n  return svg\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":30,"value":"html`` ","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":40,"value":"coords = ['300,150 225,280 75,280 0,150 75,20 225,20']","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":63,"value":"function drawPoly1(coords, ctx) {\n  d3.select(ctx)\n    .append(\"path\")\n    .attr(\"d\", `M${coords.join(\"L\")}Z`)\n    .attr(\"fill\", \"rgb(200,100,50)\")\n    .attr(\"stroke\", \"black\")\n    .attr(\"stroke-width\", 0.5);\n  return ctx;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":65,"value":"drawPoly1(polyCoords, svgContext())","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":79,"value":"c = [300,150]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":77,"value":"drawPoly1([\n  [c[0],c[1]], [c[0]-75,c[1]+130], [c[0]-225,c[1]+130],\n  [c[0]-300,c[1]], [c[0]-225,c[1]-130], [c[0]-75,c[1]-130]\n          ], svgContext())","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":72,"value":"polyCoords = [[300,150], [225,280], [75,280], [0,150], [75,20], [225,20]]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":95,"value":"i = [35, 80]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":137,"value":"drawPoly1([\n  [i[0], i[1]], \n  [i[0]-i[0], (i[1]*.75)], \n  [(i[0]-i[0]), (i[1]*.25)],\n  [i[0], (i[1]-i[1])], \n  [i[0]*2, i[1]*.25], \n  [i[0]*2, i[1]*.75]\n  ], \n          svgContext())","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":67,"value":"function svgContext() {\n  return DOM.svg(width, height);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":122,"value":"height = width / 6","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":273,"value":"hex = {\n  const p = [(600/2),(500/2)] //basePosition\n  const i = [35,80] // hexcoords\n  const hexGridData = hexGrid.map((d,i) => [...d, data[i]])\n  const hexColors = {5: 'green', 50: 'blue', 200: 'purple'}\n  const hexPos = (d) => [(p[0]+d[0]),(p[1]+d[1])]\n\n  const coords = [[i[0], i[1]],[i[0]-i[0], (i[1]*.75)],[(i[0]-i[0]), (i[1]*.25)],\n                  [i[0], (i[1]-i[1])],[i[0]*2, i[1]*.25], [i[0]*2, i[1]*.75]]\n  \n  const svg = d3.create(\"svg\")\n    .attr('width', 600)\n    .attr('height', 520) \n  const hexes = svg.selectAll('path')\n    .data(hexGridData)\n    .enter()\n    .append('path')\n    .transition()\n    .duration(3000)\n    .attr('transform', (d, i) => `translate(${hexPos(d)})`)\n    .attr('d', `M${coords.join(\"L\")}Z`)\n    .attr('fill', d => hexColors[d[2]] || 'green')\n    .attr('stroke', 'white')\n    .attr('fill-opacity', 0.7)\n    .attr('stroke-width', 2)\n  //return svg.node()\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":570,"value":"data = {\n  let s = [0,0,0]\n  const hexF = 100/37, len = testsurfaceapi.features.length\n  testsurfaceapi.features.forEach(d => {\n    d.properties.SCORE === 200 ? (s[0]=s[0]+1) :\n      (d.properties.SCORE === 50 ? (s[1]=s[1]+1) : (s[2]=s[2]+1))\n  })\n  const hexPer = [Math.round((s[0]/len*100)/hexF),Math.round((s[1]/len*100)/hexF),Math.round((s[2]/len*100)/hexF)]\n  const hexTypes = Array().concat(Array(hexPer[0]).fill(200))\n             .concat(Array(hexPer[1]).fill(50))\n             .concat(Array(hexPer[2]).fill(5))\n  return hexTypes\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":821,"value":"hexGrid2 = [[0,0],[(i[0]*2),0],[i[0],(-i[1]*.75)],[-i[0], (-i[1]*.75)],[-i[0]*2,0],[-i[0],(i[1]*.75)],\n[i[0],(i[1]*.75)],[i[0]*3,(i[1]*.75)],[i[0]*4,(0)],[i[0]*3,(-i[1])*.75],[i[0]*2,(-i[1])*1.5],\n[0,(-i[1])*1.5],[-i[0]*2,(-i[1])*1.5],[-i[0]*3,(-i[1])*.75],[-i[0]*4,(0)],[-i[0]*3,(i[1]*.75)],\n[-i[0]*2,(i[1]*1.5)],[(0),(i[1]*1.5)],[i[0]*2,(i[1]*1.5)],[i[0]*5,(i[1]*.75)],[i[0]*5,(-i[1]*.75)],\n[-i[0]*5,(-i[1]*.75)],[-i[0]*5,(i[1]*.75)],[i[0]*6,(0)],[-i[0]*6,(0)],[i[0],(-i[1]*2.25)],\n[-i[0],(-i[1]*2.25)],[i[0],(i[1]*2.25)],[-i[0],(i[1]*2.25)],[-i[0]*3,(-i[1]*2.25)],\n[i[0]*4,(-i[1]*1.5)],[i[0]*4,(i[1]*1.5)],[i[0]*3,(i[1]*2.25)],[i[0]*3,(-i[1]*2.25)],\n[-i[0]*4,(-i[1]*1.5)],[-i[0]*4,(i[1]*1.5)],[-i[0]*3,(i[1]*2.25)],];","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":887,"value":"filterData = {\n  return data.map((d,i) => {\n    let z;\n    i <= 3 \n      ? z = 200 \n      : (i === 4 ? z = filter \n      : z=d\n         )\n    return z\n  })\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1196,"value":"filDat = {\n  return data.map((d,i) => {\n    //console.log(d);\n    let z;\n    i <= 3 \n      ? z = {coords: hexGrid2[i], score: 200, translate: [hexGrid2[i][0]+i, hexGrid2[i][1]-i]}\n      : (i === 4 ? z = {coords: hexGrid2[i], score: filter, translate: [hexGrid2[i][0]+i, hexGrid2[i][1]-i]} \n      : z = {coords: hexGrid2[i], score: d, translate: [hexGrid2[i][0]+i, hexGrid2[i][1]-i]} )\n        return z\n  })\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1949,"value":"red = {\n  let summary = {HIGH: [], MED:[], LOW: []}\n  data.forEach(d => {\n    d === 200 ? summary.HIGH.push(d) \n      : d === 50 ? summary.MED.push(d)\n      : summary.LOW.push(d)\n  })\n  return summary\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":792,"value":"$31","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1406,"value":"filDat2 = {\n  return hexGrid2.map((d,i) => {\n    let z;\n    i <= 3 \n      ? z = {coords: hexGrid2[i], score: 200, translate: [hexGrid2[i][0]+i, hexGrid2[i][1]-i], id: i}\n      : (i === 4 ? z = {coords: hexGrid2[i], score: filter, translate: [hexGrid2[i][0]+i, hexGrid2[i][1]-i], id: i} \n      : z = { coords: hexGrid2[i], score: data[i], translate: [hexGrid2[i][0]+i, hexGrid2[i][1]-i], id: i } )\n        return z\n  })\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":881,"value":"viewof filter = Inputs.radio([5, 50, 200], {label: \"Score\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":947,"value":"$32","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1588,"value":"$33","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1029,"value":"_.times(10)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1027,"value":"_ = require('lodash')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":971,"value":"svgHeight","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":689,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":236,"value":"pointyHex = {\n  const i = [35,80]\n  const coords = [[i[0], i[1]],[i[0]-i[0], (i[1]*.75)],[(i[0]-i[0]), (i[1]*.25)],[i[0], (i[1]-i[1])],[i[0]*2, i[1]*.25], [i[0]*2, i[1]*.75]]\n  const svgContext = DOM.svg(width, height)\n  d3.select(svgContext)\n    .append(\"path\")\n    .attr(\"d\", `M${coords.join(\"L\")}Z`)\n    .attr(\"fill\", \"rgb(200,100,50)\")\n    .attr(\"stroke\", \"black\")\n    .attr(\"stroke-width\", 0.5);   \n  return svgContext;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":564,"value":"md`## Appendices`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":957,"value":"import {\n  movies, slide, slide_style, topGenres, rated,\n  svgHeight, scrollSVG, barData,\n} from '@sxywu/workshop-utility-functions'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":568,"value":"testsurfaceapi = FileAttachment(\"testSurfaceAPI.geojson\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":727,"value":"// testsurfaceapi.features.filter(d => d.properties.SCORE === 200)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":741,"value":"200/testsurfaceapi.features.length","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W35","stdlib":"1","titling":"auto"}}
30:"$2f:body"