Hand roll, charts mit D3 wie Sie eigentlich wissen was Sie tun

0
19

Charts! Meine Beine Lieblings-Thema neben den Sozialen Studien. Aber du wirst nicht weit kommen in dieser Branche, bevor es jemand will, dass du ein Diagramm machen. Ich weiß nicht, was es ist, mit Menschen und charts, aber anscheinend können wir nicht eine Zivilisation ohne ein Balkendiagramm mit Maggie Umsatz für den letzten Monat so mit ALLEN MITTELN — wir machen ein Diagramm.

Ja, ich weiß, das ist nicht, wie würden Sie sich diese Daten anzeigen lassen. Ich versuche, einen Punkt zu machen hier.

Bereiten Sie für die bevorstehende “OMG ich bin zu haben, um ein Diagramm machen” existenziellen Krise, ähnlich wie der Tod, wir möchten behaupten wird nie passieren, ich werde Ihnen zeigen, wie Sie mit der hand Rollen Sie Ihre eigenen scatter-plot-Grafik mit D3.js. Dieser Artikel ist schwer auf der code Seite, und Ihr Erster Blick auf das fertige code wird zum auslösen der “Kampf oder Flucht” Reaktion. Aber wenn Sie können, Holen Sie sich diesen Artikel durch, ich denke, Sie werden überrascht sein, wie gut Sie verstehen, D3 und wie zuversichtlich Sie sind, dass Sie gehen, machen Sie eine andere Grafik, die Sie lieber nicht machen.

Bevor wir das tun, obwohl, es ist wichtig darüber zu sprechen, WARUM würden Sie jemals wollen, Rollen Sie Ihre eigenen Diagramm.

Bauen vs. Kaufen

Wenn Sie tun haben, um die Grafik, Sie werden wahrscheinlich erreichen, für etwas, was kommt “out-of-the-box”. Sie würde nie hand-roll ein Diagramm. Der gleichen Weise würden Sie nie sitzen herum und schlagen Sie Ihren Daumen mit einem hammer, es ist eher schmerzhaft und es gibt mehr produktive Möglichkeiten nutzen, um Ihre hammer aus. Charts sind eher komplexe Elemente der Benutzeroberfläche. Es ist nicht so, du bist Zentrierung von text in einem div-Element hier. Bibliotheken wie Chart.js oder Kendo UI haben vorgefertigte Diagramme, Sie können einfach auf Ihre Daten. Die Entwickler haben Tausende von Stunden damit verbracht, die Perfektionierung dieser Diagramme Sie würde nie im Leben bauen diese selbst.

Oder würden Sie?

Charting libraries sind fantastisch, aber Sie tun auferlegen eine bestimmte Menge von Einschränkungen auf Sie…und manchmal sind Sie tatsächlich machen es schwieriger zu tun, auch die einfachen Dinge. Wie Peter Parkers Großvater sagte, bevor er über gehandelt sein sterben Szene in Spiderman, die “Mit großer charting Bibliotheken, kommt die trade-off in der Flexibilität.”

Toby nie gegeben haben sollte Spiderman. FITE MIR.

Dies ist genau das Szenario fand ich mich auf, als meine Kollegin Jasmin Greenaway, und ich beschlossen, dass wir konnte verwenden charts, um herauszufinden, wer @horse_js ist. Falls Sie nicht bereits ein big @horse_js-fan, es ist eine Parodie-Konto, dass Zitate aus dem Zusammenhang gerissen. Es ist extrem genial.

Wir zogen jeden tweet von @horse_js für die vergangenen zwei Jahre. Wir stecken, dass in einem Kosmos-DB-Datenbank und erstellt ein Azure-Funktion Endpunkt um Zugang zu den Daten.

Und dann, mit einem unguten Gefühl in unseren Mägen, merkten wir, dass wir brauchten ein Diagramm. Wir wollten in der Lage sein zu sehen, was die Daten sah, wie Sie während der Zeit aufgetreten. Wir dachten, in der Lage zu sehen, die Daten visuell in einer Zeit-Reihen-Analyse kann uns helfen zu erkennen, dass einige Muster oder gewinnen einen Einblick über das Konto. Und in der Tat, es getan hat.

Wir steuerten über jeden tweet, @horse_js gepostet hat in den letzten zwei Jahren. Wenn wir uns anschauen, dass die Daten auf einem Punktdiagramm sieht es wie folgt aus:

