2d:null 2e:["$","title",null,{"children":"Workshop Utility Functions | Shirley Wu | Observable"}] 33: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 }34:[{"id":"911d141e556c4d4d0646a8a8f8da6015d3baa514ae038d93e776bdcbce6c34d9b01d193d77064d9968c30802e536575ba87c9bf32e0022b426c496fe2a414835","href":"https://static.observableusercontent.com/files/911d141e556c4d4d0646a8a8f8da6015d3baa514ae038d93e776bdcbce6c34d9b01d193d77064d9968c30802e536575ba87c9bf32e0022b426c496fe2a414835","name":"movies (1).json","type":"application/json","lastModified":1596967535891.974,"size":140458}] 31:{"id":"d8565901a86e96b2","slug":"workshop-utility-functions","title":"Workshop Utility Functions","thumbnail":"3140bb7e978eb7cd28df7c0bf1e741d4e17878557fc3d42b707aefe26e6d0fa5","access_level":"public","create_time":"$D2020-08-09T08:50:40.496Z","update_time":"$D2023-05-24T23:45:10.481Z","view_time":null,"first_public_time":"$D2020-08-09T09:57:31.968Z","has_unpublished_edits":null,"fork":false,"stars":12,"starred":false,"owner":{"type":"team","id":"dd2028e442ef0aed","login":"sxywu","name":"Shirley Wu","avatar_url":"https://avatars-next.observableusercontent.com/f9949405cbe75a900a143ef7b67a9dff399dd0b11782e3ccae81e67e976e4f58","tier":"starter_2024"},"version":172,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"295ff02db5133ff8","login":"sxywu","name":"Shirley Wu","avatar_url":"https://avatars-next.observableusercontent.com/f9949405cbe75a900a143ef7b67a9dff399dd0b11782e3ccae81e67e976e4f58","tier":null}],"members":[{"type":"individual","id":"295ff02db5133ff8","login":"sxywu","name":"Shirley Wu","avatar_url":"https://avatars-next.observableusercontent.com/f9949405cbe75a900a143ef7b67a9dff399dd0b11782e3ccae81e67e976e4f58","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":99,"collection":{"id":"ee05f463cef9b990","slug":"introduction-to-d3-js","title":"Workshop: Introduction to D3.js","owner":{"id":"dd2028e442ef0aed","login":"sxywu","name":"Shirley Wu"}},"type":"notebook","body":{"title":"Workshop Utility Functions","cells":[{"id":0,"value":"md`# Workshop Utility Functions`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":68,"value":"md`\n## Slides\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":70,"value":"import {slide} from \"@mbostock/slide\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":166,"value":"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":72,"value":"slide_style = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":58,"value":"md`\n## Bar chart example\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":61,"value":"barData = [45, 67, 96, 84, 41]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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","output":"$undefined","database":"$undefined"},{"id":10,"value":"topGenres = [\"Action\", \"Comedy\", \"Animation\", \"Drama\"]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"petalColors = ['#ffc8f0', '#cbf2bd', '#afe9ff', '#ffb09e']","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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","output":"$undefined","database":"$undefined"},{"id":26,"value":"rated = ['G', 'PG', 'PG-13', 'R']","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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","output":"$undefined","database":"$undefined"},{"id":28,"value":"pathObj = _.zipObject(rated, petalPaths)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":39,"value":"pathColors = ['#46e276', '#6e94e7', '#b877e9', '#f25d75']","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":53,"value":"md `\n## Showing SVG transforms\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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","output":"$undefined","database":"$undefined"},{"id":92,"value":"pathWidth = 120","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":95,"value":"perRow = Math.floor(width / pathWidth)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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","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","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","output":"$undefined","database":"$undefined"},{"id":42,"value":"$33","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":44,"value":"textWidth = 640","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":65,"value":"md`\n## Appendix\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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","output":"$undefined","database":"$undefined"},{"id":14,"value":"d3 = require('d3')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"_ = require('lodash')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 32:"$31:body"