We Keep Coding

How can I make a responsive scale grid when dragging and droping Images?

I'm pretty new to JS and CSS so i'm looking for help to make a Grid container in which I drag into an icons in different sizes and I want them to arrange themselves based on the size of each icon and the amount of them.
Let's say the minimum size that each icon can scale down is 20% of its original size.
I tried a lot of methods without finding the perfect way..
If anyone can send me a complete example of something like that I would be thankfull!

There's no magic solution here. You're asking few questions - each has to be addressed separately and depends on the js framework you use. I'm going to assume you're using vanilla js / jQuery.
Grid layout - Bootstrap is a trendy and working-out-of-the-box framework. Here's a simple grid example.
Drag n drop - There's no shortage in drag & drop libs like interactjs, jQueryUI, and Draggabilly (example)
Don't attempt to achieve all your goals at once. Instead, implement the grid, understand it, then move to drag n drop and sort by size logic.

Custom node renderer for Cytoscape + restrict drag points

I am working on a web-based graph visualization/manipulation tool and I am evaluating a bunch of JS libraries including Cytoscape.js, jsPlumb, visjs for this purpose. Some of the high-level requirements include:
Ability to display a graph of nodes based on JSON data (supported by Cytoscape.js out-of-the-box).
Support creation of new nodes by dragging from a pallette outside the canvas and dropping it on the canvas (Cytoscape-node-add somewhat supports this use-case)
Ability to connect nodes by clicking on specific points in source node and dragging a connection to a specific point on a target node. (mostly supported using the extensions Edge-Editation and Edge-handles)
A good 'event' system for letting the enclosing system know when interesting things happen (e.g. a new node was created/dropped, user has selecting a node, user has moved nodes etc)
I really like what I read in the Cytoscape documentation and the demos convey that this is a pretty robust library. However, I have the following questions:
Is it possible to provide a HTML snippet to be rendered for each node? For e.g depending on the 'type' attribute of each node (specified in json) I would like to display an image, show some text etc, on each node. The documentation mentions background-image for a node, but that's not exactly what I am looking for.
Is it possible to restrict the points on a node that a user can start dragging from, to connect different nodes? I realize the Edge-Editation extension already provides some support, but using it, the user can start dragging from any point on the node. Also, after connecting two nodes, the edges move around the borders of the node if a user drags a node around the canvas. I would like to restrict this behavior so that the edge is always attached to the same point on the source/target node.
Given the specific requirements, I am guessing that I have to write my own Cytoscape extensions to do these things. But I wanted to know if there was something that I could re-use or re-purpose.
This is a rough sketch of what I want to achive.
Any help with these would be really appreciated.
Thanks

(1) You can't render HTML in canvases, but Cytoscape does have support for SVG background images on nodes. So you can put whatever content you want to draw on nodes that way.
(2) You can make a PR on one of the edge editing extensions if you want to have more control over the handle placement. They already have some customisability in that regard, but it sounds like you want a bit more.

How to create modeling tool in html5

A diagram tool in html 5 with drag and drop functionality including the connectors.
consider a drawing tool with rectangle circle and a data store getting connected through arrows on mouse clicks and then generating a XML file for the same.

I will recommend you to use SVG, which specification is accessible here; along with DOM & CSS
[EDIT]
Why not Canvas & its 2D API? Because the export to (png, ...) is not as efficient and powerful as SVG. After all, it's just a modeling tool

The OP may want to try gojs.
gojs is a sophisticated JavaScript library for drawing diagrams utilising the html canvas, available from http://www.nwoods.com/products/gojs/. It is not a 'free' product but there is a free-to-use trial version that is fully functional save for displaying a watermark on the diagram.
It abstracts from primitive drawing operations to a much higher level and offers many diagram type (org charts, flow diagrams, etc, etc) that are quick to create and live rather than simply being drawings. It uses a model-view approach to diagramming which is very productive. It supports drag and drop within diagrams and from a palette of components.
Their support is good too.
I have no relationship to the vendor, other than being a happy customer.

How to create a topology diagram using Javascript

I need to create a topology (network) diagram, which will be integrated with my extJS application. Is anyone familiar with some Javascript packages with APIs for creating such a diagram, taking care of: positioning the nodes in the diagram, zooming, and dragging the nodes?
In addition I want to use some custom icons for the nodes in the diagram.

You might look into yEd/yFiles (https://www.yworks.com/products/yed) It's Java, not JavaScript, but it will definitely run as an applet since it does so from their site as a demo. Might work if this is for an intranet to just embed it in the middle of an ExtJS panel. Otherwise I recommend you read and re-read the drag and drop API for ExtJS and review the source code for them as well if you intend to code it yourself. Also from a google search:
https://github.com/jgraph (commercial)
https://www.jointjs.com/ (MIT Licenses)

Magnifier effect for D3/GraphGL force directed network visualization?

Is it possible to create a smooth animated magnifying effect (similar to the dock on Mac OS X) when hovering over nodes in a force-directed graph visualization using the D3 or GraphGL libraries?
The nodes would need to expand and displace the others around it, while maintaining the force-directed layout.
If someone could fork this to demonstrate, that would be great! Thanks
note, this is different from a simple zoom as in this question

Great question. To answer it, I implemented a D3 plugin for fisheye distortion. It's roughly based on previous work in Flare and Sigma.js, which are in turn based on the work of Sarkar and Brown, "Graphical Fisheye Views of Graphs", CHI'92.
Here's a quick demo with the Misérables dataset. View source for the code. I'll do a writeup later today when I have time.
Note: this uses a static force layout; the layout is computed on startup and doesn't change. I think this is probably what you want in conjunction with fisheye distortion, or else the distortion will compete with your ability to move nodes around dynamically. But in theory it's possible to combine them, if that's what you want.

It'd be amazing if you could do this with pure CSS, but unfortunately it looks like attributes for various SVG elements (ie, circles) aren't reachable via CSS. Specifically 'radius', but I think this is true for a whole slew of SVG element properties.
But its not super hard to do via d3. Here is my example jsfiddle. Basically you do the following:
Use transitions (see Tutorial #2 to learn how to use these). Basically do a d3element.transition().delay(300).attr(...) to make the changes happen.
To keep the 'blown up' circles from overlapping the best I could figure out to do was to modify the force layout's charge setting. Increasing the repulsive forces when circles are larger.
Hopefully thats what you are looking for...

Pure css can do this if you accept it.
.app{
-webkit-transition-property:-webkit-transform;
-moz-transition-property:-moz-transform;
-transition-property:-transform;
-webkit-transition-duration:.15s;
-moz-transition-duration:.15s;
-transition-duration:.15s;
}
.app:hover{
-webkit-transform:scaleX(1.2) scaleY(1.2);
-moz-transform:scaleX(1.2) scaleY(1.2);
-transform:scaleX(1.2) scaleY(1.2);
}
It's used on my home page tuoxie.me