Finden Sie den Stift wYxYNd von Burke Holland (@burkeholland) auf CodePen.

Zufällig, das ist es, was bauen wir in diesem Artikel.

Jeder tweet wird angezeigt mit Datum auf der x-Achse und die Zeit des Tages auf der y -. Ich dachte, das wäre einfach zu tun mit einem charting-Bibliothek, aber alle die, die ich versuchte, waren nicht wirklich ausgestattet ist, um das Szenario eines Datums über die x-und eine Zeit, auf der y -. Auch ich konnte keine Beispiele von Menschen, es zu tun online. Bin ich neue Wege gehen-hier? Bin ich eine Datenvisualisierung pioneer?

Wahrscheinlich. Auf jeden Fall.

Also, lassen Sie uns einen Blick an, wie können wir bauen diese atemberaubende scatter-plot mit D3.

Erste Schritte mit D3

Hier ist das Ding über D3: es sieht ziemlich schrecklich. Ich möchte nur zu bekommen, dass da draußen, so können wir aufhören vorzugeben, wie D3 code ist Spaß zu betrachten. Das ist es nicht. Es ist keine Schande zu sagen, dass. Jetzt haben wir eingeladen, die Elefanten in das Zimmer, um die tea party, erlauben Sie mir zu unterstellen, dass, obwohl D3 code sieht ziemlich schlimm aus, ist es eigentlich nicht. Es gibt einfach eine Menge davon.

Um begonnen zu erhalten, müssen wir die D3. Ich bin mit dem CDN gehören für D3-5 für diese Beispiele. Ich bin auch mit Moment, um die Arbeit mit den Daten, die wir bekommen, um später.

https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js
https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js

D3 arbeitet mit SVG. Das ist, was es tut. Es ist im Grunde heiratet SVG-Daten und bietet einige praktische vorgefertigte Mechanismen für die Visualisierung es — Dinge wie die Achse. Oder Axees? Achsen? Was auch immer der plural von “Achse” ist. Aber für jetzt, weiß nur, dass es wie jQuery für den SVG.

Also, das erste, was wir brauchen, ist ein SVG-element, mit zu arbeiten.

<svg id=”chart”></svg>

