JSFiddle - React, Tailwind, and code Playground

by lchau

HTML

<script src="http://d3js.org/d3.v3.min.js"></script>
<div ng:app>
  <div ng:controller="ListController">
      <div class="item" ng:repeat="item in items">
          <div class="title">{{ item.title }}</div>
          <div class="history-container">
              <div class="history" ng:repeat="prices in item.history">{{prices}}</div>
          </div>
          <div class="value">{{ item.value | currency }}</div>
      </div>
  </div>
</div>

<div id="viz"></div>

CSS

.item .title { 
    font-weight: bold; 
}

.item .history-container {
    border: 1px solid black;
    width: 50%;
    margin-left: 25px;
}

.item .value { text-align: right; }

JavaScript

function ListController($scope) {
    $scope.items = [
        { title:"Luxury Item #1", history:[1, 2, 3], value:100000 },
        { title:"Luxury Item #2", history:[4, 5, 6], value:200000 }
    ];
};


 var sampleSVG = d3.select("#viz")
        .append("svg")
        .attr("width", 100)
        .attr("height", 100);    

    sampleSVG.append("circle")
        .style("stroke", "gray")
        .style("fill", "white")
        .attr("r", 40)
        .attr("cx", 50)
        .attr("cy", 50)
        .on("mouseover", function(){d3.select(this).style("fill", "aliceblue");})
        .on("mouseout", function(){d3.select(this).style("fill", "white");})
        .on("click", function(){d3.select(this).attr("r", function() {
            var min = 15;
            var max = 50;
            return Math.floor(Math.random() * max) + min})});