2c:null 2d:["$","title",null,{"children":"Question Why 2nd running of cell fails | Brett Cooper | Observable"}] 32:T761,text_dis = { let selected = 0 // the active quadrent let name_selected = "" // which name has expanded discription // add buttons d3.selectAll('#qButtons') .selectAll('div') .data(quadrants) .join('div') .html(d => `${d}`) .attr('id',d => `button_${d}`) .style("background-color",'#A4969B') .style('cursor', 'pointer') .on('click', d => { let it = _.replace(d.path[0].id,'button_','') d3.select(`#${name_selected}_dis`).style('display','none') name_selected = "" d3.select(`#${quadrants[selected]}`).style('display','none') d3.select(`#${it}`) .style('display', 'block') selected = quadrants.indexOf(it) }); const text = d3.select('#rtext') // should all be visabley none .selectAll('div') .data(BS) .join('div') .attr('id',(d,i) => `${quadrants[i]}`) .html((d,i) => `

${quadrants[i]}

`) .style('display', (d,i) => (i==0)?'block':'none') .selectAll("div") // populating each with blips name .data(d => d) .join('div') .html(b => `${b.name}`) .attr('id', b => `${_.camelCase(_.deburr(b.name)).replace(/\d/g,'')}`) .style('cursor', 'pointer') .on('click', e => { let it = e.path[0].id if(it==name_selected){ d3.select(`#${name_selected}_dis`).style('display','none') name_selected = "" } else { d3.select(`#${name_selected}_dis`).style('display','none') name_selected = it d3.select(`#${it}_dis`).style('display','block') } }) .append('div') .attr('id', b => `${_.camelCase(_.deburr(b.name)).replace(/\d/g,'')}_dis`) .html(b=> `${b.description}`) .style('display', 'none') }33:T468,--- ## Load in CSV Data from googlesheets *To get a [CSV file from a google docs spreedsheet.](https://stackoverflow.com/questions/33713084/download-link-for-google-spreadsheets-csv-export-with-multiple-sheets/33727897#33727897)*

https://docs.google.com/spreadsheets/d/{key}/gviz/tq?tqx=out:csv&sheet={sheet_name}

Source URL: https://docs.google.com/spreadsheets/d/18A7oDuavlh89rAmqcaXpqle8QLqIvlAkoEUxcObzuUM/edit#gid=1985253373 **sheet_name** = 1985253373 **key** = 18A7oDuavlh89rAmqcaXpqle8QLqIvlAkoEUxcObzuUM So the CSV download link is: [https://docs.google.com/spreadsheets/d/**18A7oDuavlh89rAmqcaXpqle8QLqIvlAkoEUxcObzuUM**/gviz/tq?tqx=out:csv&sheet=**1985253373**](https://docs.google.com/spreadsheets/d/18A7oDuavlh89rAmqcaXpqle8QLqIvlAkoEUxcObzuUM/gviz/tq?tqx=out:csv&sheet=1985253373) #### datum looks like this:

  Object[0] {
    name: "Container security scanning"
    quadrant: "Techniques"
    ring: "Adopt"
    isNew: "TRUE"
    description: "< p>The continued adoption of containers for deploy… that run as part of the deployment pipeline.< \p>"
  }

34:T7e3,InputSanitizer = function () { var relaxedOptions = { allowedTags: ['b', 'i', 'em', 'strong', 'a', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'li', 'ul', 'br', 'p', 'u'], allowedAttributes: { a: ['href'] } } var restrictedOptions = { allowedTags: [], allowedAttributes: {}, textFilter: function (text) { return text.replace(/&/, '&') } } function trimWhiteSpaces (blip) { var processedBlip = {} _.forOwn(blip, function (value, key) { processedBlip[key.trim()] = value.trim() }) return processedBlip } var self = {} self.sanitize = function (rawBlip) { var blip = trimWhiteSpaces(rawBlip) blip.description = sanitizeHtml(blip.description, relaxedOptions) blip.name = sanitizeHtml(blip.name, restrictedOptions) blip.isNew = sanitizeHtml(blip.isNew, restrictedOptions) blip.ring = sanitizeHtml(blip.ring, restrictedOptions) blip.quadrant = sanitizeHtml(blip.quadrant, restrictedOptions) return blip } self.sanitizeForProtectedSheet = function (rawBlip, header) { var blip = trimWhiteSpaces(rawBlip) const descriptionIndex = header.indexOf('description') const nameIndex = header.indexOf('name') const isNewIndex = header.indexOf('isNew') const quadrantIndex = header.indexOf('quadrant') const ringIndex = header.indexOf('ring') const description = descriptionIndex === -1 ? '' : blip[descriptionIndex] const name = nameIndex === -1 ? '' : blip[nameIndex] const isNew = isNewIndex === -1 ? '' : blip[isNewIndex] const ring = ringIndex === -1 ? '' : blip[ringIndex] const quadrant = quadrantIndex === -1 ? '' : blip[quadrantIndex] blip.description = sanitizeHtml(description, relaxedOptions) blip.name = sanitizeHtml(name, restrictedOptions) blip.isNew = sanitizeHtml(isNew, restrictedOptions) blip.ring = sanitizeHtml(ring, restrictedOptions) blip.quadrant = sanitizeHtml(quadrant, restrictedOptions) return blip } return self }35:[] 30:{"id":"0707c1ed8ce2d62b","slug":"question-why-2nd-running-of-cell-fails","title":"Question Why 2nd running of cell fails","thumbnail":"700518393d6b802207de862ce4ba2ca6e46a250fccd7d153b1cb6ad6aca2c6e1","access_level":"public","create_time":"$D2021-06-28T05:49:43.125Z","update_time":"$D2021-06-28T10:20:01.713Z","view_time":null,"first_public_time":"$D2021-06-28T05:57:28.110Z","has_unpublished_edits":null,"fork":{"id":"74c3f9865ad7347e","slug":"tech-radar","title":"Tech Radar","owner":{"id":"ca35562412a365ec","login":"hellonearthis","name":"Brett Cooper"}},"stars":0,"starred":false,"owner":{"type":"team","id":"ca35562412a365ec","login":"hellonearthis","name":"Brett Cooper","avatar_url":"https://avatars-next.observableusercontent.com/ee05023c4c2a9d53e29a4f85f35e35430ae16d2c4aa6a6ca791175caf667abc2","tier":"starter_2024","bio":"In New Zealand being kid of human.\n\nWe might make mistakes but we will make other things too. - \nMichael Joseph Savage"},"version":1575,"publish_version":1575,"role":null,"authored":false,"authors":[{"type":"individual","id":"71df97e2192b6fce","login":"hellonearthis","name":"Brett Cooper","avatar_url":"https://avatars-next.observableusercontent.com/ee05023c4c2a9d53e29a4f85f35e35430ae16d2c4aa6a6ca791175caf667abc2","tier":null,"bio":"In New Zealand being kid of human.\n\nWe might make mistakes but we will make other things too. - \nMichael Joseph Savage"}],"members":[{"type":"individual","id":"71df97e2192b6fce","login":"hellonearthis","name":"Brett Cooper","avatar_url":"https://avatars-next.observableusercontent.com/ee05023c4c2a9d53e29a4f85f35e35430ae16d2c4aa6a6ca791175caf667abc2","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Question Why 2nd running of cell fails","cells":[{"id":1050,"value":"---\n# Question Why 2nd running of cell fails","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":819,"value":"HTML radar, buttons and name/discription :\n

","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1278,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1282,"value":"$32","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":284,"value":"$33","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":429,"value":"GoogleSheet[0] // example element from the loaded CSV file.","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":261,"value":"GoogleSheet = await d3.csv(\"https://docs.google.com/spreadsheets/d/18A7oDuavlh89rAmqcaXpqle8QLqIvlAkoEUxcObzuUM/gviz/tq?tqx=out:csv&sheet=1985253373\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":273,"value":"** d3.csv() adds a colums element to the data loaded that contains the CSV headers.**","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":268,"value":"GoogleSheet.columns","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":385,"value":"# GoogleSheet is sanatized into \"*blips*\" ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":340,"value":"blips = _.map(GoogleSheet, new InputSanitizer().sanitize)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1387,"value":" quadrants = _.uniq(blips.map(d => d.quadrant))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1573,"value":"BS = {\n let m = []\n quadrants.forEach( q => {\n m.push([])\n })\n \n blips.forEach( b => {\n m[quadrants.indexOf(b.quadrant)].push({name:b.name, ring:b.ring, isNew:b.isNew, description:b.description, quadrant:b.quadrant})\n })\n return m\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":344,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1352,"value":"Inputs.table(blips)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":346,"value":"---\n\n# libraries","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":354,"value":"d3 = require('d3')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":361,"value":" _ = require('lodash')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":348,"value":"sanitizeHtml = require('https://bundle.run/sanitize-html@2.4.0')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":403,"value":"# custom css style cheet","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":257,"value":"style = html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W35","stdlib":"1"}} 31:"$30:body"