vendredi 21 avril 2017

d3 Change parameters/data on click

I am currently busy with a project for school where I am working with D3.js for the first time. I am creating a bubble chart (which also includes a map). For this project I have data from 3 years (2006,2010 and 2012). I need to be able to change the parameters/data when I click on a button. I need to change to radius_field Parameter and the tooltip parameter.

This is the code for the parameters.

var BUBBLE_PARAMETERS = {
"data_file": "stemgedrag.csv",
"report_title": "Politieke verdeling in Nederland",
"footer_text": "Bubble chart van de politieke verdeling in Nederland",
"width": 940,
"height": 700,
"force_strength": 0.06,
"force_type": "charge",
"radius_field": "2006_totaal_rechts",
"numeric_fields": ["2006_totaal_rechts", "2006_totaal_links", "Bruto-inkomen_2006","id","VVVD_2006"],
"fill_color": {
    "data_field": "CDA_2006",
    "color_groups": {
        "low": "blue",
        "medium": "purple",
        "high": "red"
    }
},

"tooltip": [
        {"title": "Provincie", "data_field":"Provincie"},
    {"title": "VVD", "data_field": "VVD_2006"},
    {"title": "CDA", "data_field": "CDA_2006"},
    {"title": "PVV", "data_field": "PVV_2006"},
    {"title": "PVDA", "data_field": "PvdA_2006"},
    {"title": "SP", "data_field": "SP_2006"},
    {"title": "GROENLINKS", "data_field": "GROENLINKS_2006"},
        {"title": "Gemiddeld Bruto Inkomen", "data_field": "Bruto-inkomen_2006"}
],
"modes": [
    {
        "button_text": "Politieke verdeling",
        "button_id": "all",
        "type": "grid",
        "labels": null,
        "grid_dimensions": {"rows": 1, "columns": 1},
        "data_field": null
    },
         {
        "button_text": "Inkomen verschillen",
        "button_id": "CDA_2006",
        "type": "scatterplot",
        "x_data_field": "id",
        "y_data_field": "Bruto-inkomen_2006", 
        "x_format_string": ",1.2r",
        "y_format_string": ",1.2r"
    },          
    {
        "button_text": "World Map",
        "button_id": "world_map",
        "type": "map",
        "latitude_field": "Latitude",
        "longitude_field": "Longitude"
    },
    {
        "button_text": "weglaten",
        "button_id": "VVD_2006",
        "type": "grid",
        "labels": ["VVD_2006", "PvdA_2006", "CDA_2006", "SP_2006", "PVV_2006", "GROENLINKS_2006"],
        "grid_dimensions": {"rows": 3, "columns": 3},
        "data_field": "VVD_2006"
    },
   {
        "button_text": "Per partij",
        "button_id": "2006_totaal_links",
        "type": "grid",
        "labels": ["low", "medium", "high"],
        "grid_dimensions": {"rows": 1, "columns": 3},
        "data_field": "2006_totaal_links"
    }
]
};

Aucun commentaire:

Enregistrer un commentaire