EventDrops for D3.js (from marmelab) - how to tweak example code? - javascript

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:
Instead of the real-time monitoring, I would like to load a CSV file with dates to display. How can I achieve this?
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

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.

Related

Changing Contents of Select Based on Choice from another select

Im having a hard time rendering subgenres based off the parent genre. Ive included a codeSandbox originally forked from the mui_grouped_select CSB at the bottom.
As you can see in the CSB I tried a few different approached to try to get subGenre and ended up passing an empty array just so the page would load.
Feel free to convert to a ".js" if that's easier.
I can see that I can get the right code in the first handle hook but after that I am struggling withupdating the subGenre to have the selectedGenre.sub array.
P.S. new to JS and TSX. I come from a C99/Python background mostly if that helps any.
https://codesandbox.io/s/genre-subgenre-v1mfr3?file=/demo.jsx

using progress bar in loading a view or showing a page

I know this question is not about code or algorithm but i really just want to know so please understand.Anyone knows what plugin or what is the name of the feature on the screenshot. I wanted to know what do you call that thing when you use like a progress bar to load pages and then use next and back to navigate instead. I wonder if there is existing sample we can use instaed of creating from scratch. Is that a progress bar?. Thank you. May i know the term ? what is the right name to that?
url
https://imgur.com/a/hKWMK5L
It's called multiple step form. A basic example can be found at: http://www.jquery-steps.com/Examples
Hope it helps

How to make list view like window's folder view using javascript and html in express?

Today, I reported the progress of my project to the mentor.
And then I have new mission.
This is my list view.
enter image description here
I made this using javascript and html. The data is from server node.js and database MySQL.
But, My mentor told me to change it better using list control.
Like this.
enter image description here
This is folder list's view in windows.
Not table, use list. The languge is also javascript and html.
When I click the title, the list needs to sort.
I just want hint!
Anyone who give me the hint? or Where do I start to study?
Thanks in advance.
Start using AngularJS for your sorting problem. In angular js, do the sorting using filters. The presentation can be done using html and css

Getting ImpactStory JavaScript widgets rendered to a table cell in an R Shiny app

[The question was yesterday also posted to https://groups.google.com/d/msg/shiny-discuss/1UmzvZJwM54/gdMmX7QQ-eIJ with no answers so far]
I've been working on a Shiny app that shows both as a table and as a rCharts (NVD3) chart some raw altmetric data of a few journal articles http://spark.rstudio.com/ttso/alt/
My code with sample data https://gist.github.com/tts/6990101
So far so good, but now I've run into difficulties when trying to include in the table the JavaScript widgets explained in http://impactstory.org/api-docs The widgets as such work just fine, like in this HTML example http://users.tkk.fi/sonkkila/alt/arts.html - but in my Shiny table, the last (IS) column where they should emerge, is empty.
When I leave the table unsanitized, I can see that the HTML code is there - but when sanitized, it vanishes. The renderTable code in server.R: https://gist.github.com/tts/6990101#file-server-r-L69-L85
From the HTML source I can also see that the ImpactStory script is at the top of the page as it should.
All pointers are welcome!
Disclaimer: although I've been playing with R and Shiny for some time now, I consider myself a JavaScript/CSS newbie really so I may be missing something obvious here.
EDIT: Just to clarify: of course the sanitized HTML code vanishes at that point, because there is no textual element value. I wonder if a) there are clashes between the different JS scripts, maybe they'd need to come in different order (have to ask ImpactStory about this) or b) there are some problems in how xtable() generates the output or c) Shiny does not know how to communicate with the impactstory.js script or d) Shiny does not see the script at all. Should I build a custom output component?
EDIT2: AFAIK the problem lies in the fact that the reactively outputted table does not see the JavaScript. Tested: when I manually add non-dynamic HTML code to ui.R with all the attributes that the ImpactStory JS needs to know about an article, the widgets are rendered ok. Also, if I add, in server.R, the script element in the data frame that is outputted, the widgets are rendered, but also - will never stop doing it, resulting to a loop :) I suppose what I'd need is similar to what is asked here, in question nr 2
Well, I've found one solution that isn't pretty but will do for the moment.
renderTable uses xtable to render the HTML table, and you can define your own sanitization function while at it, see http://cran.r-project.org/web/packages/xtable/vignettes/xtableGallery.pdf (p. 7)
Here, I simply replace the column header 'Widget' with a string that defines the script:
output$table <- renderTable({
...
}, include.rownames = FALSE, sanitize.text.function = function(s) sub("Widget", "<script type=\"text/javascript\" src=\"http://impactstory.org/embed/v1/impactstory.js\"></script>", s))
For a reason I don't yet understand, there is a set of double widgets at first.
Thanks for your patience.

Use VIM omnicomplete for javascript with ctags

I am using vim/gvim for 4 months already and now I found a way to use it's strengths.
My tags file is generated very well and here is a simple row in it.
my.namespace.classname /path/to/file.js /^my.namespace.classname = function(first_arg,$/;" f
Here is an example what i need to omnicomplete:
my.namespace.cla <- omnicomplete list with all classnames in the my.namespace
The above is the key to my problem, because it looks like omnicomplete searches only namespace without including "my." in front of it. So i see other element in the omnicomplete list and not my classname at all.
However, if i type :tag my.namespace.classname for example gvim opens the correct file at the correct position.
What is wrong and how can I make it work?
I've noticed that a lot of omnicomplete is not well developed. I've used the php omnicomplete and have had to go in and tweak a lot of it to get it working correctly. I recommend you download omnicomplete for javascript. Then add it to your plugins directory. Then make edits to it until it does what you want it to do.
Sorry I couldn't be of more help - but at least you won't go answerless any longer.

Categories

Resources