style body min height 650px margin 0 year font 500 100px Helvetica Neue fill ddd label font size 50 style script type text javascript src https d3js org d3 v7 min js script script type text javascript src https notebook xbdev net var scripts militaryspending js script var msdata_column_names captions from From image Image text Caption to To data image Image URL label Country Name values 1992 1993 1994 1995 1996 1997 1998 1999 2000 2001 2002 2003 2004 2005 2006 2007 2008 2009 2010 2011 2012 2013 2014 2015 2016 2017 2018 2019 2020 var msdata captions data image https notebook xbdev net var images countries us svg label US values 592 561 531 496 469 467 456 458 475 479 538 612 667 698 708 727 780 841 865 855 808 745 700 684 682 675 695 734 767 image https notebook xbdev net var images countries gb svg label UK values 58 55 53 50 50 48 48 48 49 51 54 57 58 59 59 61 63 64 63 61 59 57 56 h3 Countries Spending on Weapons in US Dollars Billions h3 script Set Dimensions const width 600 const height 600 const margin 60 const xMax width margin 2 const yMax height margin 2 Append SVG Object to the Page const svg d3 select body append svg attr width width attr height height append g attr transform translate margin margin convert data to numbers let years msdata_column_names data values map d return parseInt d let data for let i 0 i msdata data length i data push image msdata data i image label msdata data i label values msdata data i values map d return parseInt d console log years years get limits of the data const xExtent d3 extent years const yExtent for let i 0 i data length i yExtent 0 d3 min data i values concat yExtent 0 yExtent 1 d3 max data i values concat yExtent 1 console log years xExtent 0 xExtent 1 console log data yExtent 0 yExtent 1 Add the year label the value is set on transition var label svg append text attr class year attr text anchor end attr y height 330 attr x width 75 text 1992 X Axis const x d3 scaleLinear domain xExtent 0 xExtent 1 range 0 xMax bottom year axis svg append g attr transform translate 0 yMax 20 call d3 axisBottom x tickFormat d3 format 0f attr color green make bottom axis green svg append g append circle attr class dot attr cx function d return x 2000 attr cy function d return yMax 20 attr r 5 style fill red const xb d3 scaleLinear domain yExtent 0 yExtent 1 range 0 xMax var yb d3 scaleBand padding 0 1 range yMax 0 domain data map function d return d label svg append g attr class foo left y axis to show bar names svg append g attr class foo call d3 axisLeft yb tickSize 0 no tick marks function displayYear yearindex console log yearindex yearindex yearindex Math round yearindex label text years yearindex let bdata for let i 0 i data length i bdata push image data i image label data i label value data i values yearindex bdata bdata sort x y return y value x value bdata bdata splice 0 6 var yb d3 scaleBand padding 0 1 range yMax 0 domain bdata map function d return d label left y axis to show bar names svg selectAll foo transition duration 1000 call d3 axisLeft yb tickSize 0 no tick marks svg selectAll dot data years yearindex join enter update update transition duration 1000 attr cx function d return x d attr cy function d return yMax 20 exit svg selectAll bar data bdata join function enter enter append rect attr class bar style fill 9999cc attr y function d return yb d label attr height yb bandwidth 2 attr x 2 attr width function d return xb d value function update update transition duration 1000 attr class bar style fill 2299cc attr y function d return yb d label attr height yb bandwidth 2 attr x 2 attr width function d return xb d value function exit exit style fill 00ffff remove flags svg selectAll flag data bdata join enter enter append svg image attr class flag attr xlink href function d return d image attr width 70 attr height 70 attr y function d return yb d label yb bandwidth 80 attr x function d return xb d value 5 update update transition duration 1000 attr xlink href function d return d image attr width 60 attr height 60 attr y function d return yb d label yb bandwidth 30 attr x function d return xb d value 5 exit exit remove text svg selectAll bb data bdata join enter enter append text attr class bb update update attr class bb exit exit remove svg selectAll bb data bdata each function d console log d3 select this console log d3 select this node nodeName d3 select this d3 select this transition duration 1000 attr class bb attr y function d return yb d label yb bandwidth yb bandwidth 2 4 x position is 3 pixels to the right of the bar attr x function d return xb d value 5 tween textTween function d var i d3 interpolate this textContent d value return function t t is the percent completion of the transition this textContent Math round i t text function d return d value displayYear 0 setTimeout displayYear 10 1000 setTimeout displayYear 20 2000 function graphAnimation i displayYear i if i years length 1 setTimeout function graphAnimation i 1 1000 graphAnimation 0 console log ready script
bdata bdata splice 0 6 var yb d3 scaleBand padding 0 1 range yMax 0 domain bdata map function d return d label left y axis to show bar names svg selectAll foo transition duration 1000 call d3 axisLeft yb tickSize 0 no tick marks svg selectAll dot data years yearindex join enter update update transition duration 1000 attr cx function d return x d attr cy function d return yMax 20 exit svg selectAll bar data bdata join function enter enter append rect attr class bar style fill 9999cc attr y function d return yb d label attr height yb bandwidth 2 attr x 2 attr width function d return xb d value function update update transition duration 1000 attr class bar style fill 2299cc attr y function d return yb d label attr height yb bandwidth 2 attr x 2 attr width function d return xb d value function exit exit style fill 00ffff remove flags svg selectAll flag data bdata join enter enter append svg image attr class flag attr xlink href function d return d image attr width 70 attr height 70 attr y function d return yb d label yb bandwidth 80 attr x function d return xb d value 5 update update transition duration 1000 attr xlink href function d return d image attr width 60 attr height 60 attr y function d return yb d label yb bandwidth 30 attr x function d return xb d value 5 exit exit remove text svg selectAll bb data bdata join enter enter append text attr class bb update update attr class bb exit exit remove svg selectAll bb data bdata each function d console log d3 select this console log d3 select this node nodeName d3 select this d3 select this transition duration 1000 attr class bb attr y function d return yb d label yb bandwidth yb bandwidth 2 4 x position is 3 pixels to the right of the bar attr x function d return xb d value 5 tween textTween function d var i d3 interpolate this textContent d value return function t t is the percent completion of the transition this textContent Math round i t text function d return d value displayYear 0 setTimeout displayYear 10 1000 setTimeout displayYear 20 2000 function graphAnimation i displayYear i if i years length 1 setTimeout function graphAnimation i 1 1000 graphAnimation 0 console log ready script