Material Vue.js Kinship

index.html

<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://d3js.org/d3.geo.projection.v0.min.js"></script>
<script src="http://d3js.org/topojson.v1.min.js"></script>

<template id='v-card-content'>
  <div id="kinship-canvas" class="kinship"></div>
</template>

<!-- material card template for vue.js -->
<template id="v-card">
  <div class="widget card">
        <div class="card-content">
          <span class="card-title grey-text text-darken-4">{{title}}</span>
          <v-card-content></v-card-content>
        </div>
        <div class="card-action">
          <a href="//materializecss.com">Documentation</a>
          <a href='//github.com/Grace'>GitHub</a>
        </div>
      </div>
      
    </div>
</template>

<div id="demo">
  <v-card title="Material Vue.js Card" content='Example'>
  </v-card>
</div>

Material Vue.js Kinship.markdown

Material Vue.js Kinship

Material design card implemented using Vue.js

A Pen by Grace on CodePen.

License.

script.js

// define
var Card = Vue.extend({
  props: ['title'],
  template: '#v-card'
});

var CardContent = Vue.extend({
  template: '#v-card-content'
});

// Register MaterialCard Component
Vue.component('v-card', Card);
Vue.component('v-card-content', CardContent);

// Root Instance
var vm = new Vue({
  el: '#demo'
});

$('.widget').draggable();

function getKinshipData() {
    return {  
        "name": "Clifford Shanks",
        "born": 1862,
        "died": 1906,
        "location": "Petersburg, VA",
        "parents": [
          {
            "name": "James Shanks",
            "born": 1831,
            "died": 1884,
            "location": "Petersburg, VA",
            "parents": [
              {
                "name": "Robert Shanks",
                "born": 1781,
                "died": 1871,
                "location": "Ireland/Petersburg, VA"
              },
              {
                "name": "Elizabeth Shanks",
                "born": 1795,
                "died": 1871,
                "location": "Ireland/Petersburg, VA"
              }
            ]
          },
          {
            "name": "Ann Emily Brown",
            "born": 1826,
            "died": 1866,
            "location": "Brunswick/Petersburg, VA",
            "parents": [
              {
                "name": "Henry Brown",
                "born": 1792,
                "died": 1845,
                "location": "Montgomery, NC"
              },
              {
                "name": "Sarah Houchins",
                "born": 1793,
                "died": 1882,
                "location": "Montgomery, NC"
              }
            ]
          }
        ]
      };
};

var margin = {top: 50, right: 50, bottom: 0, left: 50},
    width = 650 - margin.left - margin.right,
    height = 350 - margin.top - margin.bottom;

var tree = d3.layout.tree()
    .separation(function(a, b) { return a.parent === b.parent ? 1 : 1.2; })
    .children(function(d) { return d.parents; })
    .size([width, height]);

var svg = d3.select("#kinship-canvas")
    .attr("bgcolor", "#2c2c2c")
    .append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
   .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

var nodes = tree.nodes(getKinshipData());
  
var node = svg.selectAll(".node")
    .data(nodes)
   .enter()
    .append("g");
    
node.append("rect")
    .attr("width", 140)
    .attr("height", 80)
    .attr("fill", "tan")
    .attr("x", function(d) { return d.x - 70; })
    .attr("y", function(d) { return height - d.y - 40; });

node.append("text")
    .attr("font-size", "16px")
    .attr("fill", "black")
    .attr("x", function(d) { return d.x; })
    .attr("y", function(d) { return height - d.y - 15; })
    .style("text-anchor", "middle")
    .text(function(d) { return d.name; });

node.append("text")
    .attr("font-size", "12px")
    .attr("x", function(d) { return d.x; })
    .attr("y", function(d) { return 10 + height - d.y; })
    .style("text-anchor", "middle")
    .text(function(d) { return d.born + "–" + d.died; });

node.append("text")
    .attr("font-size", "11px")
    .attr("x", function(d) { return d.x; })
    .attr("y", function(d) { return 28 + height - d.y; })
    .style("text-anchor", "middle")
    .text(function(d) { return d.location; });
      
var link = svg.selectAll(".link")
    .data(tree.links(nodes))
   .enter()
    .insert("path", "g")
    .attr("fill", "none")
    .attr("stroke", "#000")
    .attr("stroke", "#000")
    .attr("shape-rendering", "crispEdges")
    .attr("d", connect);
  
function connect(d, i) {
    return     "M" + d.source.x + "," + (height - d.source.y)
             + "V" + (height - (3*d.source.y + 4*d.target.y)/7)
             + "H" + d.target.x
             + "V" + (height - d.target.y);
};

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.7/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>

style.css

.widget {
  width: 650px;
  height: 500px;
}

#kinship-canvas {
  height: 350px;
  background: #8D6E63;
}

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.2/css/materialize.min.css" rel="stylesheet" />