block by timelyportfolio 12af134a23616a6dc95d0f736347f978

my first Vue component (ugly) - d3 treemap

Full Screen

I had intentionally done this in the “non-vue” way by creating elements with code. I thought I would like the “vue” way better as shown here, but I’m not so sure. I actually think the createElement code way might be clearer and easier for a traditional programmer. Would love thoughts.

My First Vue Component

I have had so much fun using other Vue components that I just had to try to build one myself. I chose to do one based on d3.js to increase the complexity. This one works, but I already know there are a couple better ways to accomplish this.

for fun, open up the console and play with app.$data and watch realtime updates

Code in R

I put everything together in R, but I think even non-R readers can understand the code. If not, view page source.

library(treemap)
library(vueR)
library(d3r)
library(htmltools)

rhd <- random.hierarchical.data()

rhd_json <- d3_nest(rhd, value_cols="x")

template <- tag(
  "template",
  list(id = "d3treemap", tag("svg",list()))
)

component <- tags$script(
"
//create greetings component based on the greetings template
Vue.component('treemap-component', {
  template: '#d3treemap',
  props: {
    tree: Object,
    sizefield: {
      type: String,
      default: 'size'
    },
    treewidth: {
      type: Number,
      default: 400
    },
    treeheight: {
      type: Number,
      default: 400
    },
    tile: {
      type: Function,
      default: d3.treemapSquarify
    }
  },
  computed: {
    treemap: function() { return this.calculate_tree() },
    nodes: function() {
      var nodes = [];
      this.treemap.each(function(d) {
        nodes.push(d);
      });
      return nodes;
    }
  },
  methods: {
    calculate_tree: function() {
      var sizefield = this.sizefield;
      var d3t = d3.hierarchy(this.tree)
        .sum(function(d) {
          return d[sizefield]
        });
      return d3.treemap()
        .size([this.treewidth, this.treeheight])
        .tile(this.tile)
        .round(true)
        .padding(1)(d3t)
    },
    create_tree: function() {
      var createElement = this.$createElement;
      var color = d3.scaleOrdinal(d3.schemeCategory10);
      var nodes_g = this.nodes.map(function(d) {
        if(d.depth === 2) {
            return createElement(
              'g',
              null,
              [createElement(
                'rect',
                {
                  attrs: {
                  x: d.x0,
                  width: d.x1 - d.x0,
                  y: d.y0,
                  height: d.y1 - d.y0
                  },
                  style: {
                  fill: color(d.parent.data.name)
                  }
                }
                )]
            )
        }
      })
      return createElement(
        'svg',
        {style: {height: this.treeheight, width: this.treewidth}},
        nodes_g
      );
    }
  },
  render: function() {return this.create_tree()},
  updated: function() {return this.create_tree()}
});
"
)

app <- tags$script(HTML(
sprintf("
var tree = %s;

var app = new Vue({
  el: '#app',
  data: {
    tree: tree,
    size: 'x',
    width: 800,
    height: 600,
    tile: d3.treemapSliceDice
  }
})
",
rhd_json
)
))

browsable(
  tagList(
    template,
    component,
    tags$div(
      id="app",
      tag(
        "treemap-component",
        list(":tree" = "tree",":sizefield"="'x'") #use defaults
      ),
      tag(
        "treemap-component",
        list(":tree" = "tree",":sizefield"="size",":treeheight"=100,":treewidth"=200) #use explicit height,width
      ),
      tag(
        "treemap-component",
        list(":tree" = "tree",":sizefield"="size",":treeheight"="height",":treewidth"="width")
      ),
      tag(
        "treemap-component",
        list(":tree" = "tree",":sizefield"="size",":tile"="tile")
      )
    ),
    app,
    html_dependency_vue(offline=FALSE,minified=FALSE),
    d3_dep_v4(offline=FALSE)
  )
)

index.html