1

I stumbled upon the non-nodejs version of the EventDrops library for D3, and I was able to reproduce the example on my own server. See this blog post here for more information and the example code.

However, could somebody please dodge me in the right direction or provide me with code for the following two problems I'm currently facing:

  1. Instead of the real-time monitoring, I would like to load a CSV file with dates to display. How can I achieve this?
  2. And second, how can I display more information while hoovering over an entry from the graph? The demo from the link above shows only limited information, but I would like to load up multiple rows from the CSV and show them while hoovering. Like in the example from the original EventDrops library team, but without using nodejs.

Thank you all so much for your time and your answers.

Clarification to point 1: The CSV file will have the following structure:

name,date,comment
google,"2017-03-06 17:00","some comment about the event"
facebook,2017-02-15 11:13,"again a comment"
google,"2017-01-01 12:13","older google event"

Mark was so kind to put some code together (see here). However, I was not able to run this code with my CSV from above. Could somebody please help me? Thanks!

Best regards, Stephan

Jonathan Petitcolas
  • 4,254
  • 4
  • 31
  • 42
Stephan Berger
  • 113
  • 1
  • 1
  • 5

1 Answers1

1

For your first point, you can turn a CSV file into JavaScript plain object quite easily using PapaParse. You would then be able to import your file using something like:

const data = Papa.parse(csv);

For your second question, you have access to the whole data row in each events. For instance, referring to the EventDrops demo, you can access your data directly via, for instance:

const chart = d3.chart.eventDrops()
    .mouseover((row, index) => {
        // if you need to access several rows, use data[index+1] for instance
    })

For hovering yet, it is not really trivial, and you should handle mouseover and mouseout events manually, as shown in previous demo link.

Jonathan Petitcolas
  • 4,254
  • 4
  • 31
  • 42