As Mike Bostock announced on twitter that he released version 4.0 of his famous javascript library D3.js last week, we felt obliged to do a review and explore the changes. Especially, as he worked over a year on the code to restructure, organize and straighten out some wrinkles.
Many changes are housekeeping, some changes introduce a new way of using them, like the D3 quadtree syntax or the attr() function, but that wouldn’t make the release a big thing to talk about, so why should we bother about D3.js version 4?
Divide and Conquer the Module Land
The biggest change that comes with D3 v4 is the modularization of its core. This makes it even more clear that D3 isn’t a charting library, but much more a toolbox for building visualizations with axes, collision detection but alsoparsing CSVs, formatting and animations.
For a more in-depth view head to the D3.js changelog on GitHub, listing all features of the D3 project. Alternatively, search for the d3-module keyword on NPM or have a look at the plugin wiki.
Other Noticeable New Features
- Support for opacity and the Cubehelix color space
- Improved support for canvas
- d3.stratify for generating trees out of flat data
- Asynchronous queue for loading multiple files
Building Your Own Module
As Mike writes in his plugin blog post, it’s now possible for everybody to write a module. The instructions sounded very easy, so we used one lab day to try our luck and build our own module.
So first we had to find a nice showcase purpose for our module. After some time of brainstorming, we realised that nearly every general requirement you have for a visualization toolbox is already met by D3.js, as it’s already very, very powerful. Mike, you did a really great job there! Nevertheless, we found something missing: icons generated by algorithms. So we proudly present: d3-icon. (Sorry Mike for polluting the npm namespace…).
As the instruction already includes a template zip to bootstrap a new module, it’s very easy to start. Also a basic testing setup is included. Unfortunately, the template module doesn’t offer real D3 functionality, so we spent some time exploring already existing modules like D3 shape to find out what needs to be done to create a useful D3 module.
Nevertheless, there are some pitfalls when developing new modules. As the template is using ES6 modules you have to find out which D3 module is now holding the functionality you would like to use, as the function name doesn’t give a hint of the module name. For example, you can’t just guess which module you have to include to be able to use d3.max(). (Hint: it’s inside D3 array.) Another pitfall is that the tests use another way of requiring files, so you have to rewrite those lines of code for the test. Also be aware that every included module needs to be specified in the package.json pretest step. In our case, we had to add a “-g d3-path:d3” inside the command.
Summarizing, we really like the module structure, as we find it much easier to understand one module than to understand the whole D3 core library. Now that we build a module on our own, we also feel much more encouraged to improve and extend other modules. To start, the instruction blog post and the template zip were very helpful. Great job, Mike!
If you would like to take a deeper look at our module, you find our D3 icon repository on GitHub.
You can use the new module like any other D3 functionality:
github:f17fdbf603c3b9407a3a2f8418365b0a
Which will result in a nice scalable red heart icon like this:
embed:<svg width="400" height="50"><path transform="translate(20,20)" d="M0,0L0,-5L0.01592017311657953,-5.20298728715403L0.12546207596059314,-5.788182602755194L0.41293484142614145,-6.687118593066485L0.9448637638349007,-7.794743388649621L1.7631265168342183,-8.981734208445882L2.8803191572276456,-10.10937212636987L4.277774780256799,-11.04502727006552L5.906420368589672,-11.676267039896839L7.690403394594481,-11.921842761352343L9.53317178545529,-11.738292773086032L11.32547109731022,-11.121547574605383L12.954550804786129,-10.10363723513183L14.31376286174221,-8.745276476064275L15.311699849515879,-7.125640325217571L15.880060309909041,-5.330967416893558L15.979541671841423,-3.443697203419924L15.60323645474055,-1.5336595612796935L14.77722952076229,0.347572215756921L13.558343222639525,2.168611221914037L12.029231114703885,3.9165313102869104L10.291256797849083,5.592123871744795L8.455791391781567,7.203222344282802L6.634703488567839,8.757432220808997L4.930886711217192,10.255627992503813L3.4296658221485217,11.68737703601987L2.19184308035915,13.029063733996269L1.2489993194256128,14.244984012008048L0.601462169517735,15.29114737682919L0.21911503023905582,16.12105007022445L0.04496615575138038,16.69234732402076L0.001150255171237311,16.973209090042378L-0.003182596239038998,16.947213533231935L-0.06280475461769673,16.615901620997615L-0.2669944739478055,15.998536643680866L-0.6906156923887578,15.129111568712723L-1.3865003992722638,14.051138815880758L-2.379823338085964,12.811156620883931L-3.6649805886539286,11.452124217483389L-5.205259574531561,10.007912109539003L-6.935338271693398,8.499915339325488L-8.76639816730973,6.93645427524446L-10.593401457847609,5.315137990436312L-12.303888997544227,3.6278308820275007L-13.787518945503093,1.8673739096113144L-14.945499118187646,0.0348521180406145L-15.699074721377995,-1.853965328582254L-15.99631664576088,-3.7643234589895957L-15.816606412227193,-5.641340429414093L-15.172418676063725,-7.4125748405499925L-14.108242656586128,-8.994259820308454L-12.696738480455231,-10.300549632901657L-11.03247047783961,-11.254586590246317L-9.223774981190045,-11.799821368866397L-7.383485905077975,-11.909873675169512L-5.619342537368211,-11.595333517246189L-4.02493152014183,-10.906267326894078L-2.6719664908450778,-9.929759889617426L-1.6045886310825481,-8.782512164936676L-0.8361901787980972,-7.599225812350736L-0.34903699130040605,-6.5181315089671426L-0.09671569275821716,-5.66546481242249L-0.009178186863469806,-5.140890849881237L0.00007605458494812616,-5.005794429601239L0.025330742926335487,-5.275994020212679L0.1592803781753822,-5.9198559652567955L0.4838014121321207,-6.862062377265292L1.0617008328076023,-7.992526610761703L1.93018861309263,-9.179263773833645L3.0966662746499387,-10.28350914743846L4.537216630481244,-11.175107602185895L6.197938096909565,-11.746208468758482L7.999012399570076,-11.92158730263652L9.841149782743404,-11.664432354148406L11.613842832166565,-10.977099719496612L13.204697771138907,-9.89705652644889L14.509015088554822,-8.488889990065251L15.43876827780273,-6.833766268209235L15.930182376977855,-5.01800622104962L15.94923818566589,-3.1224701914062507L15.494612407507077,-1.214215586924443L14.597792070452613,0.658547256925454L13.320353041719754,2.4677492100227125L11.74864482878509,4.203170490124816L9.98635460695746,5.867287051041016L8.145611935393209,7.468397993987961L6.33742508600921,9.013392124999301L4.662298758033854,10.501496310758993L3.201865936730348,11.920112007667688L2.012275306066533,13.243434590137264L1.119918109283067,14.434035638626126L0.5198687458107069,15.447059141281871L0.17717042753739087,16.23622731429429L0.03084260095426829,16.760545424262137L0.0002433231028550304,16.990486752200326L-0.006790884794525991,16.912544214092247L-0.08476417059346783,16.531333812466393L-0.3211290447362143,15.868874428085203L-0.7875311181823931,14.96117244784315L-1.5324823922857151,13.852721598660866L-2.5761268343009904,12.589905025183748L-3.9075748164851887,11.214492511971658L-5.4850531797961555,9.758423677188581L-7.23886573733589,8.240855631351L-9.076907467844299,6.668064145341099L-10.89224694242703,5.03628426295246L-12.572106113951547,3.337043130439889L-14.00744104726981,1.5640647987953118L-15.102272702029026,-0.27950409835622514L-15.781938371488849,-2.1749273579877553L-15.99952991903751,-4.084048391616273L-15.739946013594993,-5.9487494801488925L-15.021197767921565,-7.694155481070068L-13.89285158387544,-9.23543631577917L-12.431747783802765,-10.487455704482826L-10.73537600868084,-11.375997365238327L-8.913496747809367,-11.848959907467172L-7.07875412670867,-11.885808000543664L-5.3371143147457945,-11.503724586620843L-3.778978659510289,-10.759311330813388L-2.471759602232756,-9.745278145561421L-1.4545760390503881,-8.582262778683093L-0.7355348105344822,-7.406625306277191L-0.2918334037469914,-6.355664566938451L-0.07266643102604668,-5.552112328461647L-0.004667569668559235,-5.08991225989185L0.0006081786836312208,-5.023158344365243L0.03783955580753649,-5.359667064098624L0.1985309694389873,-6.060045364596892L0.5618911652831006,-7.042379678998641L1.18682289678334,-8.191916463285182L2.105748472292936,-9.374440777091898L3.320831845979064,-10.45158180508051L4.802943531691296,-11.296050275487417L6.493469211808359,-11.80487198787047L8.30880841122577,-11.909011481662693L10.147168748878531,-11.578327749558037L11.897055586233632,-10.821485727321013L13.446704744330082,-9.681160432346097L14.693620956127027,-8.225509642383367L15.553374460000981,-6.537363690523788L15.9668735479372,-4.702822118040113L15.905466124210875,-2.8009278999787766L15.373416335317028,-0.8958223131541446L14.407535868248326,0.9676834618919161L13.074002730231504,2.7647715697969453L11.462650609164793,4.487780203231486L9.67923692240681,6.140672386303159L7.83637730228244,7.73200522681356L6.04395250208824,9.267771501149536L4.399839983748928,10.7454311138229L2.981792642271081,12.150180147733126L1.8411839032654933,13.454070527957006L0.9991710257793257,14.618070018546135L0.44561181405789946,15.596629498397608L0.1408234456004165,16.34388958330569L0.020017783183381693,16.82038305406206L0.000008079420278472441,16.999017119966872L-0.01242120215987113,16.869259799570465L-0.11123848284903409,16.43878146671328L-0.3818211546861163,15.732258598227702L-0.8923878126226709,14.787553179113528L-1.6869813708675336,13.649950901882754L-2.7806390842368365,12.365493172652993L-4.157189872217622,10.974610534522927L-5.769884291494696,9.507226863189793L-7.544809022004787,7.980258336906985L-9.386788469328417,6.398017485348195L-11.187253313560694,4.755518251206227L-12.833379457383534,3.0441486793608163L-14.217686605928177,1.25872343687134L-15.247243858486721,-0.5953718984956964L-15.851663953717305,-2.496323535857613L-15.989175133625256,-4.4025569091209L-15.650230399201249,-6.252809334794946L-14.858332973554363,-7.969966007502174L-13.668004509566975,-9.468409404153489L-12.160076859789136,-10.664033860337998L-10.434726361826684,-11.485585019488061L-8.602870320346849,-11.885680277446658L-6.776690765853649,-11.849805909310248L-5.060127661523032,-11.401787182178069L-3.540185634965751,-10.604667074569111L-2.2798248698126815,-9.556547372133002L-1.3130645705690016,-8.381654146921356L-0.6427291245923136,-7.2175835813568625L-0.24103044641095986,-6.200259589764469L-0.052926145867636824,-5.448503698267457L-0.0019447928138776997,-5.05022192789605L0.0020511525410867944,-5.052033688342194L0.05386749496412814,-5.45372683114428L0.2435587492658798,-6.208282947974421L0.6474377963170844,-7.227469513366245L1.3203272832089146,-8.392248476323033L2.2897542371161337,-9.566612242588462L3.5526155455736985,-10.61301922998596L5.07462091471274,-11.407423925597602L6.792571399722659,-11.852003155624402L8.619277811858264,-11.884051429362618L10.450686918951083,-11.480095184990715L12.1745854931404,-10.654970316504764L13.680110601419615,-9.456315246135246L14.867221742617936,-7.95554872364493L15.65529301862935,-6.236838943733035L15.990061265442849,-4.385768909921123L15.848312025410028,-2.479340240422439L15.239886387406651,-0.578652069875907L14.206830097658225,1.274901699618298L12.819760667000574,3.0596723733541555L11.171775761802339,4.770396932559284L9.370444861221445,6.412323475551494L7.528596466819402,7.994061640507752L5.754719858253582,9.520536973300286L4.143833977728857,10.987335498656634L2.76963350414386,12.377422830724635L1.6786073516854427,13.660766707257087L0.8866479614694839,14.796862245052385L0.3784466543778858,15.739645377440503L0.10972091343741064,16.443867470395848L0.01206604836548286,16.87176047871681L-0.000011095388979333206,16.998785658131162L-0.020513908916349993,16.81743322827218L-0.14260894690981224,16.338393612036956L-0.4493544480946225,15.588891260433131L-1.0053421266603095,14.608478425434225L-1.8500082293875746,13.443041407851505L-2.993220545732847,12.138097128812127L-4.413544465374051,10.73259630099269L-6.059351488853922,9.254375145265834L-7.85267922644313,7.718120336023457L-9.695505594969298,6.12627585144448L-11.47788365106158,4.472797228744406L-13.087216607083223,2.7491358242791653L-14.417849977824044,0.9514021431913124L-15.38012867406574,-0.9126107856371853L-15.908113803723527,-2.81791529333283L-15.965272777480415,-4.719520043788888L-15.54763643724909,-6.553126420820837L-14.684142251884017,-8.239589723707597L-13.434133036971184,-9.692791258014143L-11.882233795127629,-10.829980418565807L-10.131062537315692,-11.58318034265502L-8.292423506838917,-11.909985108757475L-6.477765894234381,-11.80205974886523L-4.788755882808717,-11.289897749133262L-3.3087989256081025,-10.442865210960678L-2.0962635104569083,-9.36420095863679L-1.1800049783127498,-8.181355214325455L-0.5575818680417922,-7.032730534458905L-0.19631618377336174,-6.052434969237233L-0.0370944595355546,-5.3549850000274075L-0.0005612703700768589,-5.021952542638061L0.004857181181412717,-5.092323921925149L0.07382546854232604,-5.5578590819554705L0.2946921434571271,-6.364074121077268L0.7406535174685376,-7.416715083721437L1.4622867707888727,-8.592854868033104L2.4821286608028648,-9.755134320143249L3.7917931243262286,-10.767270469904275L5.351893934947644,-11.508824938277694L7.094787581805091,-11.88737929149204L8.92989910390165,-11.846674921666308L10.751162298662582,-11.369878567202102L12.445916193473348,-10.47783887706923L13.904468861139945,-9.22289906645684L15.029479266492126,-7.679422992123193L15.744323254310485,-5.932592406557749L15.999699659016278,-4.067188030658754L15.777888815013409,-2.157961170254176L15.094284520583908,-0.26286073897059925L13.996063117951852,1.5801369110343941L12.558108135375127,3.352455183719872L10.876553144363776,5.051060848742599L9.060517311492632,6.682281706617962L7.2227686572667436,8.254577712030631L5.4701449432485045,9.771644980837964L3.8945829239996765,11.227101662244149L2.565551571308429,12.60167223600359L1.524558737015566,13.863312859750014L0.7822148426304867,14.970187097559243L0.3181081794012597,15.875898913958887L0.0834947337940746,16.53600170068924L0.006553606418960296,16.91459154198425L-0.00027043162514047195,16.98979276126318L-0.031502396046489085,16.75715138383507L-0.17924289788354641,16.23033007648199L-0.5239929560160252,15.438980576740741L-1.126526879080014,14.424173413926733L-2.021548542260269,13.232203117566483L-3.2137068665910404,11.90788424072922L-4.67633526403232,10.488557041102922L-6.353036095704391,8.999911538170963L-8.161976577586515,7.4544307585524425L-10.002519806312534,5.852797715726368L-11.76360535815323,4.188081194297111L-13.333136932122498,2.452001480745854L-14.607543793106226,0.6421667046439175L-15.500666433866028,-1.231064013699037L-15.951176383180194,-3.1394478219451676L-15.927870134094364,-5.034595687302051L-15.432366143516575,-6.849300012346154L-14.498964890630356,-8.50261096355272L-13.19168444842627,-9.908204362950764L-11.598735377435242,-10.985011046506274L-9.824926550187389,-11.668640865981205L-7.9826774197473,-11.921908287582774L-6.1824358373987245,-11.742793885123598L-4.523352771993665,-11.168461392416141L-3.0850415280465504,-10.274457783901559L-1.921151431422558,-9.168883286983995L-1.0553231787969912,-7.9820336413992345L-0.4798796768604751,-6.852682177603999L-0.15736129546967959,-5.912683928024895L-0.02475990741502357,-5.271868668520008L-0.00006462921431016218,-5.005198618102989L0.009474615079986773,-5.143894351422667L0.09811323654991705,-5.6717159929691014L0.35224214332129045,-6.52689921032648L0.8417283963568436,-7.609485817077124L1.6127492877286331,-8.793066685298346L2.682769193162908,-9.939374254939215L4.038116876851756,-10.913806043573658L5.634388280035302,-11.599878406791191L7.399646990854849,-11.910809744704084L9.24014416077956,-11.796880966196733L11.048053978117581,-11.247848489926396L12.71054009479654,-10.290396073246288L14.119348778122644,-8.981300221503307L15.180076717622105,-7.397549156714218L15.820289639798839,-5.625017240168727L15.995769658032623,-3.7474077327057076L15.694335528479474,-1.8370283937815615L14.936895854775875,0.051412033810951496L13.775641510710953,1.8833374693056806L12.289538145607771,3.643132134586825L10.577519869163202,5.3298147939504315L8.749989631160766,6.950585335351209L6.9193821659443335,8.51355613452335L5.190628240146529,10.021041486462746L3.6523669311744844,11.464611023604286L2.369685068006661,12.822751852577213L1.3790258308519092,14.061494078436038L0.6857140891949702,15.137819968882914L0.2643117319279209,16.005188346053984L0.0617629460584935,16.620143835110106L0.003039763207982197,16.948804051473594L-0.001225480693866927,16.972053751942237L-0.04581185400668547,16.6885147063118L-0.22149268951612233,16.114760781691384L-0.6059803013256192,15.282739867616934" stroke="red" stroke-width="2" fill="none"></path></svg>
Not bad for a start!
TL;DR
- D3.js easily extensible while using fancy new ES6 modules
- Still a rock solid toolbox for easily creating all kinds of visualizations
- For the most part compatible with D3 v3
Learning more
For more information, have a look at the complete changelog of changes in D3 v4 , the D3.js GitHub repository and read Mike Bostock’s blog post about What Makes Software Good?.
If you have any questions or suggestions, feel free to comment or contact me: Thomas.Lercher@comsysto.com