NYT has just produced this nice chart animation, any idea what tech is behind it?
http://www.nytimes.com/interactive/2014/03/31/science/motorcycle-helmet-laws.html?_r=0
It looks like pretty classical D3 stuff (using SVG under the hood). Not sure how the scroll bar business works, but I see that it doesn't work in IE11, so it probably is library-driven rather than native SVG/JavaScript that generally works well across browsers. The underlying technology of the curve-interpolation can either be done using SMIL (the natural way) or through JavaScript, but interpolating the values of control points of Bezier curves (either quadratic or cubic.) See
http://cs.sru.edu/~ddailey/svg/2011/reshaping.html for examples or curve interpolation. You'll note that Firefox still doesn't handle the second animation on this page, but I suppose I never got around to filing a bug. It should work everywhere else though (except for IE since they don't do SVG/SMIL).
Related
Turns out I’m working with the Autodesk Forge viewer and Three.js, trying to render 2D text that can be interacted with (specifically select, rotate, and move).
To do this I am working with meshes (using MeshBasicMaterial, Mesh and TextGeometry) but it turns out that the text does not look perfectly sharp, it presents aliasing and I found that according to the API reference, the antialiasing is not applicable to 2d.
Here are some examples of the problem, as you can see, the more I move away from the plane, the worse the text looks (and even up close it doesn't look perfect):
I have tried to make a test representing the text with a Sprite (despite the fact that it would mean having to change the entire implementation already made with meshes of other functionalities) but apart from the fact that I cannot see it, I have seen example images and they do not appear either well: aliasing is visible from a distance and it looks really blurry up close. Here some examples:
Is there a way to correct this problem or is this the most I can get in 2D? I've tried searching for information on this but can't find anything helpful. And what has puzzled me the most has been realizing that antialiasing was not applicable in the case of 2d, like making it clear that nothing can be done to fix it.
I would be very grateful if you could solve my doubts, thank you very much in advance for your help.
An easier alternative, is to just use a higher pixel ratio for the renderer...
window.devicePixelRatio=2;
viewer.resize();
For example, using the custom geometry text, from Joao's demo, you can see the same aliasing issue at DPR=0.5 and DPR=1.0 ...
https://joaomartins-forge.github.io/textgeometry-sample/
But when I set the DPR=2.0, the text looks clean. The trade off is rendering performance, but your 2D drawings may be simple enough that it won't matter. You can use a 'mouse up' camera settle trick, to switch between DPR of 1 and 2, if you want a better UX experience.
There are a few ways to solve this aliasing issue for 2D (and 3D text).
The way I would recommend for your use case, is to use DIV elements (THREE.CSS3DRenderer), instead of text converted into three.js tessellated triangle geometry, as shown in this blog post:
https://forge.autodesk.com/blog/how-do-you-add-labels-forge-viewer
You can find out more information about THREE.CSS3DRenderer here:
https://threejs.org/docs/#examples/en/renderers/CSS3DRenderer
and an Example here: https://threejs.org/examples/#css3d_periodictable
Using CSS3DRenderer instead of CSS2DRenderer, means you will get the correct scaling (and rotation) of the div element as you zoom into your 2D drawing and the mathematics inside the calculation for the matrix transform has less edge-cases.
Once you are using DIV elements for your text, you will notice that the text is sharper and has no aliasing issues. That's because it is not being rasterized by the webGL pipeline, but by the SKIA library used by chrome/firefox/opera/etc for rasterizing text.
There is one final option, that uses signed-distance fields, but it's probably overkill for what you need.
Let me know if you want some example code.
I have to create a pretty complex map which is divided in pieces, which themselves are each pretty complex polygonal structures. These are given to me as transparent PNGs. Obviously i can't just use the rectangular PNG itself to define each mouse-sensitive area.
First and last thing that came to my mind was using Image-Maps.
But before i go down that road, i wanted to ask whether anyone could think of a more modern solution to this?
Browser support requirements are IE >= 7, FF >= 3, newer Chrome & Opera. So usage of CANVAS might not be an option.
When designing web documents, you should always choose the thing which come closes to expressing your intent, so that your documents are most adaptable to use-cases you didn't think of.
An image map is entirely appropriate for placing links on map images. <canvas> makes your document less interpretable. SVG would be a reasonable choice if it fits your data well, but is less widely implemented than image maps.
SVG would be a good choice, there are plugins to add compatibility for ancient IE versions. There's nothing really wrong with maps, just make sure it's really clear where the links go as the status bar doesn't have the info like a normal link.
IE7 won't do SVG or Canvas (unless you like plugins as Mr. Bradshaw points out), and while VML might work there, it is a quagmire. You could use some javascript to compute point-in-polygon on mousemove. But really, image-maps (either client-side or server-side) will probably be the simplest approach.
I'm trying to make a wheel, which will be sliced into different coloured sections (kinda like a pie chart) but they may have extra elements on top of them, e.g., a stitched border across the borders at the side and an icon at the edge of each, etc.
So my question is do I just use css3 (examples: http://www.css3shapes.com/)
and then use something like http://css3pie.com/ for Internet explorer 6-9?
Or am I just better off doing it in Photoshop and slapping it on a div as a background image? And use absolute positioning for extra elements?
Which is the best practice?
I would (and do) use PHP's GD extension to create a pie chart based on input data, save the image generated by that, and optionally generate an imagemap so parts of the chart can be highlighted, have tooltips, etc.
I really wouldn't use CSS for drawing shapes. It's hacky at best, and can get really messy. Quite a few of the examples in the cssshapes site you linked to don't even work in Firefox 3.6 - which is still quite heavily used - let alone other older browsers, and in IE you'd really struggle; css3pie won't give you the kind of fine-grained control you'd need for a pie chart.
If you want to draw stuff on the browser using on the client side, there are a number of ways to do so without resorting to hacks like CSS shapes.
Both SVG and Canvas are relatively new technologies for placing and manipulating graphics on the browser. SVG draws vector graphics and Canvas is for pixel-based graphics.
Both of them are supported on a wide variety of browsers. The obvious exception being IE8 and earlier. However, IE does support an alternative graphics format called VML, and there are javascript tools for IE which allow it to convert both SVG and Canvas into VML, so you can use either of them and they will work in IE using these tools, which makes both SVG and Canvas effectively cross-browser compatible.
But if you're drawing pie charts, or similar sorts of things, my personal recommendation would be to use the Raphael library. This is a javascript library which works in all browsers, and can be used to draw and animate pretty much anything, including graphs and charts (it even has a separate graphing add-on library. See the demos on those two sites to see what it's capable of; I think you'll be impressed. (I certainly was)
Hope that helps.
I noticed that every browser renders the border-style: inset; property differently, so I had two questions:
Why do the browsers render it differently? How can there be so many different algorithms for this? Most of all, some browsers look wrong with it!
Since I can't rely on the inset attribute working, I was wondering what the proper "algorithm" is? I typically go 16 lighter on top/left and 16 darker on bottom/right (ie. #666666 is the background, so #767676 is the top/left and #565656 is the bottom/right)
I need to know what to use (generally speaking) because I'm having trouble making my styles inset, and I clearly can't use the inset properly so I have to manually change the colors. Sometimes, however, it just doesn't look right (if it's too dark). There has to be a good algorithm out there for this?
I've looked for web resources on the issue (such as a "what colors your borders need to be to make this look inset!" tool) or anything that could help, and found nothing.
Think of it this way: If someone were making something in a paint program and didn't have an inset effects button, what colors would all four of their borders be, given the main color is _____?
There HAS to be a general algorithm for this that I can't find...
Edit: I want to point back to my example of using a paint program that needed an inset style. Can someone give me an example of what they'd use for this? (Is this part of the question better directs on the designers stack?)
Quote: "1. Why do the browsers render it differently?"
I'm sure each browser does it differently because they think theirs looks best. IE probably does it to look good in Windows. Safari is making theirs consistent with the look of Mac OS. Firefox in keeping with that browser's other elements, etc. (and like stated by thirtydot, it has not been standardized.)
Quote: "2. Since I can't rely on the inset attribute working, I was wondering what the proper 'algorithm' is?"
You could try to reverse engineer it if it's that important. Setup a test page and call it up in a browser. Use an eye-dropper/color-picker utility to pick off the various colors. With enough samples, you should be able to find a pattern for that one browser.
Quote: "There HAS to be a general algorithm for this that I can't find..."
Not if every browser does it differently. Each will have their own algorithm.
EDIT to address OP's follow-up:
Quote: "Edit: I want to point back to my example of using a paint program that needed an inset style. Can someone give me an example of what they'd use for this? (Is this part of the question better directs on the designers stack?)"
You seem to be looking for one specific answer where one does not exist. I cannot give you an example of what I'd use since modern graphics programs (Photoshop) will do this for me and then give me enough options that, when combined, literally provide millions of results; border color, highlight color, shadow color, depth, angle, thickness, profile, etc. Ask 20 people what they think is the "perfect" inset and you'll get 20 different answers (opinions really) and then we're back to the reason it looks different in each browser (see #1 above). So yes, in the context of "programming" questions, this last part of your OP is probably off-topic.
Additional Random Thoughts:
Why is border-style not Standardized? IMHO, I'm thinking this property is simply not used enough to warrant any major effort to Standardize or perhaps there is much disagreement on this in the Standards community. I imagine that all the CSS properties requiring Standardization are prioritized in some fashion (popularity, usefulness?) and this one just didn't yet make the cut or bring everyone together. Personally, I think a property like this is tied too closely to ever-changing trends. i.e. - 10 years ago, we used to see to see lots of tables with very thick "embossed" borders. These days, many designs use few borders or very thin borders, if any. Again, this is only a matter of taste and opinion.
I have an answer to this:
Why do the browsers render it differently? How can there be so many
different algorithms for this? Most of
all, some browsers look wrong with it!
See: http://www.w3.org/TR/CSS21/box.html#border-style-properties
The color of borders drawn for values
of 'groove', 'ridge', 'inset', and
'outset' depends on the element's
border color properties, but UAs may
choose their own algorithm to
calculate the actual colors used. For
instance, if the 'border-color' has
the value 'silver', then a UA could
use a gradient of colors from white to
dark gray to indicate a sloping
border.
That's the reason implementations differ - because it wasn't standardized.
I would say for lighter side add 20% to each of the rgb values, and for the dark side remove 20% from each RGB value..
I'm trying to create a trapeze like shape using any number of techinques so that it will be as much as possible. the shape i'm trying to create a shape like this:
(there will be content inside the shape [imgs & txt])
so far, the possible ways of doing that are: masking (webkit) and SVG effects on html content (firefox). but I cant seem to find any way to make this work with IE and opera.
So if anyone could show me how to do this, it will be greatly appreciated.
There are a few options for creating non-rectangular shapes using CSS, but they are all hacks. This isn't something that you'd normally expect to do using CSS.
The most well known technique is triangles made using borders. It is very much a hack, and would require using multiple elements for a single shape. I wouldn't suggest using it on a production site.
The other CSS solution I can think of would be to use an extreme border-radius setting to modify the shape of the box. This is less hacky, but won't work in IE8 and lower, so fails your criteria.
You say you've tried the SVG approach and given up on it because it doesn't work in IE8. It's worth pointing out that while IE doesn't support SVG, it does support VML, which is a competing vector graphics format. SVG is now standardised, so VML will fade away, but older IEs will continue to support it.
Therefore the solution I'd go with would be to use SVG by default, and VML instead on IE7/8. The good news is that there are several Javascript solutions which make this easy.
One is Raphael, which allows you to draw SVG/VML images using Javascript. Commonly used for real-time graphs, etc.
There are also a number of solutions which simply convert SVG to VML. For example http://code.google.com/p/svg2vml/. But there are several others available.
Hope that helps.
As you suggest, masking and SVG are the way to go. These will be supported in future browsers. If you must be backwards compatible with IE, look into the IE "filter" for CSS (google "ie filter").
Be forewarned: It's very unintuitive (compared to CSS3) and generally a bitch to work with. If your goal is to make the page look identical to the CSS3 version, it will be difficult and you're probably better off using images.