created by http://livecoding.io

README.md

View this code at http://livecoding.io/5922395

options.json

{
    "libraries": [],
    "mode": "javascript",
    "layout": "fullscreen mode (vertical)",
    "resolution": "reset"
}

water.css

/* css goes here */

water.html

<svg></svg>

water.js

var diameter = 500
var format = d3.format(",d")
var color = d3.scale.category20c();

var bubble = d3.layout.pack()
    .sort(null)
    .size([diameter, diameter])
    .padding(1.5);

var page_text="Consider the dashboard of a car: in it, the driver can see the most important data: speed, RPM, mileage, etc. The dashboard displays decision-making information, in a graphical manner, in a single place. The information dashboards should comply with the same requirements: Although not necessarily copying the model of a car! This is a mistake. There are better ways to graphically display information. CIO Dashboard, a Stephen Few classic So, we take a few charts, some tables and we throw them all together in one screen, right? Uh… nope. What makes a good dashboard? It contains the requested information (obvious? Not always!) It has readable text with high contrast (black over white, or some other light shading). It highlights the key information. Charts are easy to find. The problems are marked with icons or in bold letters. The important information is generally at the upper left or lower right side. It has no more than 5 or 6 data containers. It displays useful data to make decisions. Comparisons against goals, previously set standards or historical data. It doesn’t require vertical or horizontal scrolling. All the information is shown in the same screen. If you have a lot of information, you can use tabs. If you must, use multiple screens. But remember: the key is to keep all the data related to each other in the same screen. Its graphics have a high data/ink ratio without chartjunk. It displays the right charts according to the type of data. What seems interactive, is interactive. The charts offer details and drill-down when you click on them. But I think the most important thing is that the dashboard tells a story, or helps you tell a story and, above all else, is esthetically simple. No color degradations or images with shading or use of 3D. Imagine for a second that your car displayed your speed with a 3D chart, would you be able to read it so easily? Would you be able to make right decisions? I don’t think so. Have that in mind when designing a dashboard. Inspiration At Excelcharts you can get various dashboard examples made in excel. If you need a little more spiritual aid, I recommend Information Dashboard Design, de Stephen Few.  A short and easy to read book; ruthless when it comes to tearing down old notions and clear when teaching the principles of good design for dashboards and reports in general. Although it has some things specific to their product, the Tableau Visual Guidebook is an excellent guide on the basics of producing a good data visualization. The last pages contain a great checklist that you should complete before deploying your visualization. ";

var stopwords = {"com":1,"amp":1,"http":1,"href":1,"statuses":1,"search":1,"ago":1,"link":1,"hours":1,"comments":1,"a":1, "about":1, "above":1, "above":1, "across":1, "after":1, "afterwards":1, "again":1, "against":1, "all":1, "almost":1, "alone":1, "along":1, "already":1, "also":1,"although":1,"always":1,"am":1,"among":1, "amongst":1, "amoungst":1, "amount":1,  "an":1, "and":1, "another":1, "any":1,"anyhow":1,"anyone":1,"anything":1,"anyway":1, "anywhere":1, "are":1, "around":1, "as":1,  "at":1, "back":1,"be":1,"became":1, "because":1,"become":1,"becomes":1, "becoming":1, "been":1, "before":1, "beforehand":1, "behind":1, "being":1, "below":1, "beside":1, "besides":1, "between":1, "beyond":1, "bill":1, "both":1, "bottom":1, "but":1, "by":1, "call":1, "can":1, "cannot":1, "cant":1, "co":1, "con":1, "could":1, "couldnt":1, "cry":1, "de":1, "describe":1, "detail":1, "do":1, "done":1, "down":1, "due":1, "during":1, "each":1, "eg":1, "eight":1, "either":1, "eleven":1,"else":1, "elsewhere":1, "empty":1, "enough":1, "etc":1, "even":1, "ever":1, "every":1, "everyone":1, "everything":1, "everywhere":1, "except":1, "few":1, "fifteen":1, "fify":1, "fill":1, "find":1, "fire":1, "first":1, "five":1, "for":1, "former":1, "formerly":1, "forty":1, "found":1, "four":1, "from":1, "front":1, "full":1, "further":1, "get":1, "give":1, "go":1, "had":1, "has":1, "hasnt":1, "have":1, "he":1, "hence":1, "her":1, "here":1, "hereafter":1, "hereby":1, "herein":1, "hereupon":1, "hers":1, "herself":1, "him":1, "himself":1, "his":1, "how":1, "however":1, "hundred":1, "ie":1, "if":1, "in":1, "inc":1, "indeed":1, "interest":1, "into":1, "is":1, "it":1, "its":1, "itself":1, "keep":1, "last":1, "latter":1, "latterly":1, "least":1, "less":1, "ltd":1, "made":1, "many":1, "may":1, "me":1, "meanwhile":1, "might":1, "mill":1, "mine":1, "more":1, "moreover":1, "most":1, "mostly":1, "move":1, "much":1, "must":1, "my":1, "myself":1, "name":1, "namely":1, "neither":1, "never":1, "nevertheless":1, "next":1, "nine":1, "no":1, "nobody":1, "none":1, "noone":1, "nor":1, "not":1, "nothing":1, "now":1, "nowhere":1, "of":1, "off":1, "often":1, "on":1, "once":1, "one":1, "only":1, "onto":1, "or":1, "other":1, "others":1, "otherwise":1, "our":1, "ours":1, "ourselves":1, "out":1, "over":1, "own":1,"part":1, "per":1, "perhaps":1, "please":1, "put":1, "rather":1, "re":1, "same":1, "see":1, "seem":1, "seemed":1, "seeming":1, "seems":1, "serious":1, "several":1, "she":1, "should":1, "show":1, "side":1, "since":1, "sincere":1, "six":1, "sixty":1, "so":1, "some":1, "somehow":1, "someone":1, "something":1, "sometime":1, "sometimes":1, "somewhere":1, "still":1, "such":1, "system":1, "take":1, "ten":1, "than":1, "that":1, "the":1, "their":1, "them":1, "themselves":1, "then":1, "thence":1, "there":1, "thereafter":1, "thereby":1, "therefore":1, "therein":1, "thereupon":1, "these":1, "they":1, "thickv":1, "thin":1, "third":1, "this":1, "those":1, "though":1, "three":1, "through":1, "throughout":1, "thru":1, "thus":1, "to":1, "together":1, "too":1, "top":1, "toward":1, "towards":1, "twelve":1, "twenty":1, "two":1, "un":1, "under":1, "until":1, "up":1, "upon":1, "us":1, "very":1, "via":1, "was":1, "we":1, "well":1, "were":1, "what":1, "whatever":1, "when":1, "whence":1, "whenever":1, "where":1, "whereafter":1, "whereas":1, "whereby":1, "wherein":1, "whereupon":1, "wherever":1, "whether":1, "which":1, "while":1, "whither":1, "who":1, "whoever":1, "whole":1, "whom":1, "whose":1, "why":1, "will":1, "with":1, "within":1, "without":1, "would":1, "yet":1, "you":1, "your":1, "yours":1, "yourself":1, "yourselves":1, "the":1};

