Last active
October 29, 2015 00:25
-
-
Save tophtucker/4bfa40c582c96fba7c45 to your computer and use it in GitHub Desktop.
Text annotations (list)
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html> | |
<meta charset="utf-8"> | |
<meta name="viewport" content="width=device-width, initial-scale=1"> | |
<title></title> | |
<link rel="stylesheet" type="text/css" href="main.css"/> | |
<body class="text-annotation"> | |
</body> | |
<script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js" charset="utf-8"></script> | |
<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js" charset="utf-8"></script> | |
<script src="//cdn.rawgit.com/gka/d3-jetpack/master/d3-jetpack.js" charset="utf-8"></script> | |
<script src="zoomAndDodge.js" charset="utf-8"></script> | |
<script src="main.js" charset="utf-8"></script> | |
</html> |
We can make this file beautiful and searchable if this error is corrected: No tabs found in this TSV file in line 0.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
language | |
A# .NET | |
A# (Axiom) | |
A-0 System | |
A+ | |
A++ | |
ABAP | |
ABC | |
ABC ALGOL | |
ABLE | |
ABSET | |
ABSYS | |
ACC | |
Accent | |
Ace DASL | |
ACL2 | |
ACT-III | |
Action! | |
ActionScript | |
Ada | |
Adenine | |
Agda | |
Agilent VEE | |
Agora | |
AIMMS | |
Alef | |
ALF | |
ALGOL 58 | |
ALGOL 60 | |
ALGOL 68 | |
ALGOL W | |
Alice | |
Alma-0 | |
AmbientTalk | |
Amiga E | |
AMOS | |
AMPL | |
Apex (Salesforce.com) | |
APL | |
App Inventor for Android's visual block language | |
AppleScript | |
Arc | |
ARexx | |
Argus | |
AspectJ | |
Assembly language | |
ATS | |
Ateji PX | |
AutoHotkey | |
Autocoder | |
AutoIt | |
AutoLISP / Visual LISP | |
Averest | |
AWK | |
Axum | |
B | |
Babbage | |
Bash | |
BASIC | |
bc | |
BCPL | |
BeanShell | |
Batch (Windows/Dos) | |
Bertrand | |
BETA | |
Bigwig | |
Bistro | |
BitC | |
BLISS | |
Blue | |
Boo | |
Boomerang | |
Bourne shell (including bash and ksh) | |
BREW | |
BPEL | |
C | |
C-- | |
C++ – ISO/IEC 14882 | |
C# – ISO/IEC 23270 | |
C/AL | |
Caché ObjectScript | |
C Shell | |
Caml | |
Cayenne | |
CDuce | |
Cecil | |
Cel | |
Cesil | |
Ceylon | |
CFEngine | |
CFML | |
Cg | |
Ch | |
Chapel | |
CHAIN | |
Charity | |
Charm | |
Chef | |
CHILL | |
CHIP-8 | |
chomski | |
ChucK | |
CICS | |
Cilk | |
CL (IBM) | |
Claire | |
Clarion | |
Clean | |
Clipper | |
CLIST | |
Clojure | |
CLU | |
CMS-2 | |
COBOL – ISO/IEC 1989 | |
Cobra | |
CODE | |
CoffeeScript | |
Cola | |
ColdC | |
ColdFusion | |
COMAL | |
Combined Programming Language (CPL) | |
COMIT | |
Common Intermediate Language (CIL) | |
Common Lisp (also known as CL) | |
COMPASS | |
Component Pascal | |
Constraint Handling Rules (CHR) | |
Converge | |
Cool | |
Coq | |
Coral 66 | |
Corn | |
CorVision | |
COWSEL | |
CPL | |
csh | |
CSP | |
Cryptol | |
Csound | |
CUDA | |
Curl | |
Curry | |
Cyclone | |
Cython | |
D | |
DASL (Datapoint's Advanced Systems Language) | |
DASL (Distributed Application Specification Language) | |
Dart | |
DataFlex | |
Datalog | |
DATATRIEVE | |
dBase | |
dc | |
DCL | |
Deesel (formerly G) | |
Delphi | |
DinkC | |
DIBOL | |
Dog | |
Draco | |
DRAKON | |
Dylan | |
DYNAMO | |
E | |
E# | |
Ease | |
Easy PL/I | |
Easy Programming Language | |
EASYTRIEVE PLUS | |
ECMAScript | |
Edinburgh IMP | |
EGL | |
Eiffel | |
ELAN | |
Elixir | |
Elm | |
Emacs Lisp | |
Emerald | |
Epigram | |
EPL | |
Erlang | |
es | |
Escher | |
ESPOL | |
Esterel | |
Etoys | |
Euclid | |
Euler | |
Euphoria | |
EusLisp Robot Programming Language | |
CMS EXEC (EXEC) | |
EXEC 2 | |
Executable UML | |
F | |
F# | |
Factor | |
Falcon | |
Fantom | |
FAUST | |
FFP | |
Fjölnir | |
FL | |
Flavors | |
Flex | |
FLOW-MATIC | |
FOCAL | |
FOCUS | |
FOIL | |
FORMAC | |
@Formula | |
Forth | |
Fortran – ISO/IEC 1539 | |
Fortress | |
FoxBase | |
FoxPro | |
FP | |
FPr | |
Franz Lisp | |
Frege | |
F-Script | |
G | |
Google Apps Script | |
Game Maker Language | |
GameMonkey Script | |
GAMS | |
GAP | |
G-code | |
Genie | |
GDL | |
GJ | |
GEORGE | |
GLSL | |
GNU E | |
GM | |
Go | |
Go! | |
GOAL | |
Gödel | |
Godiva | |
GOM (Good Old Mad) | |
Goo | |
Gosu | |
GOTRAN | |
GPSS | |
GraphTalk | |
GRASS | |
Groovy | |
Hack | |
HAL/S | |
Hamilton C shell | |
Harbour | |
Hartmann pipelines | |
Haskell | |
Haxe | |
High Level Assembly | |
HLSL | |
Hop | |
Hope | |
Hugo | |
Hume | |
HyperTalk | |
IBM Basic assembly language | |
IBM HAScript | |
IBM Informix-4GL | |
IBM RPG | |
ICI | |
Icon | |
Id | |
IDL | |
Idris | |
IMP | |
Inform | |
Io | |
Ioke | |
IPL | |
IPTSCRAE | |
ISLISP | |
ISPF | |
ISWIM | |
J | |
J# | |
J++ | |
JADE | |
Jako | |
JAL | |
Janus | |
JASS | |
Java | |
JavaScript | |
JCL | |
JEAN | |
Join Java | |
JOSS | |
Joule | |
JOVIAL | |
Joy | |
JScript | |
JScript .NET | |
JavaFX Script | |
Julia | |
Jython | |
K | |
Kaleidoscope | |
Karel | |
Karel++ | |
KEE | |
Kixtart | |
Klerer-May System | |
KIF | |
Kojo | |
Kotlin | |
KRC | |
KRL | |
KRL (KUKA Robot Language) | |
KRYPTON | |
ksh | |
L | |
L# .NET | |
LabVIEW | |
Ladder | |
Lagoona | |
LANSA | |
Lasso | |
LaTeX | |
Lava | |
LC-3 | |
Leda | |
Legoscript | |
LIL | |
LilyPond | |
Limbo | |
Limnor | |
LINC | |
Lingo | |
Linoleum | |
LIS | |
LISA | |
Lisaac | |
Lisp – ISO/IEC 13816 | |
Lite-C | |
Lithe | |
Little b | |
Logo | |
Logtalk | |
LotusScript | |
LPC | |
LSE | |
LSL | |
LiveCode | |
LiveScript | |
Lua | |
Lucid | |
Lustre | |
LYaPAS | |
Lynx | |
M2001 | |
M4 | |
M# | |
Machine code | |
MAD (Michigan Algorithm Decoder) | |
MAD/I | |
Magik | |
Magma | |
make | |
Maple | |
MAPPER now part of BIS | |
MARK-IV now VISION:BUILDER | |
Mary | |
MASM Microsoft Assembly x86 | |
Mathematica | |
MATLAB | |
Maxima (see also Macsyma) | |
Max (Max Msp – Graphical Programming Environment) | |
MaxScript internal language 3D Studio Max | |
Maya (MEL) | |
MDL | |
Mercury | |
Mesa | |
Metacard | |
Metafont | |
Microcode | |
MicroScript | |
MIIS | |
MillScript | |
MIMIC | |
Mirah | |
Miranda | |
MIVA Script | |
ML | |
Moby | |
Model 204 | |
Modelica | |
Modula | |
Modula-2 | |
Modula-3 | |
Mohol | |
MOO | |
Mortran | |
Mouse | |
MPD | |
MSIL – deprecated name for CIL | |
MSL | |
MUMPS | |
Mystic Programming Language (MPL) | |
NASM | |
NATURAL | |
Napier88 | |
Neko | |
Nemerle | |
nesC | |
NESL | |
Net.Data | |
NetLogo | |
NetRexx | |
NewLISP | |
NEWP | |
Newspeak | |
NewtonScript | |
NGL | |
Nial | |
Nice | |
Nickle | |
Nim | |
NPL | |
Not eXactly C (NXC) | |
Not Quite C (NQC) | |
NSIS | |
Nu | |
NWScript | |
NXT-G | |
o:XML | |
Oak | |
Oberon | |
OBJ2 | |
Object Lisp | |
ObjectLOGO | |
Object REXX | |
Object Pascal | |
Objective-C | |
Objective-J | |
Obliq | |
OCaml | |
occam | |
occam-π | |
Octave | |
OmniMark | |
Onyx | |
Opa | |
Opal | |
OpenCL | |
OpenEdge ABL | |
OPL | |
OPS5 | |
OptimJ | |
Orc | |
ORCA/Modula-2 | |
Oriel | |
Orwell | |
Oxygene | |
Oz | |
P′′ | |
P# | |
ParaSail (programming language) | |
PARI/GP | |
Pascal – ISO 7185 | |
PCASTL | |
PCF | |
PEARL | |
PeopleCode | |
Perl | |
PDL | |
Perl6 | |
PHP | |
Phrogram | |
Pico | |
Picolisp | |
Pict | |
Pike | |
PIKT | |
PILOT | |
Pipelines | |
Pizza | |
PL-11 | |
PL/0 | |
PL/B | |
PL/C | |
PL/I – ISO 6160 | |
PL/M | |
PL/P | |
PL/SQL | |
PL360 | |
PLANC | |
Plankalkül | |
Planner | |
PLEX | |
PLEXIL | |
Plus | |
POP-11 | |
PostScript | |
PortablE | |
Powerhouse | |
PowerBuilder – 4GL GUI applcation generator from Sybase | |
PowerShell | |
PPL | |
Processing | |
Processing.js | |
Prograph | |
PROIV | |
Prolog | |
PROMAL | |
Promela | |
PROSE modeling language | |
PROTEL | |
ProvideX | |
Pro*C | |
Pure | |
Python | |
Q (equational programming language) | |
Q (programming language from Kx Systems) | |
Qalb | |
QtScript | |
QuakeC | |
QPL | |
R | |
R++ | |
Racket | |
RAPID | |
Rapira | |
Ratfiv | |
Ratfor | |
rc | |
REBOL | |
Red | |
Redcode | |
REFAL | |
Reia | |
Revolution | |
rex | |
REXX | |
Rlab | |
ROOP | |
RPG | |
RPL | |
RSL | |
RTL/2 | |
Ruby | |
RuneScript | |
Rust | |
S | |
S2 | |
S3 | |
S-Lang | |
S-PLUS | |
SA-C | |
SabreTalk | |
SAIL | |
SALSA | |
SAM76 | |
SAS | |
SASL | |
Sather | |
Sawzall | |
SBL | |
Scala | |
Scheme | |
Scilab | |
Scratch | |
Script.NET | |
Sed | |
Seed7 | |
Self | |
SenseTalk | |
SequenceL | |
SETL | |
SIMPOL | |
SIGNAL | |
SiMPLE | |
SIMSCRIPT | |
Simula | |
Simulink | |
SISAL | |
SLIP | |
SMALL | |
Smalltalk | |
Small Basic | |
SML | |
Snap! | |
SNOBOL(SPITBOL) | |
Snowball | |
SOL | |
Span | |
SPARK | |
Speedcode | |
SPIN | |
SP/k | |
SPS | |
SQR | |
Squeak | |
Squirrel | |
SR | |
S/SL | |
Stackless Python | |
Starlogo | |
Strand | |
Stata | |
Stateflow | |
Subtext | |
SuperCollider | |
SuperTalk | |
Swift (Apple programming language) | |
Swift (parallel scripting language) | |
SYMPL | |
SyncCharts | |
SystemVerilog | |
T | |
TACL | |
TACPOL | |
TADS | |
TAL | |
Tcl | |
Tea | |
TECO | |
TELCOMP | |
TeX | |
TEX | |
TIE | |
Timber | |
TMG, compiler-compiler | |
Tom | |
TOM | |
TouchDevelop | |
Topspeed | |
TPU | |
Trac | |
TTM | |
T-SQL | |
TTCN | |
Turing | |
TUTOR | |
TXL | |
TypeScript | |
Turbo C++ | |
Ubercode | |
UCSD Pascal | |
Umple | |
Unicon | |
Uniface | |
UNITY | |
Unix shell | |
UnrealScript | |
Vala | |
VBA | |
VBScript | |
Verilog | |
VHDL | |
Visual Basic | |
Visual Basic .NET | |
Visual DataFlex | |
Visual DialogScript | |
Visual Fortran | |
Visual FoxPro | |
Visual J++ | |
Visual J# | |
Visual Objects | |
Visual Prolog | |
VSXu | |
vvvv | |
WATFIV, WATFOR | |
WebDNA | |
WebQL | |
Windows PowerShell | |
Winbatch | |
Wolfram Language | |
Wyvern | |
X++ | |
X# | |
X10 | |
XBL | |
XC (exploits XMOS architecture) | |
xHarbour | |
XL | |
Xojo | |
XOTcl | |
XPL | |
XPL0 | |
XQuery | |
XSB | |
XSLT – see XPath | |
Xtend | |
Yorick | |
YQL | |
Z notation | |
Zeno | |
ZOPL | |
ZPL |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
* { | |
box-sizing: border-box; } | |
.text-annotation { | |
position: relative; | |
padding: 50px; | |
font: 12px sans-serif; } | |
.text-annotation * { | |
box-sizing: border-box; } | |
.text-annotation svg.lines { | |
position: absolute; | |
pointer-events: none; | |
width: 100%; | |
height: 100%; | |
top: 0; | |
left: 0; | |
z-index: -1; } | |
.text-annotation svg.lines line { | |
stroke: black; | |
stroke-width: 1; } | |
.text-annotation .item { | |
position: relative; | |
display: inline-block; | |
width: 12em; | |
padding: .5em; } | |
.text-annotation .item.annotated a.label { | |
border-bottom: 1px dotted black; | |
background: white; } | |
.text-annotation .item a { | |
color: inherit; | |
text-decoration: none; } | |
.text-annotation .item a:hover { | |
border-bottom: 1px solid black !important; } | |
.text-annotation .item .annotation { | |
position: absolute; | |
z-index: 2; | |
text-decoration: none; | |
background: white; | |
border: 1px solid black; | |
padding: .5em; | |
width: 10em; } | |
/*# sourceMappingURL=main.css.map */ |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{ | |
"version": 3, | |
"mappings": "AAAA,CAAE;EACA,UAAU,EAAE,UAAU;;AAGxB,gBAAiB;EAEf,QAAQ,EAAE,QAAQ;EAClB,OAAO,EAAE,IAAI;EACb,IAAI,EAAE,eAAe;EAErB,kBAAE;IACA,UAAU,EAAE,UAAU;EAGxB,0BAAU;IACR,QAAQ,EAAE,QAAQ;IAClB,cAAc,EAAE,IAAI;IACpB,KAAK,EAAE,IAAI;IACX,MAAM,EAAE,IAAI;IACZ,GAAG,EAAE,CAAC;IACN,IAAI,EAAE,CAAC;IACP,OAAO,EAAE,EAAE;IAEX,+BAAK;MACH,MAAM,EAAE,KAAK;MACb,YAAY,EAAE,CAAC;EAInB,sBAAM;IACJ,QAAQ,EAAE,QAAQ;IAClB,OAAO,EAAE,YAAY;IACrB,KAAK,EAAE,IAAI;IACX,OAAO,EAAE,IAAI;IAEb,wCAAoB;MAClB,aAAa,EAAE,gBAAgB;MAC/B,UAAU,EAAE,KAAK;IAGnB,wBAAE;MACA,KAAK,EAAE,OAAO;MACd,eAAe,EAAE,IAAI;IAGvB,8BAAQ;MACN,aAAa,EAAE,0BAA0B;IAG3C,kCAAY;MACV,QAAQ,EAAE,QAAQ;MAClB,OAAO,EAAE,CAAC;MACV,eAAe,EAAE,IAAI;MACrB,UAAU,EAAE,KAAmB;MAC/B,MAAM,EAAE,eAAe;MACvB,OAAO,EAAE,IAAI;MACb,KAAK,EAAE,IAAI", | |
"sources": ["main.scss"], | |
"names": [], | |
"file": "main.css" | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
var container = d3.select(".text-annotation"); | |
d3.tsv("languages.tsv", function(error, data) { | |
data.forEach(function(d) { | |
if(Math.random() > .8) { | |
var pangram = "The quick brown fox jumped over the lazy cat"; | |
d.annotation = pangram.substr(0,Math.floor(Math.random() * (pangram.length-1))); | |
} | |
}) | |
data = data.slice(0,300); | |
container.append("svg.lines"); | |
var items = container.selectAll("div.item") | |
.data(data) | |
.enter() | |
.append("div.item") | |
.classed('annotated', ƒ('annotation')); | |
items.append("a.label") | |
.attr("href", function(d) { return "https://en.wikipedia.org/wiki/" + d.language.replace(/ /g, '_'); }) | |
.attr("target", "_blank") | |
.text(ƒ('language')); | |
items.call(zoomAndDodge); | |
}) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
* { | |
box-sizing: border-box; | |
} | |
.text-annotation { | |
position: relative; | |
padding: 50px; | |
font: 12px sans-serif; | |
* { | |
box-sizing: border-box; | |
} | |
svg.lines { | |
position: absolute; | |
pointer-events: none; | |
width: 100%; | |
height: 100%; | |
top: 0; | |
left: 0; | |
z-index: -1; | |
line { | |
stroke: black; | |
stroke-width: 1; | |
} | |
} | |
.item { | |
position: relative; | |
display: inline-block; | |
width: 12em; | |
padding: .5em; | |
&.annotated a.label { | |
border-bottom: 1px dotted black; | |
background: white; | |
} | |
a { | |
color: inherit; | |
text-decoration: none; | |
} | |
a:hover { | |
border-bottom: 1px solid black !important; | |
} | |
.annotation { | |
position: absolute; | |
z-index: 2; | |
text-decoration: none; | |
background: rgba(255,255,255,1); | |
border: 1px solid black; | |
padding: .5em; | |
width: 10em; | |
} | |
} | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// derived from | |
// https://github.com/bizweekgraphics/photo-annotations/blob/9ae16cd0d427c6115dbb7b8d90e827fd46ac61e5/src/scripts/zoomAndDodge.js | |
function zoomAndDodge(selection) { | |
var opacityScale = d3.scale.linear().domain([100,500]).range([1,0.1]).clamp(true), | |
displacementScale = d3.scale.log().domain([50,1000]).range([100,0]).clamp(true), | |
scaleScale = d3.scale.linear().domain([100,500]).range([1,0.2]).clamp(true); | |
selection.each(function(d,i) { | |
if(!d.annotation) return; | |
var sel = d3.select(this), | |
label = sel.select('a.label'), | |
svg = d3.select("svg"), | |
id = Math.random().toString().split('.')[1]; | |
var anno = sel.append('div.annotation') | |
.text(ƒ('annotation')) | |
.style("opacity", 0); | |
var annoLine = svg.append("line") | |
.attr("x1", 0) | |
.attr("y1", 0) | |
.attr("x2", 0) | |
.attr("y2", 0) | |
.style("opacity", 0); | |
d3.select('body').on('mousemove.'+id, function(d,i) { | |
var mouse = d3.mouse(sel.node()); | |
var point = [ | |
0 * sel.node().offsetLeft + 1 * label.node().offsetLeft + 0.5 * label.node().offsetWidth, | |
0 * sel.node().offsetTop + 1 * label.node().offsetTop + 0.5 * label.node().offsetHeight | |
] | |
var dif = [ | |
mouse[0] - point[0], | |
mouse[1] - point[1] | |
]; | |
var distance = Math.sqrt(Math.pow(dif[0], 2) + Math.pow(dif[1], 2)); | |
var difNormal = dif.map(function(i) { return i/distance; }); | |
anno | |
.style('left', (displacementScale(distance) * -difNormal[0] + 0.5 * label.node().offsetWidth) + 'px') | |
.style('top', (displacementScale(distance) * -difNormal[1] + 0.5 * label.node().offsetHeight) + 'px') | |
.style('opacity', opacityScale(distance)) | |
.style('transform', 'translate(-50%, -50%) scale('+scaleScale(distance)+')'); | |
annoLine | |
.attr("x1", sel.node().offsetLeft + 0.5 * label.node().offsetWidth + label.node().offsetLeft) | |
.attr("y1", sel.node().offsetTop + 0.5 * label.node().offsetHeight + label.node().offsetTop) | |
.attr("x2", sel.node().offsetLeft + 0.5 * label.node().offsetWidth + displacementScale(distance) * -difNormal[0]) | |
.attr("y2", sel.node().offsetTop + 0.5 * label.node().offsetHeight + displacementScale(distance) * -difNormal[1]) | |
.style("opacity", opacityScale(distance)); | |
}); | |
}) | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment