D3 Example using COVID Data focus on Twitter data Taking small selection of tweets which have the term coronavirus in over a short person of time 8weeks Explore and try to visualize patterns document body style height 100px workaround for async loading var promise await fetch https d3js org d3 v7 min js var d3script await promise text var script document createElement script script type text javascript script innerHTML d3script script async false document body appendChild script grab the data let dataurl https notebook xbdev net var resources twittercovid csv Format Tweet Id Tweet URL Tweet Posted Time UTC Tweet Content Tweet Type Client Retweets Received Likes Received Tweet Location Lat Long Tweet Language User Id Name Screen Name User Bio Verified or Non Verified Profile URL Protected or Non protected User Followers User Following User Account Creation Date 1233417783175778304 https twitter com Giussi92 status 1233417783175778304 28 Feb 2020 15 44 49 Also the entire Swiss Football League is on hold Postponing games from the professional and amateur level coronavirus https t co UShMuqnAVC Tweet Twitter for iPhone 0 0 English 1556856595 Giuseppe Gentile Giussi92 Verified https twitter com Giussi92 Non Protected 3071 100 30 Jun 2013 00 27 50 get the date and tweet content let datain await d3 csv dataurl function d const tdate d Tweet Posted Time UTC const tcontent d Tweet Content const date new Date tdate getTime datain push date date value tcontent console log total tweets datain length Start by grouping tweeks into days how many tweeks for a day document body style height 500px workaround for async loading var promise await fetch https d3js org d3 v7 min js var d3script await promise text var script document createElement script script type text javascript script innerHTML d3script script async false document body appendChild script grab the data let dataurl https notebook xbdev net var resources twittercovid csv get the date and tweet content let datain await d3 csv dataurl function d const tdate d Tweet Posted Time UTC const tcontent d Tweet Content const dt new Date tdate const date dt getFullYear dt getMonth 1 dt getDate if datain date datain date 1 else datain date 1 map data to name value pair let data Object entries datain map d return date d 0 value d 1 console log days data length console log day 0 data 0 value console log day 1 data 1 value console log day 2 data 2 value console log day 20 data 20 value console log data range d3 extent data d d value Simple bar chart const leftmargin 50 const topmargin 50 const width 400 const height 400 var svg d3 select body append svg attr width width attr height height attr transform translate leftmargin topmargin append g Define x axis and y axis let x d3 scaleBand domain data map function d return d date range 0 width padding 0 3 let y d3 scaleLinear domain d3 extent data d d value range height 0 Bars svg selectAll mybar data data enter append rect attr x function d return x d date attr y function d return y d value 50 attr width x bandwidth attr height function d return height y d value attr fill 69b3a2 Draw the axis svg append g attr transform translate 0 height 50 call d3 axisBottom x selectAll text attr transform translate 10 10 rotate 90 style text anchor end style font size 7 style fill 69a3b2 console log ready Plot for the number of tweets about COVID 19 doesn t really work for a linear scale after a couple of weeks the number of tweeks drops Change over to a log scale for the y axis document body style height 500px workaround for async loading var promise await fetch https d3js org d3 v7 min js var d3script await promise text var script document createElement script script type text javascript script innerHTML d3script script async false document body appendChild script grab the data let dataurl https notebook xbdev net var resources twittercovid csv get the date and tweet content let datain await d3 csv dataurl function d const tdate d Tweet Posted Time UTC const tcontent d Tweet Content const dt new Date tdate const date dt getFullYear dt getMonth 1 dt getDate if datain date datain date 1 else datain date 1 map data to name value pair let data Object entries datain map d return date d 0 value d 1 console log days data length console log day 0 data 0 value console log day 1 data 1 value console log day 2 data 2 value console log day 20 data 20 value console log data range d3 extent data d d value Simple bar chart const leftmargin 50 const topmargin 50 const width 400 const height 400 var svg d3 select body append svg attr width width attr height height attr transform translate leftmargin topmargin append g Define x axis and y axis let x d3 scaleBand domain data map function d return d date range 0 width padding 0 3 let y d3 scaleLog domain d3 extent data d d value range height 0 base 10 Bars svg selectAll mybar data data enter append rect attr x function d return x d date 20 attr y function d return y d value 50 attr width x bandwidth attr height function d return height y d value attr fill 69b3a2 Draw bottom axis svg append g attr transform translate 20 height 50 call d3 axisBottom x selectAll text attr transform translate 10 10 rotate 90 style text anchor end style font size 7 style fill 69a3b2 Draw left y axis svg append g attr transform translate 20 0 This controls the vertical position of the Axis call d3 axisLeft y console log ready Organise the Tweet words frequency of the most popular document body style height 500px workaround for async loading var promise await fetch https d3js org d3 v7 min js var d3script await promise text var script document createElement script script type text javascript script innerHTML d3script script async false document body appendChild script grab the data let dataurl https notebook xbdev net var resources twittercovid csv get the date and tweet content let datain await d3 csv dataurl function d const tdate d Tweet Posted Time UTC const tcontent d Tweet Content const dt new Date tdate const date dt getFullYear dt getMonth 1 dt getDate get list of words remove non ascii chars let content tcontent replace a zA Z g make all lower case content content toLowerCase remove extra spaces content content replace split into words let words content split remove words fewer than 3 chars words words filter function d if d d trim length 3 return true return false for let i 0 i words length i const word words i won t include the index word to find tweets if word coronavirus continue if datain word datain word 1 else datain word 1 console log total words Object keys datain length sort the words array into the most popular convert to list let wordlist Object entries datain wordlist wordlist sort a b return b 1 a 1 print top 5 words here for checking for let k 0 k 5 k console log word wordlist k only going to display top 20 words wordlist wordlist splice 0 20 build d3 bar chart set the dimensions and margins of the graph var margin top 20 right 20 bottom 60 left 60 var width 500 margin left margin right var height 500 margin top margin bottom append the svg object to the body of the page 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 Add X axis var x d3 scaleLinear domain d3 extent wordlist d d 1 range 0 width svg append g attr transform translate 0 height call d3 axisBottom x selectAll text attr transform translate 10 0 rotate 45 style text anchor end Y axis var y d3 scaleBand range 0 height domain wordlist map function d return d 0 padding 1 svg append g call d3 axisLeft y Bars svg selectAll myRect data wordlist enter append rect attr x x 0 40 attr y function d return y d 0 attr width function d return x d 1 attr height y bandwidth attr fill 69b3a2 console log ready
atain date datain date 1 else datain date 1 map data to name value pair let data Object entries datain map d return date d 0 value d 1 console log days data length console log day 0 data 0 value console log day 1 data 1 value console log day 2 data 2 value console log day 20 data 20 value console log data range d3 extent data d d value Simple bar chart const leftmargin 50 const topmargin 50 const width 400 const height 400 var svg d3 select body append svg attr width width attr height height attr transform translate leftmargin topmargin append g Define x axis and y axis let x d3 scaleBand domain data map function d return d date range 0 width padding 0 3 let y d3 scaleLog domain d3 extent data d d value range height 0 base 10 Bars svg selectAll mybar data data enter append rect attr x function d return x d date 20 attr y function d return y d value 50 attr width x bandwidth attr height function d return height y d value attr fill 69b3a2 Draw bottom axis svg append g attr transform translate 20 height 50 call d3 axisBottom x selectAll text attr transform translate 10 10 rotate 90 style text anchor end style font size 7 style fill 69a3b2 Draw left y axis svg append g attr transform translate 20 0 This controls the vertical position of the Axis call d3 axisLeft y console log ready Organise the Tweet words frequency of the most popular document body style height 500px workaround for async loading var promise await fetch https d3js org d3 v7 min js var d3script await promise text var script document createElement script script type text javascript script innerHTML d3script script async false document body appendChild script grab the data let dataurl https notebook xbdev net var resources twittercovid csv get the date and tweet content let datain await d3 csv dataurl function d const tdate d Tweet Posted Time UTC const tcontent d Tweet Content const dt new Date tdate const date dt getFullYear dt getMonth 1 dt getDate get list of words remove non ascii chars let content tcontent replace a zA Z g make all lower case content content toLowerCase remove extra spaces content content replace split into words let words content split remove words fewer than 3 chars words words filter function d if d d trim length 3 return true return false for let i 0 i words length i const word words i won t include the index word to find tweets if word coronavirus continue if datain word datain word 1 else datain word 1 console log total words Object keys datain length sort the words array into the most popular convert to list let wordlist Object entries datain wordlist wordlist sort a b return b 1 a 1 print top 5 words here for checking for let k 0 k 5 k console log word wordlist k only going to display top 20 words wordlist wordlist splice 0 20 build d3 bar chart set the dimensions and margins of the graph var margin top 20 right 20 bottom 60 left 60 var width 500 margin left margin right var height 500 margin top margin bottom append the svg object to the body of the page 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 Add X axis var x d3 scaleLinear domain d3 extent wordlist d d 1 range 0 width svg append g attr transform translate 0 height call d3 axisBottom x selectAll text attr transform translate 10 0 rotate 45 style text anchor end Y axis var y d3 scaleBand range 0 height domain wordlist map function d return d 0 padding 1 svg append g call d3 axisLeft y Bars svg selectAll myRect data wordlist enter append rect attr x x 0 40 attr y function d return y d 0 attr width function d return x d 1 attr height y bandwidth attr fill 69b3a2 console log ready