i'm searching for a technique to display several circles on a website, which has the following requirements:
circles extend to a rectangle when clicked and show text caption
circles should move like a vibrating atom, e.g. up/down
when clicked to open, all open circles should be connected with lines, forming a network
the circles should not overlay each other, either opened or closed
I already made some effort with it: the circles vibrating effect comes from css3 animations, the connecting lines via javascript on an underlaying html 5 canvas.
Overlay checking for the closed dots happens via position checking in js.
But I've a feeling that there could be a much better solution, moving the dots away from opened dots and so on.
Maybe anyone had done this already?
Greets
Have you looked at D3js? it's a very nice library for data visualization in JS. I haven't seen your particular example made using D3 but it should be possible :)
Related
I am discovering the Nivo lib for data visualization and I am blocking on a feature that I would like to achieve.
Here is an example of what I would like to do : https://nivo.rocks/line/
I would like to make a component with an almost similar rendering except that: the curves should appear without the points.
Then, hover the mouse over the curve only the point that you hover should appear
and when we move the mouse elsewhere the previous point disappears to make room for the next one
Apparently the lib does not manage natively, we can make the points disappear / appear but only all or none and not manage them individually.
If you have any suggestions I'm interested, thank you in advance for your help!
I've got a assignment where I need to create a 3x3 grid of rectangles, where a person can click one of those rectangles and the page zooms in on that rectangle, so it's now screen-filling.
I've got that working in Angular 6 by just using their animation system and doing transform: scale(3) and a translateX/translateY, depending on which one of the rectangles has been clicked. So, no problem there. (see the gif below)
However, I also need to create 2 or 3 rectangles, that are shown before the grid is shown. So, when the user visits the page, he first sees 1 rectangle, filling the screen, clicks on "next", and then sees the grid.
Basically, I want to have a "top-down" view of my DOM, being able to zoom one of the rectangles or zoom out and see the grid.
I was thinking about ditching the DOM and using three.js or pixi.js, but since I'm on a really tight deadline, I thought about coming here and asking you guru's what you think is best.
So, what's the best way to create a whole bunch of rectangles and be able to zoom in, out, and move around between them? Thanks a lot in advance!
Please, if you need more info, leave a comment :)
I have run into a small problem on a project I am working on.
Basically I have a page on a website where a single image is displayed. Users can then add shapes over this image.
Sort of like having a board with sticky notes.
The way I was tackling this was by having an invisible grid overlaying the board so that any shape added will be placed inside a cell, but this is giving me issues as the shapes can sometimes be larger than the cell on the grid.
Are there any other libraries I could use which could give me the functionality of adding shapes over an image, with the possibility of saving that shapes position?
Thanks!
Hey this may help you achieve what you want http://fabricjs.com/ its a simple
Javascript HTML5 canvas library that allows images to be loaded over backgrounds
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.
I am very new to html5 game making.
Recently I am making a game which includes some animations using png sprite.
http://i.imgur.com/MZrpq9j.png
I have a background and I try to use this sprite to mask it, I was trying to use getImageData() & putImageData() to show only the circle part of each frame of the sprite, everything's cool until I try to make another "circle" near to the first one.
The problem is I cannot make both "circle" animate at the same time if the sprite sheets overlap with each other...
And this is the very start of my project, the final aim is like making 100 "circles" on random positions.
So is there a method to use this sprite sheet to make animating circles, showing the background in the circle part only even if there are several "circles" which overlapping each other?
Sorry that my english is bad and I try my best to describe the question...Any suggestions would be great and I can elaborate more on the question if needed! Thanks!!
PS: I have tried to do my homework before posting, the most neareast reference I can find is http://simonsarris.com/blog/140-canvas-moving-selectable-shapes, but I do not know how to apply the concept of the "ghost canvas" into my case..