I'm trying to have the data for the box under the mouse appear on hover like the 2D charts. There do not seem to be any interactive examples that I could find showing this and figuring it out from the API is eluding me. I'd also like to get the box that is clicked on by the mouse but the onMouseClick event added to the box series 3D that I tried as a starting point does not seem to do anything.
unfortunately BoxSeries3D or 3D series in general do not support any user interactions at the time. The same event methods as for 2D exist, but they don't do anything.
The development of new or missing LCJS features is adjusted in real time according to existing user needs, so it is a good thing that you asked this. If you are a licensed user, or would be interested in getting closer to the development to voice your requirements, please contact us
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).
I am designing an experiment to test people's trust in certain images and was hoping to get an idea of what parts of the image they trusted/did not trust. I was thinking of creating something similar to Facebook tagging where a participant might click on a part of an image and a text box would open so they could type a comment. I have looked at various ways of doing this but have had no luck so far.
I am currently thinking the answer may lie in recording a click event by co-ordinates on the picture, having that click open a dynamic text box below/beside the image that they can type into, and then I would just have to match the click events with the text they enter when all data is exported.
Any thoughts on whether I am on the right track? Any help or ideas would be verrrry much appreciated - been pulling my hair out over this one!
Think you're on the right track. Check out these tutorials to see if they help. Basically they show how to create Human Intelligence Tasks (HITs) that ask Workers to draw a box around objects, then either type in a label, select a pre-defined label from a drop-down, or apply no label at all.
https://blog.mturk.com/tutorial-annotating-images-with-bounding-boxes-using-amazon-mechanical-turk-42ab71e5068a#.e4danqmji
https://blog.mturk.com/tutorial-retrieving-bounding-box-image-annotations-from-mturk-253b86cb7502#.h4ya5t58m
Hope that helps!
I want to create a small activity where user will be required to draw certain predefined shape using Javascript/Jquery.
But I am not able to figure out a way to validate what the user has drawn.
I will appreciate any help as to how to approach this problem. Thanks in advance.
Have you thought of the following jQuery commands: for .mousedown(), .mouseenter(), .mousemove(), .mouseup(), .mouseleave(), .mouseenter()? I assume that you will be monitoring the user's mouse movement especially the interaction between the mouse and a predefined space in the browser. Depending on that, you can place a listener that monitors their mouse movement from the user.
Hope this helps.
Thomas
I have a simple problem in my mind but can't figure out where to start and JS isn't my strongest front. The JavaScript part is what gives me troubles.
I have an uploaded image which I want to drag my mouse upon to make a rectangle and get the rectangle coordinates. Those coordinates should go into my Rails app db so that this rectangle is latter displayed to the user and the image part that is selected will be zoomed to the user.
I've gone through several jQuery plugins that do tagging on images but first of all they are too complex for my needs and can't be customizable to this specific need of mine.
In order to get a real live example please see this http://www.stylebistro.com/lookbook/Tops/PJfJzgo2fN9
It is essentially what I want to achieve but the administration part is giving me troubles.
Regards,
Yavor
jCrop has an API that returns image coordinates. It can zoom the image as well, so it should be a good fit.
I'm looking for a way to create an interactive bullet graph, which will allow the user to click anywhere in the graph and set a marker, then calculate some simple values based on where this marker is at. For example, I'd like it to look similar to this:
http://www.usrecordings.com/test-lab/bullet-graph.htm
Yet, allow the user to click inside it and have it calculate values. I don't want the user limited to the axis values either, it should be able to figure out what the value is between them. Has this been done anywhere before or do I need to start something from scratch?
Flot may be able to do what you need.
Check out some of the examples, particularly the interactive one. It's open source, so you can add any functionality you need to it. This should be a good starting point.
HTML canvas is a great place to start. A brief google search showed there may not be many interactive charts available. These are a couple HTML canvas examples, the first being math, the second the w3c spec: Polynomials, HTML Canvas w3c. I've found that searching for HTML canvas game examples produce many more tutorials than straight HTML canvas examples. I don't know what your programming abilities are, so I'm giving you these links with the assumption you have javascript experience.
Have fun.
Oh and thanks for asking if it's been done before.