var regex=/\s|\.|,|;|[^a-zA-Z0-9]/g;

var tokens=page_text.split(regex);
var totalWords=tokens.length;

var wordStr="";
var wordList=[];
var wordCount=[];
var wordMap={}
var wordIdList=[];
var wordId=0;

//from www.infocaptor.com/bubble-my-page
for (var i=0;i<tokens.length ;i++) {
  wordStr=tokens[i];
  try {
      if (typeof(wordStr)!="undefined" && wordStr.length>2) {
        wordStr=wordStr.toLowerCase();
        if (stopwords[wordStr]==1 ) {
           continue; //skip the stop words;
        }
        //not the best way to remove plurals, #iknow
         wordStr=wordStr.replace(/s$/, "");
         
          if (typeof(wordMap[wordStr])=="undefined"  ){
            
            wordList.push(wordStr);
            wordCount.push(1);
            wordMap[wordStr]=wordId;
            wordIdList.push(wordId);
            wordId++;
            
          } else {
            wordCount[wordMap[wordStr]]++;
          } 
    }
  }
  catch (err){}
}

wordIdList.sort(function(x, y) { 
    return -wordCount[x] + wordCount[y] 
});

var datarr=[
  wordList,
  wordCount
];

var data=[];

var datarr0length=datarr[0].length
for (var di=0;di<datarr0length;di++) {
  data.push({"key":di, "word": datarr[0][di], "value":datarr[1][di]});
}
//this can also be done in the chart
data = data.filter(function(d){return d.value>1});

var svg = d3.select("svg");

var node = svg.selectAll('.node')
      .data(bubble.nodes({children:data})
            .filter(function(d) {return !d.children}))
    .enter().append('g')
      .attr('class','node')
      .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; })
            .style("fill", function(d) { return color(d.word); })
                    .on("mouseover", function(d,i)
                {
                    d3.select(this).style("fill", "gold"); 
                    showToolTip(" "+d.word+"<br>"+d.value+" ",d.x+d3.mouse(this)[0]+50,d.y+d3.mouse(this)[1],true);
                })
                .on("mousemove", function(d,i)
                {
                    tooltipDivID.css({top:d.y+d3.mouse(this)[1],left:d.x+d3.mouse(this)[0]+50});
                })  
                .on("mouseout", function()
                {
                    d3.select(this).style("fill", function(d) { return color(d.word); });
                    showToolTip(" ",0,0,false);
                })  
                ;
  node.append("circle")
      .attr('r',0)
      .transition().duration(2000)
      .attr("r", function(d) { return d.r; })
    ;

  node.append("text")
      .style('fill',"#222222")
      .style("text-anchor", "middle")
      .style('font-size',0)
    .transition().duration(2000)
      .attr("dy", "0.3em")
    .style('font-size',function(d){return d.r/2.5})
      .text(function(d) { return d.word.substring(0, d.r / 3); });


function showToolTip(pMessage,pX,pY,pShow)
{
  if (typeof(tooltipDivID)=="undefined")
  {
             tooltipDivID =$('<div id="messageToolTipDiv" style="position:absolute;display:block;z-index:10000;border:2px solid black;background-color:rgba(0,0,0,0.8);margin:auto;padding:3px 5px 3px 5px;color:white;font-size:12px;font-family:arial;border-radius: 5px;vertical-align: middle;text-align: center;min-width:50px;overflow:auto;"></div>');

    $('body').append(tooltipDivID);
  }
  if (!pShow) { tooltipDivID.hide(); return;}
  //MT.tooltipDivID.empty().append(pMessage);
  tooltipDivID.html(pMessage);
  tooltipDivID.css({top:pY,left:pX});
  tooltipDivID.show();
}

function getContrast50(hexcolor)
    { 
      var hexdec = parseInt((hexcolor + '').replace(/[^a-f0-9]/gi, ''), 16);

      return (hexdec > 0xffffff/2) ? '#444444':'#fdfdfd'; 
    }

water.json

{ }