script type text javascript src https d3js org d3 v7 min js script script d3 select body append div style width 100px style height 100px style background color blue transition duration 1000 style background color red console log ready script script type text javascript src https d3js org d3 v7 min js script script d3 select body append div style width 100px style height 100px style background color blue transition duration 1000 style background color red transition duration 2000 style background color yellow console log ready script script type text javascript src https d3js org d3 v7 min js script script d3 select body append div style width 100px style height 100px style background color blue transition duration 1000 style background color red style width 50px style height 50px console log ready script Easing types script type text javascript src https d3js org d3 v7 min js script script d3 select body append div style width 100px style height 100px style background color blue style transform scale 1 0 transition ease d3 easeBounce duration 1000 style background color red style transform scale 0 5 console log ready script script type text javascript src https d3js org d3 v7 min js script script var svg d3 select body append svg attr width 500 attr height 500 var bar1 svg append rect attr fill blue attr x 100 attr y 20 attr height 20 attr width 10 var bar2 svg append rect attr fill blue attr x 120 attr y 20 attr height 20 attr width 10 update function update bar1 transition ease d3 easeLinear duration 2000 attr height 100 bar2 transition ease d3 easeLinear duration 2000 delay 2000 attr height 100 script script let csvdata year value 2011 45 2012 47 2013 52 2014 70 2015 75 2016 78 var blob new Blob csvdata type text plain var csvurl window URL createObjectURL blob script style bar fill steelblue highlight fill orange style script type text javascript src https d3js org d3 v7 min js script svg width 600 height 500 svg script var svg d3 select svg var margin 200 var width svg attr width margin var height svg attr height margin svg append text attr transform translate 100 0 attr x 50 attr y 50 attr font size 24px text Stock Price var x d3 scaleBand range 0 width padding 0 4 var y d3 scaleLinear range height 0 var g svg append g attr transform translate 100 100 d3 csv csvurl then function data x domain data map function d return d year y domain 0 d3 max data function d return d value g append g attr transform translate 0 height call d3 axisBottom x append text attr y height 250 attr x width 100 attr text anchor end attr stroke black text Year g append g call d3 axisLeft y tickFormat function d return d ticks 10 append text attr transform rotate 90 attr y 6 attr dy 5 1em attr text anchor end attr stroke black text Stock Price g selectAll bar data data enter append rect attr class bar on mouseover onMouseOver Add listener for the mouseover event on mouseout onMouseOut Add listener for the mouseout event attr x function d return x d year attr y function d return y d value attr width x bandwidth transition ease d3 easeLinear duration 400 delay function d i return i 50 attr height function d return height y d value mouseover event handler function function onMouseOver d i d3 select this attr class highlight d3 select this transition adds animation duration 400 attr width x bandwidth 5 attr y function d return y d value 10 attr height function d return height y d value 10 g append text attr class val attr x function return x d year attr y function return y d value 15 text function d return i value Value of the text mouseout event handler function function onMouseOut d i use the text label class to remove label on mouseout d3 select this attr class bar d3 select this transition adds animation duration 400 attr width x bandwidth attr y function d return y i value attr height function d return height y i value d3 selectAll val remove console log ready script
attr y 50 attr font size 24px text Stock Price var x d3 scaleBand range 0 width padding 0 4 var y d3 scaleLinear range height 0 var g svg append g attr transform translate 100 100 d3 csv csvurl then function data x domain data map function d return d year y domain 0 d3 max data function d return d value g append g attr transform translate 0 height call d3 axisBottom x append text attr y height 250 attr x width 100 attr text anchor end attr stroke black text Year g append g call d3 axisLeft y tickFormat function d return d ticks 10 append text attr transform rotate 90 attr y 6 attr dy 5 1em attr text anchor end attr stroke black text Stock Price g selectAll bar data data enter append rect attr class bar on mouseover onMouseOver Add listener for the mouseover event on mouseout onMouseOut Add listener for the mouseout event attr x function d return x d year attr y function d return y d value attr width x bandwidth transition ease d3 easeLinear duration 400 delay function d i return i 50 attr height function d return height y d value mouseover event handler function function onMouseOver d i d3 select this attr class highlight d3 select this transition adds animation duration 400 attr width x bandwidth 5 attr y function d return y d value 10 attr height function d return height y d value 10 g append text attr class val attr x function return x d year attr y function return y d value 15 text function d return i value Value of the text mouseout event handler function function onMouseOut d i use the text label class to remove label on mouseout d3 select this attr class bar d3 select this transition adds animation duration 400 attr width x bandwidth attr y function d return y i value attr height function d return height y i value d3 selectAll val remove console log ready script