How to create a bubble chart like d3 in iOS

Question

I need to create similar bubble chart as below in my project. I tried using collectionview but I am facing issue with the cell frame. what will be the best way to draw this in iOS?

Answer 1

It is relatively easy to achieve this feature by using wkWebView in swift.

The basic logic is to let wkWebView render d3.js rather than writing collection views in swift.

• Step1. Prepare the source code of d3.js along with index.html file and CSS file. (make sure they work functionally in a normal web browser first.)
• Step2. Put your d3.js, index.html, and CSS file in a folder. make sure the pathname of those files is correct. For example; I have <script src="./colorPicker.js"></script> in my index.html.
• Step3. Download the d3 library which is a file called d3.min.js. (follow this tutorial. https://www.tutorialspoint.com/d3js/d3js_installation.htm) Put d3.min.js file in the folder along with your d3.js, index.html, and CSS file.
• Step4. Move the folder to Xcode (Your iOS project directory).
• Step5. Import WebKit in your controller, initialise a webView, set the URL path of this webView, and add this view as a subview of your controller.

  var webView = WKWebView()  
  webView.frame = CGRect(x: 0, y: 0, width: 100, height: 600)
  let htmlPath = Bundle.main.path(forResource: "./index", ofType: "html")
  let url = URL(fileURLWithPath: htmlPath!)
  let request = URLRequest(url: url)
  webView.load(request)
  self.addSubview(webView)

Here is what I did to hybrid d3.js and Swift in my project. See the short demo video on this link https://www.linkedin.com/in/michaellinliu/detail/recent-activity/shares/

Answer 2

If you plan to do this in Swift, I would suggest either using SpriteKit or learning about SwiftUI drawing.

SpriteKit is a 2D framework by Apple that was originally created with 2D sprite-based gaming in mind. But it is also well-suited for making complex drawings and animations. The advantage in going this route is that SpriteKit has physics built-in and that could reveal handy if you planned to animate the bubbles.

SwiftUI is Apple's new UI framework. It's a tool to create user interfaces. But it's also very efficient and powerful. If it is at all possible to create such a layout in SwiftUI, it would be a nice option. See this WWDC session to learn more about drawing in SwiftUI.