D3 Example using COVID Data Creates bubble chart using forces size each bubble is based on the total cases for the duration Further ideas Create a simplified bubble version just for the 4 main counties Create 4 seperate force groups each county England Wales Scotland Change color scheme Blue Yellow Red based on the number of cases Transition effect animate size of each bubble reflects changes over time as the total cases increases Add drag options pull bubbles around just for interactive Advanced ideas Each bubble is also a pie chart donut with extra information inside or around its edge Click on a bubble and it highlights the neighbouring bubbles based on geospacial data information document body style height 700px 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 raw githubusercontent com tomwhite covid 19 uk data master data covid 19 cases uk csv Format Date Country AreaCode Area TotalCases 2020 01 30 England E06000014 York 1 2020 02 03 England E10000002 Buckinghamshire 1 total cases in each county over the full time let datain await d3 csv dataurl function d const area d Area let totalcases parseInt d TotalCases if d TotalCases NaN totalcases 100 const date d Date new Date d Date getTime if area in datain datain area totalcases else datain area totalcases put data in to a formate g name York value 200 var data for var key in datain data push name key value datain key setup d3 bubble chart details const width 800 const height 600 location to centre the bubbles const centre x width 2 y height 2 strength to apply to the position forces const forceStrength 0 03 these will be set in createNodes and chart functions let svg null let bubbles null let labels null let nodes charge is dependent on size of the bubble so bigger towards the middle function charge d return Math pow d radius 2 0 0 03 create a force simulation and add forces to it const simulation d3 forceSimulation force charge d3 forceManyBody strength charge force center d3 forceCenter centre x centre y force x d3 forceX strength forceStrength x centre x force y d3 forceY strength forceStrength y centre y force collision d3 forceCollide radius d d radius 1 0 force simulation starts up automatically which we don t want as there aren t any nodes yet simulation stop generate range of colors based on the data var fillColour d3 scaleOrdinal domain data range d3 schemeSet3 data manipulation function takes raw data from csv and converts it into an array of node objects each node will store data and visualisation values to draw a bubble rawData is expected to be an array of data objects read in d3 csv function returns the new node array with a node for each element in the rawData input function createNodes rawData use max size in the data as the max in the scale s domain note we have to ensure that size is a number const maxSize d3 max rawData d d value size bubbles based on area const radiusScale d3 scaleSqrt domain 0 maxSize range 0 80 use map to convert raw data into node data const myNodes rawData map d d id d name radius radiusScale d value 0 3 size d value 0 3 scale data x Math random 900 y Math random 800 return myNodes entry point to bubble chart convert raw data into nodes data nodes createNodes data create svg element inside provided selector svg d3 select body append svg attr width width attr height height bind nodes data to circle elements const elements svg selectAll bubble data nodes enter append g bubbles elements append circle classed bubble true attr r d d radius attr fill d fillColour d value labels labels elements append text attr dy 3em style text anchor middle attr font size function d return d radius 5 text d d id add tooltip mouse hover over information elements append svg title text d return Total cases in d id d value set simulation s nodes to our newly created nodes array simulation starts running automatically once nodes are set simulation nodes nodes on tick ticked restart callback function called after every tick of the force simulation here we do the actual repositioning of the circles based on current x and y value of their bound node data x and y values are modified by the force simulation function ticked bubbles attr cx d d x attr cy d d y labels attr x d d x attr y d d y console log ready
d d radius 1 0 force simulation starts up automatically which we don t want as there aren t any nodes yet simulation stop generate range of colors based on the data var fillColour d3 scaleOrdinal domain data range d3 schemeSet3 data manipulation function takes raw data from csv and converts it into an array of node objects each node will store data and visualisation values to draw a bubble rawData is expected to be an array of data objects read in d3 csv function returns the new node array with a node for each element in the rawData input function createNodes rawData use max size in the data as the max in the scale s domain note we have to ensure that size is a number const maxSize d3 max rawData d d value size bubbles based on area const radiusScale d3 scaleSqrt domain 0 maxSize range 0 80 use map to convert raw data into node data const myNodes rawData map d d id d name radius radiusScale d value 0 3 size d value 0 3 scale data x Math random 900 y Math random 800 return myNodes entry point to bubble chart convert raw data into nodes data nodes createNodes data create svg element inside provided selector svg d3 select body append svg attr width width attr height height bind nodes data to circle elements const elements svg selectAll bubble data nodes enter append g bubbles elements append circle classed bubble true attr r d d radius attr fill d fillColour d value labels labels elements append text attr dy 3em style text anchor middle attr font size function d return d radius 5 text d d id add tooltip mouse hover over information elements append svg title text d return Total cases in d id d value set simulation s nodes to our newly created nodes array simulation starts running automatically once nodes are set simulation nodes nodes on tick ticked restart callback function called after every tick of the force simulation here we do the actual repositioning of the circles based on current x and y value of their bound node data x and y values are modified by the force simulation function ticked bubbles attr cx d d x attr cy d d y labels attr x d d x attr y d d y console log ready