Bevölkerungspyramide mit D3.js erstellen

Question

Ich muss mit D3.js eine klassisch aussehende Bevölkerungspyramide erstellen.Etwas Ähnliches wie dieses Bild:

Ich habe ein paar Beispiele gefunden, die wirklich gut aussehen (Das Und Das), aber sie sind komplexer als ich suche.Kennt jemand ein gutes EINFACHES Beispiel, das ich mir ansehen kann?Irgendwelche Ratschläge für den Anfang?Sollte ich einfach zwei Balkendiagramme nebeneinander erstellen, eines für jede Geschlechtsgruppe?

Answer 1

Der Schlüssel zur Erstellung einer solchen Visualisierung besteht darin, sich vorab ausreichend Zeit für die Einrichtung des Layouts zu nehmen, bevor Sie mit dem Zeichnen beginnen.

Es gibt einige Schlüsselmaße, die Sie nutzen sollten, um Ihnen das Leben bei der Erstellung der Skalen und Achsen für Ihr Diagramm erheblich zu erleichtern.Dann können Sie es nutzen <g> Elemente mit Übersetzungen, sodass Sie in jedem „Abschnitt“ Ihres Diagramms in lokalen Koordinaten arbeiten können.

Das Ziel besteht darin, zwei gespiegelte Regionen wie diese zu erstellen:

Dadurch können Sie die gleichen Maßstäbe für die x- und y-Dimensionen zwischen den beiden Regionen verwenden.

Um diese Bereiche zu definieren, können Sie zunächst einige Werte für die Ränder im Inneren Ihrer SVG-Datei festlegen und dann eine Gruppe erstellen, die innerhalb dieser Ränder liegt.Dies ist eine gängige Praxis bei d3-Visualisierungen, und wenn Sie noch nicht damit vertraut sind, ist dies ein guter Zeitpunkt, es zu lernen.Normalerweise sieht es ungefähr so ​​aus:

var width = 400,
    height = 300;

var margin = {
  top: 20,
  right: 10
  bottom: 40,
  left: 10
};

var svg = d3.select('body').append('svg')
  .attr('width', margin.left + width + margin.right)
  .attr('height', margin.top + height + margin.bottom)
  .append('g')
    .attr('class', 'inner-region')
    .attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');

Dies ist eine bewährte Vorgehensweise, da Sie so in Ihrem SVG-Dokument Platz für Achsenmarkierungen, Beschriftungen und Titel lassen können, ohne diesen Platz bei der Positionierung von Teilen der Visualisierung selbst berücksichtigen zu müssen.Wenn Sie später feststellen, dass Sie mehr Platz benötigen, können Sie einfach einen Wert oben in Ihrem Code anpassen, anstatt das gesamte Diagramm neu zu positionieren.

Die weiteren wichtigen Punkte sind die x-Koordinaten der beiden y-Achsen.Mit anderen Worten, die Punkte, an denen die Bevölkerungszahl für Männer und Frauen Null ist (unten als rote Linien dargestellt).Diese haben einen festgelegten Abstand von der Mittellinie Ihrer inneren Region (unten als blaue Linie dargestellt):

Sie können dem zuvor erstellten Randobjekt eine mittlere Randeigenschaft hinzufügen, um auf diesen Wert zu verweisen:

margin.middle = 28;

Sie möchten Variablen erstellen, um die Positionen der beiden roten Linien oben zu speichern.Rufen wir sie zunächst einmal an pointA (die x-Koordinate der Nulllinie für die männliche Bevölkerung) und pointB (der entsprechende Punkt für die weibliche Bevölkerung).

var regionWidth = (width/2) - margin.middle;

var pointA = regionWidth,
    pointB = width - regionWidth;

Sobald Sie diese Punkte eingerichtet haben, wird die Sache viel einfacher, da Sie diese Werte einfach in eine SVG-Transformation einfügen können, um die von Ihnen erstellten Objekte an diese Positionen zu verschieben.

Der schwierigste Teil werden die beiden mittleren Y-Achsen sein, die sich einen einzigen Satz Beschriftungen teilen.Dazu müssen Sie genau wissen, wie d3.svg.axis() erstellt seine Textbeschriftungen und welche Eigenschaften manipuliert werden können.Hierzu sind vier wichtige Eigenschaften zu kennen:

1. axis.orient(direction) Gibt die Richtung an, in die die Häkchen zeigen, ausgehend von der Achse.Dies wird in diesem Fall etwas verwirrend sein, da wir möchten, dass die Häkchen zur Mitte zeigen, also auch die linke Achse .orient('right') und die rechte Achse wird haben .orient('left')

2. axis.tickSize(inner,outer) legt die Länge (in SVG-Einheiten) der Teilstriche fest, die von der Achse ausgehen.Die „äußeren“ Markierungen sind diejenigen an den Endpunkten der Achse und können auf gesetzt werden 0 In diesem Fall verwenden wir eine Ordinalskala mit Bereichsbändern, sodass die Endpunkte keine Werte darstellen.Wählen Sie einen kleinen Wert für die inneren Teilstriche, den ich für dieses Beispiel verwenden werde 4.

3. axis.tickPadding(padding) legt fest, wie weit vom Ende des Häkchens entfernt der Textanker des Beschriftungstextes platziert wird.Wir möchten den Textanker in der Bildmitte platzieren, genau zwischen den beiden Achsen.Da wir den mittleren Rand (den Abstand von der Mittellinie zu jeder Achse) bereits kennen und die tickSize (die Länge der Häkchen) können wir diese in der Mitte platzieren, indem wir die Differenz dieser beiden Werte bilden: .tickPadding(margin.middle - 4).

4. axis.tickFormat(format) Gibt das Format der Teilstrichbeschriftungen an.Es kann auf die leere Zeichenfolge gesetzt werden, um Teilstrichbeschriftungen von einer der Achsen zu entfernen, sodass keine Überlappungen auftreten: .tickFormat('')

Die beiden y-Achsen können also wie folgt definiert werden:

var yAxisLeft = d3.svg.axis()
  .scale(yScale)
  .orient('right')
  .tickSize(4,0)
  .tickPadding(margin.middle - 4);

var yAxisRight = d3.svg.axis()
  .scale(yScale)
  .orient('left')
  .tickSize(4,0)
  .tickFormat('');

Wählen Sie dann beim tatsächlichen Zeichnen der linken Y-Achse diese aus <text> Elemente und legen Sie den Textanker fest middle Sie werden also um den Anker herum zentriert sein:

.call(yAxisLeft)
  .selectAll('text')
  .style('text-anchor', 'middle');

HIER ist ein einfaches Beispiel für ein ganzes Diagramm, das einige künstliche Daten verwendet.Ich habe versucht, so viel wie möglich von der allgemeinen Struktur zu kommentieren, um die Verständlichkeit zu erleichtern.Ich habe auch eine gemacht translation(x,y) Funktion, um die x- und y-Koordinaten jeder Übersetzung leichter zu erkennen, als dies bei Verwendung der Zeichenfolgenverkettung der Fall wäre.Die Definition finden Sie am Ende des Skripts.

Ich hoffe, das hilft. Lassen Sie mich wissen, wenn Sie Fragen zu den Einzelheiten haben.