D3 Examples - Vue.js bar chart component

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Vue.js Bar Chart Component</title>
  <link type="text/css" href="index.css" rel="stylesheet"/>
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
  
  <div id="app" class="vertical">
    <button id="button" v-on:click="add_random_datapoint">
      Add random datapoint
    </button>
    
    <div class="horizontal">
      <bar-chart
        v-bind:data="values"
        :padding="1"
      />
​
      <div class="vertical">
        <bar-chart
          v-bind:data="values"
          :padding="1"
          color="orange"
        />
        <bar-chart
          v-bind:data="values"
          :padding="3"
          color="teal"
        />
      </div>
      
    </div>
    
  </div>
  
  <script src="index.js"></script>
</body>
</html>
    