2d:null 2e:["$","title",null,{"children":"Vue SVG Graph Example | Christian Wilcox | Observable"}] 33:[] 31:{"id":"9473bc403b571c3a","slug":"vue-svg-graph-example","title":"Vue SVG Graph Example","thumbnail":"b909311bb2c22646660dc3db1939a3d1e6c2cc63c87f4973b523a333e2c029ec","access_level":"public","create_time":"$D2018-07-26T11:05:52.686Z","update_time":"$D2021-12-02T03:20:50.915Z","view_time":null,"first_public_time":"$D2018-07-26T11:49:47.720Z","has_unpublished_edits":null,"fork":false,"stars":7,"starred":false,"owner":{"type":"team","id":"735c6ab969f7c460","login":"cw","name":"Christian Wilcox","avatar_url":"https://avatars-next.observableusercontent.com/368b113ade86a6e356457fa1261dbc0a8f5385612c10809be6aa5d0f98fb0643","tier":"starter_2024"},"version":107,"publish_version":107,"role":null,"authored":false,"authors":[{"type":"individual","id":"d860027f59f6cb70","login":"cw","name":"Christian Wilcox","avatar_url":"https://avatars-next.observableusercontent.com/368b113ade86a6e356457fa1261dbc0a8f5385612c10809be6aa5d0f98fb0643","tier":null}],"members":[{"type":"individual","id":"d860027f59f6cb70","login":"cw","name":"Christian Wilcox","avatar_url":"https://avatars-next.observableusercontent.com/368b113ade86a6e356457fa1261dbc0a8f5385612c10809be6aa5d0f98fb0643","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":3,"collection":{"id":"d8dadca5ed3ab33f","slug":"svg-exploration","title":"Exploring SVG 💯","owner":{"id":"735c6ab969f7c460","login":"cw","name":"Christian Wilcox"}},"type":"notebook","body":{"title":"Vue SVG Graph Example","cells":[{"id":0,"value":"md`# Vue SVG Graph Example\nAdapted from https://vuejs.org/v2/examples/svg.html`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"output = html`\n

\n \n \n \n

\n {{stat.label}}\n \n {{stat.value}}\n \n

\n \n \n

\n\n

* input[type=\"range\"] requires IE10 or above.

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"stats = [\n { label: \"A\", value: 100 },\n { label: \"B\", value: 100 },\n { label: \"C\", value: 100 },\n { label: \"D\", value: 100 },\n { label: \"E\", value: 100 },\n { label: \"F\", value: 100 }\n]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"graph = {\n // A resusable polygon graph component\n return Vue.component(\"polygraph\", {\n props: [\"stats\"],\n template: \"#polygraph-template\",\n computed: {\n // a computed property for the polygon's points\n points: function() {\n var total = this.stats.length;\n return this.stats\n .map(function(stat, i) {\n var point = valueToPoint(stat.value, i, total);\n return point.x + \",\" + point.y;\n })\n .join(\" \");\n }\n },\n components: subcomponents\n });\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":75,"value":"subcomponents = ({\n \"axis-label\": {\n props: {\n stat: Object,\n index: Number,\n total: Number\n },\n template: \"#axis-label-template\",\n computed: {\n point: function() {\n return valueToPoint(+this.stat.value + 10, this.index, this.total);\n }\n }\n }\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":70,"value":"bootstrap = {\n return new Vue({\n el: \"#demo\",\n data: {\n newLabel: \"\",\n stats: stats\n },\n methods: {\n add: function(e) {\n e.preventDefault();\n if (!this.newLabel) return;\n this.stats.push({\n label: this.newLabel,\n value: 100\n });\n this.newLabel = \"\";\n },\n remove: function(stat) {\n if (this.stats.length > 3) {\n this.stats.splice(this.stats.indexOf(stat), 1);\n } else {\n console.log(\"Can't delete more!\");\n }\n }\n }\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":58,"value":"md`## Helpers`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"value":"function valueToPoint(value, index, total) {\n var x = 0;\n var y = -value * 0.8;\n var angle = ((Math.PI * 2) / total) * index;\n var cos = Math.cos(angle);\n var sin = Math.sin(angle);\n var tx = x * cos - y * sin + 100;\n var ty = x * sin + y * cos + 100;\n //console.log(\"calling here\");\n return {\n x: tx,\n y: ty\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":67,"value":"polygraphTemplate = html`\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":82,"value":"axisLabelTemplate = html`\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"css = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":56,"value":"md`## Imports`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"Vue = require(\"vue\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":99,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 32:"$31:body"