30:T641,attachWall = (g) => { const graffitisG = g.append('g'); //graffitisG.attr('transform', `translate(${(width-grids[0].length*cellSize.x)/2},${0})`) graffitisG.attr('transform', `translate(${20},${20})`) let rowsForCells = graffitisG.selectAll('.row-cells').data(grids).enter() .append('g') .attr('class', '.row-cells') .attr('transform', (d,i)=>`translate(${0}, ${i*cellSize.y})`) let cell = rowsForCells.selectAll('.cell').data(d=>d).enter() .append('g') .attr('class', '.cell') .attr('transform', (d,i)=>`translate(${cellSize.x*i},${0})`) .attr('fill', d=>d.color) cell.append('rect') .attr('transform', `translate(${cellMargin.left},${cellMargin.top})`) .attr('width', cellSize.x - cellMargin.left - cellMargin.right) .attr('height', cellSize.y - cellMargin.top - cellMargin.bottom) .style('fill', '#eee')//'#ECCAFF')//'#B997CC')//9775AA') .attr('opacity', 1) .style('rx', '5px') .style('ry', '5px') cell.selectAll('.row').data(d=>d.grid).enter() .append('g') .attr('class', '.row') .attr('transform', (d,i)=>`translate(${radius+cellMargin.left},${(radius*2+circleGap)*i+radius+cellMargin.left})`) .selectAll('.dot').data(d=>d).enter() .append('circle') .attr('cx', (d,i)=>i*(radius*2+circleGap)+cellPadding.left) .attr('cy', cellPadding.top) .attr('r', radius) .attr('opacity', d=>(d)?.9:.3) cell.append('text') .text(d=>d.name) .attr('transform', `translate(${0},${cellSize.y-10})`) .attr('text-anchor', 'middle') .attr('x', cellSize.x/2) return g; }31:Ta7a,wallX = { const svg = d3.select(DOM.svg(width, height)); const g = svg.append('g'); const graffitisG = svg.append('g'); const titleG = svg.append('g'); const footerG = svg.append('g').attr('transform', `translate(0,${height-40})`) footerG.append('a') .attr('transform', 'translate(20,25)') .attr('href', 'https://www.google.com') .attr('target', '_blank') .append('text') .style('font-size', '22px') .style('fill', 'white') .text('Wanna tag this wall? Contribute here!') .attr('text-decoration','underline') titleG.attr('transform', 'translate(5,42)') titleG.append('text') .style('font-size', '42px') .style('fill', 'white') .text('ECE USC Open Source - Graffiti Wall') titleG.append('text') .attr('transform', 'translate(0,25)') .style('font-size', '22px') .style('fill', 'white') .text('A project by the ECE USC Project Team') titleG.append('rect') .attr('height', 2) .attr('width', width*.75) .attr('transform', 'translate(0,35)') .attr('fill', '#9775AA') graffitisG.attr('transform', `translate(${(width-grids[0].length*cellSize.x)/2},${100})`) g.append('rect') .attr('width', width) .attr('height', height) .attr('fill', 'black')//'#582A72') let rowsForCells = graffitisG.selectAll('.row-cells').data(grids).enter() .append('g') .attr('class', '.row-cells') .attr('transform', (d,i)=>`translate(${0}, ${i*cellSize.y})`) let cell = rowsForCells.selectAll('.cell').data(d=>d).enter() .append('g') .attr('class', '.cell') .attr('transform', (d,i)=>`translate(${cellSize.x*i},${0})`) .attr('fill', d=>d.color) cell.append('rect') .attr('transform', `translate(${cellMargin.left},${cellMargin.top})`) .attr('width', cellSize.x - cellMargin.left - cellMargin.right) .attr('height', cellSize.y - cellMargin.top - cellMargin.bottom) .style('fill', '#eee')//'#ECCAFF')//'#B997CC')//9775AA') .attr('opacity', 1) .style('rx', '5px') .style('ry', '5px') cell.selectAll('.row').data(d=>d.grid).enter() .append('g') .attr('class', '.row') .attr('transform', (d,i)=>`translate(${radius+cellMargin.left},${(radius*2+circleGap)*i+radius+cellMargin.left})`) .selectAll('.dot').data(d=>d).enter() .append('circle') .attr('cx', (d,i)=>i*(radius*2+circleGap)+cellPadding.left) .attr('cy', cellPadding.top) .attr('r', radius) .attr('opacity', d=>(d)?.9:.3) cell.append('text') .text(d=>d.name) .attr('transform', `translate(${0},${cellSize.y-10})`) .attr('text-anchor', 'middle') .attr('x', cellSize.x/2) yield svg.node() }32:Td3b,tester = { let h = 300; let w = width/2; let svg = d3.select(DOM.svg(w, h)) let leftArea = html`${svg.node()}`; const textarea = html`

{
  "grid":[
    [0,0,0,0,0,0,0],
    [0,0,0,0,0,0,0],
    [0,0,0,0,0,0,0],
    [0,0,0,1,0,0,0],
    [0,0,0,0,0,0,0],
    [0,0,0,0,0,0,0],
    [0,0,0,0,0,0,0]
  ],

"color": "${d3.color(d3.schemeCategory10[Math.floor(Math.random()*10)]).rgb().toString()}",

"name":"YOUR_NAME_HERE"
}`;
    let c = html`<div style="display:grid; grid-template-columns:auto auto;">
<div>${leftArea}</div>
<div>${textarea}</div>
</div>`

textarea.style.display = "block";
  textarea.style.boxSizing = "border-box";
  textarea.style.width = "calc(100% + 28px)";
  textarea.style.font = "var(--mono_fonts)";
  textarea.style.minHeight = "60px";
  textarea.style.border = "none";
  textarea.style.padding = "4px 10px";
  textarea.style.margin = "0 -14px";
  textarea.style.background = "rgb(247,247,249)";
  textarea.style.tabSize = 2;
  textarea.onkeypress = event => {
    if (event.key !== "Enter" || event.shiftKey || event.altKey || event.metaKey || event.ctrlKey) return;
    let i = textarea.selectionStart;
    let j = textarea.selectionEnd;
    let v = textarea.value;
    if (i === j) {
      let k = 0;
      while (i > 0 && v[--i - 1] !== "\n");
      while (i < j && v[i] === " ") ++i, ++k;
      textarea.value = v.substring(0, j) + "\n" + new Array(k + 1).join(" ") + v.substring(j);
      textarea.selectionStart = textarea.selectionEnd = j + k + 1;
      textarea.dispatchEvent(new CustomEvent("input"));
      event.preventDefault();
    }
  };
  
  textarea.oninput = () => {
    textarea.style.height = "auto";
    textarea.style.height = `${textarea.scrollHeight}px`;
    svg.select('#error').remove();
    svg.select('#good').remove();
    try {
      let obj = JSON.parse(textarea.value);
      
      svg.select('#grid').remove()
      
      let cell = svg.append('g').attr('id', 'grid')
        .style('fill', obj.color)
        .attr('transform', `translate(${w/2-cellSize.x/2},${h/2-cellSize.y/2})`)
      cell.selectAll('.row').data(obj.grid).enter()
      .append('g')
      .attr('class', '.row')
      .attr('transform', (d,i)=>`translate(${radius+cellMargin.left},${(radius*2+circleGap)*i+radius+cellMargin.left})`)
      .selectAll('.dot').data(d=>d).enter()
      .append('circle')
      .attr('cx', (d,i)=>i*(radius*2+circleGap)+cellPadding.left)
      .attr('cy', cellPadding.top)
      .attr('r', radius)
      .attr('opacity', d=>(d)?.9:.3)

cell.append('text')
      .text(obj.name)
      .attr('transform', `translate(${0},${cellSize.y-10})`)
      .attr('text-anchor', 'middle')
      .attr('x', cellSize.x/2)
    
    let goodG = svg.append('g').attr('id', 'good');
      goodG.attr('text-anchor', 'middle')
      goodG.attr('transform', `translate(${w/2},${h/2+cellSize.y/2+20})`)
      goodG.append('text').text('✔️ Good to go!')
    textarea.style.background = "rgb(247,247,249)";
    }
    catch(err) {
      console.log(err);
      
      let errG = svg.append('g').attr('id', 'error');
      errG.attr('text-anchor', 'middle')
      errG.attr('transform', `translate(${w/2},${h/2+cellSize.y/2+20})`)
      errG.append('text').text('❌ Oh oh! You may have a syntax error');
      textarea.style.background = "rgb(247,200,200)";
    }

};
  
  yield c;
  textarea.oninput();
  yield c;
}33:T587,example_cell = function*(obj) {
  const w = 300;
  const h = 300;
  const svg = d3.select(DOM.svg(w, h));
  const g = svg.append("g");
  g.append("rect")
    .attr("width", w)
    .attr("height", h)
    .attr("rx", 20)
    .attr("fill", "#582A72");
  g.append("rect")
    .attr("width", cellSize.x)
    .attr("height", cellSize.y)
    .attr(
      "transform",
      `translate(${w / 2 - cellSize.x / 2},${h / 2 - cellSize.y / 2})`
    )
    .attr("fill", "#eee")
    .attr("rx", 10);

let cell = g
    .append("g")
    .attr("id", "grid")
    .style("fill", obj.color)
    .attr(
      "transform",
      `translate(${w / 2 - cellSize.x / 2},${h / 2 - cellSize.y / 2})`
    );
  cell
    .selectAll(".row")
    .data(obj.grid)
    .enter()
    .append("g")
    .attr("class", ".row")
    .attr(
      "transform",
      (d, i) =>
        `translate(${radius + cellMargin.left},${(radius * 2 + circleGap) * i +
          radius +
          cellMargin.left})`
    )
    .selectAll(".dot")
    .data(d => d)
    .enter()
    .append("circle")
    .attr("cx", (d, i) => i * (radius * 2 + circleGap) + cellPadding.left)
    .attr("cy", cellPadding.top)
    .attr("r", radius)
    .attr("opacity", d => (d ? 0.9 : 0.3));

cell
    .append("text")
    .text(obj.name)
    .attr("transform", `translate(${0},${cellSize.y - 10})`)
    .attr("text-anchor", "middle")
    .attr("x", cellSize.x / 2);
  yield svg.node();
}34:[]
2e:{"title":"Graffiti Wall","cells":[{"id":0,"value":"md`# Graffiti Wall`","pinned":false,"hidden":false,"mode":"ojs"},{"id":297,"value":"md`An open-source Graffiti Wall that anyone can tag to learn about open source. Part of the ECE USC Open Source Project Team.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":301,"value":"underConstruction()","pinned":false,"hidden":false,"mode":"ojs"},{"id":492,"value":"fromLocal = html`<input type=\"checkbox\" label=\"Retrieve data from local\"/>`","pinned":false,"hidden":false,"mode":"ojs"},{"id":497,"value":"wall = {\n  const svg = d3.select(DOM.svg(width, height));\n  const g = svg.append('g');\n  const xx = attachWall(g);\n  const div = html`\n  <div class=\"container\">\n    <div class=\"title\">\n      ECE USC Open Source - Graffiti Wall\n    </div>\n    <div class=\"sub-title\">\n      A project by the ECE USC Open Source Project Team\n    </div>\n    <div class=\"divider\"></div>\n    <div id=\"wall\">${svg.node()}</div>\n    <div class=\"footer\">\n      <a target=\"blank\" href=\"https://github.com/eceusc/graffiti-wall\">\n        Wanna tag this wall? Contribute here!\n      </a>\n    </div>\n  </div>\n${style}\n  `;\n  yield div;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":521,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":237,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":428,"value":"data = {\n  const origin = window.location.origin\n  if(origin.includes('glitch')) {\n    let tags = await fetch(`${origin}/tags`).then( r=>r.json())\n    console.log('tags', tags)\n    return Promise.all(tags.map(g=>fetch(`${origin}/tags/${g}`).then(r=>r.json())));  \n  }\n  let gs = await fetch('https://api.github.com/repos/eceusc/graffiti-wall/contents/tags?ref=master').then( r=>r.json())\n  return Promise.all(gs.map(g=>fetch(g.download_url).then(r=>r.json())));\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":431,"value":"grids = {\n  let grids = data.slice();\n  \n  let gs = [];\n  while(grids.length)\n    gs.push(grids.splice(0, Math.min(Math.floor(width/cellSize.x), grids.length) ))\n  return gs;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":409,"value":"md`## Utilities`","pinned":false,"hidden":false,"mode":"ojs"},{"id":425,"value":"testGrid = (grid) => {\n  if(!grid)\n    throw Error('Grid is not defined!');\n  if(grid.length !== 7)\n    throw Error('Grid must have 7 rows!');\n  for(let i=0; i < grid.length; i++) {\n    if(grid[i].length !== 7) {\n      throw Error(`Row ${i} must have 7 columns!`)\n    }\n  }\n  return true;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":41,"value":"randGrid = () => {\n  let ret = {}; \n  let g = [];\n  d3.range(0,7).map(d=>{\n    let g2 = [];\n    d3.range(0,7).map(d=>g2.push( (Math.random() < .5) ? 1:0 ));\n    g.push(g2);\n  })\n  ret.grid = g;\n  ret.color = d3.interpolateSinebow(Math.random());\n  ret.name = makeid()\n  return ret;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":422,"value":"function makeid() {\n  var text = \"\";\n  var possible = \"ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789\";\n\n  for (var i = 0; i < 5; i++)\n    text += possible.charAt(Math.floor(Math.random() * possible.length));\n\n  return text;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":576,"value":"example_cell(randGrid())","pinned":false,"hidden":false,"mode":"ojs"},{"id":549,"value":"$33","pinned":true,"hidden":false,"mode":"ojs"},{"id":244,"value":"md`## Viz Definitions`","pinned":false,"hidden":false,"mode":"ojs"},{"id":588,"value":"style = html`\n<style>\n.container {\n  height:${height+122}px; \n  background-color: #582A72;\n  padding: 20px;\n}\n.title {\n  font-size: 42px;\n  color: white;\n}\n.sub-title {\n  font-size: 22px;\n  color: white;\n    margin-top: 16px;\n}\n.divider {\n  height: 2px;\n  width: 75%;\n  background-color: #9775AA;\n}\n.footer {\n  margin-top:-30px;\n  font-size: 22px;\n  color: white!important;\n}\n.footer a {\n  margin-top:-30px;\n  font-size: 22px;\n  color: white!important;\n}\n\n</style>\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":132,"value":"height = grids.length*cellSize.y+100+40","pinned":false,"hidden":false,"mode":"ojs"},{"id":139,"value":"radius = 8","pinned":false,"hidden":false,"mode":"ojs"},{"id":141,"value":"circleGap = 2","pinned":false,"hidden":false,"mode":"ojs"},{"id":143,"value":"cellSize = ({\n    x: (radius*2+circleGap)*7+cellPadding.left+cellPadding.right + cellMargin.right+cellMargin.left,\n    y: (radius*2+circleGap)*7+cellPadding.top+cellPadding.bottom + cellMargin.top+cellMargin.bottom + labelSize.y,\n  })","pinned":false,"hidden":false,"mode":"ojs"},{"id":186,"value":"labelSize = ({\n  y: 15\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":159,"value":"cellPadding = ({\n  top: 4,\n  bottom:4,\n  left:4,\n  right:4\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":164,"value":"cellMargin = ({\n  top: 4,\n  bottom:4,\n  left:4,\n  right:4\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":299,"value":"import {underConstruction} from '@asg017/toolbox'","pinned":false,"hidden":false,"mode":"ojs"},{"id":3,"value":"d3 = require('d3')","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W34","stdlib":"1","titling":"auto"}
</article></body></html>