I want to make the whole webpage into a graph, like a blueprint (the colour scheming). And then i want to plot a graph in the same page. So should i use some code to make the grid or should i just make an image file and make it the background.
The grid should be preferably something like this : Graph, or with the proper coloring Blueprint Graph
If code is suggested, please give an overview of how to do so.
Thank You.
This sounds like something you could do with HTML5 Canvas, although maybe that's above and beyond what you're looking for. Here's a pretty good free course that has relevant examples.
Since you're going to be plotting points on the graph, your best bet is to create an element, such as a <div>, and give it a fixed width and height. Then apply a background image of the graph paper to that element. You'll need to use absolute positioning when plotting points, so it's key that the graph stays in place and doesn't get skewed based on differing viewports.
If you wanted the entire viewport to be a graph, you'll need to reference the upper-left corner when plotting points (start at 0,0) since users' browsers will have varying widths and heights.
Related
building a static website with React.
Description
I want to add a visual effect to the pages of the website, as shown below.
visual effect
I am trying to build a rectangular background. Some triangles will be cut from this rectangle (at least two vertices of the triangle must be on the edge before cutting), as shown in the shaded area in the figure.
Then I want the cut out triangles to float randomly in the page.
And I want the background of the content part in the middle (also a rectangle) not to be cut (ie only the outermost padding part is cut).
Some Attempts
I have tried to randomly generate the vertex coordinates of the polygons after cutting and the vertex coordinates of the cut triangles and display them using css clip-path and animation. But I haven't come up with a usable vertex generation algorithm.
Definitely you would have tried clip-path generator but might find that not working as expected on different screens. There's no efficient vertex generation algorithm for this. The alternate is to do so some random math by yourself. If you feel that your polygons are nice on one screen but scrambles on other, try using media queries.
Just wondering if there is any package/functionality to manually manipulate the positioning of text from geom_text()? I've been using ggrepel::geom_repel_text() for positioning without overlap, which is good for most cases, but when I have a ton of points all clustered in a tight space it would be much easier to just move them around without having to figure out the coordinates associated with each spot. Is this possible?
In case your problem relates to deciding which points to label, here's a Shiny app which allows for manual selection of points to label in a ggplot. It relies on ggrepel to space them, so if you want manual control, Marius makes a good suggestion.
https://github.com/AliciaSchep/gglabeller
Can any one point me to any resources for making graphs in HTML5? Most of resources I have seen through Google use animated graphs, I just want a simple static graph in HTML5. One more thing, I am really very weak in graphs, so a simple, easy to understand solution would be very helpful. I will be using this XML file to display data in graphical format.
US Canada Mortality
Thanks in advance :-)
Check out the new canvas tag. It allows you to draw shapes including rectangles and circles using javascript. Canvas Tutorials
If you're looking for just a standard bar chart, though, you can use the div tag with a specified width, height, and background color. This method avoids the use of javascript.
I am experienced at creating advanced CSS sprites by hand, but I now find myself wondering if it's possible to have one image of vertically repeating background as well as a second image of horizontally repeating (different) background, contained in the same sprite?
It would seem logically impossible, if both images have to truly repeat, I mean think about it, you cannot specify a cropped area for the repeat, so they each would expand the image to where the vertical graphic would appear in the horizontal background and visa-versa.
But I just wanted to make sure I am not missing out on some kind of trick that I am not aware of - thanks for any suggestions or examples to explore.
If you are not certain what I am describing, draw a horizontal line across a paper and now draw a tall vertical line elsewhere on the paper. Now imagine one image repeating across the horizontal and a different image repeating down the vertical. Now try to imagine a sprite that could hold both images and the css rules each would use. It's not possible based on what I have learned but maybe there is a trick I don't know.
Short answer: not possible. :)
What I always do in your case:
Use two:
for vertical repeats
for horizontal repeats
I have a javascript plot on my page with "data point highlighter" functionality: when the mouse hovers over the point, you can see the coordinates popup. I also want to place a semi-transparent "sheen" image layer over the plot to make it look glossy. I can achieve this with the z-index, but the on-mouse-over functionality of the js plot stops working. Is there a way to have the sheen layer on top and still have the on-mouse-over of the layer below (the plot layer)? Many thanks...
I can't think of a way to do that easily, apart from splitting apart the plot image and the area that reacts to the mouseover, and placing the latter above the sheen - which may be bothersome to do.
If it's semi-transparent, though, would it be an option to do the whole thing the other way round? Placing the "sheen" below the plot, and making the plot semi-transparent?
This is not possible. Shame.
Actually, I believe it is possible, but it's a bit of a messy workaround, and, in essence, involves capturing mouse/cursor position x/y location and mapping that to the plot layer -- not the easiest or optimal task, let alone completely inefficient. I realize this is an older question, but thought I'd point this out for future users.
Update: Firefox has a CSS property geared toward this in the 3.6: http://demos.hacks.mozilla.org/openweb/pointer-events/