A simple example demonstrating how Coördinator could be used to intersperse relevant, non-data-driven elements into a data story.
NBC News logo:
-
-
Save bradoyler/b44c243e0ff7b05cb32f8176b3602d99 to your computer and use it in GitHub Desktop.
Data Storytelling with Coördinator
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <meta charset="utf-8"> | |
| <style> | |
| .background { | |
| fill: none; | |
| pointer-events: all; | |
| } | |
| .feature { | |
| fill: #eee; | |
| cursor: pointer; | |
| } | |
| .mesh { | |
| fill: none; | |
| stroke: #fff; | |
| stroke-linecap: round; | |
| stroke-linejoin: round; | |
| } | |
| text { | |
| font-family: sans-serif; | |
| } | |
| </style> | |
| <body> | |
| <script src="//d3js.org/d3.v3.min.js"></script> | |
| <script src="//d3js.org/topojson.v1.min.js"></script> | |
| <script> | |
| var width = 960, | |
| height = 500, | |
| active = d3.select(null); | |
| var projection = d3.geo.albersUsa() | |
| .scale(1000) | |
| .translate([width / 2, height / 2]); | |
| var path = d3.geo.path() | |
| .projection(projection); | |
| var svg = d3.select("body").append("svg") | |
| .attr("width", width) | |
| .attr("height", height) | |
| svg.append("rect") | |
| .attr("class", "background") | |
| .attr("width", width) | |
| .attr("height", height) | |
| var g = svg.append("g"); | |
| var colors = d3.scale.category10(); | |
| d3.json("./us.json", function(error, us) { | |
| d3.json('./nbc_logo.json', function(error, logoCoords) { | |
| g.selectAll("path") | |
| .data(topojson.feature(us, us.objects.states).features) | |
| .enter().append("path") | |
| .attr("d", path) | |
| .attr("class", "feature") | |
| g.selectAll("circle") | |
| .data(us.objects.states) | |
| .enter().append("circle") | |
| .attr("cx", (d,i) => logoCoords[i][0]) | |
| .attr("cy", (d,i) => logoCoords[i][1] - 200) | |
| .attr("r", 2) | |
| g.append("path") | |
| .datum(topojson.mesh(us, us.objects.states, function(a, b) { return a !== b; })) | |
| .attr("class", "mesh") | |
| .attr("d", path); | |
| }); | |
| }); | |
| </script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| [[193.22799682617188,28.527999877929688],[200.4699249267578,35.42206954956055],[207.71185302734375,42.31613540649414],[214.9537811279297,49.210201263427734],[222.19570922851562,56.10426712036133],[229.43763732910156,62.99833297729492],[236.6795654296875,69.89240264892578],[243.69200134277344,76.25115203857422],[243.69200134277344,66.25247192382812],[243.69200134277344,56.25379180908203],[243.69200134277344,46.255104064941406],[243.69200134277344,36.25642395019531],[249.0142822265625,31.580001831054688],[259.01295471191406,31.580001831054688],[260.02000427246094,40.57164001464844],[260.02000427246094,50.5703125],[260.02000427246094,60.569000244140625],[260.02000427246094,70.56768798828125],[260.02000427246094,80.56636047363281],[260.02000427246094,90.56504821777344],[260.02000427246094,100.56373596191406],[260.02000427246094,110.56240844726562],[255.97373962402344,110.97964477539062],[248.8069305419922,104.00750732421875],[241.64012145996094,97.03538513183594],[234.4733123779297,90.06326293945312],[227.30650329589844,83.09114074707031],[220.1396942138672,76.11901092529297],[212.97288513183594,69.14688110351562],[209.66000366210938,71.30078125],[209.66000366210938,81.2994384765625],[209.66000366210938,91.29812622070312],[209.66000366210938,101.29681396484375],[209.66000366210938,111.29550170898438],[200.54180908203125,112.17599487304688],[193.22799682617188,109.49112701416016],[193.22799682617188,99.49246978759766],[193.22799682617188,89.49378204345703],[193.22799682617188,79.4950942993164],[193.22799682617188,69.49640655517578],[193.22799682617188,59.497718811035156],[193.22799682617188,49.49903106689453],[193.22799682617188,39.50037384033203],[193.22799682617188,29.501686096191406],[295.3769836425781,77.83200073242188],[305.17767333984375,78.97276306152344],[310.79901123046875,86.78424072265625],[307.7669982910156,95.9134750366211],[298.61199951171875,99.11199951171875],[288.61334228515625,99.11199951171875],[286.3599853515625,91.36669921875],[286.3599853515625,81.36800765991211],[276.1706237792969,112.07200622558594],[286.1692810058594,112.07200622558594],[296.1679992675781,112.07200622558594],[306.1666564941406,112.07200622558594],[315.9335021972656,110.47630310058594],[323.8443908691406,104.495361328125],[328.412353515625,95.70016479492188],[328.58184814453125,85.77932739257812],[324.6273193359375,76.69025039672852],[317.1378173828125,70.17459487915039],[321.2854919433594,63.782867431640625],[324.8244934082031,54.55299758911133],[323.6014099121094,44.712995529174805],[317.81524658203125,36.70579147338867],[308.9296875,32.283934593200684],[298.9950256347656,31.58000087738037],[288.9963073730469,31.580002784729004],[278.9976501464844,31.580004692077637],[269.7159729003906,32.29701232910156],[269.7159729003906,42.29566955566406],[269.7159729003906,52.29432678222656],[269.7159729003906,62.29304504394531],[269.7159729003906,72.29170227050781],[269.7159729003906,82.29042053222656],[269.7159729003906,92.28907775878906],[269.7159729003906,102.28779602050781],[286.4704284667969,45.06800842285156],[296.4690856933594,45.06800842285156],[305.4532775878906,48.55130386352539],[306.85858154296875,57.963775634765625],[299.3941345214844,63.942481994628906],[289.40277099609375,64.03600692749023],[286.2559814453125,57.18412780761719],[286.2559814453125,47.18540954589844],[383.6687927246094,44.86565399169922],[373.784912109375,43.828330993652344],[364.2010498046875,46.47610092163086],[356.1709899902344,52.34286117553711],[350.7409362792969,60.67255401611328],[348.6136779785156,70.3852653503418],[349.9753112792969,80.25247573852539],[354.5044860839844,89.10411071777344],[361.96697998046875,95.66761779785156],[371.3180236816406,99.04536437988281],[381.26068115234375,98.87570190429688],[390.4922180175781,95.18122100830078],[390.7640380859375,104.6843490600586],[387.7951354980469,112.55355072021484],[378.00091552734375,114.47098541259766],[368.0288391113281,114.18502807617188],[358.4103088378906,111.5467758178711],[349.7203674316406,106.65217590332031],[342.4620666503906,99.810302734375],[337.0001525878906,91.46192932128906],[333.54071044921875,82.10217666625977],[332.1280822753906,72.22124862670898],[332.9924621582031,62.2907829284668],[336.3994445800781,52.91838073730469],[341.94189453125,44.62328338623047],[349.202392578125,37.77878189086914],[357.7961120605469,32.70920181274414],[367.3163146972656,29.729350090026855],[377.2698669433594,29.086966514587402],[387.09173583984375,30.830528259277344],[390.7640380859375,38.22015571594238],[390.7640380859375,48.21881294250488],[419.4200744628906,35.41325378417969],[426.6617126464844,42.307586669921875],[433.9033508300781,49.20192527770996],[441.14508056640625,56.096343994140625],[448.38671875,62.99068069458008],[455.62835693359375,69.88501739501953],[462.6479797363281,76.26152038574219],[462.6479797363281,66.26286315917969],[462.6479797363281,56.26408386230469],[462.6479797363281,46.26542663574219],[462.6479797363281,36.26676940917969],[467.9598388671875,31.580001831054688],[477.95849609375,31.580001831054688],[478.97998046875,40.55723571777344],[478.97998046875,50.55589294433594],[478.97998046875,60.55455017089844],[478.97998046875,70.55320739746094],[478.97998046875,80.55198669433594],[478.97998046875,90.55064392089844],[478.97998046875,100.54930114746094],[478.97998046875,110.54795837402344],[474.9441223144531,110.9897689819336],[467.7772521972656,104.017578125],[460.6104431152344,97.04547119140625],[453.44366455078125,90.0733642578125],[446.2768859863281,83.10124969482422],[439.110107421875,76.12914276123047],[431.9432067871094,69.15694808959961],[428.6199951171875,71.28634643554688],[428.6199951171875,81.28500366210938],[428.6199951171875,91.28366088867188],[428.6199951171875,101.28231811523438],[428.6199951171875,111.28109741210938],[419.5162658691406,112.17599487304688],[412.1839904785156,109.50959014892578],[412.1839904785156,99.51093292236328],[412.1839904785156,89.51215362548828],[412.1839904785156,79.51349639892578],[412.1839904785156,69.51483917236328],[412.1839904785156,59.51618194580078],[412.1839904785156,49.51752471923828],[412.1839904785156,39.51874542236328],[412.1839904785156,29.52008819580078],[503.0039978027344,54.592994689941406],[503.2477111816406,64.3479995727539],[513.2463684082031,64.3479995727539],[523.2451477050781,64.3479995727539],[529.2359924316406,68.3558120727539],[529.2359924316406,78.3544692993164],[519.4549255371094,78.57199478149414],[509.4562683105469,78.5719985961914],[503.0039978027344,82.11847686767578],[503.0039978027344,92.11713409423828],[507.2678527832031,97.85199737548828],[517.2665100097656,97.85199737548828],[527.2652893066406,97.85199737548828],[529.2359924316406,105.8799819946289],[525.4293212890625,112.07199096679688],[515.4306640625,112.07199096679688],[505.4320068359375,112.0719985961914],[495.4332275390625,112.0719985961914],[486.5679931640625,110.93861389160156],[486.5679931640625,100.93995666503906],[486.5679931640625,90.94129943847656],[486.5679931640625,80.94264221191406],[486.5679931640625,70.94386291503906],[486.5679931640625,60.94520568847656],[486.5679931640625,50.94654846191406],[486.5679931640625,40.94789123535156],[487.2029113769531,31.583999633789062],[497.2015686035156,31.583999633789062],[507.2002258300781,31.583999633789062],[517.1988830566406,31.583999633789062],[527.1975402832031,31.583999633789062],[529.2359924316406,39.54436492919922],[525.2889099121094,45.59599685668945],[515.2902526855469,45.595998764038086],[505.2915954589844,45.59600067138672],[552.4218139648438,38.61347579956055],[556.5320434570312,47.728397369384766],[560.6422119140625,56.843204498291016],[564.7523803710938,65.95801544189453],[568.862548828125,75.07282257080078],[572.9557495117188,73.3728141784668],[577.037353515625,64.24506759643555],[574.9927368164062,55.176334381103516],[570.7364501953125,46.12882041931152],[566.480224609375,37.0813045501709],[567.8240356445312,31.588001251220703],[577.8225708007812,31.588001251220703],[583.4270629882812,38.20115661621094],[587.2529907226562,40.80912780761719],[591.0276489257812,31.588000297546387],[601.0264282226562,31.588000297546387],[605.9207763671875,34.885066986083984],[601.8094482421875,43.99947738647461],[597.6981201171875,53.113887786865234],[594.04248046875,62.22931671142578],[598.1043701171875,71.36587524414062],[602.146240234375,77.06499099731445],[606.1019897460938,67.8819694519043],[610.0576782226562,58.698944091796875],[614.0133056640625,49.516143798828125],[617.968994140625,40.3331184387207],[622.2125244140625,31.588001251220703],[632.2113037109375,31.588001251220703],[638.7605590820312,33.837066650390625],[634.727294921875,42.98601531982422],[630.6939086914062,52.135189056396484],[626.66064453125,61.284141540527344],[622.6272583007812,70.43331527709961],[618.5938720703125,79.58248901367188],[614.560546875,88.73143768310547],[610.5271606445312,97.880615234375],[606.4937744140625,107.02978515625],[602.4410400390625,114.30216979980469],[598.2186889648438,105.23865509033203],[593.9964599609375,96.17535400390625],[589.7741088867188,87.1118392944336],[585.5576782226562,81.4184341430664],[581.367431640625,90.49655151367188],[577.177001953125,99.57489013671875],[572.9867553710938,108.65300750732422],[568.8137817382812,112.94078826904297],[564.6895141601562,103.83222961425781],[560.5653076171875,94.72389221191406],[556.4410400390625,85.61532592773438],[552.31689453125,76.50698471069336],[548.192626953125,67.39842224121094],[544.0682983398438,58.28986358642578],[539.9441528320312,49.18152046203613],[535.8198852539062,40.072959899902344],[532.6561889648438,31.584014892578125],[542.6549682617188,31.584014892578125],[665.1551513671875,29.656386375427246],[674.74462890625,32.3748254776001],[678.31201171875,40.19978332519531],[678.0769653320312,49.77090644836426],[669.337890625,44.941640853881836],[659.5775146484375,43.91647720336914],[652.4286499023438,50.345767974853516],[655.6769409179688,58.954437255859375],[664.403564453125,63.8101921081543],[673.0776977539062,68.76546859741211],[680.2003784179688,75.70347595214844],[683.7376098632812,84.9598159790039],[683.1646118164062,94.87332153320312],[679.035400390625,103.92185974121094],[671.8250732421875,110.7456283569336],[662.4887084960938,114.1489486694336],[652.532470703125,114.3161392211914],[642.9776611328125,111.45063018798828],[638.4840087890625,104.30477905273438],[638.4840087890625,94.30624389648438],[644.2766723632812,96.63978576660156],[653.5307006835938,100.26585388183594],[662.9903564453125,98.08955383300781],[667.5302124023438,89.51319885253906],[662.7724609375,81.35423278808594],[653.9662475585938,76.63223648071289],[645.4196166992188,71.47278213500977],[638.9108276367188,63.98447799682617],[636.4134521484375,54.387229919433594],[637.9548950195312,44.5867862701416],[643.5465087890625,36.394609451293945],[651.9842529296875,31.150896072387695],[66.48799896240234,54.268001556396484],[70.52774047851562,63.50559997558594],[74.56747817993164,72.74320220947266],[78.60721969604492,81.98079681396484],[82.64695739746094,91.21839141845703],[86.68669891357422,100.45599365234375],[83.46234130859375,100.91590881347656],[75.14335632324219,95.21966552734375],[66.82437133789062,89.52342224121094],[58.505393981933594,83.82717895507812],[50.18640899658203,78.13092803955078],[41.88879203796387,72.40491104125977],[36.046586990356445,64.37236022949219],[36.06533622741699,54.452388763427734],[41.79699516296387,46.37886428833008],[51.196475982666016,43.17110824584961],[60.60528564453125,46.23591613769531],[96.63999938964844,42.492000579833984],[95.1946792602539,52.66301727294922],[93.74935913085938,62.83403778076172],[92.30404663085938,73.00505065917969],[90.85872650146484,83.17606735229492],[89.41341400146484,93.34708404541016],[86.68544006347656,93.74313354492188],[82.66497421264648,84.28932189941406],[78.64451599121094,74.83551788330078],[74.62405395507812,65.3817138671875],[70.60359191894531,55.927913665771484],[66.58313369750977,46.4741096496582],[65.02227020263672,36.46367263793945],[69.7343521118164,27.543556690216064],[78.80289840698242,23.116576433181763],[88.74524688720703,24.942455768585205],[95.51993560791016,32.40117359161377],[131.04000091552734,45.09600067138672],[127.08518981933594,54.48505783081055],[123.13038635253906,63.874114990234375],[119.17558288574219,73.26316833496094],[115.22077941894531,82.65222930908203],[111.26597595214844,92.0412826538086],[108.08757781982422,95.26393127441406],[106.58365631103516,85.18756866455078],[105.0797348022461,75.11119842529297],[103.57581329345703,65.03484344482422],[102.07189178466797,54.95848083496094],[102.2375259399414,44.9743766784668],[103.11405944824219,40.356000900268555],[101.15013122558594,33.247111320495605],[107.38101196289062,25.43034791946411],[117.08712768554688,22.901808738708496],[126.3600845336914,26.626505851745605],[131.73430633544922,35.09299850463867],[153.9720001220703,73.07600021362305],[145.71431732177734,78.75809478759766],[137.45663452148438,84.44020080566406],[129.1989517211914,90.12229919433594],[120.94126892089844,95.80439758300781],[112.68358612060547,101.48649597167969],[110.99946594238281,99.15904235839844],[114.96177673339844,89.95166778564453],[118.9240951538086,80.74430084228516],[122.88641357421875,71.53692626953125],[126.84872436523438,62.329559326171875],[130.8369598388672,53.13393783569336],[137.2469024658203,45.59156036376953],[146.83014678955078,43.37994384765625],[155.92530822753906,47.21122360229492],[161.03712463378906,55.65623092651367],[160.3118438720703,65.48220825195312],[158.71200561523438,109.61599731445312],[148.49859619140625,109.6159896850586],[138.2852020263672,109.6159896850586],[128.07179260253906,109.61599731445312],[117.85839080810547,109.61599731445312],[107.64498901367188,109.61599731445312],[114.07867431640625,104.38815307617188],[122.45841217041016,98.5491714477539],[130.83814239501953,92.71018981933594],[139.2178726196289,86.8712158203125],[147.59760284423828,81.03223419189453],[156.9271240234375,77.2313232421875],[166.6143341064453,79.80759811401367],[172.92398071289062,87.6377944946289],[173.43060302734375,97.6803970336914],[168.1220245361328,106.21312713623047],[23.70800018310547,87.90399932861328],[28.892223358154297,80.50740814208984],[37.214059829711914,77.09176254272461],[46.082536697387695,78.77825164794922],[53.72339630126953,83.76123809814453],[61.2177619934082,88.98280334472656],[68.71213150024414,94.20437622070312],[76.20650100708008,99.42594146728516],[83.70087432861328,104.64751434326172],[90.38928985595703,109.6159896850586],[81.2552719116211,109.6159896850586],[72.12124633789062,109.6159896850586],[62.98722839355469,109.61599731445312],[53.85320281982422,109.61599731445312],[44.71918487548828,109.61599731445312],[35.61777877807617,109.182861328125],[27.718449592590332,104.83647155761719],[23.372217416763306,96.94165802001953]] |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment