const defaultApp = new Balls(relativeUnit, data2)

{ id: 1, title: "Paris", color: "royalblue", background: "white", borderColor: "royalblue", }, { id: 2, title: "New York", color: "gray", background: "black", borderColor: "white", }, { id: 3, title: "London", color: "purple", background: "white", borderColor: "purple", }, { id: 4, img: "https://picsum.photos/200", color: "red", background: "black", borderColor: "red", }, { id: 5, img: "https://picsum.photos/200", color: "royalblue", background: "white", borderColor: "royalblue", } width img { id: 2, img: "https://picsum.photos/200", color: "royalblue", background: "white", borderColor: "royalblue", }

const relativeApp = new Balls(relativeUnit, data2, { measurementUnit: { name: "rem" }, dimensions: { cols: 2, }, groupsStyles: [ { color: "royalblue", background: "white", borderColor: "royalblue", }, { color: "white", background: "royalblue", borderColor: "darkblue", }, { color: "#bada55", background: "indigo", borderColor: "indigo", }, { color: "#bada55", background: "indigo", borderColor: "#bada55", }, ], groupParam: { name: "region", }, titlePropertyName: "region", radiusParam: { name: "people", }, forces: { collisionMultiplier: 2.5 //space between }, on: { mouseover() { // do something on mouseover... "this" represent hovered el this.attr("opacity", "0.3") }, mouseout() { // do something on mouseout... "this" represent hovered el // usually it is needed to reverse the effect of "mouseover" this.attr("opacity", "1") }, }, });

{ id: 2, title: "New York", region: "ba", people: 700, }, width img { id: 2, title: "New York", region: "ha", people: 700, img: "https://picsum.photos/200", }