var codeSamples = [
// Default
{ label: "Identity", code: "d3.nest()\n  .map(data);"},
{ label: "By source", code: "d3.nest()\n  .key(function(d) { return d.source; })\n  .map(data);"},
{ label: "Number of tweets by source", code: "d3.nest()\n  .key(function(d) { return d.source; })\n  .rollup(function(values) { return values.length; })\n  .map(data);"},
{ label: "Number of tweets by day", code: "var parseTime = d3.timeParse('%a %b %d %H:%M:%S +0000 %Y');\nvar formatTime = d3.timeFormat('%Y-%m-%d');\nd3.nest()\n  .key(function(d) { return formatTime(parseTime(d.created_at)); })\n  .sortKeys(d3.ascending)\n  .rollup(function(values) { return values.length; })\n  .entries(data);"},
{ label: "Number of tweets by day and source", code: "var parseTime = d3.timeParse('%a %b %d %H:%M:%S +0000 %Y');\nvar formatTime = d3.timeFormat('%Y-%m-%d');\nd3.nest()\n  .key(function(d) { return d.source; })\n  .key(function(d) { return formatTime(parseTime(d.created_at)); })\n  .sortKeys(d3.ascending)\n  .rollup(function(values) { return values.length; })\n  .entries(data);"},
{ label: "Number of retweets by day", code: "var parseTime = d3.timeParse('%a %b %d %H:%M:%S +0000 %Y');\nvar formatTime = d3.timeFormat('%Y-%m-%d');\nd3.nest()\n  .key(function(d) { return formatTime(parseTime(d.created_at)); })\n  .sortKeys(d3.ascending)\n  .rollup(function(values) { return d3.sum(values, function(d) { return d.retweet_count;});  })\n  .entries(data);"},
];

var html = d3.select("#converter");

var left = html.append("div")
    .classed("left", true);

var input = left.append("div")
    .classed("input", true);

input.append("h3")
    .text("Input CSV or TSV");

input.append("textarea");

var code = left.append("div")
    .classed("code", true);

var snippets = code.append("div")
    .classed("snippets", true);

snippets.selectAll("snippet")
    .data(codeSamples)
  .enter().append("a")
    .classed("snippet", true)
    .text(function(d) { return d.label; })
    .attr("href", "#")
    .on("click", function(d) {
      d3.event.preventDefault();
      code.select("textarea")
          .property("value", d.code);
      update();
    });

code.append("h3")
    .text("Code");

code.append("textarea");

var right = html.append("div")
    .classed("right", true);

var output = right.append("div")
    .classed("output", true);

output.append("button")
    .text("Update Output")
    .on("click", update);

var codeOutput = output.append("pre");

codeOutput.append("code");

d3.text("realdonaldtrump2017.csv", function(d) {
    input.select("textarea")
        .property("value", d);
  
    code.select("textarea")
        .property("value", codeSamples[0].code);

    update();
});

function update() {
  var t = input.select("textarea")
      .property("value");

  var c = code.select("textarea")
      .property("value");

  var data = (t.indexOf("\t") < 0 ? d3.csvParse : d3.tsvParse)(t);

  var out = eval(c);

  codeOutput.html(JSON.stringify(out, false, 2));
  hljs.highlightBlock(codeOutput.node())
}