Javascript D3/Chart - wie bekomme ich diese Beispiel lokal zum laufen

[cppbert (Gast)]

Ich hab hier das für mich perfekte D3 (https://d3js.org/) Line-Chart 
Beispiel mit Javascript gefunden um C++ Benchmark-Ergebnisse schön zu 
präsentieren (normalerweise nutze ich GnuPlot/Excel) - die 
Datengrundlage habe ich fertig nur die Anzeige will nicht so recht 
klappen

Dieses Javascript/D3 Beispiel 
(https://riptutorial.com/de/d3-js/example/20005/einfaches-d3-diagramm--hallo-welt-)

hab ich problemlos zum laufen gebracht - Copy&Paste, läuft

und dann noch diese genau passende Beispiel gefunden
https://observablehq.com/@d3/multi-line-chart

mein Versuch: https://pastebin.com/3iN2twWS
zeigt einfach gar nichts im Browser/auch keine Fehkler
ich sehe auch im Code nicht wie das HTML<->Javascript zusammenspiel 
funktionieren soll

ich mich mit Javascript (oder besser gesagt die Integration in eine HTML 
Seite) nicht wirklich aus - nur was ich normalweise so in QML/Qbs nutze 
- d.h. ich habe keine Ahnung wie die Interation zwischen Javascript/D3 
und der HTML-Ausgabe funktioniert, oder was ich vergessen habe zu 
verbinden

Kann jemand helfen?

[cppbert (Gast)]

Chrome: Strg+Shift+J zeigt mir einen

"Uncaught SyntaxError: Unexpected identifier" Fehler

dem Browser scheint das create in "const svg = d3.create("svg")" nicht 
zu schmecken

[Mathias M. (matjes)]

Das muss irgendein Javascript mist sein, der einem 10 Zeichen tippen 
spart. Das Problem ist, dass "chart = {" ein Objekt erzeugen will, aber 
der Body irgendwie offensichtlich eine Funktion sein will. Probiers mal 
mit "chart = function(){", später dann noch "data = function() {" Ich 
denke damit kommt man schon weiter, aber dann kommt ein Fehler beim 
"await FileAttachment". Ich hab jetzt keine Ahnung, was das genau macht 
und keine Zeit/Lust mich damit zu beschäftigen. Vielleicht hilfts ja 
schon.

[Jan H. (j_hansen)]

Ganz zu Beginn soll mit "chart = {" ein Objekt erzeugt werden, die 
Syntax danach passt aber nicht ("=" statt ":", Statements die hier nicht 
hingehören etc.). Sieht eher aus wie ein normaler Funktionsblock...

[cppbert (Gast)]

Jan H. schrieb:
> Ganz zu Beginn soll mit "chart = {" ein Objekt erzeugt werden, die
> Syntax danach passt aber nicht ("=" statt ":", Statements die hier nicht
> hingehören etc.). Sieht eher aus wie ein normaler Funktionsblock...

scheint wohl eine spezifischere Syntax von dieser Tutorial Seite zu 
sein: https://observablehq.com/@d3/multi-line-chart, damit man 
on-the-fly Änderungen einbauen und testen kann

[cppbert (Gast)]

cppbert schrieb:
> Jan H. schrieb:
>> Ganz zu Beginn soll mit "chart = {" ein Objekt erzeugt werden, die
>> Syntax danach passt aber nicht ("=" statt ":", Statements die hier nicht
>> hingehören etc.). Sieht eher aus wie ein normaler Funktionsblock...
>
> scheint wohl eine spezifischere Syntax von dieser Tutorial Seite zu
> sein: https://observablehq.com/@d3/multi-line-chart, damit man
> on-the-fly Änderungen einbauen und testen kann

https://talk.observablehq.com/t/notebook-to-vanilla-javascript-steps/1644/2