dc.js Bubble Chart, plotting bubbles along the x-axis timeline

2
votes

I am building a bubble chart in dc.js but am having problems with plotting along the X-axis.

The link to the graphs is: http://junklogic.com/dcjs/creatures/creatures.html

The design of this chart is as follows, using a dataset of "Mythical Creature Sightings" for fun.

Each line of JSON is like this: 

{
  "creature_name": "Dragon",
  "seenby": "Ann",
  "date": "2014-01-25T22:10:58",
  "danger": 3,
  "location": "FL" 
},

Each bubble is grouped based on the date and time of the creature sightings.

  • The bubble radius is the count of sightings by an individual at that particular time.
  • The bubble color is an average of the danger levels, summed and divided by count to reveal a number 1-3
  • The y-axis is a calculation of the danger levels multiplied by the count (I call this "impact")
  • The x-axis should plot the bubbles based on the timeline, with the same time range as the bar chart below it. This is where I am stuck.

All the bubbles are pinned at pixel 0 and dont plot across. I would like these to reflect their point across the timeline. Ideally, I'd like to group them into, say, 1-hour groups. But just getting them to plot will make a big difference in my progression of learning these libraries.

The script is at: http://junklogic.com/dcjs/creatures/js/creatures.js

The JSON file is at: http://junklogic.com/dcjs/creatures/data/dashdata.json

Thanks in advance for any help. If I need to provide any other info to help solve this question, I'm happy to provide what I can

1
javascriptd3.jstimelinebubble-chartdc.js
The datetime variable assigned to each node is a string of the form "0Tue Jan 28 2014 12:05:08 GMT-0700 (Mountain Standard Time)Tue Jan 28 2014 12:05:08 GMT-0700 (Mountain Standard Time)" -- clearly not what you want! I haven't tracked down the location of the bug, but clearly what is happening is that you're getting string concatenation instead of date/time math. – AmeliaBR
I did notice that with a console log, but I thought it would be parsed. Thank you for looking in on it. – supergalactic

1 Answers

0
votes

Well, I found it. 

p.datetime += v.date;

and 

p.datetime -= v.date;

should just be: 

p.datetime = v.date;