Einstieg JavaScript und d3.js: wie starte ich das Script?

Computer: Software & Programmierung JavaScript & Script-Sprachen
#1

Liebe JavaScript-Experten,

Ich möchte zur Datenvisualisierung ein JavaScript-Paket (d3.js) verwenden, das kürzlich in der c’t besprochen wurde (http://www.heise.de/ct/artikel/Infografiken-mit-R-un…)

Ich will mich nun mit dem Script inhaltlich beschäftigen. Da ich aber mit JavaScript noch nichts zu tun hatte (jedenfalls nicht bewußt), scheitere ich schon daran, das vorgefertigte Script zu starten.

Wie starte ich denn ein JavaScript, wenn es als .js-Datei vorliegt, so wie im Falle der d3.js-Beispiele in der c’t?
(Ich habe nur soviel verstanden: es läuft irgendwie im Browser). Gibt es vielleicht ein einfaches(!) Tutorial zum Einstieg?

Mein System: Linux Mint 15 KDE mit Firefox 22.0

Vielen Dank für Eure Tipps,

quad

#2

Hallo quad!

Im Prinzip gibt es 2 einfache Wege.

#1#: Der Konventionelle:

  1. Erstelle eine text-Datei.

  2. Dort schreibst du rein:

  3. Benenne die Datei-Endung in .html um.

  4. Öffne die Datei mit einem Browser.
    (Im Beispiel liegt d3.js im selben Ordner wie die Datei)

#2#: Entwicklerwerkzeuge

In Firefox kannst du über shift+f4 eine „Javascript-Umgebung“ starten. Der hier eingegebene code (copy&past von d3.js) wird im offenen Tab von Firefox ausgeführt, wenn du Rechtklick und „ausführen“ bzw. strg+r drückst.

Möchtest du online testen, finden viele JSFiddle ganz gut:
http://jsfiddle.net/
Links unten kopierst du den Javascript-Quellcode hinein, rechts daneben erscheint das Ergebnis, nachdem du „Run“ geklickt hast.
Zusätzlich kannst du oben links HTML-Code und und oben rechts CSS-Code eingeben.

mit freundlichen Grüßen
Julian

#3

Hallo quad,

da „dein Script“ vermutlich eine tsv-Datei einliest, geht das nicht einfach per Doppelklick auf die index.html. Hat glaube ich irgendwas mit der Browsersicherheit zu tun (weiss ich aber nicht so genau)

Da du Linux-User bist, geht das zum Testen erstmal ganz einfach.
Starte ein Terminal und gib das ein:

 python -m SimpleHTTPServer 8085 &

(wenn Python http://localhost:8085 ein, navigierst zu dem Ordner wo deine html, script-Datei und tsv-Datei liegen und öffnest die index.html und schon kannst du das Chart bewundern.

Viel Spass!
XXD

P.S. Cooles Framework -> Tutorials und 100 te Beispiele findest du hier: http://d3js.org/

#4

Super,

vielen Dank für Eure Antworten; der Weg über eine *.html funktioniert, die anderen Vorschläge probiere ich noch.

Viele Grüße,
quad.