Creando piramide di popolazione con d3.js

Question

Ho bisogno di creare una piramide popolazione dall'aspetto classico con D3.JS.Qualcosa di simile a questa immagine:

Ho trovato alcuni esempi che sembrano davvero buoni ( Questo e questo ) ma sono più complessi di quanto io stia cercando.Qualcuno sa di un buon esempio semplice che posso guardare?Qualche consiglio per iniziare questo?Dovrei solo fare due grafici a barre uno accanto all'altro, uno per ogni gruppo di sesso?

Answer 1

La chiave per effettuare una visualizzazione come questa è trascorrere una buona quantità di tempo che configurava il layout in anticipo prima di arrivare a disegnare qualsiasi cosa.

Ci sono alcune misure chiave che vorrai utilizzare per rendere la tua vita molto più facile quando arriverà il momento di rendere le scale e gli assi per il tuo grafico. Quindi, è possibile utilizzare gli elementi <g> con le traduzioni in modo che in ciascuna "sezione" del tuo grafico, è possibile lavorare nelle coordinate locali.

L'obiettivo è creare due regioni speculari come questa:

Ciò consentirà di condividere le stesse scale per le dimensioni X e Y tra le due regioni.

Per definire queste regioni, puoi prima impostare alcuni valori per i margini dell'interno del tuo SVG, quindi creare un gruppo per sedersi all'interno di tali margini. Questa è una pratica comune nelle visualizzazioni D3, e se non ne hai già familiarità, questo è un buon momento per imparare. Di solito sembra qualcosa del genere:

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 + ')');

.

Questa è una buona pratica da seguire perché consente di lasciare la stanza sul tuo documento SVG per le zecche, le etichette e i titoli dell'asse, senza dover tenere conto di quello spazio quando si posizionano parti della visualizzazione stessa. Poi più tardi, se trovi che ti serve più spazio, puoi semplicemente regolare un valore nella parte superiore del tuo codice, piuttosto che riposizionare l'intero diagramma.

Gli altri punti che sono importanti sono le coordinate X dei due assi Y. In altre parole i punti in cui la popolazione è zero per gli uomini e per le donne (mostrato come linee rosse sotto). Queste saranno una distanza impostata dalla linea centrale della tua regione interna (mostrata come una linea blu qui sotto):

È possibile aggiungere una proprietà a margine centrale all'oggetto margine creato in precedenza per fare riferimento a questo valore:

margin.middle = 28;

.

Volete creare variabili per memorizzare le posizioni delle due linee rosse sopra. Per ora, chiamiamoli pointA (la coordinata X della linea zero per la popolazione maschile) e il pointB (il punto corrispondente per la popolazione femminile).

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

var pointA = regionWidth,
    pointB = width - regionWidth;

.

Una volta impostati questi punti, le cose diventano molto più semplici, dal momento che puoi semplicemente collegare questi valori in una trasformazione SVG per tradurre gli oggetti creati a tali posizioni.

La parte più flessibile sarà i due assi Y centrale, che condividono un singolo set di etichette. Per questo, dovrai avere una buona maniglia su come d3.svg.axis() crea le sue etichette di testo e quali proprietà possono essere manipolate. Ci sono quattro proprietà importanti da sapere per questo:

.

1. axis.orient(direction) Specifica la direzione in cui il punto zecche, esce dall'asse. Questo sarà leggermente confuso in questo caso perché vogliamo che le zecche puntino verso il centro, quindi l'asse sinistro avrà .orient('right') e l'asse destro avrà .orient('left')

2. axis.tickSize(inner,outer) Imposta la lunghezza (in unità SVG) dei segni di spunta che escono dall'asse. I segni "esterni" sono quelli agli endpoint dell'asse e possono essere impostati su 0 in questo caso perché usiamo una scala ordinale con bande di gamma, quindi gli endpoint non rappresentano valori. Scegli un piccolo valore per le zecche interne, per questo esempio userò 4.

3. axis.tickPadding(padding) Imposta quanto lontano dalla fine del segno di spunta viene posizionato l'ancoraggio del testo del testo dell'etichetta. Vogliamo posizionare l'ancoraggio del testo al centro dell'immagine, proprio tra i due assi. Dal momento che conosciamo già il margine centrale (la distanza dalla linea centrale a ciascun asse) e conosciamo il tickSize (la lunghezza delle zecche), possiamo inserirli nel centro prendendo la differenza di questi due valori: .tickPadding(margin.middle - 4). < / p>

4. axis.tickFormat(format) Specifica il formato delle etichette di spunta. Può essere impostato sulla stringa vuota per rimuovere le etichette di spunta da uno degli assi, in modo che non si verifichi la sovrapposizione: .tickFormat('')

Allora, i due assi Y possono essere definiti come:

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('');

.

Quindi, quando si disegna effettivamente l'asse Y sinistro, seleziona i suoi elementi <text> e impostare l'ancoraggio del testo per essere middle in modo che vengano centrati sull'ancoraggio:

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

.

qui è un semplice esempio di a Tabella intero usando alcuni dati contrari. Ho provato a commentare il maggior numero possibile di la struttura generale per renderlo facile da seguire. Ho anche fatto una funzione translation(x,y) per rendere le coordinate X e Y di ogni traduzione più facili da individuare di quelle quando si utilizzano la concatenazione delle stringhe. Puoi trovare la sua definizione in fondo allo script.

Spero che questo aiuti, fammi sapere se hai domande sui s

Pecifiche.