2c:null 2d:["$","title",null,{"children":"Data Visualization Society Badge | philippkoytek | Observable"}] 32:Tb03,viewof timezone = html``33:[] 30:{"id":"89fca560557b95a1","slug":"data-viz-society-glyph","title":"Data Visualization Society Badge","thumbnail":"5bbb0e38d6a7dac99e23755207be4d5b2c389d6447964f11cdcffc55bcf29006","access_level":"public","create_time":"$D2019-03-11T18:26:32.799Z","update_time":"$D2020-11-28T18:08:13.565Z","view_time":null,"first_public_time":"$D2019-03-11T21:43:08.456Z","has_unpublished_edits":null,"fork":false,"stars":9,"starred":false,"owner":{"type":"team","id":"d1485b4e59b7f657","login":"philippkoytek","name":"","avatar_url":"https://avatars-next.observableusercontent.com/74089590362f57eb01b7f7eb9d2e82b025e4e58a19cf3d989397abf44ce7db6d","tier":"starter_2024","bio":""},"version":533,"publish_version":533,"role":null,"authored":false,"authors":[{"type":"individual","id":"6ec2f9ddd766f194","login":"philippkoytek","name":"","avatar_url":"https://avatars-next.observableusercontent.com/74089590362f57eb01b7f7eb9d2e82b025e4e58a19cf3d989397abf44ce7db6d","tier":null,"bio":""}],"members":[{"type":"individual","id":"6ec2f9ddd766f194","login":"philippkoytek","name":"","avatar_url":"https://avatars-next.observableusercontent.com/74089590362f57eb01b7f7eb9d2e82b025e4e58a19cf3d989397abf44ce7db6d","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":3,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Data Visualization Society Badge","cells":[{"id":0,"value":"md`# Data Visualization Society Badge\n\n1) **Plug in your data** to see what your data fingerprint in the data visualization society would look like.\n\n2) **Download your personal badge as png or svg** and make sure to sign up for the Data Viz Society (if you have not already)!\nhttps://www.datavisualizationsociety.com/join\n\nThis glyph is not only used as a member badge but also for the logo of the data visualization society.\nCredits for this awesome design go to **Amy Cesal**. \nRead more about how to interpret this fingerprint and the behind the scenes of the logo in this article by Amy Cesal: https://medium.com/data-visualization-society/data-visualization-society-logo-behind-the-scenes-ea65d04bc344 `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3,"value":"chart = {\n const svg = d3.select(DOM.svg(width, height))\n .attr(\"viewBox\", `${-width / 2} ${-height / 2} ${width} ${height}`)\n .style(\"width\", \"100%\")\n .style(\"height\", \"auto\")\n .style(\"font\", \"10px sans-serif\");\n \n let canvas = svg.append(\"g\");\n \n if(toggles.indexOf('timezone') !== -1){\n canvas.append('path')\n .attr('class', 'timezone')\n .call(makeTimezoneLine);\n }\n \n canvas.selectAll('.glyph')\n .data(data)\n .join(\"g\").attr('class', 'glyph')\n .call(makeGlyph);\n \n if(toggles.indexOf('guides') !== -1){\n canvas.append('g')\n .attr('class', 'guides')\n .call(makeGuides);\n }\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":335,"value":"md`---------------------------------`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":328,"value":"md`#### 1. Enter your self-evaluation and time zone to see what your Data Visualization Society Badge looks like:\n\nfor the explanation of the ranking scale, see: https://medium.com/data-visualization-society/data-visualization-society-logo-behind-the-scenes-ea65d04bc344`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":204,"value":"viewof inputs = matrix(columns,rows, [3,2,1, 4,3,2, 1,0,2])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":415,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":291,"value":"md`------------------------------------------------`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":314,"value":"md`#### 2. Download your Data Visualization Society Badge as PNG or SVG:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":280,"value":"viewof toggles = checkbox({\n options: [\n { value: \"guides\", label: \"show guides (circles, axes, labels)\" },\n { value: \"timezone\", label: \"show timezone line\" }],\n value: ['guides', 'timezone']\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":312,"value":"html`\n${DOM.download(await rasterize(chart), 'dvs_badge', \"Download as PNG\")}\n${DOM.download(await serialize(chart), 'dvs_badge', \"Download as SVG\")}\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":338,"value":"md`-----------------------\n\n------------------------\n#### Code\n\n\n##### Data:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":46,"value":"data = [{\n data: [\n inputs[rows[0]],\n inputs[rows[1]],\n inputs[rows[2]]\n ],\n visualization: [\n inputs[rows[3]],\n inputs[rows[4]],\n inputs[rows[5]]\n ],\n society: [\n inputs[rows[6]],\n inputs[rows[7]],\n inputs[rows[8]]\n ]\n}];","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":199,"value":"columns = [0,1,2,3,4,5]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":198,"value":"rows = ['Data - Collection','Data - Cleaning','Data - Analysis',\n 'Visualization - Building','Visualization - Design','Visualization - Storytelling',\n 'Society - Community','Society - Leadership','Society - Project Management',\n ]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":408,"value":"md`----------\n##### Drawing functions:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":153,"value":"makeGlyph = function(glyph){\n glyph.append('path').attr('class', 'data')\n .style(\"fill\", '#2db2a5')\n .style('mix-blend-mode', 'multiply')\n .attr(\"d\", d => triangle(d.data));\n \n glyph.append('path').attr('class', 'viz')\n .style(\"fill\", '#ddb32b')\n .style('mix-blend-mode', 'multiply')\n .attr(\"d\", d => triangle(d.visualization))\n .attr('transform', `rotate(${sliceAngle})`);\n \n glyph.append('path').attr('class', 'society')\n .style(\"fill\", '#A05E9C')\n .style('mix-blend-mode', 'multiply')\n .attr(\"d\", d => triangle(d.society))\n .attr('transform', `rotate(${sliceAngle*2})`);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":141,"value":"makeGuides = function(guides){\n guides.append('g').attr('class', 'circles').selectAll('circle').data([0,1,2,3,4,5])\n .join('circle')\n .attr(\"r\", d => radiusScale(d))\n .call(applyLineStyle);\n \n let axes = guides.append('g').attr('class', 'axes')\n .selectAll('g').data(rows)\n .join('g')\n .attr('class', d => d);\n \n axes.append('path')\n .call(applyLineStyle)\n .attr('d', (d, i) => line([{x:0,y:0}, pointOnCircle(sliceAngle * slicePos(i), maxRadius)]));\n \n axes.append('text').text(d => d.split(' - ')[1])\n .call(applyLabelAttrs);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":496,"value":"applyLineStyle = selection => selection\n .style(\"fill\", 'none')\n .style(\"stroke\", 'rgba(0,0,0,0.03)')\n .style('stroke-width', '1px');","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":507,"value":"applyLabelAttrs = selection => selection\n .attr('text-anchor', (d, i) => slicePos(i) >= 5 ? 'end' : slicePos(i) >= 1 ? 'start' : 'middle')\n .attr('font-size', '6px')\n .attr(\"class\", d => 'label ' + d)\n .attr(\"fill\", 'rgba(0,0,0,0.1)')\n .attr('font-weight', 'bold')\n .attr(\"x\", (d, i) => pointOnCircle(sliceAngle * slicePos(i), maxRadius + 6).x)\n .attr(\"y\", (d, i) => pointOnCircle(sliceAngle * slicePos(i), maxRadius + 6).y);\n ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":464,"value":"makeTimezoneLine = function(tzLine){\n \n let timezoneScale = d3.scaleLinear()\n .domain([-13, 14])\n .range([-(maxRadius-5), (maxRadius-5)]);\n \n tzLine\n .attr(\"d\", line([\n {x:timezoneScale(Number(timezone)), y:-(maxRadius - 5)},\n {x:timezoneScale(Number(timezone)), y:(maxRadius - 5)}\n ]))\n .attr(\"stroke\", '#BBB')\n .attr('stroke-width', 4)\n .attr('stroke-linecap', 'round');\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":391,"value":"md`--------------\n##### Utility and Scale functions:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":70,"value":"triangle = function(d){\n let points = [\n {x:0, y:-radiusScale(d[0])},\n {x:radiusScale(d[1]) * Math.sin(Math.PI / 3), y:0.5*radiusScale(d[1])},\n {x:-radiusScale(d[2]) * Math.sin(Math.PI / 3), y:0.5*radiusScale(d[2])}\n ];\n return line(points);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":361,"value":"pointOnCircle = function(angle, radius){\n let radAngle = Math.PI * angle / 180;\n return {\n x:radius * Math.sin(radAngle),\n y:-radius * Math.cos(radAngle)\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":56,"value":"line = d3.line()\n .x(function(d) { return d.x; })\n .y(function(d) { return d.y; });","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":64,"value":"radiusScale = d3.scaleLinear().range([3, maxRadius]).domain([0, 5])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":510,"value":"slicePos = i => 3 * (i%3) + Math.floor(i/3)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":385,"value":"md`--------------\n##### Constants:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":50,"value":"maxRadius = 80;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":148,"value":"sliceAngle = 40;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"width = 400","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":139,"value":"height = 200","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":413,"value":"md`--------------\n##### Imports:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"d3 = require(\"d3-selection\", \"d3-shape\", \"d3-scale\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":197,"value":"import {matrix} from \"@bumbeishvili/matrix\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":295,"value":"import {checkbox} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":310,"value":"import {rasterize, serialize} from \"@mbostock/saving-svg\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":472,"value":"md`*The list of time zones was taken from: https://gist.github.com/nodesocket/3919205`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1"}} 31:"$30:body"