style body min height 600px style script type text javascript src https d3js org d3 v7 min js script button onclick toggle Toggle Display button div id vis div script console log bubbleChart created new Constants for sizing var width 800 var height 600 Locations to move bubbles towards depending on which view mode is selected var center x width 2 y height 2 var yearCenters 2008 x width 3 y height 2 2009 x width 2 y height 2 2010 x 2 width 3 y height 2 X locations of the year titles var yearsTitleX 2008 160 2009 width 2 2010 width 160 var forceStrength 0 03 These will be set in create_nodes and create_vis var svg null var bubbles null var nodes function charge d return Math pow d radius 2 0 forceStrength var simulation d3 forceSimulation velocityDecay 0 2 force x d3 forceX strength forceStrength x center x force y d3 forceY strength forceStrength y center y force charge d3 forceManyBody strength charge on tick ticked simulation stop var fillColor d3 scaleOrdinal domain low medium high range d84b2a beccae 7aa25c function createNodes rawData Use the max total_amount in the data as the max in the scale s domain note we have to ensure the total_amount is a number var maxAmount d3 max rawData function d return d total_amount Sizes bubbles based on area var radiusScale d3 scalePow exponent 0 5 range 2 85 domain 0 maxAmount Use map to convert raw data into node data Checkout http learnjsdata com for more on working with data var myNodes rawData map function d return id d id radius radiusScale d total_amount value d total_amount name d grant_title org d organization group d group year d start_year x Math random 900 y Math random 800 sort them to prevent occlusion of smaller nodes myNodes sort function a b return b value a value return myNodes function chart selector rawData console log chart called convert raw data into nodes data nodes createNodes rawData Create a SVG element inside the provided selector with desired size svg d3 select selector append svg attr width width attr height height Bind nodes data to what will become DOM elements to represent them bubbles svg selectAll bubble data nodes function d return d id var bubblesE bubbles enter append circle classed bubble true attr r 0 attr fill function d return fillColor d group attr stroke function d return d3 rgb fillColor d group darker attr stroke width 2 on mouseover showDetail on mouseout hideDetail Merge the original empty selection and the enter selection bubbles bubbles merge bubblesE Fancy transition to make bubbles appear ending with the correct radius bubbles transition duration 2000 attr r function d return d radius Set the simulation s nodes to our newly created nodes array Once we set the nodes the simulation will start running automatically simulation nodes nodes Set initial layout to single group groupBubbles function ticked bubbles attr cx function d return d x attr cy function d return d y function nodeYearPos d return yearCenters d year x function groupBubbles hideYearTitles Reset the x force to draw the bubbles to the center simulation force x d3 forceX strength forceStrength x center x We can reset the alpha value and restart the simulation simulation alpha 1 restart function splitBubbles showYearTitles Reset the x force to draw the bubbles to their year centers simulation force x d3 forceX strength forceStrength x nodeYearPos We can reset the alpha value and restart the simulation simulation alpha 1 restart function hideYearTitles svg selectAll year remove function showYearTitles Another way to do this would be to create the year texts once and then just hide them var yearsData Object keys yearsTitleX var years svg selectAll year data yearsData years enter append text attr class year attr x function d return yearsTitleX d attr y 40 attr text anchor middle text function d return d function showDetail d change outline to indicate hover state d3 select this attr stroke black function hideDetail d reset outline d3 select this attr stroke d3 rgb fillColor d group darker var toggleDisplay function this groupDisplay this groupDisplay if this groupDisplay splitBubbles else groupBubbles var myBubbleChart null async var data await d3 csv https notebook xbdev net var resources moneydata csv myBubbleChart new chart vis data function toggle console log myBubbleChart myBubbleChart toggleDisplay console log ready script
bubblesE bubbles enter append circle classed bubble true attr r 0 attr fill function d return fillColor d group attr stroke function d return d3 rgb fillColor d group darker attr stroke width 2 on mouseover showDetail on mouseout hideDetail Merge the original empty selection and the enter selection bubbles bubbles merge bubblesE Fancy transition to make bubbles appear ending with the correct radius bubbles transition duration 2000 attr r function d return d radius Set the simulation s nodes to our newly created nodes array Once we set the nodes the simulation will start running automatically simulation nodes nodes Set initial layout to single group groupBubbles function ticked bubbles attr cx function d return d x attr cy function d return d y function nodeYearPos d return yearCenters d year x function groupBubbles hideYearTitles Reset the x force to draw the bubbles to the center simulation force x d3 forceX strength forceStrength x center x We can reset the alpha value and restart the simulation simulation alpha 1 restart function splitBubbles showYearTitles Reset the x force to draw the bubbles to their year centers simulation force x d3 forceX strength forceStrength x nodeYearPos We can reset the alpha value and restart the simulation simulation alpha 1 restart function hideYearTitles svg selectAll year remove function showYearTitles Another way to do this would be to create the year texts once and then just hide them var yearsData Object keys yearsTitleX var years svg selectAll year data yearsData years enter append text attr class year attr x function d return yearsTitleX d attr y 40 attr text anchor middle text function d return d function showDetail d change outline to indicate hover state d3 select this attr stroke black function hideDetail d reset outline d3 select this attr stroke d3 rgb fillColor d group darker var toggleDisplay function this groupDisplay this groupDisplay if this groupDisplay splitBubbles else groupBubbles var myBubbleChart null async var data await d3 csv https notebook xbdev net var resources moneydata csv myBubbleChart new chart vis data function toggle console log myBubbleChart myBubbleChart toggleDisplay console log ready script