Skip to content

Instantly share code, notes, and snippets.

@hansy

hansy/data.json

Last active January 30, 2019 18:09
Show Gist options
  • Save hansy/90637925b9448a32c127af990ec32421 to your computer and use it in GitHub Desktop.
Save hansy/90637925b9448a32c127af990ec32421 to your computer and use it in GitHub Desktop.
Download ZIP
Demo Viewpoint
Raw
data.json
{
"LN1_1": {
"04": 0.964,
"06": 0.948,
"08": 0.909,
"12": 0.951,
"13": 0.912,
"17": 0.916,
"18": 0.931,
"24": 1,
"26": 0.909,
"27": 1,
"29": 0.931,
"32": 0.8,
"36": 0.954,
"37": 0.904,
"39": 0.933,
"41": 1,
"42": 0.987,
"45": 0.962,
"47": 0.974,
"48": 0.943,
"49": 0.966,
"51": 0.891,
"53": 0.974,
"55": 0.963
},
"LN1_4": {
"04": 0.964,
"06": 0.92,
"08": 0.932,
"12": 0.951,
"13": 0.941,
"17": 0.868,
"18": 1,
"24": 0.929,
"26": 0.891,
"27": 0.933,
"29": 1,
"32": 0.9,
"36": 0.934,
"37": 0.904,
"39": 0.96,
"41": 1,
"42": 0.987,
"45": 0.962,
"47": 0.872,
"48": 0.897,
"49": 1,
"51": 0.891,
"53": 0.921,
"55": 0.926
},
"LN1_5": {
"04": 0.571,
"06": 0.615,
"08": 0.568,
"12": 0.718,
"13": 0.588,
"17": 0.76,
"18": 0.759,
"24": 0.714,
"26": 0.636,
"27": 0.733,
"29": 0.69,
"32": 0.8,
"36": 0.819,
"37": 0.671,
"39": 0.653,
"41": 0.586,
"42": 0.649,
"45": 0.5,
"47": 0.641,
"48": 0.674,
"49": 0.897,
"51": 0.672,
"53": 0.658,
"55": 0.481
},
"LN1_6": {
"04": 0.643,
"06": 0.775,
"08": 0.795,
"12": 0.847,
"13": 0.853,
"17": 0.826,
"18": 0.897,
"24": 0.857,
"26": 0.655,
"27": 0.8,
"29": 0.862,
"32": 0.85,
"36": 0.826,
"37": 0.767,
"39": 0.853,
"41": 0.897,
"42": 0.883,
"45": 0.885,
"47": 0.795,
"48": 0.794,
"49": 0.897,
"51": 0.766,
"53": 0.842,
"55": 0.741
},
"LN1_7": {
"04": 0.643,
"06": 0.643,
"08": 0.636,
"12": 0.675,
"13": 0.676,
"17": 0.802,
"18": 0.724,
"24": 0.667,
"26": 0.509,
"27": 0.533,
"29": 0.793,
"32": 0.8,
"36": 0.799,
"37": 0.616,
"39": 0.64,
"41": 0.724,
"42": 0.649,
"45": 0.615,
"47": 0.641,
"48": 0.68,
"49": 0.586,
"51": 0.672,
"53": 0.526,
"55": 0.519
},
"LN1_8": {
"04": 0.536,
"06": 0.587,
"08": 0.455,
"12": 0.564,
"13": 0.441,
"17": 0.713,
"18": 0.655,
"24": 0.595,
"26": 0.4,
"27": 0.6,
"29": 0.448,
"32": 0.7,
"36": 0.772,
"37": 0.466,
"39": 0.507,
"41": 0.552,
"42": 0.506,
"45": 0.269,
"47": 0.436,
"48": 0.463,
"49": 0.586,
"51": 0.531,
"53": 0.579,
"55": 0.296
},
"LN2": {
"04": 0.536,
"06": 0.667,
"08": 0.682,
"12": 0.798,
"13": 0.706,
"17": 0.85,
"18": 0.69,
"24": 0.762,
"26": 0.727,
"27": 0.533,
"29": 0.931,
"32": 0.95,
"36": 0.888,
"37": 0.753,
"39": 0.853,
"41": 0.69,
"42": 0.792,
"45": 0.846,
"47": 0.897,
"48": 0.754,
"49": 0.793,
"51": 0.859,
"53": 0.763,
"55": 0.556
},
"LN3": {
"04": 0.5,
"06": 0.667,
"08": 0.614,
"12": 0.773,
"13": 0.721,
"17": 0.838,
"18": 0.724,
"24": 0.714,
"26": 0.618,
"27": 0.6,
"29": 0.793,
"32": 0.9,
"36": 0.849,
"37": 0.74,
"39": 0.813,
"41": 0.655,
"42": 0.805,
"45": 0.731,
"47": 0.846,
"48": 0.743,
"49": 0.828,
"51": 0.688,
"53": 0.632,
"55": 0.481
},
"LN4_1": {
"04": 0.893,
"06": 0.906,
"08": 0.932,
"12": 0.951,
"13": 0.897,
"17": 0.934,
"18": 1,
"24": 0.952,
"26": 0.909,
"27": 0.867,
"29": 0.931,
"32": 0.8,
"36": 0.907,
"37": 0.932,
"39": 0.933,
"41": 0.931,
"42": 0.948,
"45": 0.923,
"47": 0.897,
"48": 0.914,
"49": 1,
"51": 0.828,
"53": 0.921,
"55": 0.889
},
"LN4_4": {
"04": 0.893,
"06": 0.925,
"08": 0.932,
"12": 0.92,
"13": 0.853,
"17": 0.916,
"18": 0.966,
"24": 0.952,
"26": 0.945,
"27": 0.9,
"29": 0.966,
"32": 0.8,
"36": 0.915,
"37": 0.89,
"39": 0.893,
"41": 0.931,
"42": 0.961,
"45": 0.962,
"47": 0.897,
"48": 0.857,
"49": 0.828,
"51": 0.859,
"53": 0.974,
"55": 0.815
},
"LN4_5": {
"04": 0.821,
"06": 0.864,
"08": 0.841,
"12": 0.871,
"13": 0.838,
"17": 0.868,
"18": 0.828,
"24": 0.881,
"26": 0.873,
"27": 0.8,
"29": 0.931,
"32": 0.9,
"36": 0.88,
"37": 0.863,
"39": 0.8,
"41": 0.897,
"42": 0.857,
"45": 0.923,
"47": 0.872,
"48": 0.823,
"49": 0.897,
"51": 0.875,
"53": 0.842,
"55": 0.815
},
"LN4_6": {
"04": 0.929,
"06": 0.906,
"08": 0.909,
"12": 0.902,
"13": 0.868,
"17": 0.928,
"18": 0.966,
"24": 0.905,
"26": 0.873,
"27": 0.933,
"29": 0.931,
"32": 0.9,
"36": 0.931,
"37": 0.932,
"39": 0.92,
"41": 0.931,
"42": 0.961,
"45": 0.962,
"47": 0.923,
"48": 0.914,
"49": 0.966,
"51": 0.922,
"53": 0.842,
"55": 0.889
},
"LN4_7": {
"04": 0.643,
"06": 0.775,
"08": 0.795,
"12": 0.834,
"13": 0.721,
"17": 0.826,
"18": 0.828,
"24": 0.762,
"26": 0.782,
"27": 0.8,
"29": 0.828,
"32": 0.7,
"36": 0.873,
"37": 0.699,
"39": 0.667,
"41": 0.793,
"42": 0.766,
"45": 0.654,
"47": 0.718,
"48": 0.8,
"49": 0.862,
"51": 0.875,
"53": 0.789,
"55": 0.63
},
"LN4_8": {
"04": 0.714,
"06": 0.685,
"08": 0.614,
"12": 0.761,
"13": 0.691,
"17": 0.778,
"18": 0.759,
"24": 0.833,
"26": 0.673,
"27": 0.733,
"29": 0.759,
"32": 0.8,
"36": 0.795,
"37": 0.534,
"39": 0.533,
"41": 0.793,
"42": 0.688,
"45": 0.615,
"47": 0.692,
"48": 0.663,
"49": 0.828,
"51": 0.734,
"53": 0.711,
"55": 0.481
},
"LN4_9": {
"04": 0.357,
"06": 0.465,
"08": 0.386,
"12": 0.472,
"13": 0.397,
"17": 0.641,
"18": 0.483,
"24": 0.5,
"26": 0.6,
"27": 0.3,
"29": 0.552,
"32": 0.7,
"36": 0.633,
"37": 0.342,
"39": 0.413,
"41": 0.552,
"42": 0.39,
"45": 0.423,
"47": 0.385,
"48": 0.434,
"49": 0.759,
"51": 0.453,
"53": 0.5,
"55": 0.222
},
"LN4_10": {
"04": 0.607,
"06": 0.634,
"08": 0.568,
"12": 0.65,
"13": 0.559,
"17": 0.731,
"18": 0.517,
"24": 0.69,
"26": 0.636,
"27": 0.433,
"29": 0.621,
"32": 0.7,
"36": 0.772,
"37": 0.493,
"39": 0.653,
"41": 0.621,
"42": 0.61,
"45": 0.577,
"47": 0.615,
"48": 0.617,
"49": 0.793,
"51": 0.688,
"53": 0.579,
"55": 0.556
},
"LN5_1": {
"04": 0.929,
"06": 0.906,
"08": 0.886,
"12": 0.92,
"13": 0.897,
"17": 0.916,
"18": 0.828,
"24": 0.881,
"26": 0.891,
"27": 0.967,
"29": 1,
"32": 0.9,
"36": 0.919,
"37": 0.836,
"39": 0.973,
"41": 0.966,
"42": 0.922,
"45": 0.885,
"47": 0.897,
"48": 0.926,
"49": 0.931,
"51": 0.891,
"53": 0.974,
"55": 0.852
},
"LN5_4": {
"04": 0.893,
"06": 0.911,
"08": 0.909,
"12": 0.939,
"13": 0.853,
"17": 0.904,
"18": 1,
"24": 0.929,
"26": 0.909,
"27": 0.933,
"29": 0.966,
"32": 0.75,
"36": 0.9,
"37": 0.877,
"39": 0.893,
"41": 0.931,
"42": 0.948,
"45": 0.923,
"47": 0.923,
"48": 0.914,
"49": 1,
"51": 0.875,
"53": 0.974,
"55": 0.741
},
"LN5_5": {
"04": 0.679,
"06": 0.854,
"08": 0.705,
"12": 0.89,
"13": 0.721,
"17": 0.892,
"18": 0.793,
"24": 0.881,
"26": 0.836,
"27": 0.8,
"29": 0.966,
"32": 0.8,
"36": 0.846,
"37": 0.877,
"39": 0.8,
"41": 0.862,
"42": 1,
"45": 0.731,
"47": 0.923,
"48": 0.817,
"49": 0.897,
"51": 0.813,
"53": 0.921,
"55": 0.852
},
"LN5_6": {
"04": 0.929,
"06": 0.944,
"08": 0.932,
"12": 0.908,
"13": 0.897,
"17": 0.904,
"18": 0.966,
"24": 1,
"26": 0.909,
"27": 0.933,
"29": 0.966,
"32": 0.85,
"36": 0.931,
"37": 0.918,
"39": 0.947,
"41": 0.966,
"42": 0.961,
"45": 0.962,
"47": 0.974,
"48": 0.92,
"49": 1,
"51": 0.922,
"53": 0.868,
"55": 0.889
},
"LN5_7": {
"04": 0.75,
"06": 0.77,
"08": 0.795,
"12": 0.816,
"13": 0.779,
"17": 0.832,
"18": 0.759,
"24": 0.81,
"26": 0.8,
"27": 0.7,
"29": 0.759,
"32": 0.9,
"36": 0.907,
"37": 0.795,
"39": 0.693,
"41": 0.828,
"42": 0.766,
"45": 0.731,
"47": 0.769,
"48": 0.783,
"49": 0.862,
"51": 0.875,
"53": 0.789,
"55": 0.667
},
"LN5_8": {
"04": 0.679,
"06": 0.653,
"08": 0.727,
"12": 0.767,
"13": 0.632,
"17": 0.766,
"18": 0.655,
"24": 0.857,
"26": 0.727,
"27": 0.8,
"29": 0.828,
"32": 0.8,
"36": 0.803,
"37": 0.507,
"39": 0.547,
"41": 0.759,
"42": 0.688,
"45": 0.615,
"47": 0.667,
"48": 0.703,
"49": 0.897,
"51": 0.703,
"53": 0.684,
"55": 0.444
},
"LN5_9": {
"04": 0.393,
"06": 0.455,
"08": 0.386,
"12": 0.503,
"13": 0.397,
"17": 0.629,
"18": 0.517,
"24": 0.619,
"26": 0.545,
"27": 0.3,
"29": 0.517,
"32": 0.8,
"36": 0.653,
"37": 0.356,
"39": 0.493,
"41": 0.655,
"42": 0.455,
"45": 0.5,
"47": 0.436,
"48": 0.451,
"49": 0.724,
"51": 0.609,
"53": 0.5,
"55": 0.185
},
"LN5_10": {
"04": 0.536,
"06": 0.624,
"08": 0.614,
"12": 0.681,
"13": 0.574,
"17": 0.719,
"18": 0.552,
"24": 0.738,
"26": 0.6,
"27": 0.533,
"29": 0.69,
"32": 0.8,
"36": 0.768,
"37": 0.493,
"39": 0.64,
"41": 0.655,
"42": 0.597,
"45": 0.538,
"47": 0.615,
"48": 0.657,
"49": 0.69,
"51": 0.547,
"53": 0.632,
"55": 0.63
},
"LN7": {
"04": 0.786,
"06": 0.784,
"08": 0.864,
"12": 0.822,
"13": 0.838,
"17": 0.766,
"18": 0.759,
"24": 0.714,
"26": 0.745,
"27": 0.8,
"29": 0.793,
"32": 0.95,
"36": 0.819,
"37": 0.616,
"39": 0.88,
"41": 0.862,
"42": 0.857,
"45": 0.846,
"47": 0.718,
"48": 0.737,
"49": 0.69,
"51": 0.828,
"53": 0.842,
"55": 0.593
},
"LN8": {
"04": 0.786,
"06": 0.826,
"08": 0.909,
"12": 0.877,
"13": 0.882,
"17": 0.856,
"18": 0.862,
"24": 0.929,
"26": 0.836,
"27": 0.9,
"29": 0.931,
"32": 1,
"36": 0.919,
"37": 0.712,
"39": 0.973,
"41": 0.931,
"42": 0.831,
"45": 0.808,
"47": 0.846,
"48": 0.863,
"49": 0.828,
"51": 0.859,
"53": 0.895,
"55": 0.704
},
"LN9": {
"04": 0.286,
"06": 0.516,
"08": 0.455,
"12": 0.521,
"13": 0.426,
"17": 0.623,
"18": 0.483,
"24": 0.548,
"26": 0.436,
"27": 0.3,
"29": 0.345,
"32": 0.35,
"36": 0.66,
"37": 0.356,
"39": 0.493,
"41": 0.483,
"42": 0.455,
"45": 0.462,
"47": 0.41,
"48": 0.497,
"49": 0.586,
"51": 0.422,
"53": 0.447,
"55": 0.37
},
"LN11_1": {
"04": 0.75,
"06": 0.817,
"08": 0.841,
"12": 0.853,
"13": 0.794,
"17": 0.862,
"18": 0.897,
"24": 0.905,
"26": 0.8,
"27": 0.833,
"29": 0.862,
"32": 0.95,
"36": 0.892,
"37": 0.836,
"39": 0.907,
"41": 0.759,
"42": 0.883,
"45": 0.769,
"47": 0.897,
"48": 0.771,
"49": 0.828,
"51": 0.906,
"53": 0.842,
"55": 0.63
},
"LN11_4": {
"04": 0.5,
"06": 0.507,
"08": 0.455,
"12": 0.491,
"13": 0.397,
"17": 0.623,
"18": 0.448,
"24": 0.571,
"26": 0.418,
"27": 0.467,
"29": 0.448,
"32": 0.5,
"36": 0.614,
"37": 0.397,
"39": 0.427,
"41": 0.69,
"42": 0.403,
"45": 0.538,
"47": 0.436,
"48": 0.52,
"49": 0.655,
"51": 0.469,
"53": 0.605,
"55": 0.519
},
"LN11_5": {
"04": 0.679,
"06": 0.756,
"08": 0.818,
"12": 0.902,
"13": 0.735,
"17": 0.892,
"18": 0.828,
"24": 0.81,
"26": 0.745,
"27": 0.8,
"29": 0.931,
"32": 0.95,
"36": 0.927,
"37": 0.781,
"39": 0.88,
"41": 0.724,
"42": 0.87,
"45": 0.692,
"47": 0.872,
"48": 0.777,
"49": 0.828,
"51": 0.875,
"53": 0.842,
"55": 0.667
},
"LN11_6": {
"04": 0.679,
"06": 0.836,
"08": 0.909,
"12": 0.89,
"13": 0.824,
"17": 0.874,
"18": 0.862,
"24": 0.881,
"26": 0.855,
"27": 0.767,
"29": 0.931,
"32": 0.9,
"36": 0.869,
"37": 0.822,
"39": 0.893,
"41": 0.793,
"42": 0.883,
"45": 0.808,
"47": 0.872,
"48": 0.874,
"49": 1,
"51": 0.938,
"53": 0.842,
"55": 0.741
},
"LN11_7": {
"04": 0.857,
"06": 0.911,
"08": 0.841,
"12": 0.896,
"13": 0.897,
"17": 0.91,
"18": 0.931,
"24": 0.952,
"26": 0.855,
"27": 0.933,
"29": 0.931,
"32": 0.9,
"36": 0.942,
"37": 0.877,
"39": 0.92,
"41": 0.897,
"42": 0.961,
"45": 0.846,
"47": 0.923,
"48": 0.903,
"49": 0.931,
"51": 0.953,
"53": 0.921,
"55": 0.704
},
"LN12": {
"04": 0.214,
"06": 0.319,
"08": 0.295,
"12": 0.258,
"13": 0.235,
"17": 0.515,
"18": 0.241,
"24": 0.286,
"26": 0.309,
"27": 0.233,
"29": 0.069,
"32": 0.35,
"36": 0.486,
"37": 0.219,
"39": 0.333,
"41": 0.172,
"42": 0.312,
"45": 0.115,
"47": 0.205,
"48": 0.246,
"49": 0.31,
"51": 0.297,
"53": 0.316,
"55": 0.222
},
"LN13_half": {
"04": 0.286,
"06": 0.366,
"08": 0.455,
"12": 0.479,
"13": 0.324,
"17": 0.563,
"18": 0.448,
"24": 0.429,
"26": 0.4,
"27": 0.433,
"29": 0.31,
"32": 0.4,
"36": 0.506,
"37": 0.397,
"39": 0.347,
"41": 0.448,
"42": 0.299,
"45": 0.385,
"47": 0.385,
"48": 0.383,
"49": 0.552,
"51": 0.359,
"53": 0.368,
"55": 0.296
},
"LN14_less": {
"04": 0.357,
"06": 0.249,
"08": 0.295,
"12": 0.19,
"13": 0.324,
"17": 0.186,
"18": 0.207,
"24": 0.333,
"26": 0.218,
"27": 0.433,
"29": 0.276,
"32": 0,
"36": 0.077,
"37": 0.219,
"39": 0.133,
"41": 0.207,
"42": 0.169,
"45": 0.385,
"47": 0.359,
"48": 0.24,
"49": 0.241,
"51": 0.25,
"53": 0.237,
"55": 0.407
},
"LN15_less": {
"04": 0.321,
"06": 0.183,
"08": 0.205,
"12": 0.209,
"13": 0.221,
"17": 0.162,
"18": 0.276,
"24": 0.214,
"26": 0.145,
"27": 0.333,
"29": 0.138,
"32": 0,
"36": 0.077,
"37": 0.274,
"39": 0.08,
"41": 0.138,
"42": 0.195,
"45": 0.115,
"47": 0.308,
"48": 0.206,
"49": 0.138,
"51": 0.141,
"53": 0.158,
"55": 0.407
},
"LN23": {
"04": 0.679,
"06": 0.751,
"08": 0.636,
"12": 0.73,
"13": 0.735,
"17": 0.731,
"18": 0.586,
"24": 0.714,
"26": 0.618,
"27": 0.5,
"29": 0.621,
"32": 0.75,
"36": 0.842,
"37": 0.808,
"39": 0.733,
"41": 0.621,
"42": 0.558,
"45": 0.577,
"47": 0.744,
"48": 0.697,
"49": 0.724,
"51": 0.734,
"53": 0.763,
"55": 0.519
}
}
Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<style>
td {
cursor: pointer;
}
td:hover {
background: #ddd;
}
</style>
<body style="padding:30px 0;">
<div class="container">
<div class="row">
<div class="col-md-3">
<table id="dataToggle" class="hide table table-bordered">
<tr><td id="LN1_1">LN1_1</td><td id="LN1_4">LN1_4</td></tr>
<tr><td id="LN1_5">LN1_5</td><td id="LN1_6">LN1_6</td></tr>
<tr><td id="LN1_7">LN1_7</td><td id="LN1_8">LN1_8</td></tr>
<tr><td id="LN2">LN2</td><td id="LN3">LN3</td></tr>
<tr><td id="LN4_1">LN4_1</td><td id="LN4_4">LN4_4</td></tr>
<tr><td id="LN4_5">LN4_5</td><td id="LN4_6">LN4_6</td></tr>
<tr><td id="LN4_7">LN4_7</td><td id="LN4_8">LN4_8</td></tr>
<tr><td id="LN4_9">LN4_9</td><td id="LN4_10">LN4_10</td></tr>
<tr><td id="LN5_1">LN5_1</td><td id="LN5_4">LN5_4</td></tr>
<tr><td id="LN5_5">LN5_5</td><td id="LN5_6">LN5_6</td></tr>
<tr><td id="LN5_7">LN5_7</td><td id="LN5_8">LN5_8</td></tr>
<tr><td id="LN5_9">LN5_9</td><td id="LN5_10">LN5_10</td></tr>
<tr><td id="LN7">LN7</td><td id="LN8">LN8</td></tr>
<tr><td id="LN9">LN9</td><td id="LN11_1">LN11_1</td></tr>
<tr><td id="LN11_4">LN11_4</td><td id="LN11_5">LN11_5</td></tr>
<tr><td id="LN11_6">LN11_6</td><td id="LN11_7">LN11_7</td></tr>
<tr><td id="LN12">LN12</td><td id="LN13_half">LN13_half</td></tr>
<tr><td id="LN14_less">LN14_less</td><td id="LN15_less">LN15_less</td></tr>
<tr><td id="LN23">LN23</td></tr>
</table>
</div>
<div class="col-md-9">
<div id="map">
</div>
</div>
</div>
</div>
</body>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://d3js.org/d3.v5.min.js"></script>
<script src="https://unpkg.com/topojson-client@3"></script>
<script>
var files = ["https://unpkg.com/us-atlas@1/us/10m.json", "data.json"];
var us, data;
var format = d3.format(".0%");
var noDataColor = '#ddd';
var color = d3.scaleQuantize()
.domain([0, 1.0])
.range(d3.schemeRdBu[9]);
Promise.all(files.map(url => d3.json(url))).then(function(values) {
unHideControls();
us = values[0];
data = values[1];
window.data = data;
drawMap(data['LN1_1']);
});
function unHideControls() {
$('#dataToggle').removeClass('hide');
}
function drawMap(subData) {
var width = 960;
var height = 650;
var path = d3.geoPath();
var svg = d3.select("#map")
.append('svg')
.attr("width", width + "px")
.attr("height", height + "px")
.style("width", "100%")
.style("height", "auto")
.attr("viewBox", "0,0,"+width+","+height);
var x = d3.scaleLinear()
.domain(d3.extent(color.domain())) // get max/min values
.rangeRound([0,800]);
var legend = svg.append("g")
.attr("transform", "translate(0, 0)");
legend.selectAll("rect")
.data(color.range().map(function(d) {
return color.invertExtent(d);
})).enter().append("rect")
.attr("height", 8)
.attr("x", d => x(d[0]))
.attr("width", d => x(d[1]) - x(d[0]))
.attr("fill", d => color(d[0]));
legend.append("text")
.attr("class", "caption")
.attr("x", x.range()[0])
.attr("y", -6)
.attr("fill", "#000")
.attr("text-anchor", "start")
.attr("font-weight", "bold")
.text(data.title);
legend.call(d3.axisBottom(x)
.tickSize(13)
.tickFormat(format)
.tickValues(color.range().slice(1).map(d => color.invertExtent(d)[0])))
.select(".domain")
.remove();
svg.append("g")
.attr("transform", "translate(0, 50)")
.selectAll("path")
.data(topojson.feature(us, us.objects.states).features)
.enter().append("path")
.attr("fill", function(d) {
const id = subData[d.id];
if (id) {
return color(subData[d.id]);
} else {
return noDataColor;
}
// => color(data[d.id]))
// return color(data[d.id]);
})
.attr("d", path)
.append("title")
.text(function(d) {
if (subData[d.id]) {
return format(subData[d.id]);
}
return "No data";
});
svg.append("path")
.attr("transform", "translate(0, 50)")
.datum(topojson.mesh(us, us.objects.states, (a, b) => a !== b))
.attr("fill", "none")
.attr("stroke", "white")
.attr("stroke-linejoin", "round")
.attr("d", path);
return svg.node();
}
function responsivefy(svg) {
// get container + svg aspect ratio
var container = d3.select(svg.node().parentNode),
width = parseInt(svg.style("width")),
height = parseInt(svg.style("height")),
aspect = width / height;
// add viewBox and preserveAspectRatio properties,
// and call resize so that svg resizes on inital page load
svg.attr("viewBox", "0 0 " + width + " " + height)
.attr("perserveAspectRatio", "xMinYMid")
.call(resize);
// to register multiple listeners for same event type,
// you need to add namespace, i.e., 'click.foo'
// necessary if you call invoke this function for multiple svgs
// api docs: https://github.com/mbostock/d3/wiki/Selections#on
d3.select(window).on("resize." + container.attr("id"), resize);
}
// get width of container and resize svg to fit it
function resize() {
var targetWidth = parseInt(container.style("width"));
svg.attr("width", targetWidth);
svg.attr("height", Math.round(targetWidth / aspect));
}
$('td').on('click', function() {
var id = $(this).attr('id');
d3.select("svg").remove();
drawMap(data[id]);
})
// drawMap(data['LN1_1']);
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment