Skip to content

Instantly share code, notes, and snippets.

@linhaoran917

linhaoran917/.block

Created August 4, 2017 17:14
Show Gist options
  • Save linhaoran917/36a06a895030d3b50ff044e7ceb48f90 to your computer and use it in GitHub Desktop.
Save linhaoran917/36a06a895030d3b50ff044e7ceb48f90 to your computer and use it in GitHub Desktop.
Download ZIP
Create a reusable table using d3 and jquery DataTables
Raw
.block
license: mit
Raw
README.md

This is an exmaple of resuable components using d3. They are described as 'closures (i.e. functions) with setters and getters'. In this example, _table is the closure.

To make the component responsive, we add a dispatcher which broadcasts events happening inside the component to all listeners. In this example, a div listens to highlight and select events from the table, and changes its text accordingly.

Notice that I didn't assume anything about the data other that its structure. Also, I didn't hardcode any data-specific attributes.

forked from ahmohamed's block: Create a reusable table using d3 and jquery DataTables

forked from anonymous's block: Create a reusable table using d3 and jquery DataTables

forked from anonymous's block: Create a reusable table using d3 and jquery DataTables

forked from linhaoran917's block: Create a reusable table using d3 and jquery DataTables

Raw
gene_data.js
var gene_data = [{
"GeneID": "11305",
"LogFC": -0.0662094875,
"AvgExpr": 6.073487125,
"Log2Sigma": 0.9661351906,
"col": "black",
"symb": "Abca2",
"pval": 0.8665848,
"x": 231.90439249653963,
"y": 195.97588945648351
}, {
"GeneID": "11306",
"LogFC": 0.1929680297,
"AvgExpr": 6.7702316064,
"Log2Sigma": -0.7638965106,
"col": "black",
"symb": "Abcb7",
"pval": 0.2023217,
"x": 249.95838600980372,
"y": 191.5581349043697
}, {
"GeneID": "11308",
"LogFC": 0.0705773974,
"AvgExpr": 6.9708337936,
"Log2Sigma": 0.1962184225,
"col": "black",
"symb": "Abi1",
"pval": 0.7511269,
"x": 255.15637563604116,
"y": 193.64431806879202
}, {
"GeneID": "11363",
"LogFC": 0.0421111732,
"AvgExpr": 6.3930157635,
"Log2Sigma": -1.0448974796,
"col": "black",
"symb": "Acadl",
"pval": 0.7840458,
"x": 240.18399588168543,
"y": 194.12953296281384
}, {
"GeneID": "11364",
"LogFC": -0.0384910016,
"AvgExpr": 5.9257680624,
"Log2Sigma": 0.0724487895,
"col": "black",
"symb": "Acadm",
"pval": 0.8735309,
"x": 228.07670663872403,
"y": 195.503419974619
}, {
"GeneID": "11370",
"LogFC": -0.0825826236,
"AvgExpr": 6.2248215855,
"Log2Sigma": 0.1297350587,
"col": "black",
"symb": "Acadvl",
"pval": 0.7159567,
"x": 235.82576028794347,
"y": 196.2549742217039
}, {
"GeneID": "11409",
"LogFC": -0.2155496764,
"AvgExpr": 5.9613792082,
"Log2Sigma": -0.6374047663,
"col": "black",
"symb": "Acads",
"pval": 0.2030333,
"x": 228.9994601192844,
"y": 198.5214354839864
}, {
"GeneID": "11416",
"LogFC": -0.5572913073,
"AvgExpr": 4.8391942468,
"Log2Sigma": 0.0062846546,
"col": "black",
"symb": "Slc33a1",
"pval": 0.05948051,
"x": 199.92148310669447,
"y": 204.34651885489572
}, {
"GeneID": "11419",
"LogFC": -0.1502138692,
"AvgExpr": 0.7470998091,
"Log2Sigma": -1.0519003681,
"col": "black",
"symb": "Asic1",
"pval": 0.7846658,
"x": 93.88742269267847,
"y": 197.4077680532922
}, {
"GeneID": "11426",
"LogFC": -0.1231962262,
"AvgExpr": 6.8243129963,
"Log2Sigma": 1.5872595085,
"col": "black",
"symb": "Macf1",
"pval": 0.8158775,
"x": 251.35973914356802,
"y": 196.94724463814373
}, {
"GeneID": "11428",
"LogFC": -0.2314562633,
"AvgExpr": 6.0153196889,
"Log2Sigma": 0.1615851513,
"col": "black",
"symb": "Aco1",
"pval": 0.2952786,
"x": 230.39716202386694,
"y": 198.79256778529572
}, {
"GeneID": "11429",
"LogFC": 0.356246902,
"AvgExpr": 8.6398525485,
"Log2Sigma": -0.4551606329,
"col": "black",
"symb": "Aco2",
"pval": 0.05010577,
"x": 298.403871064974,
"y": 188.77500005085258
}, {
"GeneID": "11430",
"LogFC": -0.6991014035,
"AvgExpr": 4.8267083892,
"Log2Sigma": 0.5310049989,
"col": "black",
"symb": "Acox1",
"pval": 0.0595969,
"x": 199.597950451416,
"y": 206.7637123089862
}, {
"GeneID": "11431",
"LogFC": -0.0736352871,
"AvgExpr": 6.2802149431,
"Log2Sigma": -0.5752218035,
"col": "black",
"symb": "Acp1",
"pval": 0.6663948,
"x": 237.26110903556295,
"y": 196.10246432432083
}, {
"GeneID": "11432",
"LogFC": -0.636454828,
"AvgExpr": 1.704279492,
"Log2Sigma": -0.4985206168,
"col": "black",
"symb": "Acp2",
"pval": 0.2028832,
"x": 118.68979464886743,
"y": 205.69588359807256
}, {
"GeneID": "11443",
"LogFC": -0.7653058552,
"AvgExpr": 2.5917686475,
"Log2Sigma": 0.3811542743,
"col": "black",
"symb": "Chrnb1",
"pval": 0.1904971,
"x": 141.68635060908693,
"y": 207.892186032431
}, {
"GeneID": "11444",
"LogFC": -0.2738011607,
"AvgExpr": 2.5159845891,
"Log2Sigma": 0.3846065007,
"col": "black",
"symb": "Chrnb2",
"pval": 0.652852,
"x": 139.72263947066034,
"y": 199.51434861439165
}, {
"GeneID": "11450",
"LogFC": -0.3938341148,
"AvgExpr": -1.0646204952,
"Log2Sigma": 0.7654290458,
"col": "black",
"symb": "Adipoq",
"pval": 0.8048118,
"x": 46.94225485158155,
"y": 201.56034448281318
}, {
"GeneID": "11477",
"LogFC": 2.4376160242,
"AvgExpr": -0.5532763902,
"Log2Sigma": 0.5410313771,
"col": "black",
"symb": "Acvr1",
"pval": 0.1011026,
"x": 60.19216698029473,
"y": 153.29747092886183
}, {
"GeneID": "11479",
"LogFC": -0.6784820938,
"AvgExpr": 3.9047636672,
"Log2Sigma": 0.1779038467,
"col": "black",
"symb": "Acvr1b",
"pval": 0.08813204,
"x": 175.70858429937854,
"y": 206.41225030613685
}, {
"GeneID": "11480",
"LogFC": -0.0456060914,
"AvgExpr": 3.6035785361,
"Log2Sigma": 0.7335232792,
"col": "black",
"symb": "Acvr2a",
"pval": 0.9369265,
"x": 167.9042965750682,
"y": 195.62469870547582
}, {
"GeneID": "11486",
"LogFC": 1.1764479368,
"AvgExpr": 3.4749078646,
"Log2Sigma": 1.2755449532,
"col": "black",
"symb": "Ada",
"pval": 0.1537064,
"x": 164.5701912744556,
"y": 174.7944399533497
}, {
"GeneID": "11487",
"LogFC": 0.0052270686,
"AvgExpr": 7.2603002956,
"Log2Sigma": 0.3318658581,
"col": "black",
"symb": "Adam10",
"pval": 0.9834631,
"x": 262.6570110754699,
"y": 194.75823302429163
}, {
"GeneID": "11491",
"LogFC": -0.4242383658,
"AvgExpr": 6.7720464106,
"Log2Sigma": 0.1984256297,
"col": "black",
"symb": "Adam17",
"pval": 0.07452376,
"x": 250.00541108733108,
"y": 202.07859359527464
}, {
"GeneID": "11492",
"LogFC": -0.1385555793,
"AvgExpr": 6.1948431633,
"Log2Sigma": 2.2581837513,
"col": "black",
"symb": "Adam19",
"pval": 0.8714032,
"x": 235.0489615412219,
"y": 197.20904918356922
}, {
"GeneID": "11501",
"LogFC": -1.4510760205,
"AvgExpr": -0.3513324995,
"Log2Sigma": 0.2089390806,
"col": "black",
"symb": "Adam8",
"pval": 0.2320553,
"x": 65.42492273232487,
"y": 219.58133369534391
}, {
"GeneID": "11513",
"LogFC": 0.1994474961,
"AvgExpr": 6.223752369,
"Log2Sigma": 0.7524016972,
"col": "black",
"symb": "Adcy7",
"pval": 0.5079046,
"x": 235.7980548259404,
"y": 191.44769055528758
}, {
"GeneID": "11515",
"LogFC": -0.6085031761,
"AvgExpr": 2.5223510734,
"Log2Sigma": -1.6474580624,
"col": "black",
"symb": "Adcy9",
"pval": 0.07846459,
"x": 139.8876073596396,
"y": 205.21943973537037
}, {
"GeneID": "11518",
"LogFC": -0.0463564303,
"AvgExpr": 7.0838236624,
"Log2Sigma": -0.2940949736,
"col": "black",
"symb": "Add1",
"pval": 0.8004254,
"x": 258.0841610908766,
"y": 195.63748844560033
}, {
"GeneID": "11520",
"LogFC": -0.9758190259,
"AvgExpr": 3.8416795444,
"Log2Sigma": 1.2156614507,
"col": "black",
"symb": "Plin2",
"pval": 0.1196019,
"x": 174.07395299016076,
"y": 211.48044294679215
}, {
"GeneID": "11532",
"LogFC": -0.0459470024,
"AvgExpr": 7.6387269983,
"Log2Sigma": 0.8380877677,
"col": "black",
"symb": "Adh5",
"pval": 0.8884815,
"x": 272.4627769167201,
"y": 195.63050963050662
}, {
"GeneID": "11534",
"LogFC": 0.3042772251,
"AvgExpr": 7.1461767927,
"Log2Sigma": 0.156714435,
"col": "black",
"symb": "Adk",
"pval": 0.1502027,
"x": 259.69985097435574,
"y": 189.66083798609176
}, {
"GeneID": "11535",
"LogFC": -0.9649353055,
"AvgExpr": 1.2146127363,
"Log2Sigma": 1.256290443,
"col": "black",
"symb": "Adm",
"pval": 0.4111359,
"x": 106.00158445550447,
"y": 211.2949268346676
}, {
"GeneID": "11538",
"LogFC": -0.2333077761,
"AvgExpr": 7.4879057397,
"Log2Sigma": -0.5441174157,
"col": "black",
"symb": "Adnp",
"pval": 0.1439744,
"x": 268.5547071764971,
"y": 198.82412734798027
}, {
"GeneID": "11540",
"LogFC": 0.2495733983,
"AvgExpr": 0.1498222925,
"Log2Sigma": -0.0977524038,
"col": "black",
"symb": "Adora2a",
"pval": 0.810965,
"x": 78.4108101063145,
"y": 190.5932802846159
}, {
"GeneID": "11544",
"LogFC": 0.3336837528,
"AvgExpr": 5.7781795871,
"Log2Sigma": 1.0213314988,
"col": "black",
"symb": "Adprh",
"pval": 0.3848742,
"x": 224.25240454975057,
"y": 189.15959535126748
}, {
"GeneID": "11546",
"LogFC": 0.330973219,
"AvgExpr": 6.5486523673,
"Log2Sigma": 0.3362048416,
"col": "black",
"symb": "Parp2",
"pval": 0.1632883,
"x": 244.21684050470373,
"y": 189.20579717140598
}, {
"GeneID": "11551",
"LogFC": -1.9497518792,
"AvgExpr": -0.0357923004,
"Log2Sigma": 1.4277884484,
"col": "black",
"symb": "Adra2a",
"pval": 0.2585599,
"x": 73.60117795903108,
"y": 228.08140564834898
}, {
"GeneID": "11555",
"LogFC": 0.1216802509,
"AvgExpr": 1.5004978134,
"Log2Sigma": 0.6247064563,
"col": "black",
"symb": "Adrb2",
"pval": 0.9047381,
"x": 113.40941826730794,
"y": 192.7732553851356
}, {
"GeneID": "11564",
"LogFC": 0.5685675544,
"AvgExpr": 7.3323713259,
"Log2Sigma": 0.805229049,
"col": "black",
"symb": "Adsl",
"pval": 0.07768954,
"x": 264.5245104935004,
"y": 185.15593409643932
}, {
"GeneID": "11565",
"LogFC": -0.987764648,
"AvgExpr": 5.2024262532,
"Log2Sigma": 1.2303036019,
"col": "black",
"symb": "Adssl1",
"pval": 0.06453492,
"x": 209.33352505667682,
"y": 211.6840594756494
}, {
"GeneID": "11566",
"LogFC": -0.415611363,
"AvgExpr": 7.559530734,
"Log2Sigma": 0.1279183933,
"col": "black",
"symb": "Adss",
"pval": 0.06660231,
"x": 270.4106489413769,
"y": 201.9315438769868
}, {
"GeneID": "11568",
"LogFC": -3.3588422432,
"AvgExpr": -0.3287561535,
"Log2Sigma": 1.0046262521,
"col": "black",
"symb": "Aebp1",
"pval": 0.0714946,
"x": 66.00991940631101,
"y": 252.09975198159628
}, {
"GeneID": "11569",
"LogFC": 0.1366382391,
"AvgExpr": 7.4791783225,
"Log2Sigma": -0.7115279525,
"col": "black",
"symb": "Aebp2",
"pval": 0.3487725,
"x": 268.32856296190675,
"y": 192.51829221867382
}, {
"GeneID": "11593",
"LogFC": 0.0791824869,
"AvgExpr": 3.1557196854,
"Log2Sigma": 0.7539700715,
"col": "black",
"symb": "Aga",
"pval": 0.895898,
"x": 156.29940984650904,
"y": 193.49764186893998
}, {
"GeneID": "11596",
"LogFC": 0.0777390458,
"AvgExpr": 1.6524584881,
"Log2Sigma": 0.2811201067,
"col": "black",
"symb": "Ager",
"pval": 0.9205955,
"x": 117.34701247658305,
"y": 193.52224573334587
}, {
"GeneID": "11603",
"LogFC": -1.0333704369,
"AvgExpr": 4.6018946027,
"Log2Sigma": 1.7205289269,
"col": "black",
"symb": "Agrn",
"pval": 0.149886,
"x": 193.77259158383254,
"y": 212.46142312853232
}, {
"GeneID": "11605",
"LogFC": -0.1902819291,
"AvgExpr": 3.4723845948,
"Log2Sigma": -0.1609485108,
"col": "black",
"symb": "Gla",
"pval": 0.579198,
"x": 164.50480848662227,
"y": 198.09073953912903
}, {
"GeneID": "11610",
"LogFC": -0.4654112363,
"AvgExpr": 3.4401199845,
"Log2Sigma": 0.1217222414,
"col": "black",
"symb": "Agtrap",
"pval": 0.2200653,
"x": 163.6687701962382,
"y": 202.78039689225818
}, {
"GeneID": "11628",
"LogFC": -1.1972398158,
"AvgExpr": -0.5705938911,
"Log2Sigma": 0.9674475696,
"col": "black",
"symb": "Aicda",
"pval": 0.4603026,
"x": 59.743437127011454,
"y": 215.25462333512627
}, {
"GeneID": "11632",
"LogFC": -0.0602286818,
"AvgExpr": 5.7724559144,
"Log2Sigma": 0.2226420311,
"col": "black",
"symb": "Aip",
"pval": 0.8121927,
"x": 224.10409314929248,
"y": 195.87394492097008
}, {
"GeneID": "11637",
"LogFC": 0.3865299927,
"AvgExpr": 8.0591071214,
"Log2Sigma": -0.0154754416,
"col": "black",
"symb": "Ak2",
"pval": 0.06557879,
"x": 283.35563680748317,
"y": 188.25881615019134
}, {
"GeneID": "11639",
"LogFC": 5.1769050434,
"AvgExpr": 1.7907225933,
"Log2Sigma": 2.7949579826,
"col": "black",
"symb": "Ak4",
"pval": 0.3292039,
"x": 120.92970214982209,
"y": 106.60550989434091
}, {
"GeneID": "11640",
"LogFC": 0.1535417977,
"AvgExpr": 7.444570898,
"Log2Sigma": 0.8544760437,
"col": "black",
"symb": "Akap1",
"pval": 0.6071479,
"x": 267.4318178363791,
"y": 192.23016625096324
}, {
"GeneID": "11641",
"LogFC": -1.8087331233,
"AvgExpr": 1.1606866666,
"Log2Sigma": 1.32300347,
"col": "black",
"symb": "Akap2",
"pval": 0.2612618,
"x": 104.60425596773034,
"y": 225.67770081491653
}, {
"GeneID": "11647",
"LogFC": -0.2825584361,
"AvgExpr": 5.7760854985,
"Log2Sigma": 1.8983283398,
"col": "black",
"symb": "Alpl",
"pval": 0.6888401,
"x": 224.19814267468752,
"y": 199.66361886622687
}, {
"GeneID": "11651",
"LogFC": -0.0995296071,
"AvgExpr": 8.7619146598,
"Log2Sigma": 0.4356243234,
"col": "black",
"symb": "Akt1",
"pval": 0.6690541,
"x": 301.5667358230809,
"y": 196.54384037919525
}, {
"GeneID": "11652",
"LogFC": 0.0142643654,
"AvgExpr": 5.8526134506,
"Log2Sigma": -0.2218709536,
"col": "black",
"symb": "Akt2",
"pval": 0.9471207,
"x": 226.18112953383078,
"y": 194.60418972798902
}, {
"GeneID": "11655",
"LogFC": -0.0244574119,
"AvgExpr": 5.1845788136,
"Log2Sigma": -0.0607345296,
"col": "black",
"symb": "Alas1",
"pval": 0.924379,
"x": 208.87106346943992,
"y": 195.26421344370743
}, {
"GeneID": "11656",
"LogFC": -1.3586434072,
"AvgExpr": -1.1983012718,
"Log2Sigma": 0.1982718569,
"col": "black",
"symb": "Alas2",
"pval": 0.3376104,
"x": 43.47832806347839,
"y": 218.005793491929
}, {
"GeneID": "11666",
"LogFC": 0.3823529975,
"AvgExpr": 6.2514159019,
"Log2Sigma": -0.3875423468,
"col": "black",
"symb": "Abcd1",
"pval": 0.05718461,
"x": 236.51487032554368,
"y": 188.33001422230157
}, {
"GeneID": "11669",
"LogFC": -0.1330905002,
"AvgExpr": 8.4161589374,
"Log2Sigma": 0.9929943433,
"col": "black",
"symb": "Aldh2",
"pval": 0.6831545,
"x": 292.6075381027909,
"y": 197.1158953547475
}, {
"GeneID": "11671",
"LogFC": -0.067279624,
"AvgExpr": 4.6493047605,
"Log2Sigma": 0.210193197,
"col": "black",
"symb": "Aldh3a2",
"pval": 0.8223076,
"x": 195.00108022526985,
"y": 195.99413023772615
}, {
"GeneID": "11674",
"LogFC": -0.7940631447,
"AvgExpr": 9.7882258708,
"Log2Sigma": 1.4585499913,
"col": "black",
"symb": "Aldoa",
"pval": 0.07712429,
"x": 328.1604390250826,
"y": 208.38236221733928
}, {
"GeneID": "11676",
"LogFC": -1.4194573293,
"AvgExpr": 1.5061026025,
"Log2Sigma": 1.6474309263,
"col": "black",
"symb": "Aldoc",
"pval": 0.3706863,
"x": 113.5546491643669,
"y": 219.04238410399918
}, {
"GeneID": "11677",
"LogFC": 0.42285614,
"AvgExpr": 4.2475879008,
"Log2Sigma": -0.5646321682,
"col": "black",
"symb": "Akr1b3",
"pval": 0.09692093,
"x": 184.5918214901025,
"y": 187.6396266297072
}, {
"GeneID": "11705",
"LogFC": 0.9142203636,
"AvgExpr": -0.1567293213,
"Log2Sigma": -0.3882195102,
"col": "black",
"symb": "Amh",
"pval": 0.2784412,
"x": 70.46746646345541,
"y": 179.2641835781415
}, {
"GeneID": "11717",
"LogFC": 0.2943053777,
"AvgExpr": 0.9341371897,
"Log2Sigma": -0.4521191145,
"col": "black",
"symb": "Ampd3",
"pval": 0.6466945,
"x": 98.73392201378569,
"y": 189.83081096337875
}, {
"GeneID": "11736",
"LogFC": 0.1289831188,
"AvgExpr": 6.6609838268,
"Log2Sigma": -0.3817190142,
"col": "black",
"symb": "Ankfy1",
"pval": 0.4459886,
"x": 247.1275653045234,
"y": 192.6487759231157
}, {
"GeneID": "11737",
"LogFC": 0.173071376,
"AvgExpr": 8.6447065853,
"Log2Sigma": 0.3832838038,
"col": "black",
"symb": "Anp32a",
"pval": 0.430612,
"x": 298.5296485217603,
"y": 191.89727903000454
}, {
"GeneID": "11739",
"LogFC": -0.2201214393,
"AvgExpr": 8.1802576467,
"Log2Sigma": -0.2991866564,
"col": "black",
"symb": "Slc25a4",
"pval": 0.1859471,
"x": 286.4948806139067,
"y": 198.59936248390852
}, {
"GeneID": "11740",
"LogFC": 0.3370888784,
"AvgExpr": 9.619657001,
"Log2Sigma": -0.0189925591,
"col": "black",
"symb": "Slc25a5",
"pval": 0.08414361,
"x": 323.7924944440329,
"y": 189.1015540161917
}, {
"GeneID": "11744",
"LogFC": 0.3476253748,
"AvgExpr": 5.9243166713,
"Log2Sigma": -0.5841165376,
"col": "black",
"symb": "Anxa11",
"pval": 0.0697055,
"x": 228.03909829563102,
"y": 188.9219564359799
}, {
"GeneID": "11746",
"LogFC": -0.6002562614,
"AvgExpr": 1.3278452748,
"Log2Sigma": 0.7452064918,
"col": "black",
"symb": "Anxa4",
"pval": 0.5275851,
"x": 108.93565795036979,
"y": 205.0788687269341
}, {
"GeneID": "11747",
"LogFC": -1.4604135322,
"AvgExpr": 2.4336143092,
"Log2Sigma": 0.8554703006,
"col": "black",
"symb": "Anxa5",
"pval": 0.1192165,
"x": 137.58826662853576,
"y": 219.74049424006915
}, {
"GeneID": "11749",
"LogFC": -0.1399872548,
"AvgExpr": 6.0432532413,
"Log2Sigma": 1.3244812179,
"col": "black",
"symb": "Anxa6",
"pval": 0.7699983,
"x": 231.1209742495751,
"y": 197.23345249997413
}, {
"GeneID": "11750",
"LogFC": 0.2112165061,
"AvgExpr": 5.4508280312,
"Log2Sigma": 0.0524447552,
"col": "black",
"symb": "Anxa7",
"pval": 0.3613004,
"x": 215.77009428458672,
"y": 191.24708442994512
}, {
"GeneID": "11754",
"LogFC": -1.0028534489,
"AvgExpr": -0.5281902379,
"Log2Sigma": 0.6823456219,
"col": "black",
"symb": "Aoc3",
"pval": 0.4597528,
"x": 60.84219757685848,
"y": 211.94125238181675
}, {
"GeneID": "11758",
"LogFC": -0.3676406439,
"AvgExpr": 7.8372375413,
"Log2Sigma": -0.0450327697,
"col": "black",
"symb": "Prdx6",
"pval": 0.07356715,
"x": 277.60656800701366,
"y": 201.11386931569888
}, {
"GeneID": "11764",
"LogFC": 0.3189188265,
"AvgExpr": 6.3237657526,
"Log2Sigma": -0.8295617077,
"col": "black",
"symb": "Ap1b1",
"pval": 0.06564359,
"x": 238.38959451797473,
"y": 189.4112677226913
}, {
"GeneID": "11765",
"LogFC": 0.0485026776,
"AvgExpr": 7.274223095,
"Log2Sigma": -2.0451570485,
"col": "black",
"symb": "Ap1g1",
"pval": 0.7034605,
"x": 263.017777664606,
"y": 194.02058795105896
}, {
"GeneID": "11766",
"LogFC": 0.1878218397,
"AvgExpr": 6.1343408836,
"Log2Sigma": 0.0251855976,
"col": "black",
"symb": "Ap1g2",
"pval": 0.3591984,
"x": 233.48123076702663,
"y": 191.64585317771434
}, {
"GeneID": "11767",
"LogFC": 0.1890893143,
"AvgExpr": 6.9412886536,
"Log2Sigma": 0.5197567077,
"col": "black",
"symb": "Ap1m1",
"pval": 0.4478556,
"x": 254.39080406691056,
"y": 191.62424871238753
}, {
"GeneID": "11768",
"LogFC": -0.1488038086,
"AvgExpr": 1.2716362679,
"Log2Sigma": 0.8037336987,
"col": "black",
"symb": "Ap1m2",
"pval": 0.8822522,
"x": 107.47917415602305,
"y": 197.38373316901016
}, {
"GeneID": "11769",
"LogFC": -0.2150535141,
"AvgExpr": 6.384193366,
"Log2Sigma": -0.6502781423,
"col": "black",
"symb": "Ap1s1",
"pval": 0.1832389,
"x": 239.95539054430776,
"y": 198.51297825635686
}, {
"GeneID": "11770",
"LogFC": 0.2661161865,
"AvgExpr": 2.6376832944,
"Log2Sigma": 2.8171298413,
"col": "black",
"symb": "Fabp4",
"pval": 0.9106489,
"x": 142.87608767830744,
"y": 190.31130375106184
}, {
"GeneID": "11771",
"LogFC": -0.1934288659,
"AvgExpr": 6.9906200857,
"Log2Sigma": -0.6415561075,
"col": "black",
"symb": "Ap2a1",
"pval": 0.2079832,
"x": 255.66907663154407,
"y": 198.14437997261882
}, {
"GeneID": "11772",
"LogFC": -0.0876002956,
"AvgExpr": 6.4637970988,
"Log2Sigma": -0.5315102427,
"col": "black",
"symb": "Ap2a2",
"pval": 0.5983504,
"x": 242.01807681448113,
"y": 196.3405018691576
}, {
"GeneID": "11773",
"LogFC": -0.0667303836,
"AvgExpr": 6.6001945529,
"Log2Sigma": -0.9277161996,
"col": "black",
"symb": "Ap2m1",
"pval": 0.65918,
"x": 245.55239795700254,
"y": 195.98476827877417
}, {
"GeneID": "11774",
"LogFC": -0.0834939487,
"AvgExpr": 6.3979506251,
"Log2Sigma": -0.4567138042,
"col": "black",
"symb": "Ap3b1",
"pval": 0.6256203,
"x": 240.31186766494838,
"y": 196.27050801742996
}, {
"GeneID": "11776",
"LogFC": -0.2485381751,
"AvgExpr": 6.8169070798,
"Log2Sigma": 0.4980747404,
"col": "black",
"symb": "Ap3d1",
"pval": 0.3090876,
"x": 251.16783756125182,
"y": 199.08373383406615
}, {
"GeneID": "11777",
"LogFC": -0.6723166949,
"AvgExpr": 1.2074665095,
"Log2Sigma": -0.2195277642,
"col": "black",
"symb": "Ap3s1",
"pval": 0.309748,
"x": 105.8164119342492,
"y": 206.3071593269874
}, {
"GeneID": "11778",
"LogFC": 0.1832841973,
"AvgExpr": 6.1697099006,
"Log2Sigma": -0.1119809873,
"col": "black",
"symb": "Ap3s2",
"pval": 0.3487571,
"x": 234.3977102233195,
"y": 191.723198584002
}, {
"GeneID": "11781",
"LogFC": 0.3244013781,
"AvgExpr": 4.048353198,
"Log2Sigma": -1.475749986,
"col": "black",
"symb": "Ap4m1",
"pval": 0.1275363,
"x": 179.42926602250736,
"y": 189.31781607013377
}, {
"GeneID": "11782",
"LogFC": -0.1465366004,
"AvgExpr": 4.2321981958,
"Log2Sigma": 0.180103111,
"col": "black",
"symb": "Ap4s1",
"pval": 0.6498206,
"x": 184.1930445472514,
"y": 197.34508795991042
}, {
"GeneID": "11783",
"LogFC": -0.1467915083,
"AvgExpr": 5.961928903,
"Log2Sigma": -0.3483970999,
"col": "black",
"symb": "Apaf1",
"pval": 0.4115509,
"x": 229.01370377189795,
"y": 197.34943293762208
}, {
"GeneID": "11785",
"LogFC": -1.0505193819,
"AvgExpr": 2.9754698105,
"Log2Sigma": 0.745618108,
"col": "black",
"symb": "Apbb1",
"pval": 0.1386103,
"x": 151.6287878909933,
"y": 212.75373177727687
}, {
"GeneID": "11789",
"LogFC": -0.2056214039,
"AvgExpr": 6.645644548,
"Log2Sigma": -0.7703669415,
"col": "black",
"symb": "Apc",
"pval": 0.1788766,
"x": 246.73009500178503,
"y": 198.35220525327293
}, {
"GeneID": "11792",
"LogFC": 0.3666212012,
"AvgExpr": 5.9534655152,
"Log2Sigma": -0.3815256522,
"col": "black",
"symb": "Apex1",
"pval": 0.07165187,
"x": 228.79440106836677,
"y": 188.59816716808206
}, {
"GeneID": "11793",
"LogFC": 0.0749223844,
"AvgExpr": 5.5960130918,
"Log2Sigma": 0.1719142254,
"col": "black",
"symb": "Atg5",
"pval": 0.7672376,
"x": 219.5321192625649,
"y": 193.57025652863413
}];
Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<title>Create a reusable table using d3 and jquery DataTables</title>
<head>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.9/css/jquery.dataTables.min.css">
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.9/js/jquery.dataTables.min.js"></script>
<script src="gene_data.js"></script>
<script src="makeTable.js"></script>
</head>
<body>
<div id='highlighted'>Nothing Highlighted</div>
<div id='selected'>Nothing Selected</div>
<div id='container'></div>
<script>
var table_plot = makeTable()
.datum(gene_data)
.sortBy('pval', true)
.filterCols(['col', 'x', 'y']);
d3.select('#container').call(table_plot);
table_plot.on('highlight', function(data, on_off){
if(on_off){//if the data is highlighted
d3.select('#highlighted').text(
'Oops, I just stepped over gene ' + data.symb
);
}
});
table_plot.on('select', function(data, on_off){
if(on_off){//if the data is highlighted
d3.select('#selected').text(
'And it was the chosen one ' + data.GeneID
);
}
});
</script>
Raw
makeTable.js
function makeTable() {
var data, sort_by, filter_cols; // Customizable variables
var table; // A reference to the main DataTable object
// This is a custom event dispatcher.
var dispatcher = d3.dispatch('highlight', 'select');
// Main function, where the actual plotting takes place.
function _table(targetDiv) {
// Create and select table skeleton
var tableSelect = targetDiv.append("table")
.attr("class", "display compact")
// Generally, hard-coding Ids is wrong, because then
// you can't have 2 table plots in one page (both will have the same id).
// I will leave it for now for simplicity. TODO: remove hard-coded id.
.attr("id", "gene_table")
.style("visibility", "hidden"); // Hide table until style loads;
// Set column names
var colnames = Object.keys(data[0]);
if(typeof filter_cols !== 'undefined'){
// If we have filtered cols, remove them.
colnames = colnames.filter(function (e) {
// An index of -1 indicate an element is not in the array.
// If the col_name can't be found in the filter_col array, retain it.
return filter_cols.indexOf(e) < 0;
});
}
// Here I initialize the table and head only.
// I will let DataTables handle the table body.
var headSelect = tableSelect.append("thead");
headSelect.append("tr")
.selectAll('td')
.data(colnames).enter()
.append('td')
.html(function(d) { return d; });
if(typeof sort_by !== 'undefined'){
// if we have a sort_by column, format it according to datatables.
sort_by[0] = colnames.indexOf(sort_by[0]); //colname to col idx
sort_by = [sort_by]; //wrap it in an array
}
// Apply DataTable formatting: https://www.datatables.net/
$(document).ready(function() {
table = $('#gene_table').DataTable({
// Here, I am supplying DataTable with the data to fill the table.
// This is more efficient than supplying an already contructed table.
// Refer to http://datatables.net/manual/data#Objects for details.
data: data,
columns: colnames.map(function(e) { return {data: e}; }),
"bLengthChange": false, // Disable page size change
"bDeferRender": true,
"order": sort_by
});
tableSelect.style("visibility", "visible");
$('#gene_table tbody')
.on( 'mouseover', 'tr', function () { highlight(this, true); } )
.on( 'mouseleave', 'tr', function () { highlight(this, false); } )
.on('click', 'tr', function () { select(this); });
});
}
/**** Helper functions to highlight and select data **************/
function highlight(row, on_off) {
if(typeof on_off === 'undefined'){
// if on_off is not provided, just toggle class.
on_off = !d3.select(row).classed('highlight');
}
// Set the row's class as highlighted if on==true,
// Otherwise remove the 'highlighted' class attribute.
// In DataTables, this is handled automatically for us.
d3.select(row).classed('highlight', on_off);
// Fire a highlight event, with the data and highlight status.
dispatcher.highlight(table.rows(row).data()[0], on_off);
}
function select(row, on_off) {
// Similar to highlight function.
if(typeof on_off === 'undefined'){
on_off = !d3.select(row).classed('selected');
}
d3.select(row).classed('selected', on_off);
// Fire a select event, with the data and selected status.
dispatcher.select(table.rows(row).data()[0], on_off);
}
/**** Setter / getters functions to customize the table plot *****/
_table.datum = function(_){
if (!arguments.length) {return data;}
data = _;
return _table;
};
_table.filterCols = function(_){
if (!arguments.length) {return filter_cols;}
filter_cols = _;
return _table;
};
_table.sortBy = function(colname, ascending){
if (!arguments.length) {return sort_by;}
sort_by = [];
sort_by[0] = colname;
sort_by[1] = ascending ? 'asc': 'desc';
return _table;
};
// This allows other objects to 'listen' to events dispatched by the _table object.
d3.rebind(_table, dispatcher, 'on');
// This is the return of the main function 'makeTable'
return _table;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment