Build a Bulbasaur Example

computedData-example.js

// 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"
  }
}, ...]

correct-bulbasaur.html

<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>

example-data.js

[
  {
    // x-coordinate
    "x": 61,
    // y-coordinate
    "y": 56,
    // color of a pixel
    "c": "#101010"
  }
]

full-file-0.vue

<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>

full-file.vue

<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>

scale-example.js

// 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-0.html

<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-custom-plot.html

<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>

upside-down-bulbasaur.html

<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>