25:["$","title",null,{"children":"Workshop Utility Functions | segundev | Observable"}] 49: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 }4a:[{"id":"911d141e556c4d4d0646a8a8f8da6015d3baa514ae038d93e776bdcbce6c34d9b01d193d77064d9968c30802e536575ba87c9bf32e0022b426c496fe2a414835","href":"https://static.observableusercontent.com/files/911d141e556c4d4d0646a8a8f8da6015d3baa514ae038d93e776bdcbce6c34d9b01d193d77064d9968c30802e536575ba87c9bf32e0022b426c496fe2a414835","name":"movies (1).json","type":"application/json","lastModified":1671253688834.452,"size":140458}] 29:{"id":"f7d25126eb60e1bb","slug":null,"title":"Workshop Utility Functions","thumbnail":"4c1081c868779df063be4e192ac173f201ea33f4cae49d921c6e3323a555c0f8","access_level":"public","create_time":"$D2022-12-17T05:08:08.834Z","update_time":"$D2022-12-17T05:08:08.834Z","view_time":null,"first_public_time":"$D2022-12-17T05:08:08.834Z","has_unpublished_edits":null,"fork":{"id":"d8565901a86e96b2","slug":"workshop-utility-functions","title":"Workshop Utility Functions","owner":{"id":"dd2028e442ef0aed","login":"sxywu","name":"Shirley Wu"}},"stars":0,"starred":false,"owner":{"type":"team","id":"cea13b99e8ea4d5f","login":"segundev","name":"","avatar_url":"https://avatars-next.observableusercontent.com/4001f6d4e7ba7f30c8a046bf8d06be3f6cc9e79670e87789f7c3f31e9e1f66bc","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":164,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"f2e7417528f50399","login":"segundev","name":"","avatar_url":"https://avatars-next.observableusercontent.com/4001f6d4e7ba7f30c8a046bf8d06be3f6cc9e79670e87789f7c3f31e9e1f66bc","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"f2e7417528f50399","login":"segundev","name":"","avatar_url":"https://avatars-next.observableusercontent.com/4001f6d4e7ba7f30c8a046bf8d06be3f6cc9e79670e87789f7c3f31e9e1f66bc","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 = ['#ffc8f0', '#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 '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]","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":"$49","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":"$W4a","stdlib":"1"}} 24:null