Mais

Coropleto d3 responsivo mostrando fluxos de passageiros entre condados?

Coropleto d3 responsivo mostrando fluxos de passageiros entre condados?


Eu gostaria de criar um choropleth responsivo usando d3. Quando alguém clica em um condado, o coropleto é atualizado para refletir os fluxos de passageiros entre aquele condado e todos os outros. Os dados de entrada de exemplo têm a seguinte aparência:

"casa", "trabalho", "fluxo" 01001,01007,10 01001,01015,10 01001,01021,383 01001,01047,271 01001,01051,1624 01001,01073,71 01001,01081,50 01001,01097, 80 01001,37119,10 01001,40143,10 01001,48029,45 01001,48141,10 01001,51041,35 13121,01003,35 13121,01071,15 13121,01073,69 13121,01081,4 13121,01089, 70 13121,01097,55 13121,01121,10 13121,01125,15 13121,04005,10 13121,04013,65

No exemplo do choropleth de desemprego em que o mapa de choropleth é estático, os dados de entrada são lidos assim:

queue () .defer (d3.json, "data / us.json") .defer (d3.tsv, "data / desemprego.tsv", função (d) {rateById.set (d.id, + d.rate );}) .await (pronto);

Chamadas futurasrateByIdusarobter()(por exemplo.,rateById.get (d.id)) Veja abaixo o exemplo do desemprego.

quantize (rateById.get (d.id));

Se eu tiver o conjunto de dados bidimensional de fluxo de comutador, espero que chameflowByHomeByWorkpareceriaflowByHomeByWork.get (currFIPS) .get (d.id). Por exemplo,

quantize (flowByHomeByWork.get (currFIPS) .get (d.id));

Como mapeio os dados ao lê-los comfila()para facilitar isso?


No exemplo do choropleth do desemprego,rateByIdé umd3.map, que, pelo que eu sei, só pode armazenar dois valores. Você tem três: a origem, o destino e a quantidade de fluxo.

Eu carregaria os dados normalmente, assim:

queue () .defer (d3.json, "data / us.json") .defer (d3.tsv, "data / commute.tsv") .await (pronto);

e, em seguida, use um método como _.filter de lo-dash em um clique para retornar os valores desejados:

var flowsToMap = _.filter (commute, function (d) {return d.home === clickedFips;})

Você pode então pegar uma série de valores de fluxo emflowsToMappara usar como o domínio para a escala de quantização usando _.pluck ou semelhante.


fila()é para carregamento assíncrono de dados. Então, supondo que todos os seus dados estejam carregados, você não precisa usarfila()novamente depois que os dados são carregados e o controle é passado paraprontode.await (pronto).

Acho que o que você está procurando é atribuir um comportamento de clique ao mapa. Você pode fazer isso empronto, fazendo referência a uma função onclick

map = d3.select ('# map'). append ('svg'); map.append ('g') .selectAll ('path') .data (topojson.feature (map_data, map_data.objects.counties) .features) .enter (). append ('path') .attr ('d' , PATH) .attr ('classe', 'estados') // Adiciona eventos do mouse .on ('clique', clique do mouse); function mouseclick (d) {// redesenhar o mapa com fluxo para este condado county_id = d.id;…}

Este não é um exemplo completo ... Você precisa fazer toda a configuração básica antes de anexar dados ao mapa (escala, projeção), e haverá muito trabalho para definir o que acontece depois que um condado é clicado