1 $(function() {

     2     

     3     var colorset = ["#1f77b4 ", "#aec7e8 ", "#ff7f0e ", "#ffbb78 ", "#2ca02c ", "#98df8a ", "#d62728 ", "#ff9896 ", "#9467bd ", "#c5b0d5 ", "#8c564b ", "#c49c94 ", "#e377c2 ", "#f7b6d2 ", "#7f7f7f ", "#c7c7c7 ", "#bcbd22 ", "#dbdb8d ", "#17becf ", "#9edae5"]

     4     

     5     $.getJSON("fakedata/data.json", function(data) {

     6         $(".topwords-block").html(data.top_words.reduce(function(mem, d) {

     7             return mem + '<li>' + d.word + '</li>'

     8         },""));

     9         

    10         var nmmso = data.segments.length;

    11         

    12         data.topics.forEach(function(topic) {

    13             topic.score = 0;

    14             topic.curve = [];

    15             for (var i = 0; i < nmmso; i++) {

    16                 topic.curve.push(0);

    17             }

    18         });

    19         

    20         data.segments.forEach(function(mmso, i) {

    21             mmso.topics.forEach(function(t) {

    22                 var score = t.weight * mmso.tweet_count;

    23                 data.topics[t.topic].curve[i] = score;

    24                 data.topics[t.topic].score += score;

    25             });

    26         });

    27         

    28         data.topics = data.topics.sort(function(a,b) {

    29             return b.score - a.score;

    30         });

    31         

    32         var topicHtmls = ["", "", ""]

    33         

    34         data.topics.forEach(function(topic,i) {

    35             var li = '<li class="shadow-block topic" style="background:'

    36                 + colorset[topic.index % colorset.length]

    37                 + '" data-topic-id="'

    38                 + topic.index

    39                 + '"><ul class="topic-words">'

    40                 + topic.words.reduce(function(memwords, word) {

    41                     return memwords + '<li>' + word.word + '</li>';

    42                 },"")

    43                 + '</ul></li>';

    44             topicHtmls[i % 3] += li;

    45         });

    46         console.log(topicHtmls);

    47         $(".topics-block").html(topicHtmls.reduce(function(mem,html) {

    48            return mem + '<ul class="topic-column">' + html + '</ul>' 

    49         },""));

    50         

    51         $(".topic").mouseenter(function() {

    52             var datavizheight = $(".start-dataviz").height(),

    53                 scale = datavizheight / data.duration,

    54                 topicid = parseInt($(this).attr("data-topic-id")),

    55                 topic;

    56             for (var i = 0; i < data.topics.length; i++) {

    57                 if (data.topics[i].index == topicid) {

    58                     topic = data.topics[i];

    59                     break;

    60                 }

    61             }

    62             if (!topic) {

    63                 return;

    64             }

    65             var color = colorset[topicid % colorset.length];

    66             $(".start-dataviz").html(topic.curve.reduce(function(mem, c, i) {

    67                 if (!c) {

    68                     return mem;

    69                 } else {

    70                     var mmso = data.segments[i];

    71                     return mem + '<div style="position: absolute; background: '

    72                         + color

    73                         +'; opacity: '

    74                         + c

    75                         +'; left: 0; ; top: '

    76                         + scale * mmso.start

    77                         +'px; height: '

    78                         + scale * mmso.duration

    79                         +'px; width: 266px"></div>'

    80                 }

    81             },""));

    82         })//.mouseleave(function() {$(".start-dataviz").empty(); });

    83         

    84     });

    85 });