Estoy adaptando elCrossfilter biblioteca para visualizar algunos tweets que he estado recogiendo desde elJuegos Olímpicos. Estoy intentando esencialmente extender el ejemplo inicial de dos maneras:

En lugar de mostrar listas de vuelos basadas en el conjunto de datos original, quiero mostrar listas de elementos en otro conjunto de datos codificado por elementos actualmente seleccionados por el filtro cruzado.Alterne entre diferentes fuentes de datos y vuelva a cargar los histogramas y tablas.

Tengo parte (1) trabajando según lo planeado. Sin embargo, la parte (2) me está dando algunos problemas. Actualmente estoy cambiando el conjunto de datos seleccionando un nuevo "deporte" para mostrar o seleccionando un nuevo algoritmo de resumen. Al cambiar cualquiera de estos, creo que primero debo eliminar los filtros, cuadros y listas creadas y mostradas anteriormente y luego volver a cargar los nuevos datos.

Sin embargo, al ser algo nuevo en las visualizaciones frontales, especialmente en D3 y Crossfilter, no he descubierto cómo hacer esto, ni estoy seguro de cómo formular la pregunta.

Tengo un ejemplo práctico de mi problema.aquí. Seleccionando un rango en Fecha, luego cambiando de Tiro con arco a Cercado, luego seleccionando restablecer muestra un buen ejemplo de lo que está mal: no se trazan todos los datos nuevos.

Como se dijo, la mayoría del código se extrae de laCrossfilter ejemplo y unTutorial sobre cómo hacer visualizaciones radiales.. Aquí hay algunos de los fragmentos de código clave que creo que son relevantes:

Seleccionando una nueva fuente de datos:

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"));
}); 

Recargando los datos:

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);
    });
}   

Y cargando el filtro cruzado usando los datos:

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

Mi conjetura es que debería empezar.plotSportData con algo que borra el conjunto de datos anterior, pero no estoy seguro de cómo debería ser ese algo. Cualquier sugerencia o pensamiento sería supremamente apreciado.