Plotly Data Update

HTML

<script src="//cdn.plot.ly/plotly-latest.min.js"></script>
<div id="select"></div>
<div id="app"></div>

CSS

#app{
  width: 100%;
  height: 500px;
}

CoffeeScript

url = "https://raw.githubusercontent.com/plotly/datasets/master/gapminderDataFiveYear.csv"

layout = 
  title:'Line and Scatter Plot'
  height: 400
  width: 480

  

process_data = (data) -> 
  d3.nest()
    .key((d) -> d.country)
    .rollup (d) -> 
      x: [1,2,3,50]
      y: [5,8,9,70]
      mode: 'lines+markers',
      marker: 
        size: 12,
        opacity: 0.5
    .map data

d3.csv url, (error, data) ->
  dat = process_data data

  # Create Select Input
  select = d3.select("#select").append('select')
  options = select
    .selectAll("option")
    .data Object.keys(dat)
  options.enter().append('option')
  options.text (d) -> d
  select.on "change", ->
    country = d3.select(@).node().value
    Plotly.newPlot "app", [dat[country]], layout
  Plotly.newPlot "app", [dat['Afghanistan']], layout