D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
aaizemberg
Full window
Github gist
Define: infovis ( tabú words: [data, visualization, information] )
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Define: InfoVis</title> </head> <body> <svg xmlns="https://www.w3.org/2000/svg" version="1.1" height="600" width="960"> <g transform="translate(480,300)scale(1.0526316165924072,1.0526316165924072)" style="font-family: Helvetica; fill: rgb(128, 128, 128);"> <text style="font-size: 10px;" transform="translate(-301,170)" text-anchor="middle">layout</text> <text style="font-size: 19px;" transform="translate(-90,-150)" text-anchor="middle">color</text> <text style="font-size: 46px;" transform="translate(-227,-28)" text-anchor="middle">use</text> <text style="font-size: 10px;" transform="translate(88,34)" text-anchor="middle">area</text> <text style="font-size: 10px;" transform="translate(-271,208)" text-anchor="middle">number</text> <text style="font-size: 28px;" transform="translate(-137,-133)" text-anchor="middle">makes</text> <text style="font-size: 10px;" transform="translate(-240,187)" text-anchor="middle">instead</text> <text style="font-size: 10px;" transform="translate(-50,-233)" text-anchor="middle">larger</text> <text style="font-size: 28px;" transform="translate(145,-116)" text-anchor="middle">large</text> <text style="font-size: 10px;" transform="translate(-399,11)" text-anchor="middle">performance</text> <text style="font-size: 10px;" transform="translate(102,240)" text-anchor="middle">constant</text> <text style="font-size: 37px;" transform="translate(209,-32)" text-anchor="middle">called</text> <text style="font-size: 37px;" transform="translate(260,-107)" text-anchor="middle">important</text> <text style="font-size: 10px;" transform="translate(-237,13)" text-anchor="middle">attempt</text> <text style="font-size: 19px;" transform="translate(248,-20)" text-anchor="middle">one</text> <text style="font-size: 10px;" transform="translate(306,-140)" text-anchor="middle">increasing</text> <text style="font-size: 10px;" transform="translate(30,-50)" text-anchor="middle">hard</text> <text style="font-size: 10px;" transform="translate(55,-183)" text-anchor="middle">part</text> <text style="font-size: 10px;" transform="translate(-248,198)" text-anchor="middle">efficiently</text> <text style="font-size: 19px;" transform="translate(-216,97)" text-anchor="middle">way</text> <text style="font-size: 100px;" transform="translate(-12,-22)" text-anchor="middle">abstract</text> <text style="font-size: 91px;" transform="translate(10,90)" text-anchor="middle">computer</text> <text style="font-size: 82px;" transform="translate(229,29)" text-anchor="middle">visual</text> <text style="font-size: 73px;" transform="translate(-54,20)" text-anchor="middle">space</text> <text style="font-size: 55px;" transform="translate(125,130)" text-anchor="middle">graphical</text> <text style="font-size: 46px;" transform="translate(52,174)" text-anchor="middle">cognition</text> <text style="font-size: 46px;" transform="translate(66,-80)" text-anchor="middle">records</text> <text style="font-size: 37px;" transform="translate(-192,160)" text-anchor="middle">amplify</text> <text style="font-size: 37px;" transform="translate(215,-77)" text-anchor="middle">criteria</text> <text style="font-size: 37px;" transform="translate(-206,1)" text-anchor="middle">human</text> <text style="font-size: 37px;" transform="translate(-239,37)" text-anchor="middle">interaction</text> <text style="font-size: 37px;" transform="translate(344,-34)" text-anchor="middle">interactive</text> <text style="font-size: 28px;" transform="translate(234,57)" text-anchor="middle">1998</text> <text style="font-size: 28px;" transform="translate(57,38)" text-anchor="middle">3d</text> <text style="font-size: 28px;" transform="translate(-234,-55)" text-anchor="middle">al</text> <text style="font-size: 28px;" transform="translate(-242,84)" text-anchor="middle">attributes</text> <text style="font-size: 28px;" transform="translate(-14,146)" text-anchor="middle">card</text> <text style="font-size: 28px;" transform="translate(85,0)" text-anchor="middle">charts</text> <text style="font-size: 28px;" transform="translate(21,-109)" text-anchor="middle">coordinates</text> <text style="font-size: 28px;" transform="translate(-112,152)" text-anchor="middle">et</text> <text style="font-size: 28px;" transform="translate(96,24)" text-anchor="middle">fish</text> <text style="font-size: 28px;" transform="translate(305,48)" text-anchor="middle">image</text> <text style="font-size: 28px;" transform="translate(-86,174)" text-anchor="middle">items</text> <text style="font-size: 28px;" transform="translate(-207,-78)" text-anchor="middle">kind</text> <text style="font-size: 28px;" transform="translate(38,-157)" text-anchor="middle">user</text> <text style="font-size: 19px;" transform="translate(-309,4)" text-anchor="middle">advantage</text> <text style="font-size: 19px;" transform="translate(-31,-93)" text-anchor="middle">also</text> <text style="font-size: 19px;" transform="translate(276,102)" text-anchor="middle">based</text> <text style="font-size: 19px;" transform="translate(-299,-25)" text-anchor="middle">contrast</text> <text style="font-size: 19px;" transform="translate(-72,-80)" text-anchor="middle">create</text> <text style="font-size: 19px;" transform="translate(134,146)" text-anchor="middle">deals</text> <text style="font-size: 19px;" transform="translate(71,221)" text-anchor="middle">focuses</text> <text style="font-size: 19px;" transform="translate(-154,-79)" text-anchor="middle">form</text> <text style="font-size: 19px;" transform="translate(266,119)" text-anchor="middle">forms</text> <text style="font-size: 19px;" transform="translate(-22,105)" text-anchor="middle">just</text> <text style="font-size: 19px;" transform="translate(-271,-58)" text-anchor="middle">make</text> <text style="font-size: 19px;" transform="translate(-132,33)" text-anchor="middle">map</text> <text style="font-size: 19px;" transform="translate(-205,-61)" text-anchor="middle">may</text> <text style="font-size: 19px;" transform="translate(-10,120)" text-anchor="middle">new</text> <text style="font-size: 10px;" transform="translate(60,136)" text-anchor="middle">2d</text> <text style="font-size: 10px;" transform="translate(123,-45)" text-anchor="middle">access</text> <text style="font-size: 10px;" transform="translate(-269,-149)" text-anchor="middle">accesses</text> <text style="font-size: 10px;" transform="translate(-171,13)" text-anchor="middle">action</text> <text style="font-size: 10px;" transform="translate(196,-19)" text-anchor="middle">added</text> <text style="font-size: 10px;" transform="translate(173,39)" text-anchor="middle">addresses</text> <text style="font-size: 10px;" transform="translate(-80,100)" text-anchor="middle">affording</text> <text style="font-size: 10px;" transform="translate(212,-131)" text-anchor="middle">algorithms</text> <text style="font-size: 10px;" transform="translate(-318,-62)" text-anchor="middle">alignment</text> <text style="font-size: 10px;" transform="translate(-146,68)" text-anchor="middle">allow</text> <text style="font-size: 10px;" transform="translate(163,159)" text-anchor="middle">allows</text> <text style="font-size: 10px;" transform="translate(131,212)" text-anchor="middle">application</text> <text style="font-size: 10px;" transform="translate(-2,-211)" text-anchor="middle">arranged</text> <text style="font-size: 10px;" transform="translate(286,-21)" text-anchor="middle">aspects</text> <text style="font-size: 10px;" transform="translate(161,-102)" text-anchor="middle">assist</text> <text style="font-size: 10px;" transform="translate(-129,-159)" text-anchor="middle">auditory</text> <text style="font-size: 10px;" transform="translate(-296,-15)" text-anchor="middle">automobiles</text> <text style="font-size: 10px;" transform="translate(-264,95)" text-anchor="middle">bandwidth</text> <text style="font-size: 10px;" transform="translate(66,11)" text-anchor="middle">bar</text> <text style="font-size: 10px;" transform="translate(-90,-169)" text-anchor="middle">body</text> <text style="font-size: 10px;" transform="translate(-323,68)" text-anchor="middle">brands</text> <text style="font-size: 10px;" transform="translate(127,35)" text-anchor="middle">builds</text> <text style="font-size: 10px;" transform="translate(-46,99)" text-anchor="middle">car</text> <text style="font-size: 10px;" transform="translate(198,97)" text-anchor="middle">catch</text> <text style="font-size: 10px;" transform="translate(293,61)" text-anchor="middle">census</text> <text style="font-size: 10px;" transform="translate(135,227)" text-anchor="middle">changed</text> <text style="font-size: 10px;" transform="translate(263,186)" text-anchor="middle">cluster</text> <text style="font-size: 10px;" transform="translate(-31,-126)" text-anchor="middle">collection</text> <text style="font-size: 10px;" transform="translate(-12,129)" text-anchor="middle">columns</text> <text style="font-size: 10px;" transform="translate(-120,224)" text-anchor="middle">combinatorial</text> <text style="font-size: 10px;" transform="translate(318,-77)" text-anchor="middle">compact</text> <text style="font-size: 10px;" transform="translate(-161,177)" text-anchor="middle">company</text> <text style="font-size: 10px;" transform="translate(191,212)" text-anchor="middle">complex</text> <text style="font-size: 10px;" transform="translate(-360,-37)" text-anchor="middle">complicated</text> <text style="font-size: 10px;" transform="translate(-120,233)" text-anchor="middle">computing</text> <text style="font-size: 10px;" transform="translate(-203,-190)" text-anchor="middle">concepts</text> <text style="font-size: 10px;" transform="translate(-369,-17)" text-anchor="middle">conceptual</text> <text style="font-size: 10px;" transform="translate(326,100)" text-anchor="middle">concern</text> <text style="font-size: 10px;" transform="translate(-174,216)" text-anchor="middle">containing</text> <text style="font-size: 10px;" transform="translate(102,-128)" text-anchor="middle">cost</text> <text style="font-size: 10px;" transform="translate(225,-158)" text-anchor="middle">counterpart</text> <text style="font-size: 10px;" transform="translate(-287,-128)" text-anchor="middle">creating</text> <text style="font-size: 10px;" transform="translate(-292,-141)" text-anchor="middle">database</text> <text style="font-size: 10px;" transform="translate(361,-17)" text-anchor="middle">databases</text> <text style="font-size: 10px;" transform="translate(54,-209)" text-anchor="middle">dataset</text> <text style="font-size: 10px;" transform="translate(305,170)" text-anchor="middle">deciding</text> <text style="font-size: 10px;" transform="translate(-313,96)" text-anchor="middle">decisions</text> <text style="font-size: 10px;" transform="translate(126,-190)" text-anchor="middle">describes</text> <text style="font-size: 10px;" transform="translate(-28,-222)" text-anchor="middle">design</text> <text style="font-size: 10px;" transform="translate(1,240)" text-anchor="middle">designed</text> <text style="font-size: 10px;" transform="translate(-150,-202)" text-anchor="middle">difference</text> <text style="font-size: 10px;" transform="translate(346,-58)" text-anchor="middle">dimensional</text> <text style="font-size: 10px;" transform="translate(-63,238)" text-anchor="middle">discoveries</text> <text style="font-size: 10px;" transform="translate(-110,70)" text-anchor="middle">disk</text> <text style="font-size: 10px;" transform="translate(-273,-160)" text-anchor="middle">displays</text> <text style="font-size: 10px;" transform="translate(174,-163)" text-anchor="middle">drawings</text> <text style="font-size: 10px;" transform="translate(-204,201)" text-anchor="middle">dynamic</text> <text style="font-size: 10px;" transform="translate(184,-175)" text-anchor="middle">dynamics</text> <text style="font-size: 10px;" transform="translate(39,98)" text-anchor="middle">easy</text> <text style="font-size: 10px;" transform="translate(204,-184)" text-anchor="middle">effectively</text> <text style="font-size: 10px;" transform="translate(-338,44)" text-anchor="middle">enable</text> <text style="font-size: 10px;" transform="translate(99,-200)" text-anchor="middle">enables</text> <text style="font-size: 10px;" transform="translate(353,-3)" text-anchor="middle">encoded</text> <text style="font-size: 10px;" transform="translate(-227,212)" text-anchor="middle">everything</text> <text style="font-size: 10px;" transform="translate(-338,80)" text-anchor="middle">example</text> <text style="font-size: 10px;" transform="translate(-354,-73)" text-anchor="middle">exists</text> <text style="font-size: 10px;" transform="translate(337,85)" text-anchor="middle">explanations</text> <text style="font-size: 10px;" transform="translate(-46,247)" text-anchor="middle">exploration</text> <text style="font-size: 10px;" transform="translate(-362,57)" text-anchor="middle">extracted</text> <text style="font-size: 10px;" transform="translate(-125,213)" text-anchor="middle">facilitates</text> <text style="font-size: 10px;" transform="translate(-127,166)" text-anchor="middle">far</text> <text style="font-size: 10px;" transform="translate(-108,-43)" text-anchor="middle">feet</text> <text style="font-size: 10px;" transform="translate(-79,-135)" text-anchor="middle">field</text> <text style="font-size: 10px;" transform="translate(201,64)" text-anchor="middle">files</text> <text style="font-size: 10px;" transform="translate(246,-133)" text-anchor="middle">find</text> <text style="font-size: 10px;" transform="translate(-380,0)" text-anchor="middle">fisheye</text> <text style="font-size: 10px;" transform="translate(-90,-227)" text-anchor="middle">following</text> <text style="font-size: 10px;" transform="translate(344,-68)" text-anchor="middle">follows</text> <text style="font-size: 10px;" transform="translate(53,146)" text-anchor="middle">four</text> <text style="font-size: 10px;" transform="translate(353,56)" text-anchor="middle">gained</text> <text style="font-size: 10px;" transform="translate(-180,93)" text-anchor="middle">gap</text> <text style="font-size: 10px;" transform="translate(-45,183)" text-anchor="middle">goals</text> <text style="font-size: 10px;" transform="translate(-105,184)" text-anchor="middle">good</text> <text style="font-size: 10px;" transform="translate(181,223)" text-anchor="middle">graphic</text> <text style="font-size: 10px;" transform="translate(222,-169)" text-anchor="middle">graphs</text> <text style="font-size: 10px;" transform="translate(-154,-216)" text-anchor="middle">groups</text> <text style="font-size: 10px;" transform="translate(-157,-156)" text-anchor="middle">hci</text> <text style="font-size: 10px;" transform="translate(239,-177)" text-anchor="middle">help</text> <text style="font-size: 10px;" transform="translate(-21,256)" text-anchor="middle">hiding</text> <text style="font-size: 10px;" transform="translate(-273,-46)" text-anchor="middle">high</text> <text style="font-size: 10px;" transform="translate(-72,157)" text-anchor="middle">humans</text> <text style="font-size: 10px;" transform="translate(353,8)" text-anchor="middle">imagine</text> <text style="font-size: 10px;" transform="translate(100,-211)" text-anchor="middle">improve</text> <text style="font-size: 10px;" transform="translate(-366,-63)" text-anchor="middle">include</text> <text style="font-size: 10px;" transform="translate(266,-166)" text-anchor="middle">included</text> <text style="font-size: 10px;" transform="translate(266,196)" text-anchor="middle">increasingly</text> <text style="font-size: 10px;" transform="translate(-45,-152)" text-anchor="middle">infovis</text> <text style="font-size: 10px;" transform="translate(-182,227)" text-anchor="middle">inherent</text> <text style="font-size: 10px;" transform="translate(24,-221)" text-anchor="middle">innovative</text> <text style="font-size: 10px;" transform="translate(347,27)" text-anchor="middle">insight</text> <text style="font-size: 10px;" transform="translate(313,183)" text-anchor="middle">instance</text> <text style="font-size: 10px;" transform="translate(157,238)" text-anchor="middle">interactions</text> <text style="font-size: 10px;" transform="translate(377,38)" text-anchor="middle">interesting</text> <text style="font-size: 10px;" transform="translate(-2,-230)" text-anchor="middle">interface</text> <text style="font-size: 10px;" transform="translate(287,-156)" text-anchor="middle">internet</text> <text style="font-size: 10px;" transform="translate(-348,13)" text-anchor="middle">intuitive</text> <text style="font-size: 10px;" transform="translate(42,246)" text-anchor="middle">largest</text> <text style="font-size: 10px;" transform="translate(167,-197)" text-anchor="middle">layering</text> <text style="font-size: 10px;" transform="translate(95,230)" text-anchor="middle">length</text> <text style="font-size: 10px;" transform="translate(267,-129)" text-anchor="middle">look</text> <text style="font-size: 10px;" transform="translate(-106,248)" text-anchor="middle">manipulating</text> <text style="font-size: 10px;" transform="translate(-361,69)" text-anchor="middle">mapping</text> <text style="font-size: 10px;" transform="translate(-167,167)" text-anchor="middle">maps</text> <text style="font-size: 10px;" transform="translate(375,68)" text-anchor="middle">meaning</text> <text style="font-size: 10px;" transform="translate(-253,-93)" text-anchor="middle">means</text> <text style="font-size: 10px;" transform="translate(295,-175)" text-anchor="middle">measurements</text> <text style="font-size: 10px;" transform="translate(-218,-199)" text-anchor="middle">mechanisms</text> <text style="font-size: 10px;" transform="translate(14,255)" text-anchor="middle">method</text> <text style="font-size: 10px;" transform="translate(-319,-129)" text-anchor="middle">mind</text> <text style="font-size: 10px;" transform="translate(-357,-84)" text-anchor="middle">multiple</text> <text style="font-size: 10px;" transform="translate(70,98)" text-anchor="middle">names</text> <text style="font-size: 10px;" transform="translate(-60,257)" text-anchor="middle">nature</text> <text style="font-size: 10px;" transform="translate(368,18)" text-anchor="middle">navigate</text> <text style="font-size: 10px;" transform="translate(371,-91)" text-anchor="middle">necessarily</text> <text style="font-size: 10px;" transform="translate(374,47)" text-anchor="middle">networks</text> <text style="font-size: 10px;" transform="translate(175,98)" text-anchor="middle">non</text> <text style="font-size: 10px;" transform="translate(107,248)" text-anchor="middle">nonnumeric</text> <text style="font-size: 10px;" transform="translate(-252,-187)" text-anchor="middle">numerical</text> <text style="font-size: 10px;" transform="translate(-175,236)" text-anchor="middle">occur</text> <text style="font-size: 10px;" transform="translate(-12,6)" text-anchor="middle">olly</text> <text style="font-size: 10px;" transform="translate(20,70)" text-anchor="middle">onto</text> <text style="font-size: 10px;" transform="translate(-1,-153)" text-anchor="middle">order</text> <text style="font-size: 10px;" transform="translate(-265,-118)" text-anchor="middle">outlier</text> <text style="font-size: 10px;" transform="translate(392,8)" text-anchor="middle">pictures</text> <text style="font-size: 10px;" transform="translate(72,54)" text-anchor="middle">pie</text> <text style="font-size: 55px;" transform="translate(-231,132)" text-anchor="middle">representations</text> <text style="font-size: 37px;" transform="translate(-30,207)" text-anchor="middle">graphics</text> <text style="font-size: 28px;" transform="translate(238,87)" text-anchor="middle">different</text> <text style="font-size: 19px;" transform="translate(-63,37)" text-anchor="middle">although</text> <text style="font-size: 19px;" transform="translate(-38,-161)" text-anchor="middle">defined</text> <text style="font-size: 19px;" transform="translate(212,-61)" text-anchor="middle">display</text> <text style="font-size: 19px;" transform="translate(-202,-150)" text-anchor="middle">external</text> <text style="font-size: 19px;" transform="translate(322,119)" text-anchor="middle">users</text> <text style="font-size: 37px;" transform="translate(141,203)" text-anchor="middle">techniques</text> <text style="font-size: 28px;" transform="translate(-115,-96)" text-anchor="middle">examples</text> <text style="font-size: 10px;" transform="translate(-362,92)" text-anchor="middle">numbers</text> <text style="font-size: 10px;" transform="translate(-372,-27)" text-anchor="middle">observations</text> <text style="font-size: 10px;" transform="translate(-383,79)" text-anchor="middle">people</text> <text style="font-size: 10px;" transform="translate(-385,-47)" text-anchor="middle">perception</text> <text style="font-size: 10px;" transform="translate(13,265)" text-anchor="middle">physical</text> <text style="font-size: 10px;" transform="translate(404,-7)" text-anchor="middle">physically</text> <text style="font-size: 28px;" transform="translate(209,151)" text-anchor="middle">science</text> <text style="font-size: 28px;" transform="translate(-222,-132)" text-anchor="middle">screen</text> <text style="font-size: 19px;" transform="translate(-145,-115)" text-anchor="middle">animation</text> <text style="font-size: 19px;" transform="translate(-145,202)" text-anchor="middle">cognitive</text> <text style="font-size: 28px;" transform="translate(222,176)" text-anchor="middle">scientific</text> <text style="font-size: 28px;" transform="translate(-255,59)" text-anchor="middle">sometimes</text> <text style="font-size: 28px;" transform="translate(11,-135)" text-anchor="middle">unstructured</text> <text style="font-size: 19px;" transform="translate(131,-140)" text-anchor="middle">datasets</text> <text style="font-size: 19px;" transform="translate(-32,-177)" text-anchor="middle">describing</text> <text style="font-size: 19px;" transform="translate(-231,-100)" text-anchor="middle">dimensions</text> <text style="font-size: 19px;" transform="translate(-287,-76)" text-anchor="middle">geographic</text> <text style="font-size: 19px;" transform="translate(108,-158)" text-anchor="middle">individual</text> <text style="font-size: 19px;" transform="translate(-24,228)" text-anchor="middle">interactivity</text> <text style="font-size: 19px;" transform="translate(284,-62)" text-anchor="middle">involves</text> <text style="font-size: 19px;" transform="translate(294,135)" text-anchor="middle">mapped</text> <text style="font-size: 19px;" transform="translate(307,-88)" text-anchor="middle">models</text> <text style="font-size: 19px;" transform="translate(-318,-46)" text-anchor="middle">modify</text> <text style="font-size: 19px;" transform="translate(14,38)" text-anchor="middle">much</text> <text style="font-size: 19px;" transform="translate(306,153)" text-anchor="middle">nonspatial</text> <text style="font-size: 19px;" transform="translate(-223,-120)" text-anchor="middle">pages</text> <text style="font-size: 19px;" transform="translate(-361,29)" text-anchor="middle">patterns</text> <text style="font-size: 19px;" transform="translate(-148,-170)" text-anchor="middle">properties</text> <text style="font-size: 19px;" transform="translate(-48,-193)" text-anchor="middle">relations</text> <text style="font-size: 19px;" transform="translate(-312,-94)" text-anchor="middle">results</text> <text style="font-size: 19px;" transform="translate(-140,-190)" text-anchor="middle">sensory</text> <text style="font-size: 19px;" transform="translate(-80,-118)" text-anchor="middle">show</text> <text style="font-size: 19px;" transform="translate(321,75)" text-anchor="middle">spatial</text> <text style="font-size: 19px;" transform="translate(-87,-209)" text-anchor="middle">structure</text> <text style="font-size: 19px;" transform="translate(110,-174)" text-anchor="middle">structured</text> <text style="font-size: 19px;" transform="translate(49,-192)" text-anchor="middle">taking</text> <text style="font-size: 19px;" transform="translate(-247,176)" text-anchor="middle">temporal</text> <text style="font-size: 19px;" transform="translate(-300,152)" text-anchor="middle">typically</text> <text style="font-size: 19px;" transform="translate(-255,-170)" text-anchor="middle">understanding</text> <text style="font-size: 19px;" transform="translate(253,70)" text-anchor="middle">used</text> <text style="font-size: 19px;" transform="translate(-67,148)" text-anchor="middle">using</text> <text style="font-size: 19px;" transform="translate(208,-142)" text-anchor="middle">variables</text> <text style="font-size: 19px;" transform="translate(55,237)" text-anchor="middle">work</text> <text style="font-size: 19px;" transform="translate(-304,-111)" text-anchor="middle">world</text> <text style="font-size: 10px;" transform="translate(165,-184)" text-anchor="middle">play</text> <text style="font-size: 10px;" transform="translate(-242,-161)" text-anchor="middle">plot</text> </g> </svg> </body> </html>