Estou adaptando oCrossfilter biblioteca para visualizar alguns tweets que eu tenho recolhido a partir doOlimpíadas. Eu estou tentando essencialmente estender o exemplo inicial de duas maneiras:

Em vez de exibir listas de voos com base no conjunto de dados original, quero exibir listas de itens em outro conjunto de dados, codificados por itens atualmente selecionados pelo filtro cruzado.Alterne entre diferentes fontes de dados e recarregue os histogramas e tabelas.

Eu tenho parte (1) trabalhando como planejado. No entanto, parte (2) está me dando alguns problemas. No momento, estou alterando o conjunto de dados, selecionando um novo "esporte" para exibir ou selecionando um novo algoritmo de resumo. Ao alternar qualquer um desses, acredito que primeiro devo remover os filtros, gráficos e listas criados e exibidos anteriormente e, em seguida, recarregar os novos dados.

No entanto, sendo um pouco novo para as visualizações front-end, especialmente D3 e Crossfilter, ainda não descobri como fazer isso, nem tenho certeza de como melhor formular a pergunta.

Eu tenho um exemplo de trabalho do meu problemaAqui. Selecionar um intervalo em Data e depois mudar de Arco e Flecha para Esgrima e selecionar reset mostra um bom exemplo do que está errado: nem todos os novos dados são plotados.

Como dito, a maior parte do código é extraída doCrossfilter exemplo e umTutorial sobre como fazer visualizações radiais. Aqui estão alguns dos trechos de código chave que eu acho que são relevantes:

Selecionando uma nova fonte de dados:

d3.selectAll("#sports a").on("click", function (d) {
    var newSport = d3.select(this).attr("id");
    activate("sports", newSport);
    reloadData(activeLabel("sports"), activeLabel("methods"));
});                          

d3.selectAll("#methods a").on("click", function (d) {
    var newMethod = d3.select(this).attr("id");
    activate("methods", newMethod);
    reloadData(activeLabel("sports"), activeLabel("methods"));
}); 

Recarregando os dados:

function reloadData(sportName, methodName) {
    var filebase = "/tweetolympics/data/tweet." + sportName + "." + methodName + ".all.";
    var summaryList, tweetList, remaining = 2;
    d3.csv(filebase + "summary.csv", function(summaries) {
        summaries.forEach(function(d, i) {
           d.index = i;
           d.group = parseInt(d.Group);
           d.startTime = parseTime(d.Start);
           d.meanTime = parseTime(d.Mean);
        });
        summaryList = summaries;
        if (!--remaining)
            plotSportData(summaryList, tweetList);
    });

    d3.csv(filebase + "groups.csv", function(tweets) {
        tweets.forEach(function(d, i) {
            d.index = i;
            d.group = parseInt(d.Group);
            d.date = parseTime(d.Time);
        });
        tweetList = tweets;
        if (!--remaining)
            plotSportData(summaryList, tweetList);
    });
}   

E carregando o filtro cruzado usando os dados:

function plotSportData(summaries, tweets) {

    // Create the crossfilter for the relevant dimensions and groups.
    var tweet = crossfilter(tweets),
        all = tweet.groupAll(),
        date = tweet.dimension(function(d) { return d3.time.day(d.date); }),
        dates = date.group(),
        hour = tweet.dimension(function(d) { return d.date.getHours() + d.date.getMinutes() / 60; }),
        hours = hour.group(Math.floor),
        cluster = tweet.dimension(function(d) { return d.group; }),
        clusters = cluster.group();

     var charts = [
        // The first chart tracks the hours of each tweet.  It has the
        // standard 24 hour time range and uses a 24 hour clock.
        barChart().dimension(hour)
                  .group(hours)
                  .x(d3.scale.linear()
                             .domain([0, 24])
                             .rangeRound([0, 10 * 24])),
        // more charts added here similarly...
      ];

    // Given our array of charts, which we assume are in the same order as the
    // .chart elements in the DOM, bind the charts to the DOM and render them.
    // We also listen to the chart's brush events to update the display.
    var chart = d3.selectAll(".chart")
                  .data(charts)
                  .each(function(chart) { chart.on("brush", renderAll)
                                               .on("brushend", renderAll); });

    // Render the initial lists.
    var list = d3.selectAll(".list")
                 .data([summaryList]);

    // Print the total number of tweets.
    d3.selectAll("#total").text(formatNumber(all.value()));

    // Render everything..
    renderAll();

Meu palpite é que eu deveria começarplotSportData com algo que limpa o conjunto de dados antigo, mas não tenho certeza de como deve ser essa coisa. Quaisquer sugestões ou pensamentos seriam extremamente apreciados.