Come creare uno "slopegraph" in d3.js

Question

In La visualizzazione visiva di informazioni quantitative, Edward Tufte ha coniato un termine "slopegraph" per un tipo di grafico molto minimale (more information). L'esempio autorevole si presenta così:

Ci sono almeno due implementazioni di slopegraph in d3.js in esimo selvaggio:

• http://markmarkoh.com/tuftes-slope-graphs-in-svg-using-d3js/
• http://skedasis.com/d3/slopegraph/

ho avuto un sparato a un'implementazione più dichiarativa, e anche per preservare un errore del 100% denza tra i valori in entrambe le colonne, ma si è bloccato. Come previsto, quando nel set di dati vengono visualizzati articoli con valori simili o uguali, la sovrapposizione grafica e il grafico non sono leggibili.

Il naïve version (source) utilizza la scala linear per calcolare la posizione orizzontale, mentre il attempt to “normalize” the positions (source) utilizza la scala ordinal.

Credo che si possano ottenere risultati migliori con la scala ordinale, calcolando l'offset in base alle coordinate degli elementi sovrapposti. L'offset deve essere calcolato separatamente per entrambe le colonne, dovrebbe essere calcolato in anticipo in base ai dati o al volo durante l'impostazione degli attributi? Come è possibile espandere il codebase in modo che gli elementi con gli stessi valori siano posizionati uno sotto l'altro, gli altri elementi siano regolati di conseguenza e i valori in entrambe le colonne rimangano nella stessa posizione orizzontale?

Answer 1

Stavo cercando un po 'il tuo primo esempio nel tentativo di affrontare il problema delle etichette di testo confuse, non sono sicuro di quanto sarà utile, ma nel caso aggiungesse alla discussione, ho pensato che avrei share ..

Il mio primo tentativo è stato quello di sfumare il testo che circonda le etichette di testo di un punto di dati che è stato spostato sopra, questo semplicemente seleziona le etichette di testo che si sovrappongono al riquadro di delimitazione dell'etichetta attualmente selezionata e le passa a zero vicino all'opacità: http://bl.ocks.org/2554902

Ho quindi provato a lavorare su un modo per disporre le etichette di testo in modo compatto, in modo che ciascuna di esse fosse visualizzabile, non l'ho finita la plementazione perché sembrava estendere troppo i confini della visualizzazione (anche al momento non funziona bene quando si cambia l'anno ..), ma potrebbe valere la pena di guardare a qualcosa di simile su dati leggermente meno "compatti": http://bl.ocks.org/2554910

Edit: sembra che questi non funzionano come previsto in Firefox, sembra essere un problema con getBBox() ..

Answer 2

ben scritta e piacevole codice che inizia con le dichiarazioni di debug, oggetti di scena!

Non ho passato il codice tutte le cose che ho pensato, ma per il gusto della discussione, almeno, ecco qui. (Coding è semplice; venire con ciò a codice/Cosa questa dovrebbe essere simile è difficile.)

1. Una versione [non ottimizzato] che utilizza la scala lineare come guida, ma gli spazi sovrapposti voci da spostando tutte le voci successive verso il basso. (Immagino che questo allunghi efficacemente l'asse Y, questo purtroppo rende un'immagine molto alta.Prova a confrontare gli anni più vicini, ad es. 2008 e 2009 -. Immagine non è come allungato) http://bl.ocks.org/2547496 (gist)

2. Lo stesso metodo applicato alla scala ordinale. Preferisco la versione in scala linear perché la versione in scala ordinal non tenta di trasmettere alcuna informazione assoluta attraverso le pendenze; tuttavia, ciò rende l'immagine più compatta. http://bl.ocks.org/2573074 (gist)

3. Raggruppamento di valori vicini. (Attuerà se ci sono interessi.)

Si noti che entrambi gli esempi 1 e 2 sono implementazioni imperfette, ma si ottiene l'idea. Se entrambi sono ciò che stai cercando, posso sistemarli.

Answer 3

Volevo solo condividere un altro esempio da Jefff Clark:

http://neoformix.com/Projects/ObesitySlope/

E 'abituato Processing ma gestisce alcuni dei problemi sopra con molta grazia (si può sostenere che è anche fatto un po' più semplice con una variabile normalizzata)

1. Utilizzo di aggregati espandibili per semplificare la visualizzazione e ridurre l'initi al numero di punti dati.
2. Principalmente etichettare un lato della pista per ogni punto
3. nascondere le etichette sui vicini punti/sovrapposti fino a quando non vengono aleggiava (a quel punto, le etichette iniziali scompaiono temporaneamente)

Nel complesso, Jeff fatto un lavoro superbo con questo. Penso che mostri grande attenzione ai dettagli. Sarebbe bello vedere un esempio simile in D3!