Background
I am building an application in D3/Javascript, although this may also be broader question about data/view modelling design. D3 has some useful data modelling capability so may be relevant to this. I am new to D3 and Javascript though!
The application:
Plots a relatively large dataset (>5000) of events over time
Should allow selected events to be hidden and re-shown by the user
Should draw a line between events of a similar type, but only those that are still visible
Problem
I am unsure how to best model this, particularly how to manage those nodes which are hidden, should still remain in the data model, but not taken into account when building the line through similar event types.
For the "Hide nodes" use case, I set each component's style to 'visibility: hidden'. These could be re-added later, so I don't want to remove them from the underlying data model.
I am unsure how to go about managing the "Line through similar event types" use case - only using data from visible events.
I think the key question is how do I build a list of events with a common attribute and that are still visible. Can I use D3's select mechanism? If so, I don't necessarily want to append the common attribute to the SVG element due to the large data set. Is there another way?
I could have probably asked this question in one line, but I hope the context helps describes what I'm after!
Many thanks for your help.
Related
I have an SVG chart creatd using D3.js in which there are data points that show up when being hovered by mouse.
Now I need to make it support motor impared people who can only use keyboard, not mouse, to interact with the chart.
I tried to use tab button to navigate through the chart, but the data points are not focusable and therfore don't display.
Could anyone teach me how to make it more accessible?
If D3.js doesn't support it, could you recommend another library?
BTW, is https://d3plus.org/ a better choice?
Thanks in advance!
To achieve this, the data points each need tabindex='0' and some kind of accessible name, typically this would be aria-label="string representing the datapoint".
I haven't touched d3 for years, but IIRC I think this should be possible. d3plus looks pretty good, and adds an aria-label and a presentation role but not a tab index to data points.
Presentation role would normally not be something you focus with the tab key. I wonder how screen readers would handle that. I can't help thinking that another role from graphics-aria might be more suitable than presentation.
(Strictly speaking, the tab key is for focusing operable content, and datapoints are generally not operable, although an idiom of browsing data by tabbing is establishing itself - mostly because no other mechanism other than a data table yet exists).
So, apologies if this is too much of an open and beginner-like question.
I am trying to build a single page app, in which one can control a variable in two ways:
by dragging the corresponding datapoint on a D3 scatterplot chart
by setting its value with a slider
I would like the chart to update when the slider gets moved, and the slider to move when the chart is updated by dragging the data on the chart.
I have thought of handling this through:
a spaghetti tangle of events
a proxy object mediating the changes
However I'm asking myself (and the illustrious SO community) is there a better way to handle this?
The keyword for solving this is 'data binding'. There are several frameworks out there, which are able to solve this. That means, that you have a javascript model, which holds the value, you want to work with and something like a proxy, which handles changes and stuff and applies the changes to the view or respectively to the mode..
In case you might need this more often, which usually applies to single page apps, I would recommend you to use some framework, which does the work for you instead of reinventing the wheel.
If you want to stay with client based Javascript, you might take a look into Angular.js (never used it, but maaaany people do and really do like it) or Knockout.js (I work with it, but there are no more further developments).
Within the last years and now many peoply switched to Node.js and Angular2 (a further development of Angular.js) or React.js or Vue.js. You might also take a look into it, but going into detail would blow up the answer. Moreover I only know some basics right now and other people can do better and already did better.
I'm working on a javascript framework for creating simple animations on an html canvas with nested sprites using a basic composite pattern.
I've been modeling my work on Clutter and Flash (very similar structure). A "Stage" holds all of the items on screen, which are "DisplayObjects". These can be aggregated in a "DisplayObjectContainer", which inherits from "DisplayObject". The "Stage" itself is also a "DisplayObjectContainer". All of these inherit from an "EventDispatcher".
I've spent the better part of the last few days reading about the event flow of these systems and searching for examples in various open source projects.
From what I understand, when an event is dispatched, it should follow a certain propagation path: it flows from the stage, into the display object hierarchy (the "capture" phase) until it reaches the "target" of that event, and then "bubbles" back up the display hierarchy. If this isn't clear enough, the images located here should help explain:
http://help.adobe.com/en_US/as3/dev/WS5b3ccc516d4fbf351e63e3d118a9b90204-7e4f.html
http://docs.clutter-project.org/docs/clutter/1.4/event-flow.png
There is an aspect of this that I'm failing to understand, and I can't tell if it's just me or if this is as unclear as I think it is:
Suppose I'm dealing with clicks. I click on the display and use the browser's native event handling to retrieve the x/y coordinates of the click, and then send that down the display hierarchy to determine which object I've clicked.
Until now, this WAS the "capture" phase in my code. But this is completely at odds with the documentation which says the target should already be attached to the event by the time it enters the event flow.
Am I really supposed to traverse my graph of display items twice?
Any advice or expertise on the issue would be highly appreciated.
Interesting question! Yes, I believe you would need to traverse your DisplayList first to calculate the event target before beginning the capture phase of your event-flow. Never having designed an event system, I'm not completely sure about this, but perhaps when you calculate the target object you could cache the hierarchical route and use that as the basis of your event-flow rather than traversing the DisplayList again.
The bit that you're unclear on, I think, is more obvious if you consider it in terms of implementation rather than in the abstract of designing an event system (and the terminology of existing event systems). Imagine, a widget consisting of a parent object, and a number of child items which need to react to mouse clicks. You might decide you want to listen for events on the parent object only, but react according to the target object from which the event originated. In ActionScript, if you're using the capture phase of the event-flow, your handler would fire before the target of the event is reached but, in this case, the target is an essential property of the event object.
As suggested in the comments, it might be worth looking at the source code for easeljs since it claims to provide an API "that is familiar to Flash developers". However, note that easeljs does not currently support a full-featured event flow for performance reasons (see here).
My two pennies; event-flow is tricky enough to understand (let alone design) and implementing a full-featured event system may be at odds with your goal of creating a light-weight library. I would suggest you keep it simple at this stage and only add features such as event bubbling if you find you need them.
So for example if we have a flash video already buffered and playing, or an autocomplete active with input, focus, and a dropdown visible (and maybe even loading something) but only have HTML of the full document and a copy of the HTML earlier, how can we merge them into the live DOM without the user's state being interrupted?
Ordinarily I'd just program a specific fix, specifying the right area to change given it's div name, manually but that is not a known variable for the situation at hand (I'm programming a Pythonic MVC framework with AJAX).
I want to change the smallest amount of nodes, and probably the deepest nodes that I can get away with.
It's ok to require ID's for some of the nodes (e.g: flash or autocomplete widget) but not possible to expect this for all nodes - so in some situations perhaps node position and types will be available to compare documents.
I understand this will not be a complete solution but in some cases it will be all that is required.
High all, I was wondering if it was possible to select an on page element via its coordinates?
reason being i'm trying to make an editable page where you can right click on highlighted elements, menu appears and then select from the options give. using the only method i could find that worked to select the element via hover it uses (event.target) which if having lots of parents combined with other code, it loops through and looses other data along the way. If i can find another method for highlighting the elements that would be of course better.
This is a terrible way to go about doing what you are trying to do, and I speak from experience: I inherited a calendar tool that figures out what day of the month you clicked on based on your mouse co-ordinates. The stupid thing certainly works, but it's a giant PITA to maintain/modify/add to in any way.
The much, much better way to go about it (unless you want a maintenance nightmare in your future) is to use the event object. If you hook up your events to the correct objects and use e.target (or, if you use jQUery, "this") you should be able to very easily route the correct actions based on the where the user clicked, without any coordinate nonsense.