Vue with D3's Utilities

Vue-driven data visualization, enhanced with utilities from D3.

by Chris Fritz

HTML

<script src="https://cdn.rawgit.com/chrisvfritz/459a93673c5f2e362464125381e51515/raw/9e07d5bda30203dc788894cba18749a3bb44e79d/get-players.js"></script>
<script src="https://unpkg.com/d3"></script>
<script src="https://unpkg.com/vue"></script>

<div id="app">
  <transition-group>
    <div
      v-for="player in players"
      :key="player.name"     
      :style="playerStyles(player)" 
      class="bar"
    >
      {{ player.name }}
    </div>
  </transition-group>
</div>

CSS

.bar {
  padding-left: 10px;
  height: 30px;
  line-height: 30px;
  transition: all 1s;
}
.v-enter, .v-leave-active {
  height: 0;
  opacity: 0;
  transform: translateX(-100px)
}

JavaScript

new Vue({
	el: '#app',
  data: {
  	players: getPlayers()
  },
  computed: {
    scores: function () {
    	return this.players.map(function (player) {
      	return player.score
      })
    },
  	highestScore: function () {
    	return d3.max(this.scores)
    },
  	scale: function () {
    	return d3.scaleLinear()
      	.domain(d3.extent(this.scores))
        .range([100, 300])
    }
  },
  methods: {
  	playerStyles: function (player) {
    	var score = player.score
    	return {
      	width: this.scale(score) + 'px',
        background: score === this.highestScore
        	? 'orange'
          : 'lightblue'
      }
    }
  }
})