Are selections in Vega visualizations accessible from outside Vega? - javascript

I've been reading about "selectors" in Vega, which allow a user to click and/or drag across a visualization to highlight data points.
From the documentation above, and searching here and elsewhere, though, I'm having trouble understanding whether selectors are accessible outside of a visualization that Vega produces. Using, for example, R and Shiny, I would like to be able to allow a user to select data points in a visualization, and for Vega to somehow publish the selected indices for use by the app (for example, to allow changing a table of data to just display information about the selected points).
The following can be pasted into the Vega example editor to produce a scatterplot with click-and-drag selection turned on:
{"description":"","data":{"values":[{"V1":15,"V2":14.9611},{"V1":-21.3411,"V2":-7.8442},{"V1":-16.7692,"V2":-5.663},{"V1":13.339,"V2":10.1382},{"V1":13.0422,"V2":19.1265}]},"mark":"point","encoding":{"x":{"field":"V2","type":"quantitative"},"y":{"field":"V1","type":"quantitative"}},"config":{"cell":{"width":500,"height":300},"mark":{"shape":"circle"}},"embed":{"renderer":"svg","actions":{"export":true,"source":false,"editor":false}},"selection":{"pts":{"type":"interval"}}}
Is it possible for Vega to expose which datapoints have been selected? Whether by writing to a hidden DOM element, exposing a javascript variable, or some other means?

The answer is yes but it's not very clean right now. You have to inspect the datasets and signals and reverse engineer the selections from that. A proper API is on the roadmap: https://github.com/vega/vega-lite/issues/1830.

Related

Wouldn't it be possible to smoothly scroll the chart to the left in Apache ECharts dynamic data samples?

I am trying to decorate a chart using Apache ECharts dynamic data.
(https://echarts.apache.org/examples/en/editor.html?c=dynamic-data)
I want the updated data to flow naturally, not simply delete and add (shift and push).
Similar plugins exist for chart.js.
(chartjs-plugin-streaming)
Is there any way to get the same result in ECharts?
I'm still in the technical review phase, only testing through the demo site. I would like to see if the technology is feasible and if possible, I would like to obtain a sample.

Using D3.js, can I focus a data point in a SVG chart using keyboard?

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).

Javascript directed acyclic graph library? (Graph visualization is NOT necessary)

