Old school D3 from simpler times

All examples By author By category About

romsson

Full window Github gist

scatterplot (100% svg)

Built with blockbuilder.org

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
  </style>
</head>

<svg width="960" height="200"><circle r="2" cx="206.5678335284007" cy="136.55483939672794" style="stroke: black; fill: none;"></circle><circle r="2" cx="609.3858221271553" cy="150" style="stroke: black; fill: none;"></circle><circle r="2" cx="129.59872854687129" cy="120.46399756873177" style="stroke: black; fill: none;"></circle><circle r="2" cx="430.4362351750081" cy="117.92590273821237" style="stroke: black; fill: none;"></circle><circle r="2" cx="576.3275822179603" cy="143.35871984330478" style="stroke: black; fill: none;"></circle><circle r="2" cx="141.49451331032614" cy="127.93237270146311" style="stroke: black; fill: none;"></circle><circle r="2" cx="672.4940205645187" cy="122.25309343684003" style="stroke: black; fill: none;"></circle><circle r="2" cx="249.60578240976815" cy="128.65591663941746" style="stroke: black; fill: none;"></circle><circle r="2" cx="536.7267249559648" cy="123.19399698559737" style="stroke: black; fill: none;"></circle><circle r="2" cx="547.846763914987" cy="144.2103247876526" style="stroke: black; fill: none;"></circle><circle r="2" cx="398.1792182741534" cy="114.26072296981827" style="stroke: black; fill: none;"></circle><circle r="2" cx="286.54230742170216" cy="144.57135660168137" style="stroke: black; fill: none;"></circle><circle r="2" cx="182.8376693309043" cy="136.84109770173237" style="stroke: black; fill: none;"></circle><circle r="2" cx="243.82642389113948" cy="119.32084055452637" style="stroke: black; fill: none;"></circle><circle r="2" cx="612.6206554789447" cy="106.34448159319122" style="stroke: black; fill: none;"></circle><circle r="2" cx="215.86468168188264" cy="106.5832371040559" style="stroke: black; fill: none;"></circle><circle r="2" cx="545.9631139808121" cy="137.72260661074995" style="stroke: black; fill: none;"></circle><circle r="2" cx="161.07160931117537" cy="125.86709057676609" style="stroke: black; fill: none;"></circle><circle r="2" cx="539.9492175505113" cy="140.72459102798445" style="stroke: black; fill: none;"></circle><circle r="2" cx="530.495914212456" cy="147.94273079133768" style="stroke: black; fill: none;"></circle><circle r="2" cx="431.07370796632614" cy="136.88040693580308" style="stroke: black; fill: none;"></circle><circle r="2" cx="257.07943795813924" cy="119.19122033670499" style="stroke: black; fill: none;"></circle><circle r="2" cx="265.6559459915476" cy="101.06011432786055" style="stroke: black; fill: none;"></circle><circle r="2" cx="154.98510107672732" cy="110.59055165968233" style="stroke: black; fill: none;"></circle><circle r="2" cx="700" cy="124.23824687418109" style="stroke: black; fill: none;"></circle><circle r="2" cx="447.23386293661076" cy="103.57383508289631" style="stroke: black; fill: none;"></circle><circle r="2" cx="654.8634515531495" cy="127.75923331565978" style="stroke: black; fill: none;"></circle><circle r="2" cx="229.85604944167156" cy="118.26499620899409" style="stroke: black; fill: none;"></circle><circle r="2" cx="140.48746265465726" cy="135.26326244751291" style="stroke: black; fill: none;"></circle><circle r="2" cx="581.181623273915" cy="122.72055658942256" style="stroke: black; fill: none;"></circle><circle r="2" cx="180.98034846276636" cy="100" style="stroke: black; fill: none;"></circle><circle r="2" cx="301.5403222366086" cy="123.04954959015028" style="stroke: black; fill: none;"></circle><circle r="2" cx="692.5290030665453" cy="120.69638923953895" style="stroke: black; fill: none;"></circle><circle r="2" cx="272.4725197081991" cy="128.16031989175357" style="stroke: black; fill: none;"></circle><circle r="2" cx="556.8079444731648" cy="138.11848704638876" style="stroke: black; fill: none;"></circle><circle r="2" cx="571.9391492490458" cy="110.24876193813894" style="stroke: black; fill: none;"></circle><circle r="2" cx="330.20770012576776" cy="109.3538353343141" style="stroke: black; fill: none;"></circle><circle r="2" cx="118.65565661809934" cy="125.95740078178" style="stroke: black; fill: none;"></circle><circle r="2" cx="398.687147995949" cy="142.11959486482192" style="stroke: black; fill: none;"></circle><circle r="2" cx="696.8237910361232" cy="140.36897211576814" style="stroke: black; fill: none;"></circle><circle r="2" cx="520.7828603722417" cy="144.7055904030939" style="stroke: black; fill: none;"></circle><circle r="2" cx="669.5848598636886" cy="102.44578863632155" style="stroke: black; fill: none;"></circle><circle r="2" cx="374.0022030471266" cy="132.4012434532672" style="stroke: black; fill: none;"></circle><circle r="2" cx="660.6730598541855" cy="130.37732361944126" style="stroke: black; fill: none;"></circle><circle r="2" cx="297.1948357328031" cy="140.15954791450184" style="stroke: black; fill: none;"></circle><circle r="2" cx="654.779920408205" cy="107.491277600494" style="stroke: black; fill: none;"></circle><circle r="2" cx="586.8340848494262" cy="134.62572017646025" style="stroke: black; fill: none;"></circle><circle r="2" cx="204.7352129424246" cy="119.65909693561102" style="stroke: black; fill: none;"></circle><circle r="2" cx="174.51464174177448" cy="108.17954653506862" style="stroke: black; fill: none;"></circle><circle r="2" cx="379.85725295203736" cy="123.30971825159483" style="stroke: black; fill: none;"></circle><circle r="2" cx="176.53762017172636" cy="111.08072220426482" style="stroke: black; fill: none;"></circle><circle r="2" cx="452.5370846279162" cy="143.61014314592444" style="stroke: black; fill: none;"></circle><circle r="2" cx="539.179294235061" cy="149.19814919848537" style="stroke: black; fill: none;"></circle><circle r="2" cx="224.98834414464318" cy="144.87871584408023" style="stroke: black; fill: none;"></circle><circle r="2" cx="294.77910273352404" cy="112.63577574919877" style="stroke: black; fill: none;"></circle><circle r="2" cx="153.76425490836323" cy="144.66136040339975" style="stroke: black; fill: none;"></circle><circle r="2" cx="123.86911170514935" cy="119.52561888022099" style="stroke: black; fill: none;"></circle><circle r="2" cx="194.61807951697375" cy="115.91107980934362" style="stroke: black; fill: none;"></circle><circle r="2" cx="465.31133698014764" cy="112.88565455396622" style="stroke: black; fill: none;"></circle><circle r="2" cx="572.2314931313082" cy="104.1415689168835" style="stroke: black; fill: none;"></circle><circle r="2" cx="643.8295160989281" cy="127.70194672349656" style="stroke: black; fill: none;"></circle><circle r="2" cx="499.6783004900263" cy="107.35660551359886" style="stroke: black; fill: none;"></circle><circle r="2" cx="679.3776604848075" cy="101.59160092801949" style="stroke: black; fill: none;"></circle><circle r="2" cx="585.8947126346982" cy="106.8012830467316" style="stroke: black; fill: none;"></circle><circle r="2" cx="537.1332642829129" cy="114.36248411666082" style="stroke: black; fill: none;"></circle><circle r="2" cx="229.55337000065956" cy="120.12479801259096" style="stroke: black; fill: none;"></circle><circle r="2" cx="663.5194422671598" cy="133.29180798996157" style="stroke: black; fill: none;"></circle><circle r="2" cx="482.9606312687947" cy="101.41726292962299" style="stroke: black; fill: none;"></circle><circle r="2" cx="296.6835272831404" cy="115.2201480083808" style="stroke: black; fill: none;"></circle><circle r="2" cx="286.5959314379404" cy="108.34385129079273" style="stroke: black; fill: none;"></circle><circle r="2" cx="474.28801509088004" cy="105.29653499226909" style="stroke: black; fill: none;"></circle><circle r="2" cx="532.2796770126452" cy="141.9014896852862" style="stroke: black; fill: none;"></circle><circle r="2" cx="100" cy="105.28202089134948" style="stroke: black; fill: none;"></circle><circle r="2" cx="601.1910515042043" cy="128.19343524708805" style="stroke: black; fill: none;"></circle><circle r="2" cx="321.51626237966195" cy="149.53336210253616" style="stroke: black; fill: none;"></circle><circle r="2" cx="153.27567659216743" cy="113.58108422861051" style="stroke: black; fill: none;"></circle><circle r="2" cx="507.81105833931133" cy="124.48660733161006" style="stroke: black; fill: none;"></circle><circle r="2" cx="296.9077286080634" cy="107.33847014268841" style="stroke: black; fill: none;"></circle><circle r="2" cx="630.4719287267218" cy="146.00254117484155" style="stroke: black; fill: none;"></circle><circle r="2" cx="416.3134187962976" cy="142.64360854485034" style="stroke: black; fill: none;"></circle><circle r="2" cx="341.42439116812903" cy="139.71612850147505" style="stroke: black; fill: none;"></circle><circle r="2" cx="321.27990573580917" cy="141.61303489738037" style="stroke: black; fill: none;"></circle><circle r="2" cx="500.4277875460597" cy="121.03835863970296" style="stroke: black; fill: none;"></circle><circle r="2" cx="524.3880591001399" cy="148.71112401711076" style="stroke: black; fill: none;"></circle><circle r="2" cx="368.1860555790407" cy="100.00347269323206" style="stroke: black; fill: none;"></circle><circle r="2" cx="531.8564227249813" cy="115.10494889091363" style="stroke: black; fill: none;"></circle><circle r="2" cx="588.4527352514735" cy="144.13135057333398" style="stroke: black; fill: none;"></circle><circle r="2" cx="698.4784987204987" cy="130.1496058171261" style="stroke: black; fill: none;"></circle><circle r="2" cx="586.0846955591892" cy="126.92667233603152" style="stroke: black; fill: none;"></circle><circle r="2" cx="571.30029908712" cy="126.79373291382791" style="stroke: black; fill: none;"></circle><circle r="2" cx="670.2530134273135" cy="108.57980536502922" style="stroke: black; fill: none;"></circle><circle r="2" cx="470.51851835630674" cy="125.9863822773142" style="stroke: black; fill: none;"></circle><circle r="2" cx="638.0498323121232" cy="121.57940916941143" style="stroke: black; fill: none;"></circle><circle r="2" cx="392.3265713582686" cy="119.0200067879882" style="stroke: black; fill: none;"></circle><circle r="2" cx="491.1862219566505" cy="102.910035516777" style="stroke: black; fill: none;"></circle><circle r="2" cx="528.3454932126602" cy="103.40005754847687" style="stroke: black; fill: none;"></circle><circle r="2" cx="460.6965551822887" cy="114.92270139745182" style="stroke: black; fill: none;"></circle><circle r="2" cx="296.7343316062663" cy="110.79107856994354" style="stroke: black; fill: none;"></circle><circle r="2" cx="463.868650630763" cy="148.05591859758772" style="stroke: black; fill: none;"></circle><circle r="2" cx="376.2942220272609" cy="148.80122095429397" style="stroke: black; fill: none;"></circle></svg>
</body>

https://d3js.org/d3.v4.min.js