D3V4 Scatterplot

.block

license: gpl-3.0

README.md

** Copied from https://bl.ocks.org/mbostock/3887118 Then updated to D3 V4 **

This scatterplot is constructed from a TSV file storing the dimensions of sepals and petals of various iris flowers. The chart employs conventional margins and a number of D3 features:

• d3.tsv - load and parse data
• d3.scale.linear - x- and y-position encoding
• d3.scale.ordinal - color encoding
• d3.extent - compute domains
• d3.svg.axis - display axes

forked from sebg's block: D3V4 Scatterplot

data.tsv

sepalLength	sepalWidth	petalLength	petalWidth	species
0.0	0.0
-6.136444732758574E-5	4.545161404449796E-4
-4.050840657275058E-5	4.840951096960258E-5
-6.823986525692362E-6	3.12671938863945E-5
-1.1548941613808123E-5	3.546331275611723E-4
-9.826297197038387E-7	3.5603049072848074E-6
-1.2045129157982732E-4	2.2047227598995735E-4
-4.152062888525032E-5	6.711023798177143E-5
-6.248941120846613E-5	5.784348971774476E-4
1.7505945436545887E-19	-4.337766650269395E-18
-1.3520470409564885E-7	5.374704042680286E-6
-4.195675579775669E-5	5.00261307839357E-5
-1.0441555911898825E-4	5.200795022944802E-4
-4.533388080475843E-6	1.3344362590494142E-4
-0.001559846927411405	5.753763017101092E-4
-1.3675195035991498E-6	7.904885652591539E-6
-1.3013405198090752E-5	8.289449231556957E-6
-8.646490954846758E-4	5.137469956497806E-4
-8.037920697011455E-4	0.021295012875894852
-6.785807341759737E-5	1.23346836162412E-4
-0.001256953028386881	2.9030657644932723E-4
0.0	0.0
-1.804582251656939E-4	8.059241427658893E-6
-3.576811516215948E-5	5.747556576908509E-5
-8.750381670759257E-6	4.5300756558665743E-4
-1.6907746613420085E-4	0.0010846452204218253
-1.817946061555633E-6	1.2115481041162038E-5
-2.0549933573689406E-6	1.3232040080092916E-5
0.0	0.0
-1.9923177490317875E-4	9.793434669528142E-6
-3.793530282624506E-20	1.708255260678437E-19
-0.0015059981380329973	9.66157321966506E-4
-6.42277604068312E-4	0.016108846440610464
-5.7843033201388506E-5	8.597771735726545E-5
-2.2192408182245994E-4	0.0077046348469403956
0.0	0.0
-2.2042109012855515E-5	3.9578486692648594E-4
-1.9042068588375615E-5	1.9664858421425966E-5
0.0	0.0
0.0	0.0
0.0	0.0
-5.953657897385165E-4	0.002692293196039794
-1.3675114437775102E-7	5.453747764892374E-6
-2.5150630974368223E-4	8.675718878004386E-4
-0.001365747775525485	5.324609119858334E-4
-3.0829651495752534E-5	5.780651097510061E-5
-1.6264475598432133E-5	6.204757784665193E-5
-3.1426951763723376E-22	4.50796003950137E-21
-3.7262549427085564E-5	4.442457845914604E-5
-6.696158552972201E-5	8.884485064016306E-5
-3.681341577656195E-5	4.046843866574379E-5
0.0	0.0
-6.997178974998573E-5	3.7603327074195426E-4
-1.5262806129009385E-4	4.4021141331785995E-4
-7.527081701506121E-5	0.0023723561140620328
-8.911649385777402E-6	2.873381501732105E-4
-0.013880007928002373	1.0549669868054253E-4
-4.772111230995024E-5	1.1242475406788294E-4
-9.611666545231153E-6	2.475686992002501E-5
-1.1878645594755161E-5	2.9612083540402725E-5
-2.6804781741230993E-5	7.569521183697302E-4
-0.003199545364413009	0.10502915783720873
-0.04786152585890956	0.8927271719888857
-8.080485451371046E-5	1.397657361518133E-4
2.1877434978184686E-33	3.9980152720252534E-33
-8.3550798118738E-5	1.5877643309243075E-4
-3.7128206215847825E-5	5.4584219808648765E-5
-1.0987742020438512E-8	5.086397212307314E-8
1.611537047748654E-20	-3.6913609371409703E-20
-7.307775794708608E-35	-8.47124982917083E-35
-4.01407285925173E-6	1.8949003290135428E-5
-6.932566150251058E-4	0.018759658998861194
-8.589996658625747E-5	2.420377504166809E-4
0.0	0.0
-3.6733212859047036E-4	3.1521453028322165E-4
6.736211655760572E-34	1.8845147351713223E-33
-1.0062879486005722E-4	4.313520595468321E-4
6.501281221409981E-34	-6.827251519475913E-35
0.0	0.0
-2.994408450156096E-4	0.006386135770084795
-4.855475319390289E-5	1.027125704901248E-4
-4.5063599477728606E-5	4.3868163834661587E-4
-4.665049650573751E-5	0.002134750617589587
-5.1595533279301086E-6	3.957999019698196E-4
0.0	0.0
-2.0892388720991067E-5	1.1403324759946002E-5
-9.407723044031762E-6	4.460361130700408E-5
-2.2071442705127307E-5	7.921185325296475E-5
-7.67852411824125E-6	2.501121735781661E-4
-9.976358958660417E-4	0.023738014144443507
0.0	0.0
-1.1477477617494995E-4	4.2779562082179774E-4
-1.184488790288866E-6	2.559511750336852E-6
-5.176460634251562E-5	3.969705499082241E-4
-1.4706255274041412E-4	2.685972665593251E-4
-2.7610884749836983E-4	4.188631185433379E-4
0.0	0.0
0.0	0.0
-1.9992579006989888E-6	1.1047726977276157E-5
-1.4366122673819077E-5	4.150335414267859E-4
2.5027175269090324E-22	-7.937150354628464E-22
-0.004830833183725621	0.10620265405987837
-1.9313637155699376E-5	1.8269709856113784E-5
-1.1398645285400902E-5	3.208125728678898E-5
-3.096099090212704E-5	1.2488219553862678E-4
-4.1727789891763684E-34	3.2473268806354974E-33
-2.583398101690659E-4	1.2937466255939899E-5
0.0	0.0
0.0	0.0
-4.459694902882602E-4	0.0012852883218869874
-7.610760801632467E-5	4.095108551832306E-4
-6.420792406221572E-5	8.616197818396971E-5
-0.015412522185986635	0.003917168595434769
-2.511068582256186E-6	1.5291989255171283E-5
-6.366373348043675E-5	4.923438379381121E-4
0.0	0.0
-3.72315171998717E-5	1.3679924915355386E-4
-3.406117546686377E-5	2.1740778162327741E-4
-1.9386410560174986E-4	0.0021701347309998303
0.0	0.0
-0.019011565304618422	5.25310628305915E-5
-0.029854710345038754	0.004238751517004141
-5.265615177012167E-4	1.340514287791388E-4
0.0	0.0
-4.647474365250664E-4	6.0892822464175154E-5
0.0	0.0
-9.61814993047964E-7	1.9466415253836067E-6
3.468201888972694E-20	1.2608208638038573E-19
-1.5591710046960944E-7	9.449107330093385E-7
-3.348340363993649E-6	9.123494763693014E-5
-2.7313868439649878E-5	3.6725965853468033E-4
-3.478898754071632E-4	6.470397637589887E-5
1.0288198738782797E-33	1.056137309023692E-33
-3.571395681063099E-5	1.027577369671099E-4
-5.773583618402499E-4	2.4666388765182557E-4
-7.167306020562714E-7	3.4198273609150027E-6
0.0	0.0
1.5477920200729864E-35	2.722991218765988E-34
-3.4946551691255955E-4	6.422682038819492E-5
-0.0011421926718049704	3.345203268335699E-4
-2.868923273867021E-5	8.515931485175813E-5
-2.089347931457359E-5	3.6304727555252085E-5
-9.742498860835802E-4	0.025803605322474915
0.0	0.0
-3.63566318163399E-5	3.4250007406682505E-5
-9.302641207466551E-7	2.363217092827181E-6
-1.6182209845341884E-4	2.406748387257946E-4
-1.0358261731393477E-34	1.2788456218174176E-35
-4.332016926094305E-5	8.897840405637613E-5
-2.8542250504436912E-5	2.664648284450698E-5
-6.911163716207571E-5	1.537934950000439E-4
-1.718255473877041E-5	1.1992516564018716E-5
-1.8666633435675711E-6	8.4813939039492E-6
-2.551989913521872E-6	1.53490961695235E-5
1.8281227090380966E-33	8.957508629361205E-34
-1.0632982142021894E-5	3.941817982903267E-5
-1.693665687675651E-5	9.517773673040272E-6
-4.410365778163158E-5	2.608472073510683E-4
1.0464257346494136E-34	1.2268814375508848E-34
0.0	0.0
-2.8914746119307767E-4	1.0610312685597482E-4
-1.7040320317958979E-4	3.858975910983523E-4
-2.0662432488888316E-5	3.579336884786171E-5
-2.1595356143580595E-4	1.533867765785285E-4
2.309946922155313E-33	-1.1722739705210032E-33
-1.2402701533066377E-7	3.157121673328229E-6
2.0344384007800864E-34	-1.337422869109302E-34
-0.019554698850159587	-7.409120265130763E-6
1.1620202801564558E-21	-1.2708459343526004E-21
-1.736193698393421E-33	1.2898957676527199E-33
-0.035106036368643886	0.004415535082337501
-1.4772252188365284E-5	9.130846797220093E-6
0.0	0.0
-3.2863864938685846E-5	1.8020457448762048E-4
0.0	0.0
-1.8823754200090448E-5	1.6980104147641042E-5
-1.9469301495732845E-7	3.337913896386121E-7
-8.548199035090994E-5	3.0048697939014064E-4
-3.4867045434849544E-5	5.101569420598061E-5
-9.216069361177034E-7	3.815662127252385E-6
-0.001351757464536855	5.276056456799891E-4
-6.176473356524078E-6	5.650299963365727E-5
0.0	0.0
-3.632711819806561E-5	8.509722743711659E-5
-5.1587160802240493E-5	5.206436489759042E-4
-0.0011564807894606573	3.4226086089765795E-4
-6.316982740368225E-4	0.0021179829826768488
-2.594747123221634E-4	2.3816523707163092E-4
-8.971696736651695E-5	3.240973466413484E-4
-6.030084061949165E-6	3.247965381755096E-4
-1.0004081703242685E-5	7.668255200772129E-6
-3.2198406019176763E-21	1.70305223649538E-20
-8.498729086387986E-5	6.451832176934371E-5
0.0	0.0
-1.1215717297336059E-5	2.2414489193873114E-4
-2.8908064780199456E-5	4.871465217437764E-5
-1.4288117655686957E-5	7.740534064088028E-6
-0.001700533055108953	5.777737176905577E-4
-8.48944583160359E-34	2.7042108193635755E-34
-5.6073335924158746E-5	3.2542654132610473E-4
-0.0022010762094461945	0.0011594625722173043
-2.940851333896774E-5	1.3463995691439327E-4
-9.448280702572991E-7	2.301221253163981E-6
-7.478820170088811E-4	0.0012372682987114747
-1.697219822797378E-5	1.0351932480501583E-5
-5.9143386278286924E-5	1.3054698276584371E-4
-2.885055678212731E-5	3.744160404320323E-5
-8.68867707100657E-7	2.1205693383483766E-6
5.262042362316337E-34	2.0497275465556555E-33
0.0	0.0
-0.0510555872028516	0.017018968602105007
-1.6908743971821508E-4	6.076491683238944E-4
-3.9143735951639583E-4	0.0012032586803713105
-8.85729029914216E-35	-6.769605991311074E-34
-3.891419175915072E-5	5.694571759935656E-5
0.0	0.0
0.0	0.0
-5.928303063853678E-22	-1.8479295505540113E-22
-2.3723257956246187E-5	7.488369379378935E-5
-0.0013530041445050827	0.01835569405960447
-5.234578746147816E-5	9.707259739241926E-5
-3.938141904014838E-5	0.001701106333881495
-2.6143630964303553E-4	1.3139624918583263E-5
-1.4130145685026295E-4	6.555280303020123E-4
2.7576222735446488E-21	6.981168679790227E-20
-5.3378865435224464E-5	3.3158645787124876E-4
-2.577543250189746E-4	6.564963471661832E-5
-0.014584517260188608	-5.087146753716563E-4
5.214705671593653E-34	9.29120143596092E-34
-1.0179587628707591E-4	6.14493903946477E-4
-3.57153148633741E-6	1.8259990188663813E-5
-2.5105576822252534E-4	2.4531169863223055E-5
-2.710361104377278E-5	2.9568427378317447E-5
-1.8396861422465312E-5	9.19067545072773E-6
-4.114630461566979E-5	1.0266549361570779E-4
-3.674846886097443E-5	4.001010845843957E-5
-2.7694109583997417E-5	2.643412656833326E-5
-2.0535313190791438E-4	0.02083889544042857
0.0	0.0
-5.444628902451213E-6	3.4181673871799936E-4
-4.8040593924715175E-5	2.8428097101280465E-4
-1.9987228545062253E-4	0.0010009214513195704
-2.5584361705879706E-35	-6.907661258478176E-35
-1.1677504360559847E-5	4.0320277856247064E-4
-4.8857093800942E-22	-4.722557100839129E-21
2.038821381883136E-34	-5.089497846693292E-34
-9.164035320845609E-5	5.95542433182863E-4
-3.8969419680407145E-5	8.84197005984155E-4
-2.370393926011272E-5	4.3151555998947736E-4
-1.3205291257340892E-35	-1.3226027043879912E-34
-1.0619724210174682E-5	5.436495890150779E-4
0.0	0.0
-1.437017693551049E-4	7.303807053628198E-4
-1.3157311625406275E-5	8.406207635474915E-6
-4.490495346206303E-6	1.0218465681211037E-5
-3.080504308208905E-4	4.959803383890699E-4
-0.001218018235046291	7.832213219208101E-4
-5.100896371678715E-6	1.890224507767831E-5
-6.716874316150432E-22	1.8144663120272197E-21
0.0	0.0
-1.699690502275766E-4	6.414451400722069E-4
-0.012224278009979663	0.4149117942422411
-5.813070640253182E-4	3.5374581887258853E-5
-8.63398361476485E-6	2.114626313551747E-6
-5.69987216456412E-4	0.0021788026744276844
-6.285962713940017E-17	-2.061028982214709E-17
-1.4457518183961297E-35	-5.394457892466841E-35
-0.005953561340927143	0.04431031154338073
-5.881692135769864E-6	3.4596064881232676E-4
-3.601650358419979E-4	6.76644429312276E-5
-0.0011554586019491496	3.4235605339648866E-4
0.0	0.0
-1.2276087891104743E-4	2.633921556828203E-4
-4.351913742174221E-7	8.137135541490832E-7
-0.0014343565500601646	7.423135341810199E-4
-1.8206106926983867E-5	1.627256635725906E-5
-1.9580237599913737E-35	-2.0264216846296564E-34
-1.03000579900471E-5	1.929231195412011E-5
-1.2994265967658945E-4	5.096087527290279E-4
-2.9599547933925092E-5	1.0178055150447325E-4
-4.362127961779896E-5	2.572241581810682E-4
-0.0016508181521156366	0.0034864154019055523
-1.8407435922994125E-5	1.6501768421526554E-5
-3.6052208936738296E-4	3.074197239487382E-4
-6.321346670709385E-5	3.778852600622142E-4
-0.0010904947374175376	5.722345023779836E-4
0.0	0.0
0.0	0.0
-3.709651184925164E-20	-2.4975855129471196E-20
-4.477439319502151E-6	2.3452380820020854E-5
0.0	0.0
-1.884131440089603E-7	7.961756653117582E-7
-9.490428087516774E-6	3.991602692366116E-5
-1.8921328210358152E-4	1.0024018119657338E-5
0.0	0.0
-0.0012807763319482208	4.1555851272026117E-4
-1.3520470365293803E-7	5.3747040427107644E-6
-2.881047535342719E-5	5.900106764965454E-5
-4.536592728039774E-5	5.399675908095543E-4
0.0	0.0
-0.0012836172108197368	5.813367877163536E-4
-5.9887339991268006E-5	1.3729058953889595E-4
6.244388722579086E-34	-6.4375851677332995E-34
-2.7283695065706386E-5	2.187435022211288E-5
-1.934849161697291E-34	-3.2266823789854688E-34
-1.5591710046960944E-7	9.449107330093385E-7
-0.0011552305009714843	3.398021119707344E-4
0.0	0.0
-4.8423178484131304E-5	2.8735792610192683E-4
-7.06779478171291E-5	1.047150690501894E-4
0.0	0.0
1.5655750650359123E-23	4.430140783554085E-21
-8.601028973241343E-7	6.324930519898786E-6
-2.6559126571168604E-6	1.277066735968672E-5
-0.016542847536390064	6.815991102980277E-4
-1.8668155949612E-5	5.0530252279614116E-5
-1.3325681068812918E-4	0.0036749881123303344
-6.840680471873114E-5	8.226165853087419E-5
0.0	0.0
-4.146004504746605E-6	3.4362193656120525E-5
1.353568763102133E-36	-1.5110793383899478E-35
-6.48136842592574E-5	2.4279610150489746E-4
-0.00213915697470275	0.0011905426051627241
0.0	0.0
0.0	0.0
-2.614621791535625E-4	5.408159977495022E-4
-6.163687098048766E-6	2.0311870144872403E-6
-2.0538197076020243E-4	6.564019163780688E-4
-4.1285535480719873E-5	0.0011230278536850926
-8.3199019213559E-21	3.320503510016787E-20
0.0	0.0
-1.933983213050145E-6	8.936464531191806E-6
-1.2810560404490099E-36	9.405870525636951E-35
0.0	0.0
0.0	0.0
-0.0011636401254907316	5.801164704524504E-4
-1.8837822111290546E-5	5.452955534909767E-4
-1.8210533563136907E-5	1.7948295342859074E-5
0.0	0.0
-3.0969885290121168E-6	2.276819990002593E-5
-2.472557949428264E-6	9.498345692484969E-6
-3.9598221030539E-4	0.0030986228006140955
-1.541815802268786E-5	1.3552335657584438E-5
1.8501446668803962E-37	9.1123877170739E-37
-1.0830449425966282E-4	2.1408727617684524E-4
-4.3334692139578035E-5	5.307537650593652E-4
-7.999673259488059E-5	1.796906642500734E-4
-1.2771191718260555E-7	4.995072265185022E-6
-4.0554173670492255E-6	9.769070060965987E-5
-9.617650017284533E-9	9.036054439898018E-8
0.0	0.0
0.0	0.0
-0.01389539868774299	-3.0590659569681804E-4
0.0	0.0
-2.1691749586368284E-35	-1.828167689374377E-36
-2.249291416722399E-5	4.8326768425819914E-5
0.0	0.0
3.1702905025857877E-35	4.319707331805459E-35
-1.1334224710140081E-5	3.395271768484171E-4
1.614212632580189E-35	6.193272071424176E-37
0.0	0.0
-2.7428131978955355E-6	5.778845697925144E-5
-1.258608194297945E-4	0.00279696266553531
-2.0564730709231213E-36	-4.941715479675774E-36
-9.113671643354899E-5	2.0271186815356884E-4
4.759594571301243E-22	3.934358609179916E-22
-5.665079288847209E-5	1.7255434649185458E-4
0.0	0.0
-0.9953205301599207	-0.0505360295505455
0.0	0.0
-7.488787599683464E-4	0.020744926618043686
-2.873356139980552E-4	4.14087742792921E-5
-4.4000386064482024E-7	8.251748579316891E-7
-2.1694552563868175E-5	3.211739924358127E-5
-3.607836344510572E-5	3.1331768350975044E-5
-5.744050314105973E-5	2.217895862571703E-4
-1.7741685323557188E-6	1.1127659644396986E-5
-5.1967947148269405E-6	8.699397678022087E-7
0.0	0.0
-0.013644461760402517	-4.320780386180754E-4
0.0	0.0
0.0	0.0
1.074818321416095E-35	4.7228411990360854E-35
0.0	0.0
0.0	0.0
-8.701012435748158E-5	1.811474045430289E-4
4.0215386190583756E-35	7.297418026897578E-35
-0.0021272307352533733	0.003215833234161294
-9.91924595066409E-4	3.263282009694039E-4
-8.138366619405603E-6	4.3810949282259204E-4
-4.3770431878673E-6	1.7190245658664167E-5
-6.304498948204198E-5	9.302294851912481E-5
-9.126907262178877E-5	1.560450478532861E-4
0.0	0.0
0.0	0.0
-1.3943608844734191E-5	6.614053482647557E-5
0.0	0.0
0.0	0.0
0.0	0.0
-2.429957551858247E-5	1.883610238265119E-5
-2.0642164650667198E-8	1.1946197962585112E-7
0.0	0.0
-4.261008311609682E-6	3.275592235021808E-4
-2.677115196005594E-4	9.341580941803778E-4
-1.6849718045617588E-5	5.572958638350616E-5
0.0	0.0
0.0	0.0
-8.618042699377484E-37	-1.153911985372554E-36
-3.1716657022250065E-8	1.8547785470449555E-7
2.627693993192392E-37	4.820384740264207E-37
0.0	0.0
-3.1522473599576495E-5	9.502705231227997E-5
-3.2832144449924723E-34	3.673305783956827E-33
-4.840217924363054E-6	1.7801164520758922E-5
-7.053845324903716E-22	-1.9135560221578816E-21
1.7342572267006125E-38	6.692315438452888E-38
-1.0305386703029223E-8	5.451210981253449E-8
-7.58399846435293E-5	5.290564351341615E-4
-2.594464612359269E-4	8.470840439379196E-5

