| <!doctype html> | |
| <html> | |
| <meta charset="UTF-8"> | |
| <head> | |
| <title>Toulouse Is AI</title> | |
| <script src="https://d3js.org/d3-array.v2.min.js"></script> | |
| <script src="https://d3js.org/d3.v5.min.js"></script> | |
| <link rel="stylesheet" href="style.css"> | |
| </head> |
This figure creates a black dot for each prime number. The numbers are plotted as a square spiral starting on the red dot and extending around it.
It is curious to notice that you can discover some oblique directions that are very dense in terms of prime occurence.
Are primes not so uniformely distributed?
We start with Bostock's Multi-Foci Force Layout example and add motion to represent traffic progressing through a system. Think of this as progress bars for every inflight transaction.
Each dot represents a transaction read from a four-minute long recording. Watch for a spike in activity at 20:20 after the hour. The animation repeats when finished.
Dots enter when transactions start and exit when completed. Their speed is proportional to client's response time while their size reflects the server's contribution to total time. Color comes from the specific request.
| <!DOCTYPE html> | |
| <meta charset="utf-8"> | |
| <style> | |
| .node circle { | |
| fill: #fff; | |
| stroke: steelblue; | |
| stroke-width: 1.5px; | |
| } |
| <!DOCTYPE html> | |
| <meta charset="utf-8"> | |
| <style> | |
| text { | |
| text-anchor: middle; | |
| font-family: verdana; | |
| } | |
| .selX { |
| //on récupere les A380 uniquement parmi les fwots | |
| var a380s = _. where(FWOTS, {type: "A380"}); | |
| //on rajoute les colonnes et on les décrit | |
| var columns = [ | |
| { name: "SD-01", | |
| domain: [0,10], | |
| colors: ['black', 'darkorange'], | |
| formula: function(data) { | |
| return _.where(data,{APUSDID: "1"}).length; |
| <!DOCTYPE html> | |
| <meta charset="utf-8"> | |
| <body> | |
| <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script> | |
| <svg width="300px" height="200px"> | |
| <rect stroke="black" fill="lightgrey" x="0" y="0" width="300px" height="200px"/> | |
| </svg> | |
| <button id="addBtn">ADD</button> | |
| <script type="text/javascript"> | |
| console.log("init all") |
| <!DOCTYPE html> | |
| <meta charset="utf-8"> | |
| <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> | |
| <script> | |
| var intercalateFails = function() { | |
| var zoomParentId = "zoom_anim_parent_bbsmashed"; | |
| var gId = "#zoom_anim"; | |
| $(gId).parent().append($("<g id='"+zoomParentId+"'>")); | |
| var that = $(gId).detach().appendTo("#"+zoomParentId); | |
| }; |
| <div class='file-input'> | |
| <input type="file" id="theSvgFile" name="theSvgFile" class="hide ie_show" onchange="readURL(this);"/> | |
| <div class="btn btn-default" onclick="$(this).parent('.file-input').find(':file').click();">Upload SVG</div> | |
| <span class="file-display"></span> | |
| <script type="text/javascript"> | |
| var readURL = function (input) { | |
| if (input.files && input.files[0]) { | |
| $(input).parent('.file-input').find('.file-display').text(input.files[0].name); | |
| } | |
| } |