OK. Jetzt sind wir bereit zu starten, D3 ‘ Ing, unseren Weg zu Daten-Visualisierung Infamie. Das erste, was wir tun sollten, ist, unsere scatter-plot der a-Klasse. Wir wollen diese Sache so allgemein wie möglich, so dass wir wieder verwenden können, es mit anderen Daten-sets. Wir beginnen mit einem Konstruktor, der zwei Parameter nimmt. Das erste wird sein, die Klasse oder die id des Elements, wir sind über das arbeiten mit (in unserem Fall, #Diagramm) und der zweite ist ein Objekt, das es uns erlauben wird, zu übergeben, die Parameter variieren können, von Diagramm zu Diagramm (z.B. Daten, Breite, etc.).

Klasse Streudiagramm {
Konstruktor(el, Optionen) {
}
}

Diagramm-code selbst wird in einem render-Funktion, die Sie auch benötigen, das Daten-set arbeiten wir mit übergeben werden.

Klasse Streudiagramm {
Konstruktor(el, Optionen) {
diese.render(Optionen.Daten);
}

render(Daten) {
}
}

Das erste, was wir tun, in unserer render-Methode ist das setzen von einigen Werten für die Größe und die Margen für unser Diagramm.

Klasse Streudiagramm {
Konstruktor(el, Optionen) {
diese.Daten = Optionen.Daten || [];
diese.Breite = Optionen.Breite || 500;
diese.Höhe = Optionen.Höhe || 400;

diese.render();
}

render() {
lassen Sie margin = { oben: 20 rechts: 20 unten: 50, Links: 60 };
lassen Höhe =.Höhe || 400;
let Breite = (.Höhe || 400) – Marge.top – margin.unten;
let Daten =.Daten;
}
}

Habe ich erwähnt, dass D3 wie jQuery, SVG, und ich denke, dass Analog-sticks. So können Sie sehen, was ich meine, let ‘ s machen ein einfaches SVG-Zeichnung mit D3.

Für Vorspeisen, müssen Sie das DOM-element, das SVG ist mit zu arbeiten. Sobald Sie das tun, können Sie beginnen, anfügen Dinge und der Festlegung Ihrer Attribute. D3, genau wie jQuery, ist aufgebaut auf dem Konzept der Verkettung, also jede Funktion, die Sie aufrufen, wird eine Instanz des Elements, auf dem Sie es nannte. Auf diese Weise können Sie halten Sie auf Elemente und Attribute hinzufügen, bis die Kühe nach Hause kommen.

Zum Beispiel, sagen wir, wir wollten um ein Quadrat zu zeichnen. Mit D3 haben, können wir ein Rechteck (in SVG, rect), indem die erforderlichen Attribute auf dem Weg.

Finden Sie den Stift zmdpJZ von Burke Holland (@burkeholland) auf CodePen.

NUN. An diesem Punkt werden Sie sagen, “Aber ich weiß nicht SVG.” Gut, ich auch nicht. Aber ich weiß, wie Google und es gibt keinen Mangel der Artikel, wie so ziemlich alles in SVG.

Also, wie kommen wir von einem Rechteck zu einem Diagramm? Dies ist, wo D3 wird viel mehr als “jQuery für Zeichnung.”

Lassen Sie uns zunächst ein Diagramm erstellen. Wir beginnen mit einer leeren SVG-element im markup. Wir verwenden D3, wählen Sie das leere svg-element (“#chart) und definieren Sie seine Breite und Höhe sowie die Ränder.

// erstellen Sie das Diagramm
diese.Diagramm = d3.wählen Sie(dies.el)
.attr(‘width’, width + margin.right + margin.Links)
.attr(‘height’, height + Rand.top + Marge.unten);

Und hier ist, wie es aussieht:

Finden Sie den Stift EdpOqy von Burke Holland (@burkeholland) auf CodePen.

ERSTAUNLICH! Nix da. Wenn du die dev-tools, Sie werden sehen, dass es etwas gibt. Es ist nur ein leeres etwas. Eine Art, wie meine Seele.

Das ist deine Tabelle! Gehen wir darum, einige Daten in Sie. Dafür müssen wir definieren unser x-und y-Achse.

Das ist ziemlich einfach in D3. Rufen Sie die axisBottom Methode. Hier, ich bin auch der Formatierung der Teilstriche, die mit dem richtigen Datum-format anzeigen.

lassen Sie xAxis = d3.axisBottom(x).tickFormat(d3.timeFormat(‘%b-%y’));

Ich bin auch die übergabe einer “x” – parameter auf die axisBottom Methode. Was ist das? Das heißt eine Skala.

D3 skaliert

D3 hat sowas nennt man Schuppen. Skalen sind nur eine Möglichkeit zu sagen, D3, wo Ihre Daten ein und D3 hat eine Menge von verschiedenen Arten von Waagen. Die häufigste Art wäre linear — wie eine Skala, die die Daten von 1 bis 10. Es enthält auch eine Skala für time series data — was ist das, was wir brauchen für dieses Diagramm. Wir können die scaleTime Methode zu definieren, ein “Maßstab” für unsere x-Achse.

// Definition der x-Achse
lassen Sie minDateValue = d3.min(Daten, d => {
return new Datum(Zeitpunkt(d….created_at).format (“MM-DD-YYYY’));
});

lassen Sie maxDateValue = d3.max(Daten, d => {
return new Datum(Zeitpunkt(d….created_at).format (“MM-DD-YYYY’));
});

let x = d3.scaleTime()
.domain([minDateValue, maxDateValue])
.Bereich([0, Breite]);

lassen Sie xAxis = d3.axisBottom(x).tickFormat(d3.timeFormat(‘%b-%y’));

D3-Skalen verwenden, einige der Terminologie, die etwas einschüchternd ist. Es gibt zwei Hauptkonzepte zu verstehen, hier: – Domänen und Bereiche.

  • Domain: der Bereich Der möglichen Werte in Ihrem Datensatz. In meinem Fall, ich bin immer das minimale Datum aus dem array, und das maximale Datum aus dem array. Jeder andere Wert in dem Daten-set fällt zwischen diesen beiden Endpunkten — also diejenigen, die “Endpunkte” zu definieren, meine domain.
  • Reichweite: Die Reichweite über die Darstellung Ihrer Daten festlegen. In anderen Worten, wie ausgebreitet Sie möchten, dass Ihre Daten? In unserem Fall wollen wir es beschränkt sich auf die Breite des Diagramms, so dass wir gerade passieren Breite als zweiten parameter. Wenn wir als Wert übergeben, wie, sagen wir, 10000, unsere Daten aus über 10.000 Pixel breit. Wenn wir an keinen Wert hat, es würde ziehen alle Daten auf der sich alle auf der linken Seite des Diagramms… wie in der folgenden Abbildung.

Die y-Achse gebaut wird in der gleichen Weise. Nur, für, wir, die gehen, um die Formatierung unserer Daten für Zeit, Datum nicht.

// festlegen der y-Achse
lassen Sie minTimeValue = new Date().setHours(0, 0, 0, 0);
lassen Sie maxTimeValue = new Date().setHours(23, 59, 59, 999);

lassen Sie y = d3.scaleTime()
.domain([minTimeValue, maxTimeValue])
.nett(d3.timeDay)
.range([Hoehe, 0]);

lassen Sie yAxis = d3.axisLeft(y).Zecken(24).tickFormat(d3.timeFormat(‘%H:%M’));

Die besonders nett Aufruf der Methode auf der y-Skala teilt die y-Achse dieses format-Zeitskala schön. Wenn wir nicht gehören, die es nicht haben eine Bezeichnung für das oberste Häkchen auf der linken Seite, weil es geht nur bis 11:59:59 Uhr, anstatt den ganzen Weg bis Mitternacht. Es ist eine Eigenart, aber wir sind nicht so Scheiße hier. Wir müssen die Etiketten auf alle unsere ticks.

Jetzt sind wir bereit, ziehen unsere Achse auf das Diagramm. Denken Sie daran, dass unsere Grafik hat einige Ränder auf. Um richtig zu positionieren Sie die Elemente in unserem Diagramm, wir erstellen eine Gruppierung (g) – element, und legen Sie seine Breite und Höhe. Dann können wir ziehen alle unsere Elemente im container.

let main = this.chart.append(‘g’)
.attr(‘transform’, `translate(${margin.left}, ${margin.top -})`)
.attr(‘width’, Breite)
.attr(‘height’, Höhe)
.attr(‘class’, ‘main’);

Wir ziehen unsere container, Buchhaltung für die Gewinnspanne und die Einstellung seiner Breite und Höhe. Ja. Ich weiß. Es ist ermüdend. Aber wie ist der Zustand der Verlegung, Dinge in einem browser. Wann war das Letzte mal, als Sie versucht, um horizontal-und vertikal-center-Inhalte in einem div? Ja, nicht so toll vor Flexbox-und CSS-Raster.

Nun können wir zeichnen unsere x-Achse:

main.chart.append(‘g’)
.attr(‘transform’, `translate(0, ${height})`)
.attr(‘class’, ‘Hauptachse Datum’)
.Aufruf(x-Achse);

Wir machen ein container-element, und dann “call”, der in x-Richtung, die wir vorher definiert. D3 zieht Dinge ab, die top-Links, also verwenden wir das transform-Attribut, um den offset der x-Achse von der Oberseite, so wird er am Ende. Wenn wir das nicht tun, wird unser Diagramm würde Aussehen wie dieses…

Durch die Angabe der Transformation, schieben wir es auf den Boden. Nun für die y-Achse:

main.append(‘g’)
.attr(‘class’, ‘Hauptachse Datum’)
.call(yAxis);

Schauen wir uns den code, die wir bisher haben, und dann werden wir sehen, was diese Ausgänge auf den Bildschirm.

Klasse Streudiagramm {
Konstruktor(el, Optionen) {
diese.el = el;

if (options) {
diese.Daten = Optionen.Daten || [];
diese.tooltip = Optionen.tooltip;
diese.pointClass = Optionen.pointClass || “;

diese.Daten = Optionen.Daten || [];
diese.Breite = Optionen.Breite || 500;
diese.Höhe = Optionen.Höhe || 400;

diese.render();
}
}

render() {
lassen Sie margin = { top: 20, rechts: 15 unten: 60, Links: 60 };
lassen Höhe =.Höhe || 400;
let Breite = (.- Breite | – | 500) – Marge.rechten Rand.Links;
let Daten =.Daten;

// erstellen Sie das Diagramm
lassen Sie Diagramm = d3.wählen Sie(dies.el)
.attr(‘width’, width + margin.right + margin.Links)
.attr(‘height’, height + Rand.top + Marge.unten);

// Definition der x-Achse
lassen Sie minDateValue = d3.min(Daten, d => {
return new Datum(Zeitpunkt(d….created_at).format (“MM-DD-YYYY’));
});

lassen Sie maxDateValue = d3.max(Daten, d => {
return new Datum(Zeitpunkt(d….created_at).format (“MM-DD-YYYY’));
});

let x = d3.scaleTime()
.domain([minDateValue, maxDateValue])
.Bereich([0, Breite]);

lassen Sie xAxis = d3.axisBottom(x).tickFormat(d3.timeFormat(‘%b-%y’));

// festlegen der y-Achse
lassen Sie minTimeValue = new Date().setHours(0, 0, 0, 0);
lassen Sie maxTimeValue = new Date().setHours(23, 59, 59, 999);

lassen Sie y = d3.scaleTime()
.domain([minTimeValue, maxTimeValue])
.nett(d3.timeDay)
.range([Hoehe, 0]);

lassen Sie yAxis = d3.axisLeft(y).Zecken(24).tickFormat(d3.timeFormat(‘%H:%M’));

// definieren unsere content-Bereich
let main = Diagramm.append(‘g’)
.attr(‘transform’, `translate(${margin.left}, ${margin.top -})`)
.attr(‘width’, Breite)
.attr(‘height’, Höhe)
.attr(‘class’, ‘main’);

// zeichne x-Achse
main.append(‘g’)
.attr(‘transform’, `translate(0, ${height})`)
.attr(‘class’, ‘Hauptachse Datum’)
.Aufruf(x-Achse);

// zeichne y-Achse
main.append(‘g’)
.attr(‘class’, ‘Hauptachse Datum’)
.call(yAxis);
}
}

Finden Sie den Stift oaeybM von Burke Holland (@burkeholland) auf CodePen.

Wir haben einen chart! Rufen Sie Ihre Freunde! Rufen Sie Ihre Eltern! NICHTS IST UNMÖGLICH!

Achsen-Beschriftungen

Jetzt fügen wir einige Diagramm-Beschriftungen. Jetzt können Sie herausgefunden haben, dass, wenn es um D3, Sie macht so ziemlich alles mit der hand. Hinzufügen-Achse-Beschriftungen ist es nicht anders. Alles, was wir tun, ist ein svg text-element, setzen Sie den Wert aus und positionieren Sie es. Das ist alles.
​​
Für die x-Achse, können wir die Beschriftung und position es mit übersetzen. Wir legen es die x-position der Mitte (Breite / 2) des Diagramms. Dann subtrahieren wir den linken Rand, um sicherzustellen, sind wir zentriert unter die Grafik. Ich bin auch mit einem CSS-class für die axis-label, hat einen text-anchor: middle sicherstellen, dass unser text stammt aus der Mitte des text-Elements.
​​

// Beschriftung für die x-Achse
chart.append(“text”)
.attr(“transform”,
“translate(” + ((Breite/2) + Marge.Links) + ” ,” +
(Höhe + Marge.top + Marge.unten) + “)”)
.attr(‘class’, ‘axis label’)
.text(“Datum Von”Tweet”);

​​
Die y-Achse ist das gleiche Konzept — ein text-element, das wir manuell die position. Dieser ist positioniert mit absoluten x-und y-Attribute. Dies ist, da unsere Transformation wird verwendet, um zu drehen Sie das Etikett, so verwenden wir die x-und y-Eigenschaften für die Positionierung.
​​
Denken Sie daran: Sobald Sie drehen Sie ein element, x und y drehen. Das bedeutet, dass, wenn das text-element ist auf seiner Seite, wie es hier ist, y jetzt schiebt es nach Links und rechts und x drückt es oben und unten. Noch verwirrt? Es ist OK, du bist in guter Gesellschaft.
​​

// Beschriftung der y-Achse
chart.append(“text”)
.attr(“transform”, “rotate(-90)”)
.attr(“y”, 10)
.attr(“x”,0 – ((Hoehe / 2) + (- Marge.top + Marge.unten))
.attr(‘class’, ‘axis label’)
.text(“Time Tweet – CST (-6)”);

​​
​​

Finden Sie den Stift oaeybM von Burke Holland (@burkeholland) auf CodePen.

Nun, wie ich schon sagte — es ist eine MENGE code. Das ist nicht zu leugnen. Aber es ist nicht super-Komplex code. Es ist wie LEGO: LEGO-Bausteine sind einfach, aber Sie bauen können Recht komplexe Dinge mit Ihnen. Was ich versuche zu sagen ist, es ist ein sehr anspruchsvolles Stellwerk Ziegel-system.

Nun, dass wir ein Diagramm haben, ist es Zeit zu ziehen, unsere Daten.
​​

Zeichnen Sie die Datenpunkte

Dies ist Recht einfach. Wie üblich, wir erstellen eine Gruppierung, um alle unsere Kreise. Dann wir die Schleife über jedes Element in unseren Daten festlegen und ziehen Sie einen SVG-Kreis. Wir haben zum festlegen der position der einzelnen circle (cx und cy), basierend auf den aktuellen Daten des Elements Datum und die Zeit Wert. Schließlich setzen wir den radius (r), die steuert, wie groß der Kreis ist.

lassen Sie Kreise = main.append(‘g’);

Daten.forEach(item => {
Kreise.append(‘svg:circle”)
.attr(‘class’, diesem.pointClass)
.attr(‘cx’, d => {
return x(new Date(item.created_at));
})
.attr(‘cy’, d => {
lassen heute = new Date();
lassen Sie die Zeit = new Date(Position.created_at);
return y(heute.setHours(mal.getHours(), Zeit.getMinutes(), Zeit.getSeconds(), Zeit.getMilliseconds()));
})
.attr(‘r’, 5);
});

Wenn wir die cx-und cy-Werte verwenden wir die Skala (x oder y), die wir definiert haben. Wir passieren, die Skala der Datums-und Zeitwert der aktuellen Daten-item und die Skala wird uns wieder die richtige position auf dem Diagramm für dieses Element.

Und, mein guter Freund, wir haben ein echtes Diagramm mit einigen echten Daten.

Finden Sie den Stift VEzdrR von Burke Holland (@burkeholland) auf CodePen.

Schließlich, fügen Sie eine animation auf das Diagramm. D3 hat einige nette easing-Funktionen, die wir hier verwenden. Was wir tun zu definieren, die einen übergang auf jedem unserer Kreise. Im Grunde, alles, was nach der transition Methode animiert. Da D3 zieht alles von der oberen linken, können wir die x-position der ersten und animieren Sie dann die y -. Das Ergebnis ist die Punkte schauen, wie Sie sind, fallen in Platz. Wir können D3 nifty easeBounce easing-Funktion, um die dots hüpfen, wenn Sie fallen.

Daten.forEach(item => {
Kreise.append(‘svg:circle”)
.attr(‘class’, diesem.pointClass)
.attr(‘cx’, d => {
return x(new Date(item.created_at));
})
.übergang()
.Dauer(Math.floor(Math.random() * (3000-2000) + 1000))
.Leichtigkeit(d3.easeBounce)
.attr(‘cy’, d => {
lassen heute = new Date();
lassen Sie die Zeit = new Date(Position.created_at);
return y(heute.setHours(mal.getHours(), Zeit.getMinutes(), Zeit.getSeconds(), Zeit.getMilliseconds()));
})
.attr(‘r’, 5);

OK, also noch mal, alle zusammen jetzt…

Klasse Streudiagramm {
Konstruktor(el, Optionen) {
diese.el = el;
diese.Daten = Optionen.Daten || [];
diese.Breite = Optionen.Breite || 960;
diese.Höhe = Optionen.Höhe || 500;

diese.render();
}

render() {
lassen Sie margin = { oben: 20 rechts: 20 unten: 50, Links: 60 };
lassen Höhe =.Höhe – Marge.bottom – margin.top,
let Breite = this.width – margin”.rechten Rand.Links;
let Daten =.Daten;

// erstellen Sie das Diagramm
lassen Sie Diagramm = d3.wählen Sie(dies.el)
.attr(‘width’, width + margin.right + margin.Links)
.attr(‘height’, height + Rand.top + Marge.unten);

// Definition der x-Achse
lassen Sie minDateValue = d3.min(Daten, d => {
return new Datum(Zeitpunkt(d….created_at).format (“MM-DD-YYYY’));
});

lassen Sie maxDateValue = d3.max(Daten, d => {
return new Datum(Zeitpunkt(d….created_at).format (“MM-DD-YYYY’));
});

let x = d3.scaleTime()
.domain([minDateValue, maxDateValue])
.Bereich([0, Breite]);

lassen Sie xAxis = d3.axisBottom(x).tickFormat(d3.timeFormat(‘%b-%y’));

// festlegen der y-Achse
lassen Sie minTimeValue = new Date().setHours(0, 0, 0, 0);
lassen Sie maxTimeValue = new Date().setHours(23, 59, 59, 999);

lassen Sie y = d3.scaleTime()
.domain([minTimeValue, maxTimeValue])
.nett(d3.timeDay)
.range([Hoehe, 0]);

lassen Sie yAxis = d3.axisLeft(y).Zecken(24).tickFormat(d3.timeFormat(‘%H:%M’));

// definieren unsere content-Bereich
let main = Diagramm.append(‘g’)
.attr(‘transform’, `translate(${margin.left}, ${margin.top -})`)
.attr(‘width’, Breite)
.attr(‘height’, Höhe)
.attr(‘class’, ‘main’);

// zeichne x-Achse
main.append(‘g’)
.attr(‘transform’, `translate(0, ${height})`)
.attr(‘class’, ‘Hauptachse Datum’)
.Aufruf(x-Achse);

// zeichne y-Achse
main.append(‘g’)
.attr(‘class’, ‘Hauptachse Datum’)
.call(yAxis);

// Beschriftung für die y-Achse
chart.append(“text”)
.attr(“transform”, “rotate(-90)”)
.attr(“y”, 10)
.attr(“x”,0 – ((Hoehe / 2) + Marge.top + Marge.unten)
.attr(‘class’, ‘axis label’)
.text(“Time Tweet – CST (-6)”);

// zeichnen Sie die Datenpunkte
lassen Sie Kreise = main.append(‘g’);

Daten.forEach(item => {
Kreise.append(‘svg:circle”)
.attr(‘class’, diesem.pointClass)
.attr(‘cx’, d => {
return x(new Date(item.created_at));
})
.übergang()
.Dauer(Math.floor(Math.random() * (3000-2000) + 1000))
.Leichtigkeit(d3.easeBounce)
.attr(‘cy’, d => {
lassen heute = new Date();
lassen Sie die Zeit = new Date(Position.created_at);
return y(heute.setHours(mal.getHours(), Zeit.getMinutes(), Zeit.getSeconds(), Zeit.getMilliseconds()));
})
.attr(‘r’, 5);
});
}
}

Wir können nun einen Anruf tätigen für einige Daten und Rendern Sie dieses Diagramm…

// abrufen der Daten
let Daten = fetch(‘https://s3-us-west-2.amazonaws.com/s.cdpn.io/4548/time-series.json’).dann(d => d….json()).dann(data => {

// massage die Daten ein bisschen, um es in das richtige format
lassen Sie horseData = Daten.Karte(item => {
Rückkehr Artikel.Pferd;
})

// erstellen Sie das Diagramm
lassen Sie Diagramm = new ScatterPlot(‘#chart’, {
Daten: horseData,
Breite: 960
});
});

Und hier ist die ganze Sache komplett mit einem Aufruf an unsere Azure-Funktion die Rückgabe der Daten aus Cosmos DB. Es ist eine TONNE von Daten, also seien Sie geduldig, während wir kauen, bis alle Ihre Bandbreite.

Finden Sie den Stift GYvGep von Burke Holland (@burkeholland) auf CodePen.

Wenn Sie es so weit geschafft, ich…gut, ich bin beeindruckt. D3 ist nicht eine einfache Sache, um in zu erhalten. Es ist einfach nicht so aussieht, es wird keinen Spaß. ABER, keine Daumen zertrümmert wurden hier und wir haben jetzt die vollständige Kontrolle über das Diagramm. Wir können tun, was wir gerne mit ihm.

Sehen Sie sich einige dieser zusätzlichen Ressourcen für die D3, und viel Glück mit deinem chart. Sie können es tun! Oder Sie können nicht. So oder so, jemand hat ein Diagramm machen, und es könnte als gut sein.

Für Ihre Daten und die API:

  • Erhalten begonnen mit dem Kosmos DB
  • Erste Schritte Mit Azure-Funktionen

Mehr auf D3:

  • Wir machen ein bar-chart
  • Einfache D3 tooltips
  • Gebäude interaktive Balkendiagramme mit D3