Skip to content

Instantly share code, notes, and snippets.

@trainorpj trainorpj/computedData-example.js Secret
Last active Apr 24, 2018

Embed
What would you like to do?
Build a Bulbasaur Example
// this is what computedData looks like.
// it has a slightly more complicated structure.
[{
// the svg x-coordinate for each pixel
"svgx": 300.4,
// the svg y-coordinate for each pixel
"svgy": 245.6,
// a numeric key for your data
"key": 113,
// computedData keeps any data that isn't an
// x or y coordinate in the attrs property
"attrs": {
// this is the color of the pixel
"c": "#101010"
}
}, ...]
<template>
<div id="app">
<!-- set up our initial svg -->
<svg :width="w" :height="h">
<!-- pass data and dimensions into CustomPlot -->
<CustomPlot
:xy-data="pokeData"
:width="w"
:height="h"
>
<!-- a scoped-slot gives us access to data we can use to render our plot with svg -->
<g slot-scope="{computedData, xScale, yScale, svg}">
<!-- render a rectangle for each point in computedData -->
<rect v-for="pixel in computedData"
:key="pixel.key"
:x="pixel.svgx"
:y="svg.height - pixel.svgy"
:width="xScale(1) - xScale(0)"
:height="yScale(0) - yScale(1)"
:fill="pixel.attrs.c !== 0 ? pixel.attrs.c : 'none'">
</rect>
</g>
</CustomPlot>
</svg>
</div>
</template>
[
{
// x-coordinate
"x": 61,
// y-coordinate
"y": 56,
// color of a pixel
"c": "#101010"
}
]
<template>
<div id="app">
<!--
We'll fill this in throughout the article :)
-->
</div>
</template>
<script>
// load in a special component called CustomPlot
import { CustomPlot } from "vue-custom-plot";
// load our json data and call it "bulbasaur"
import bulbasaur from "./bulbasaur.json";
// export the component
export default {
name: "App",
components: {
CustomPlot
},
// make our data object
data() {
return {
pokeData: bulbasaur,
w: 500,
h: 500
};
}
};
</script>
<style>
</style>
<template>
<div id="app">
<!-- set up our initial svg -->
<svg :width="w" :height="h">
<!-- pass data and dimensions into CustomPlot -->
<CustomPlot
:xy-data="grid"
:width="w"
:height="h"
:marginLeft="m"
:marginTop="m"
>
<!-- a scoped-slot gives us access to data we can use to render our plot with svg -->
<g slot-scope="{computedData, xScale, yScale, svg}">
<!-- render a rectangle for each point in computedData -->
<rect v-for="p in computedData"
:key="p.key"
:x="p.svgx"
:y="svg.height - p.svgy"
:width="xScale(1) - xScale(0) + 1"
:height="yScale(0) - yScale(1) + 1"
:fill="p.attrs.c !== 0 ? p.attrs.c : 'none'">
</rect>
</g>
</CustomPlot>
</svg>
</div>
</template>
<script>
import { CustomPlot } from "vue-custom-plot";
import bulbasaur from "./assets/bulbasaur.json";
export default {
name: "App",
components: {
CustomPlot
},
data() {
return {
grid: bulbasaur,
w: 500,
h: 500,
m: 5
};
}
};
</script>
// there are 96 x-values: 0, 1, ..., 94, 95
// the <svg> is a rectangle starting at 0 and going to 500.
// we use xScale to map x-values to their x-coordinate in <svg>
// here are some example values
console.log(xScale(0)) // 0
console.log(xScale(95)) // 500
console.log(xScale(47)) // 250
<template>
<div id="app">
<!-- set up our initial svg -->
<svg :width="w" :height="h">
<!--
We need to make an svg to actually render our points. This
is the first step in any data visualization. We'll make
our bulbasaur soon!
-->
</svg>
</div>
</template>
<template>
<div id="app">
<!-- set up our initial svg -->
<svg :width="w" :height="h">
<!-- pass data and dimensions into CustomPlot -->
<CustomPlot
:xy-data="pokeData"
:width="w"
:height="h"
>
<!--
We're calling CustomPlot and passing in some essential data.
All it needs to get started is the data we'd like to render,
and the dimensions of the svg (i.e. the width and height).
This gives us access to a scoped-slot, which is really
important for making bulbasaur
-->
<g slot-scope="{ computedData, xScale, yScale }">
<!--
This is where we'll render our data.
First, a bit of explanation... Read on!
-->
</g>
</CustomPlot>
</svg>
</div>
</template>
<template>
<div id="app">
<!-- set up our initial svg -->
<svg :width="w" :height="h">
<!-- pass data and dimensions into CustomPlot -->
<CustomPlot
:xy-data="pokeData"
:width="w"
:height="h"
>
<!-- a scoped-slot gives us access to data we can use to render our plot with svg -->
<g slot-scope="{computedData, xScale, yScale, svg}">
<!-- render a rectangle for each point in computedData -->
<rect v-for="pixel in computedData"
:key="pixel.key"
:x="pixel.svgx"
:y="pixel.svgy"
:width="xScale(1) - xScale(0)"
:height="yScale(0) - yScale(1)"
:fill="pixel.attrs.c">
</rect>
</g>
</CustomPlot>
</svg>
</div>
</template>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.