I have a dataset which is best represented by a graph. It consists of nodes of 6 or 7 different "types" with directed edges (dependencies on one another, guaranteed not to have cyclic dependencies). The dataset is essentially a template of a layered configuration, and the user needs to be able to select bits and pieces of the configuration from different layers which are desired, and have the dependent bits be brought in automatically.
The general UI need is for a user to select or un-select items from multi-select boxes (one such box for each node type), and have "depended-on" items in the other boxes become selected or unselected as needed. I need to be able to pull down the dataset from the server, let the user select the desired bits (with the dependency processing being done in javascript on the client side for responsiveness), and then submit the result back when they are finished.
The dataset is large and complex enough that actually showing it as a graph would be overwhelming and confusing to the user. Only basic graph traversal operations are needed, since all that is required is to cascade selections out the dependencies. (For example, a user un-selecting a node would result in that nodes dependencies becoming unselected if there were no other selected node which still depended on them. A user selecting a node would result in all of that node's dependencies becoming selected.) A simple depth or breadth first search following directed edges from the start node will suffice to visit all affected nodes. If I can follow edges either direction, bonus. (If not I can easily generate an edge-reversed graph and use that when needed.)
I have dug around on here and found references to a number of javascript graph visualization libraries, but most of these discussions seem to interpret "graph" as "chart" and I have no charting needs here. My digging has led me to this list: Raphael, protovis, flare, D3, jsVis, Dracula, and prefuse. From this list it looks like jsVis or Dracula might have the underlying graph constructs I need if I just ignore the visualization side, but it isn't clear to me from the documentation if that is the case. I have to rule out a few others because I cannot bring in any flash dependencies. Unfortunately I don't have time to prototype things with this many libraries. (I will be digging into jsVis and dracula more though, barring some handy input here.)
If anyone has experience with something from that list and believes that the graph portion of it can be used independently of the visualization portion, that will certainly meet my needs. If there is some other library I could use that meets my needs, that would be great too. One final requirement regarding licensing: the library needs to be "free" in a non-copyleft way - So ideally Apache v2.0, BSD, MIT, or something like that.
I haven't used it, but you might want to check out data.js. It's an MIT-licensed library with a range of data-structure utilities. In particular, it includes Data.Node and Data.Graph:
A Data.Graph can be used for representing arbitrary complex object graphs. Relations between objects are expressed through links that point to referred objects. Data.Graphs can be traversed in various ways.

How to create an editable grid using js

I am looking to create a grid structure using javascript or one of its libraries. My idea is as follows: I am a merchandise manager for a retailer and want to create an application to tie into the django project I have been working on to track item sales based on display location. The javascript piece would involve drawing a grid on the screen and allowing the user to draw 'areas' over the grid. Each area would contain a set number of gridboxes, each representing a pallet of goods. At the time the grid is drawn, each box is a DOM object that can be assigned to event handlers etc. When an area is drawn over a a series of these boxes, they become active and each box can be assigned different characteristics. In the end, each box would effectively represent an empty pallet that could then be assigned an item. It's position could then be correlated with sales data via my django app. I just need a way to broadcast/manage the location data using javascript.
Is there a jquery plugin or some other js library that would facilitate such a project? I have checked into Raphael and it will work, but will take more time to create. I am wondering if there is already some kind of grid based drawing tool that would facilitate the process.
Everytime I think of a javascript Grid, I always thing about the fantastic TableSorter
And if you append an editable version to it, I would would say you will have the best AWESOME project!
:o)
JQuery UI's Selectable would probably be a good place to start. It makes it easy to create a grid whose areas are selectable by dragging a box over it.
The extJS javascript framework has an editable grid, refer to http://dev.sencha.com/deploy/dev/examples/grid/edit-grid.html for a sample demo and source code

What language to use to create maps dynamically

I want to create a map dynamically and display it on the website. You can call it to be more of a graph than a map. Here I take the source and destination from the database. There can be many sources to a destination or many destinations for a source or both. Also there can be many other locations directed to/from source/destination. Source and Destination will always be there. But other locations are optional. So for example the route could be
L1 --> L2 --> Source --> Destination --> L3 --> L4.
where L1-L4 are locations (optional)
I want to depict this diagrammatically on a website. The user should be able to click on a each location/path (depicted as the arrow line above) and a popup should be opened. In the popup some data editing can take place. Also along the path(arrow line) some data has to be displayed. Basically all HTML,JS functionality should be available for this diagram.
Can someone please suggest me which language I can use for this?
I checked out some of the map APIs. But they expect some kind preloaded image to be present. That is not possible in my case.
The site I'm working on similar to any air fare info site, where we select multi city and get different rates for different airlines. I want to show this graphically with nodes representing locations and lines representing paths and should show rates along paths and stuff like that.
Any pointers will be appreciated.
Thanks
Some of your options are: SVG, HTML Canvas, or HTML+CSS. Given your desire to track events per object, I would rule out HTML Canvas: binding events to objects in a retained drawing system is much easier than manually processing events based on mouse position.
I would recommend using either SVG (if you can limit yourself to browsers that support it) or a drawing API like Raphaël to abstract support over SVG and VML for IE. You will have far more flexibility of drawing and hit detection than using HTML divs plus backgrounds.
Although I haven't used it, Google found the Joint library (that uses Raphaël) for a higher abstraction than the drawing level. Perhaps this meets your needs.
If I understand you correctly, it sounds like the google maps api would work for you:
You can find more info here. here
Additionally, you may find this info useful.

Categories