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.
Related
I need your help!
I have to show a tooltip on the curve using d3, I already have that functionality and it does work, but now I have to show two separated tooltips on one curve.
Let me explain, I used to use this curve appearance, it is a simple d3 curve, and the tooltip works perfectly. And now need to use this curve appearance -
https://github.com/d3/d3-shape#curveLinearClosed
And I'd like to know how to show one tooltip on the bottom of the curve and a second on the top.
So far my implementation of the tooltip works only on the top, I think that happens because d3 draws the bottom line on its own.
So did anybody have a similar problem?
This is a picture how it should look like:
I do not need the code, I'd like to hear any thoughts or ideas about that.
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'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 :)
I have a full screen canvas I am drawing to, and I've set it up to allow the user to drag and drop objects that are within the canvas.
I also want to enable them to select an object, and then 'resize handlers' show up (the little circles in the corners) to allow them to click/drag and resize them.
I can code this manually by drawing circles in each corner and detect a click, etc.... but was wondering if anyone has any better way to do this? Maybe there's a library out there that already handles this?
Any help is appreciated!
There isn't any simpler way than doing it yourself or getting a library to do it for you.
I wrote a tutorial here on the use of sizing handles. That should get you started if you plan to make your own.