D3 create visual illustration of registrars over time animates or lets user scroll see changes style body height 600px chart margin left 40px height 506px text font 10px sans serif dot stroke 000 axis path axis line fill none stroke 000 shape rendering crispEdges label fill 777 year label font 500 100px Helvetica Neue fill ddd year label active fill aaa overlay fill none pointer events all cursor ew resize style h1 Domains Server Names h1 p id chart p script src https cdnjs cloudflare com ajax libs d3 7 2 0 d3 min js script script Various accessors that specify the four dimensions of data to visualize function x d return d domain function y d return d nameserver function radius d return d domain function color d return d name function key d return d name var duration Jan 11 Feb 11 Mar 11 Apr 11 May 11 Jun 11 Jul 11 Aug 11 Sep 11 Oct 11 Nov 11 Dec 11 Jan 12 Feb 12 Mar 12 Apr 12 May 12 Jun 12 Jul 12 Aug 12 Sep 12 Oct 12 Nov 12 Dec 12 Jan 13 Feb 13 Mar 13 Chart dimensions var margin top 19 5 right 19 5 bottom 42 5 left 70 var width 660 margin right var height 500 margin top margin bottom Various scales These domains make assumptions of data naturally var xScale d3 scaleSqrt domain 9000 3544560 range 0 width var yScale d3 scaleLinear domain 0 130167 range height 0 var radiusScale d3 scaleSqrt domain 0 33850381 range 0 100 var colorScale d3 scaleOrdinal d3 schemeCategory10 The x y axes var xAxis d3 svg axis orient bottom scale xScale ticks 12 d3 format d var yAxis d3 svg axis scale yScale orient left var xAxis d3 axisBottom xScale tickFormat function d return d x var yAxis d3 axisLeft yScale Create the SVG container and set the origin var svg d3 select chart 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 Add the x axis svg append g attr class x axis attr transform translate 0 height call xAxis Add the y axis svg append g attr class y axis call yAxis Add an x axis label svg append text attr class x label attr text anchor end attr x width attr y 478 text no of domains style font size 26px Add a y axis label svg append text attr class y label attr text anchor end attr y 70 attr dy 75em attr transform rotate 90 text name servers style font size 26px Add the year label the value is set on transition var label svg append text attr class year label attr text anchor end attr y height 35 attr x width text Jan 11 async let promise await fetch https notebook xbdev net var scripts registrar json let nations await promise json A bisector since many nation s data is sparsely defined var bisect d3 bisector function d return d 0 Add a dot per nation Initialize the data at 1800 and set the colors var dot svg append g attr class dots selectAll dot data interpolateData 1 enter append circle attr class dot style fill function d return colorScale color d call position sort order Add a title dot append title text function d return d name Add an overlay for the year label var box label node getBBox var overlay svg append rect attr class overlay attr x box x attr y box y attr width box width attr height box height on mouseover enableInteraction Start a transition that interpolates the data based on year svg transition duration 30000 ease d3 easeLinear tween year tweenYear on end enableInteraction Positions the dots based on data function position dot dot attr cx function d return xScale x d attr cy function d return yScale y d attr r function d return Math abs radiusScale radius d Defines a sort order so that the smallest dots are drawn on top function order a b return radius b radius a After the transition finishes you can mouseover to change the year function enableInteraction var yearScale d3 scaleLinear domain 1 27 range box x 10 box x box width 10 clamp true Cancel the current transition if any svg transition duration 0 overlay on mouseover mouseover on mouseout mouseout on mousemove mousemove on touchmove mousemove function mouseover label classed active true function mouseout label classed active false function mousemove e displayYear yearScale invert d3 mouse this 0 let mp d3 pointer e displayYear yearScale invert mp 0 Tweens the entire chart by first tweening the year and then the data For the interpolated data the dots and label are redrawn function tweenYear var year d3 interpolateNumber 1 27 return function t displayYear year t Updates the display to show the specified year function displayYear year dot data interpolateData year key call position sort order label text duration Math round year 1 Interpolates the dataset for the given fractional year function interpolateData year return nations map function d return name d name domain interpolateValues d domains year nameserver interpolateValues d nameservers year Finds and possibly interpolates the value for the specified year function interpolateValues values year var i bisect left values year 0 values length 1 a values i if i 0 var b values i 1 t year a 0 b 0 a 0 return a 1 1 t b 1 t return a 1 async script
nation s data is sparsely defined var bisect d3 bisector function d return d 0 Add a dot per nation Initialize the data at 1800 and set the colors var dot svg append g attr class dots selectAll dot data interpolateData 1 enter append circle attr class dot style fill function d return colorScale color d call position sort order Add a title dot append title text function d return d name Add an overlay for the year label var box label node getBBox var overlay svg append rect attr class overlay attr x box x attr y box y attr width box width attr height box height on mouseover enableInteraction Start a transition that interpolates the data based on year svg transition duration 30000 ease d3 easeLinear tween year tweenYear on end enableInteraction Positions the dots based on data function position dot dot attr cx function d return xScale x d attr cy function d return yScale y d attr r function d return Math abs radiusScale radius d Defines a sort order so that the smallest dots are drawn on top function order a b return radius b radius a After the transition finishes you can mouseover to change the year function enableInteraction var yearScale d3 scaleLinear domain 1 27 range box x 10 box x box width 10 clamp true Cancel the current transition if any svg transition duration 0 overlay on mouseover mouseover on mouseout mouseout on mousemove mousemove on touchmove mousemove function mouseover label classed active true function mouseout label classed active false function mousemove e displayYear yearScale invert d3 mouse this 0 let mp d3 pointer e displayYear yearScale invert mp 0 Tweens the entire chart by first tweening the year and then the data For the interpolated data the dots and label are redrawn function tweenYear var year d3 interpolateNumber 1 27 return function t displayYear year t Updates the display to show the specified year function displayYear year dot data interpolateData year key call position sort order label text duration Math round year 1 Interpolates the dataset for the given fractional year function interpolateData year return nations map function d return name d name domain interpolateValues d domains year nameserver interpolateValues d nameservers year Finds and possibly interpolates the value for the specified year function interpolateValues values year var i bisect left values year 0 values length 1 a values i if i 0 var b values i 1 t year a 0 b 0 a 0 return a 1 1 t b 1 t return a 1 async script