Sto lavorando a una visualizzazione simile a this example, collegata alla home page di esempio della libreria dc.js. La pagina ha qualche buon codice di partenza esemplificativo da seguire, tuttavia ho una domanda particolare su come disegnare un grafico a bolle su una mappa.Edificio DC Dashboard con sovrapposizione BubbleChart sulla mappa - Esempio migliore?
Nell'esempio precedente, sembra che l'autore assegni manualmente il percorso per visualizzare le forme provinciali canadesi. Il codice assegna quindi un grafico bubbleOverlay a una variabile denominata caChart, che conterrà le bolle disegnate con coordinate specifiche sulla mappa canadese. Tuttavia, più in basso nel codice sembra che il codice assegna manualmente (x, y) le coordinate sulla pagina web per ogni bolla da trarre in invece di assegnare loro posizioni a livello di codice (vedi commenti):
caChart.width(600)
.height(450)
.dimension(cities)
.group(totalCrimeRateByCity)
.radiusValueAccessor(function(p) {
return p.value.avgTotalCrimeRate;
})
.r(d3.scale.linear().domain([0, 200000]))
.colors(["#ff7373","#ff4040","#ff0000","#bf3030","#a60000"])
.colorDomain([13, 30])
.colorAccessor(function(p) {
return p.value.violentCrimeRatio;
})
.title(function(d) {
return "City: " + d.key
+ "\nTotal crime per 100k population: " + numberFormat(d.value.avgTotalCrimeRate)
+ "\nViolent crime per 100k population: " + numberFormat(d.value.avgViolentCrimeRate)
+ "\nViolent/Total crime ratio: " + numberFormat(d.value.violentCrimeRatio) + "%";
})
// These points appear to be assigned manually
.point("Toronto", 364, 400)
.point("Ottawa", 395.5, 383)
.point("Vancouver", 40.5, 316)
.point("Montreal", 417, 370)
.point("Edmonton", 120, 299)
.point("Saskatoon", 163, 322)
.point("Winnipeg", 229, 345)
.point("Calgary", 119, 329)
.point("Quebec", 431, 351)
.point("Halifax", 496, 367)
.point("St. John's", 553, 323)
.point("Yukon", 44, 176)
.point("Northwest Territories", 125, 195)
.point("Nunavut", 273, 188);
ho dati con timestamp alle coordinate long-long che vorrei tracciare su una mappa simile degli Stati Uniti. I dati più o meno simile a:
device_id, timestamp, lat, lon
1, 2014-7-21, 40.7127837, -74.00594130000002
2, 2014-7-22, 40.8516701, -93.2599318
C'è un modo per leggere queste coordinate in una dimensione crossfilter, e programmaticamente tracciare le coordinate di un'immagine della mappa sottostante simile oltre senza doverli assegnare manualmente? Qualsiasi aiuto qui (compresi i puntatori agli esempi di lavoro) sarebbe apprezzato.
Sì, il grafico di sovrapposizione bolla è particolarmente meno sviluppati . Hai un'immagine mappa che vuoi usare e, in caso affermativo, puoi capire la proiezione? In caso contrario, un grafico a foglietto collegato funzionerebbe? – Gordon
@Gordon: un grafico di volantini potrebbe funzionare. L'immagine sottostante degli Stati Uniti è presa a prestito da questo esempio D3 (http://bost.ocks.org/mike/bubble-map/), e credo che sia proiettato usando la proiezione degli Stati Uniti di Albers. L'altra opzione che stavo pensando era quella di costruire il grafico degli Stati Uniti con D3 e alimentare quella tabella con una dimensione e un gruppo di filtri incrociati. Tuttavia, non sono sicuro su come procedere in merito. Grazie per aver letto. – kylerthecreator
Quindi, se si sta usando direttamente quella mappa, essa [specifica] (https://gist.github.com/mbostock/9943478#file-makefile-L22-L24) che la proiezione è 'd3.geo.albersUsa () .scale (1280) .translate ([width/2, height/2]) '- Il modo più rapido per ottenere qualcosa di lavoro sarà applicarlo ai tuoi punti. Sarebbe bello se il grafico della sovrapposizione delle bolle supportasse le proiezioni, ma suppongo che possa essere usato anche con le non-mappe, quindi forse è per questo. – Gordon