36:["$","title",null,{"children":"Workshop Utility Functions | DigitalGnome | Observable"}] 3e:T833,transformSVG = (positions, transform1, transform2) => { const margin = {left: 30, top: 15} const el = html` ` // helpers const xAxis = d3.axisTop() .scale(d3.scaleLinear().domain([0, textWidth]).range([0, textWidth])) .tickSizeInner(-textWidth / 2) .tickSizeOuter(0) .ticks(4) const yAxis = d3.axisLeft() .scale(d3.scaleLinear().domain([0, textWidth / 2]).range([0, textWidth / 2])) .tickSizeInner(-textWidth) .tickSizeOuter(0) .ticks(4) // rendering const svg = d3.select(el) svg.selectAll('.x.axis').call(xAxis) svg.selectAll('.y.axis').call(yAxis) svg.selectAll('.axis').selectAll('line') .attr('stroke-dasharray', '5 2') .attr('opacity', 0.5) svg.selectAll('.axis').selectAll('text') .style('font-size', '1.2em') // translated elements svg.select('#transform1').selectAll('line, path') .attr('stroke', pathColors[1]).attr('stroke-width', 2) svg.select('#transform1').selectAll('text') .attr('fill', pathColors[1]) .style('font-weight', 'bold') if (transform2) { svg.select('#transform2').selectAll('line, path') .attr('stroke', pathColors[2]).attr('stroke-width', 2) svg.select('#transform2').selectAll('text') .attr('fill', pathColors[2]) .style('font-weight', 'bold') } return el }3f:[{"id":"911d141e556c4d4d0646a8a8f8da6015d3baa514ae038d93e776bdcbce6c34d9b01d193d77064d9968c30802e536575ba87c9bf32e0022b426c496fe2a414835","href":"https://static.observableusercontent.com/files/911d141e556c4d4d0646a8a8f8da6015d3baa514ae038d93e776bdcbce6c34d9b01d193d77064d9968c30802e536575ba87c9bf32e0022b426c496fe2a414835","name":"movies (1).json","type":"application/json","lastModified":1597654195448.226,"size":140458}] 3a:{"id":"784fcefd04314f00","slug":"workshop-utility-functions/2","title":"Workshop Utility Functions","thumbnail":"d8b3053008172a69c032317255c6b6a8bda57518ea852a6c989e826abfe98d74","access_level":"public","create_time":"$D2020-08-17T08:49:55.448Z","update_time":"$D2020-08-17T22:07:11.763Z","view_time":null,"first_public_time":"$D2020-08-17T20:19:16.722Z","has_unpublished_edits":null,"fork":{"id":"dfec1888dbd5b638","slug":"workshop-utility-functions","title":"Workshop Utility Functions","owner":{"id":"f88c6c44198ab93e","login":"digitalgnome","name":"DigitalGnome"}},"stars":0,"starred":false,"owner":{"type":"team","id":"f88c6c44198ab93e","login":"digitalgnome","name":"DigitalGnome","avatar_url":"https://avatars-next.observableusercontent.com/4434d03e27bee366bd28900eb160aa3aecbab2d120b982e9eedb84b782bada7b","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":224,"publish_version":224,"role":null,"authored":false,"authors":[{"type":"individual","id":"81fbdfcddca11d4d","login":"digitalgnome","name":"DigitalGnome","avatar_url":"https://avatars-next.observableusercontent.com/4434d03e27bee366bd28900eb160aa3aecbab2d120b982e9eedb84b782bada7b","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"81fbdfcddca11d4d","login":"digitalgnome","name":"DigitalGnome","avatar_url":"https://avatars-next.observableusercontent.com/4434d03e27bee366bd28900eb160aa3aecbab2d120b982e9eedb84b782bada7b","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Workshop Utility Functions","cells":[{"id":0,"value":"md`# Workshop Utility Functions`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":68,"value":"md`\n## Slides\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":70,"value":"import {slide} from \"@mbostock/slide\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":72,"value":"slide_style = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":58,"value":"md`\n## Bar chart example\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":61,"value":"barData = [45, 67, 96, 84, 41]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":50,"value":"md`\n## Mapping data to channels\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"topGenres = [\"Action\", \"Comedy\", \"Animation\", \"Drama\"]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"petalColors = ['#bbadff', '#cbf2bd', '#afe9ff', '#ffb09e']","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"colorObj = {\n const colors = _.zipObject(topGenres, petalColors)\n colors.Other = '#FFF2B4'\n \n return colors\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"rated = ['G', 'PG', 'PG-13', 'R']","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"petalPaths = [\n petalPathFire,\n petalMidVeinPath,\n window.localStorage.petalPath || petalPathTulip,\n pathPetalBackup1\n]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":203,"value":"pathPetalBackup1 = 'M0,0 C50,40 50,70 20,100 L0,85 L-20,100 C-50,70 -50,40 0,0'","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":211,"value":"petalPathBackup2 = 'M-35,0 C-25,25 25,25 35,0 C50,25 25,75 0,100 C-25,75 -50,25 -35,0'","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":201,"value":"petalPathFire = 'M0,85 L-20,100 C-55,70, -40,50, -30,40 L-20,60 C-35,20 -10,25 0,0 M0,85 L20,100 C55,70 40,50 30,40 L20,60 C35,20 10,25 0,0'","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":198,"value":"petalMidVeinPath = 'M0,0 C-10,45 -35,65 0,100 M0,0 C20,15 40,55 0,100 M0,100 C-5,80 15,30 0,0 C15,30 -5,80 0,100'","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":176,"value":"petalPathTulip = 'M0,0 C-1,15 -15,30 -10,60 C-10,65 -20,10 -25,10 C-16,30 -65,95 -15,100 C-15,100 0,75 15,100 C65,95 16,30 25,10 C25,10 20,10 10,60 C15,30 1,15 0,0'","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":168,"value":"localStorage.setItem('petalPath', petalPathTulip)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":171,"value":"console.log(localStorage.getItem('petalPath'))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":28,"value":"pathObj = _.zipObject(rated, petalPaths)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":39,"value":"pathColors = ['#46e276', '#6e94e7', '#b877e9', '#f25d75']","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":53,"value":"md `\n## Showing SVG transforms\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":35,"value":"scrollSVG = (svg) => {\n return html`

${svg}

`\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":92,"value":"pathWidth = 120","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":95,"value":"perRow = Math.floor(width / pathWidth)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":84,"value":"svgHeight = (Math.ceil(movies.length / perRow) + 0.5) * pathWidth","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":82,"value":"calculateGridPos = (i) => {\n return [(i % perRow + 0.5) * pathWidth, (Math.floor(i / perRow) + 0.5) * pathWidth]\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":37,"value":"transformCode = (positions, transform1, transform2) => {\n return html`\n \n <rect x=${positions.x} y=${positions.y} />\n \n\n

<rect x=${positions.x} y=${positions.y}\n      transform='${transform1}' />

\n\n${transform2 ? \n`

<rect x=${positions.x} y=${positions.y}\n      transform='${transform2}' />

`\n : ''\n }\n `\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":42,"value":"$3e","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":44,"value":"textWidth = 640","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":65,"value":"md`\n## Appendix\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":78,"value":"movies = FileAttachment(\"movies (1).json\").json()\n .then(data => {\n return _.chain(data)\n .map(d => {\n return {\n title: d.Title,\n released: new Date(d.Released),\n genres: d.Genre.split(', '),\n rating: +d.imdbRating,\n votes: +(d.imdbVotes.replace(/,/g, '')),\n rated: d.Rated,\n } \n }).sortBy(d => -d.released).value()\n })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"d3 = require('d3')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"_ = require('lodash')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W3f","stdlib":"1"}} 35:null