Develop Reference

How to add a custom vertex image (Parallelogram) in mxGraph

I am creating a diagram creation tool for constructing flowchart using mxGraph, with the dynamictoolbar.html as a base template. So far, I have been able to add in the images of all the shapes in the toolbar and have it draggable across the graph. The shapes are as follows: Ellipses, Hexagon, Rectangle, and Diamond. The only issue I found is implementing the Parallelogram shape.
I tried this code so far:
addVertex('editors/images/parallelogram.gif', 40, 40, 'shape=parallelogram');
But to no avail
I later found out after opening the diagrameditor.xml that mxGraph has no parallelogram shape. The closest shape was Rhombus, but the user has to rotate it and make it larger to make it look like a parallelogram, which is inadvisable.
Please someone suggest me how to accomplish this.

Draw multiple polygon inside rectangle based on line intersection point

I have created below SVG using svg.js 2.7
Now I want to draw all possible polygons made based on lines intersection with other line and outer rectangle.
I have got all intersection points for lines and lines intersection with the outer rectangle using svg.js plugin svg-intersections-js
My requirement is, I want to display a hover effect for every possible polygon.
Edit 1: Line position and alignment are dynamic.
Is it possible?

Get all x, y coordinates of a predefined area within an image

Please provide the code that will create an overlay of the red outlined area in the image. Then, the code should return each and every single x and y coordinate contained within said area.
I would then link to cast each point into a comma separated array or list that can be easily checked against.
Using the canvas HTML5 element would be ideal here so that I can reproduce this for 3 additional images.
Similar question proof of Concept

Here's a starting plan for you
For each bin:
Pick a unique color,
Physically put 3 pieces of tape at the bottom-front, top-front & top-back of the bin. This example image has green tape in the appropriate places.
Take a picture of the group of bins,
Draw the picture onto the canvas,
Use context.getImageData to fetch all the pixels on the canvas,
Test the pixels in vertical strips until you find the 4 corners of all 3 pieces of tape,
You have the coordinates that define this bin,
Create a canvas path connecting the coordinates,
Once again go through the pixels you fetched in the image and use context.isPointInPath to determine which pixels are inside the bin path.
Repeat with different unique colors for each bin in the group.

putting d3.js elements on the slider

Please first take a look on this picture : https://docs.google.com/file/d/0By25CEM_KEOiYzdYaWVicnp6Zm8/edit?usp=sharing
Now i want to make something like that but i want to put d3.js elements on a slider like that instead of images like a rectange, circle, square, triangle so that user can move them with arrow buttons shown in the image.
I just wanted to know if it is possible with d3.js and if Yes, please tell me how or from where to start?

You could make something like that using D3.
One way you could do it is to draw the tiles as rectangles using SVG and then have a clip path that hides the tiles that are outside of the frame of what you want to see. The left and right arrows would update the xScale domain which would slide the tiles left and right. And, you can register click events on the rect elements to create links on the tiles.
See this for some ideas on how to start: http://bl.ocks.org/mbostock/1667367
If you aren't already somewhat familiar with d3, you should probably start with a basic tutorial like: http://mbostock.github.io/d3/tutorial/bar-1.html before you dive into the deep end.

select an area of a scatter plot in javascript

I am trying to achieve the following with javascript:
draw a scatter plot with many (~10,000) points
allow the user to draw a curved shape on top of the plot to select a region (I am open to exactly how the shape is designed: an ellipse would be fine, or a polygon, or a path defined by bezier curves)
get a list of the points inside the selected area and do something with them.
Obviously, it is step 2 that is causing the problem. I have previously used jqplot to something similar to the above using a rectangular selection, but it is vital for the purposes of this project that the user be able to select an elliptical region.
Can anybody give any hint as to which javascript library would allow this?

I know that you can create paths using Raphael. I would have though that the most difficult part of this would be the last, but I did find this (yes, I know it's VB, but it gives a basis that can be applied to JavaScript).