By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
429,480 Members | 771 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 429,480 IT Pros & Developers. It's quick & easy.

I am trying to create a bubble chart.

P: 1
I am trying to create a bubble chart.

My data is like:

Expand|Select|Wrap|Line Numbers
  1. meds = 
  2.     [
  3.      {"cause": "abc", "medicines": ["def"], "prescription": "234"},
  4.      {"cause": "dec", "medicines": ["def"], "prescription": "234"}
  5.     ]
  6.  
And I am trying to visualize medicines which is an array within the array of "meds" on the base of prescription. I think the problem is that I am not able to assign data properly in the code which is medicines and prescription in this case due to which is doesn't show anything at all. My code is like:

Expand|Select|Wrap|Line Numbers
  1. renderChart() {
  2.  
  3. this.get_meds().subscribe((medicines) => { 
  4. this.meds = medicines;
  5. let height = 400;
  6. let width = 600;
  7. let color = d3.scaleOrdinal(d3.schemeCategory10);
  8.  
  9. let bubble = d3.pack()
  10.   .size([width, height])
  11.   .padding(1.5);
  12.  
  13. let svg = d3.select('#chart')
  14.   .append("svg")
  15.   .attr("width", width)
  16.   .attr("height", height)
  17.   .attr("class", "bubble");
  18.  
  19. let nodes = d3.hierarchy(this.meds)
  20.   .sum(function (d: any) {
  21.     return d.prescription;
  22.   });
  23.  
  24. let node = svg.selectAll(".node")
  25.   .data(bubble(nodes).descendants())
  26.   .enter()
  27.   .filter(function (d) {
  28.     return !d.children
  29.   })
  30.   .append("g")
  31.   .attr("class", "node")
  32.   .attr("transform", function (d) {
  33.     return "translate(" + d.x + "," + d.y + ")";
  34.   }).style("fill", function (d, i: any) {
  35.     return color(i);
  36.   });
  37.  
  38. node.append("title")
  39.   .text(function (d: any) {
  40.     return d.medicines + ": " + d.prescription;
  41.   });
  42.  
  43. node.append("circle")
  44.   .attr("x", function (d) { return d.x; })
  45.   .attr("y", function (d) { return d.y })
  46.   .attr("r", function (d) {
  47.     return d.r;
  48.   })
  49.   .style("fill", function (d, i: any) {
  50.     return color(i);
  51.   });
  52.  
  53. node.append("text")
  54.   .attr("dy", ".2em")
  55.   .style("text-anchor", "middle")
  56.   .text(function (d: any) {
  57.     return d.data.medicines.substring(0, d.r / 3);
  58.   })
  59.   .attr("font-family", "sans-serif")
  60.   .attr("font-size", function (d) {
  61.     return d.r / 5;
  62.   })
  63.   .attr("fill", "white");
  64.  
  65. node.append('text')
  66.   .attr("dy", "1.3em")
  67.   .style("text-anchor", "middle")
  68.   .text(function (d: any) {
  69.     return d.data.prescription;
  70.   })
  71.   .attr("font-family", "Gill Sans")
  72.   .attr("font-size", function (d) {
  73.     return d.r / 5;
  74.   })
  75.   .attr("fill", "white");
  76.  
  77.   }
  78. )
  79. }
  80.  
Apr 24 '19 #1
Share this Question
Share on Google+
1 Reply


gits
Expert Mod 5K+
P: 5,298
well - with the code you showed so far its nearly impossible to tell whats going on. obviously you operating on some objects that provide some functions like this.get_meds() which provides an object that itself obviously provides a subscribe method for example and so on - and its not clear what exactly is returned or passed around from where to what.

Besides that a construct like:

Expand|Select|Wrap|Line Numbers
  1. function (d: any) {
will produce a syntax error since that is invalid javascript syntax - unless you have some transpile or build step somewhere that can't be seen so far.

PS: test it in the browser while you have the browsers developer console open so you can see what javascript errors are thrown. this will most likely help you to eliminate all those first.
Apr 24 '19 #2

Post your reply

Sign in to post your reply or Sign up for a free account.