JSFiddle - React, Tailwind, and code Playground

by ramnathv

HTML

<link rel="stylesheet" href="http://necolas.github.io/css3-github-buttons/gh-buttons.css">
<div id='x'></div>

JavaScript

makeButtonGroup('x', 
 [2010, 2009, 2008]
)

function makeButtonGroup(el, x){
  d3.select('#' + el)
    .classed('button-group', true)
    .selectAll('a')
    .data(x).enter()
      .append('a')
      .classed('button', true)
      .attr('data-value', function(d){return d})
      .text(function(d){return d})
  .on('click', function(d){
     alert(d)
   })
}

function makeSlider(el, x){
  var rx = d3.range(x)
  d3.select('#' + el)
    .append('input')
      .attr('type', 'range')
      .attr('min', rx[0])
      .attr('max', rx[1])
      .attr('value', x[0])
  .on('change', function(d){
    alert(d)
  })
   d3.select('#' + el)
      .append('output')
      .attr('for', el)
      .attr('value', x[0])
      .text(x[0])
}