31: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 }32:[{"id":"911d141e556c4d4d0646a8a8f8da6015d3baa514ae038d93e776bdcbce6c34d9b01d193d77064d9968c30802e536575ba87c9bf32e0022b426c496fe2a414835","href":"https://static.observableusercontent.com/files/911d141e556c4d4d0646a8a8f8da6015d3baa514ae038d93e776bdcbce6c34d9b01d193d77064d9968c30802e536575ba87c9bf32e0022b426c496fe2a414835","name":"movies (1).json","type":"application/json","lastModified":1661458650299.069,"size":140458}] 2f:{"title":"Workshop Utility Functions","cells":[{"id":0,"value":"md`# Workshop Utility Functions`","pinned":false,"hidden":false,"mode":"ojs"},{"id":68,"value":"md`\n## Slides\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":70,"value":"import {slide} from \"@mbostock/slide\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":72,"value":"slide_style = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":58,"value":"md`\n## Bar chart example\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":61,"value":"barData = [45, 67, 96, 84, 41]","pinned":false,"hidden":false,"mode":"ojs"},{"id":50,"value":"md`\n## Mapping data to channels\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"topGenres = [\"Action\", \"Comedy\", \"Animation\", \"Drama\"]","pinned":true,"hidden":false,"mode":"ojs"},{"id":4,"value":"petalColors = ['#ffc8f0', '#cbf2bd', '#afe9ff', '#ffb09e']","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"id":26,"value":"rated = ['G', 'PG', 'PG-13', 'R']","pinned":true,"hidden":false,"mode":"ojs"},{"id":6,"value":"petalPaths = [\n 'M0 0 C50 50 50 100 0 100 C-50 100 -50 50 0 0',\n 'M-35 0 C-25 25 25 25 35 0 C50 25 25 75 0 100 C-25 75 -50 25 -35 0',\n window.localStorage.petalPath || '\"M0,0 C50,40 50,70 20,100 L0,85 L-20,100 C-50,70 -50,40 0,0\"',\n 'M0 0 C50 25 50 75 0 100 C-50 75 -50 25 0 0',\n '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'\n]","pinned":true,"hidden":false,"mode":"ojs"},{"id":28,"value":"pathObj = _.zipObject(rated, petalPaths)","pinned":true,"hidden":false,"mode":"ojs"},{"id":39,"value":"pathColors = ['#46e276', '#6e94e7', '#b877e9', '#f25d75']","pinned":true,"hidden":false,"mode":"ojs"},{"id":53,"value":"md `\n## Showing SVG transforms\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":35,"value":"scrollSVG = (svg) => {\n return html`

${svg}

`\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":92,"value":"pathWidth = 120","pinned":true,"hidden":false,"mode":"ojs"},{"id":95,"value":"perRow = Math.floor(width / pathWidth)","pinned":true,"hidden":false,"mode":"ojs"},{"id":84,"value":"svgHeight = (Math.ceil(movies.length / perRow) + 0.5) * pathWidth","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"id":42,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":44,"value":"textWidth = 640","pinned":true,"hidden":false,"mode":"ojs"},{"id":65,"value":"md`\n## Appendix\n`","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"id":14,"value":"d3 = require('d3')","pinned":true,"hidden":false,"mode":"ojs"},{"id":18,"value":"_ = require('lodash')","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}