0

I'm looking for a chart for displaying my values over a long time period. The problem is due to the timeline most charts are useless because there are to many points in it and I can't zoom in or out.

So I'm looking for a chart where I load my complete data and the user can choose which data he wants (e.g. Values1, values2) and click into the chart to see only that timespan he wants.

A perfect example is http://dataaddict.fr/prenoms but I don't know where to find a similar chart that I could use. I searched for hours but didn't find anything similar. On the left side the user could choose the data he wants and under the charts the user can choose the timespan.

I hope someone has a good tip for me :) Thanks!

figurine
  • 746
  • 9
  • 22
Kᴀτᴢ
  • 2,146
  • 6
  • 29
  • 57

1 Answers1

1

Disclaimer: I am new at javascript and d3.js, so please be skeptical of everything I say, but I will try to help you.

I was able to solve a similar problem by creating a set of regular HTML buttons below the chart (with svg rects inside of each button to create a color square in each button).

//Create the legend div
    var legendHtml = "<div style='width:" + (w+marginLeft+marginRight) + "px;'>";

    //Size of Squares in legend buttons
    var legendRectSize = 9;

    //Create a button for each item
    varNames.forEach(function(element, index){
        legendHtml = legendHtml + "<button class='legend clickable active' id='" + varNames[index] + "'><svg width='9' height='9'><g><rect width='"+legendRectSize+"' height='"+legendRectSize+"' style='fill:" + color(varNames[index]) + ";'></rect></g></svg> " + varNames[index] + "</button>";
    });

    //Close out the legend div
    legendHtml = legendHtml + "</div>";

I then added the a new legend div below my chart, which happened to be in a div with the id "employment."

//Add the legend div to the bottom of the chart
    var legendDiv = document.createElement("div");
    var legendIdAtt = document.createAttribute("id");
    legendIdAtt.value = "legend";
    legendDiv.setAttributeNode(legendIdAtt);
    document.getElementById('employment').appendChild(legendDiv);
    document.getElementById('legend').innerHTML = legendHtml;

Finally, I added an event listener to the legend (specifically the class 'clickable') that updates the chart by updating, adding, or removing the new data. I used jquery to do this because I was finding the the built in d3.on() method was not working on nodes that are dynamically created after the document loads.

//Event listener for updating the chart
    $('body').on('click', '.clickable', function () {
        var id = $(this).attr('id');
        //Toggle the buttons active or not active
        if ($(this).hasClass("active")) {
            $(this).removeClass("active");
        } else {
            $(this).addClass("active");
        }
        change(id);
    });

Your change function will be different depending on what you want to do, but in my case, I made sure that the id for the buttons was the same as the variable names in the data (I originally set the id by calling the variable names), and then went through the general update pattern to updates my line graph. This article helped me understand d3's general update pattern: http://bl.ocks.org/mbostock/3808218

Hope that helps! Cheers!

Edit: You should be able to make one set of buttons that adds, updates, and subtracts data based on the data the user wants to add to the cart using this approach. You could use a similar method to create a set of html buttons that, when clicked, update the domain of the x scale.

Zach Flanders
  • 1,224
  • 1
  • 7
  • 10