create a updating word cloud using vega

Question

I am creating a word cloud using a array of strings with the help of vega.js, while adding texts one by one i want to update my word cloud.My code is given bellow. The wordCloud is drawing only for the first text string. For the next strings it gives this error at the browser console. "view.data is undefined" Can somebody help me to find a solution for my code?

 $(document).ready(function(){ drawCloud("wordCloud"); }); function drawCloud(Htag){ var htag="#"+Htag; var i=0; var TextData =["#Trump Where was Trump when Cruz was fighting Rubio and Schumer on amnesty for illegals? Cruz is the true conservative.","#RealDonaldTrump is the greatest business mind: https://t.co/nJZdbmkpJG https://t.co/pivvj0nvje","Trending Now: #Trump | #Oregon | #Debate | #Up | #China | #Sanders | #After | #Bundy | #Leader | #Obama via https://t.co/942kPJKfeu#RealDonaldTrump will save us: https://t.co/cSpSIMH5W9 https://t.co/AYUHae69bb","#RealDonaldTrump is the greatest business mind: https://t.co/nJZdbmkpJG https://t.co/W8LvHyQl9l","You change default value in MySQL configuration file (option connect_timeout in mysqld section) -","Also there are two other timeouts too which are configurable by above methods; wait_timeout & interactive_timeout. For detailed information check link; rackspace.com/knowledge_center/article/"]; var textData=""; var stopWords ="(i|me|my|myself|we|us|our|just|ours|ourselves|you|your|yours|yourself|yourselves|he|him|his|himself|she|her|hers|herself|it|its|itself|they|them|their|theirs|themselves|what|which|who|whom|whose|this|that|these|those|am|is|are|was|were|be|been|being|have|has|had|having|do|does|did|doing|will|would|should|can|could|ought|i'm|you're|he's|she's|it's|we're|they're|i've|you've|we've|they've|i'd|you'd|he'd|she'd|we'd|they'd|i'll|you'll|he'll|she'll|we'll|they'll|isn't|aren't|wasn't|weren't|hasn't|haven't|hadn't|doesn't|don't|didn't|won't|wouldn't|shan't|shouldn't|can't|cannot|couldn't|mustn't|let's|that's|who's|what's|here's|there's|when's|where's|why's|how's|a|an|the|and|but|if|or|because|as|until|while|of|at|by|for|with|about|against|between|into|through|during|before|after|above|below|to|from|up|upon|down|in|out|on|off|over|under|again|further|then|once|here|there|when|where|why|how|all|any|both|each|few|more|most|other|some|such|no|nor|not|only|own|same|so|than|too|very|say|says|said|shall|trump|donaldtrump|hillary|clinton|hillaryclinton|ted|cruz|tedcruz|rick|santorum|ricksantorum|marco|rubio|marcorubio|mike|huckabee|mikehuckabee|martin|omalley|martinomalley|carly|fiorina|carlyfiorina|rand|paul|randpaul|john|kasich|johnkasich|ben|carson|bencarson|lindsley|graham|lindsleygraham|scott|walker|scottwalker|jim|gilmore|jimgilmore|jeb|bush|jebbush|http|https|chris|christie|chrischristie|pataki|george|georgepataki|election|election2016)"; var colorRange=["#fc61e2","#7d3070","#511f49"]; var width = $(htag).width(); var height = $(htag).height(); var text={}; var view={}; var viewUpdateFunction; for(;i<TextData.length;i++){ var shortText= TextData[i]; var urlRegex = /(https?:\\/\\/[^\\s]+)/g; var characterRegex=/[^az]+|\\s+/gmi; shortText =shortText.replace(urlRegex," ").replace(characterRegex," "); if(i==0){ text={ "width":width, "height": height, "padding": {"top":0, "bottom":0, "left":0, "right":0}, "data": [ { "name": "table", "values": [ shortText ], "transform": [ { "type": "countpattern", "field": "data", "case": "upper", "pattern": "[\\\\w']{3,}", "stopwords": stopWords }, { "type": "formula", "field": "angle", "expr": "[-45, 0, 45][~~(random() * 3)]" }, { "type": "formula", "field": "weight", "expr": "if(datum.text=='VEGA', 600, 300)" }, { "type": "wordcloud", "size": [800, 400], "text": {"field": "text"}, "rotate": {"field": "angle"}, "font": {"value": "Arial"}, "fontSize": {"field": "count"}, "fontWeight": {"field": "weight"}, "fontScale": [10, 40] } ] } ], "scales": [ { "name": "color", "type": "ordinal", "range":["#fc61e2","#7d3070","#511f49"] } ], "marks": [ { "type": "text", "from": {"data": "table"}, "properties": { "enter": { "x": {"field": "layout_x"}, "y": {"field": "layout_y"}, "angle": {"field": "layout_rotate"}, "font": {"field": "layout_font"}, "fontSize": {"field": "layout_fontSize"}, "fontStyle": {"field": "layout_fontStyle"}, "fontWeight": {"field": "layout_fontWeight"}, "text": {"field": "text"}, "align": {"value": "center"}, "baseline": {"value": "alphabetic"}, "fill": {"scale": "color", "field": "text"} }, "update": { "fillOpacity": {"value": 1} }, "hover": { "fillOpacity": {"value": 0.5} } } } ] }; viewUpdateFunction = (function(chart) { view = chart({el:htag}).update(); }).bind(view); vg.parse.spec(text, viewUpdateFunction); }else{ view.data.values.insert([{shortText}]); view.update(); } } } 

 <html lang="en"> <head> </head> <body > <!-- Page Content --> <div class="container"> <!-- Page Header --> <div class="row"> <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12"> <h1 class="page-header text-center">Vega</h1> <h2 class="page-sub-header text-center">Word Cloud</h2> </div> </div> <div class="row"> <div class="col-xs-12 col-sm-8 col-md-8 col-lg-8"> <h3>Wword Cloud Example</h3> <div class="row"> <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12"> <div class="cloudWord-graph" style="width:800px; length:800px; " id="wordCloud"></div> </div> </div> </div> </div> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.10/d3.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> </body> </html> 

Answer 1

I figured out the answer. I have put out the solution in github. https://github.com/GDRDABARERA/UpdatingVegaWordCloud