JSFiddle - React, Tailwind, and code Playground

by ramnathv

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<div class="container">
    <div class="row">
        <div class="col-md-4"></div>
        <div class="col-md-8">
            <div id="viz"></div>
        </div>
    </div>
</div>

CSS

.circle, .bar {
    opacity: 0.9;
}

.container {
    margin-top: 40px;
}

JavaScript

dataset = d3.range(20)

var svg = d3.select("#viz")
  .append("svg")
  .attr("width", 510)
  .attr("height", 20)

var progress = svg.selectAll("g")
  .data(dataset).enter()
  .append("svg:g")

progress
    .append("svg:rect")
      .attr("class", "bar")
      .attr("x", function(d, i){return 10 + d*30 +5})
      .attr("y", 5)
      .attr("width", 20)
      .attr("height", 10)
      .attr("fill", "lightgray")

progress
  .append("svg:circle")
      .attr("class", "circle")
      .attr("cx", function(d, i){return i*30 + 10})
      .attr("cy", 10)
      .attr("r", 10)
      .attr("fill", "lightgray")



progress.on("click", function(d, i){
  myg = d3.select(this)
   
  circle = myg.select("circle")
  circle.transition().attr("fill", "#5cb85c").attr("opacity", 1)
  
  bar = myg.select("rect")
  bar.transition().attr("fill", "#5cb85c").attr("opacity", 1)
  
})
     

/*
var circle = svg.selectAll("circle")
  .data(dataset).enter()
  .append("circle")
  .attr("class", "circle")
  .attr("cx", function(d, i){return d*30 + 10})
  .attr("cy", 10)
  .attr("r", 10)
  .attr("fill", "lightgray")

var bars = svg.selectAll("rect")
  .data(dataset).enter()
  .append("rect")
  .attr("class", "bar")
  .attr("x", function(d, i){return 10 + d*30 +5})
  .attr("y", 5)
  .attr("width", 20)
  .attr("height", 10)
  .attr("fill", "lightgray")

circle.on("click", function(){
   d3.select(this).attr("fill", "green")
})
*/