index.html

<!DOCTYPE html>
<meta charset="utf-8">
<style>

body {
  font: 10px sans-serif;
}

.axis path,
.axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}

.dot {
  stroke: #000;
}

</style>
<body>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script>

var margin = {top: 20, right: 20, bottom: 30, left: 40},
    width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;

var x = d3.scaleLinear()
    .range([0, width]);

var y = d3.scaleLinear()
    .range([height, 0]);

var color = d3.scaleOrdinal(d3.schemeCategory10);

var xAxis = d3.axisBottom(x);

var yAxis = d3.axisLeft(y);

var svg = d3.select("body").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
  .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

d3.tsv("data.tsv", function(error, data) {
  if (error) throw error;

  data.forEach(function(d) {
    d.sepalLength = +d.sepalLength;
    d.sepalWidth = +d.sepalWidth;
  });

  x.domain(d3.extent(data, function(d) { return d.sepalWidth; })).nice();
  y.domain(d3.extent(data, function(d) { return d.sepalLength; })).nice();

  svg.append("g")
      .attr("class", "x axis")
      .attr("transform", "translate(0," + height + ")")
      .call(xAxis)
    .append("text")
      .attr("class", "label")
      .attr("x", width)
      .attr("y", -6)
      .style("text-anchor", "end")
      .text("Sepal Width (cm)");

  svg.append("g")
      .attr("class", "y axis")
      .call(yAxis)
    .append("text")
      .attr("class", "label")
      .attr("transform", "rotate(-90)")
      .attr("y", 6)
      .attr("dy", ".71em")
      .style("text-anchor", "end")
      .text("Sepal Length (cm)")

  svg.selectAll(".dot")
      .data(data)
    .enter().append("circle")
      .attr("class", "dot")
      .attr("r", 3.5)
      .attr("cx", function(d) { return x(d.sepalWidth); })
      .attr("cy", function(d) { return y(d.sepalLength); })
      .style("fill", function(d) { return color(d.species); });

  var legend = svg.selectAll(".legend")
      .data(color.domain())
    .enter().append("g")
      .attr("class", "legend")
      .attr("transform", function(d, i) { return "translate(0," + i * 20 + ")"; });

  legend.append("rect")
      .attr("x", width - 18)
      .attr("width", 18)
      .attr("height", 18)
      .style("fill", color);

  legend.append("text")
      .attr("x", width - 24)
      .attr("y", 9)
      .attr("dy", ".35em")
      .style("text-anchor", "end")
      .text(function(d) { return d; });

});

</script>