Merken

SVG Charts and Graphics with Ruby

Zitierlink des Filmsegments
Embed Code

Automatisierte Medienanalyse

Beta
Erkannte Entitäten
Sprachtranskript
the the and and so in case he hasn't numbing my name is star Wars I work for honey badger we do exceptions monitoring of timelines of like that and today we're going to be talking about std charging graphics in Ruby and I wanted to do is talk I was excited about doing this talk because well when we use a G and people people to use it as a viet In of SCG is actually quite simple there's really no reason why we can't manipulate ourselves in real life is nothing magical about SPG whereas the way that a lot of developers that that I've talked to some sort of CSC Jesus this really complicated black that you have to use all these tools in order to be able to work but this is not the case so who SEG is
is really 1 of the I think 1 of the most amazing technological comebacks of all time is is a rocky of web standards that and deliver services you gotta go back
to 1999 which is the year that came around an XML have like just been invented people thought it was gonna save the world it was amazing he were using KDE and if you're going if you were to go down to your local waters
and and pick up a copy of X and magazines as I said you might be forgiven for you being a little bit disappointed and how the Web is turned out the this I know I am I she needed to work because I thought I know at least I would be browsing the web 3 D using
Theorem Molineaux interacting with the birthday cake can really big rabbit this is a creepiest play image I was able findable by the way not that any can away from tax but at least not with using the
XSLT by now for all that and you know j-th didn't actually mention this but there's some very exciting functionality being added to rails 5 this is in the family of XSLT right but 1 of the standards
SEG is actually making a comeback is actually a sender and in case you don't know offhand as you stand for scalable vector
graphics the big difference here is that ball Rasta graphic our pixels and so if you have a 10 by 10 Rasta image able at about 2 thousand by thousand you know was you work for CSI Miami is gonna look like crap but but but vector images are made out of Mac and so they have real no real pixel dimensions you can scale up again whatever and that super-important lately because like the guys
who make computer monitors just on a roll by I don't know what they have what they've been like drinking by what some of accounts counselor coffee and he has so I'm I'm sure a lot of you have random act but prose I just got 1 it's awesome has got know big for k minor for my desk as awesome but all this stuff is made my life a little bit more difficult as a web developer because you know I used to be able to export an image like a logo from Photoshop and be
able to assume that it would look you know equally crappy on all screens but but now I take that logo and of and view on a retina spring entries in this you know it's blurrier Watson crappy than those on the standards and so OK so easy fix radius is the blow everything up by twice the size but then you have files so twice the size you know so the the problem being sent over mobile networks and once so uh once retina true comes out onto AKA Mac Pro you distributed you have to be made a whole other set of assets that are even bigger it's is not fun so SEG fixes as it it makes a lot of pretty
so the rails is actually a it's actually at an SVG file so you can go on down that from the website but on annoyingly from the keynote does not support SVG so this is actually pain a screenshot yeah so this this thing is in a scale opera down
but in addition the logos you can use ICT for animations from gains for the money's flash for in the past I I I know that's a bad word
he also visualization and uh D 3 is obviously the big boy this group right you could even do amazing they the three-character cannot look that I suggest that go look stroll the demos and you'll be amazed by just the sheer variety of visualizations that you can make with but with the 3 for example
late you can plot the spread of the exam the virus the virus turns on this on these throughout the US if you want it's pretty bad for California you know
you can you draw a line node graphs showing the connections between all the people turn into the zombies and buy it I know I just as they like I'm ready I'm ready for this
slide that you know really inspired me so I gotta go back in the mail from Amazon Prime but in a is in there may not be obvious the D 3 is actually the backbone for a lot of more
prosaic graphing applications I mean of graphene and graphene frameworks like rickshaw used to 3 under the blood to do a lot of the heavy lifting which is is great but I mean these are a couple of little almost sparkline graphs that we use at honey that our user interface we use in show like memory usage CPU load stuff like that the really simple graphs and I was going to recruit as number fronting code I was looking for for places where I could cut JavaScript because of what 1 might favor is to to cut the number of kilobytes adjusted the people down before a site works and I
I noticed something which is that the code on the right which is D 3 it's it's a hundred kilobytes minified it if developers run go for 5 minutes the I held the down arrow down for 5 minutes and recorded and the cut on the left is a code that is is as he did is being generated as I I started the suspected there might
be some way efficiency gains that that we can achieve and I opened up the the Chrome web Inspector I looked at best reduce the generated is super simple is just XML so I'm like why can't I do some really of and it turned out bulletins had to to the ego and those of us who G. I which I didn't not so the 1st thing about as he he was a look this is
what it looks like this x amount you don't type a anything like that this is perfectly valid and to use G in Europe your web
applications web pages you just both the easiest way is to refer to it as an
image and tackled you get lawyers he hands and knowledge cashing in and it works sports works out great but this is a big but you can't use a
JavaScript or CSS to manipulate the graphics at that point because it's an external resource so runs into the sandboxing security stuff that the browsers but in the West however you can embed SET directly into
your HTML and when you do this we use a copy the STD document in your HTML it works great and now you can certainly use JavaScript and CSS to
do amazing things and I will talk about I assume that in a minute 1st of all let's let's think a quick tour of in HTML and this is 1 of the points on the cross as it is not that differ from HTML it you know you have at paragraph tag you're heading taxi of all these tags to describe how document is marked up and in SVG you have all these tags that describe shapes and in other graphics primitives so to draw a circle all you it is kind of intuitive but
used to circle back and since this is XML you just pass anuria active users circle like how but the reduces the center point all that as XML attributes and I've given it also stroke and fill here edges so to make it a little bit more a pretty so in addition circles you got where we were uh really the uh ellipses you get squares with a variety of corner rounding options but if use CSS at and you can see from the way guys by the corner rounding features you got lines you got polylines which are a bunch of lines strong and and you got paths which are a bunch of lines arcs curves whatever strong and and you may print any shape of that you got text which is is text you got it and perhaps
surprisingly you can actually embed Rasta images in your SEG you can refer them externally like you might with that each signal image tag you can embed them be 64 encoded I once again there you can apply filters to them so pretty much anything you can imagine like Photoshop doing circa 1990 80 you can you can do an SVG so here I've saturated damage made a black and white and can also blurred that you can do clipping masks you can get you can do a lot of things that In the past you may have just automatically turn to something like image matter to accomplish and what is you can do client-side with SVG and so is pretty cool so that case you for SEG
elements of work like each you know elements but the the facilitates sink sink and for 2nd the the so what is i mean well you can give SEG elements you given
classes you can give them IDC and then once once you have those attached to the the elements like you know the circle or square whatever then you can apply CSS to them you can add fills strokes at at etc. The the active use in CSS are there different from HTML CSS at it's but I mean it is not really that complicated instead of instead of water use outlines of color you stop useful non-support of or you stroke is of color useful and and so on this is about 5 of them and moreover you can use JavaScript then you're playing dollars scripted G query it doesn't matter to get handles on these SEG elements you can manipulate them you can change the text you can change the font you can do whatever you can do with normal Don elements and this this may seem like I'm disappointed we can do some really cool stuff with for example back when I was the best backwards freelancing I had a client who wanted to do a online so flier creator where the designers come up with a the designers come up with the templates in Illustrator the designers and I about code and then they want exporters and import them into the the web app which then can that and then users can go in and customize the templates as they can actually do that use the exported as Fiji into the dance and use JavaScript to insert the users at sort custom data into the template and it works really well and 1
other thing I just wanna bring up is that you can you can use as for spreadsheets and this has a lot of advantage of something like a file icon because I'm far icons are treated as fonts by the operating system so the anti-aliased from they also are very semantic you know these these high-level character codes that don't have any relation to the thing that they're representing words in SEG you can say OK here's a shade it's a hot it's called hot so draw me hot give a class of red hot and the style that was the assassin red so it was an idea is knowing everything there is to know about STG but the but this starts actually
wrong no way the other half the battle the part is not knowing it's is not lasers is actually more charts and so was talk about shirts like
image and we use is our application of these were sort of inspiration for this talk and so so it's and build buildings the 1st was to a bar chart Botrytis super easy but I'm not going to the go over this in Ruby right now because I don't want to see that how that CG works should be sort of painfully obvious how to implement this in Ruby because it's actually a really simple so a bar chart is is just a bunch rectangles next to 1
another as I've drawn 3 rectangles and the Rangers is is like 50 75 and 100 those are the heights and the other is 3 black rectangles this is a really crappy bar-chart because any results like but ugly but 2nd upside down and that has to do with the fact that while SEG like most computer graphics SPK has its origin origin in the top left of the screen whereas most of our simple charts it will be making had their origins and the bottom line and so that there are a couple ways around this right you can add a sum for a mere transform using they have very they're very powerful and tools for transforming shapes but just to keep things simple for now I'm going to add at y coordinates it
is line everything but the box will add some
styling and was he's a stroke Stroke Width and fill attributes and suddenly we have OK looking bar chart the but what about the activity enough imaginer when had a when when the mouse hovers over each foreigner show the value that chart of that bar when faced with problems like this I I to the front of the easiest way to approach and is to just treat as Fiji as if it were HTML like what I do if these bars were made out of ideas and yet additional well the 1st thing I would do is I'll just draw the text on the box and that's what I've done here that the code I have up there is just for 1 barges to keep things simple I'm introducing a new tab to you it's the gene tag that stands for group and inside the group tag I've got a rectangle and some text no 1 other reason by introducing the group tag is because it allows me in my CSS to do cool thing where I hide the text by default by setting the opacity is 0 but when you hover over the group and it sets the text inside the group to an opacity of 1 with a nice little the fate and effects so I might going up here in Liberian pretend that this is pretty where this is anything I would I would show my customers but I'm sure you can see how this is a very real start to something you can make a decent looking at a decent hidden chart of this so moving on to line charts not line charts are
going to introduce us to the scariest STG element of all time the path pretty scary
so what are the things that makes the makes possible the more difficult than I tags like circle and square and all that that whole circle you have these pretty obvious activities like a radius and center point with that you have this d after the and the deed added you contains a list of commands in the drawing commands so I if you've ever seen like an old-school plotter like 1 that actually holds the pen and place and moves it around the the pacman works a lot like that so let's step through the commands were passing passing by the d after the or 1st we talked to move to 0 10 don't draw anything just move the the pen next we draw a line from the composition to 10 12 draw another line drawn to more lines and that gives us a really basic crappy aligned line will sparkline so what I want to make this more of an area chart and I wanted to to fill in the area underneath it was that there is there's no real CSS the tricks that I can do to make this happen so I just draw another pass I don't stroke it with anything and I fill it with grace and the only real difference between this path in the last is that this pattern is close and that's what that z command at the bottom dust and path has a lot of different command so if you're interested in this stuff the Creagest going finding a list of them and and playing around this pretty powerful so let's continue making this a little bit nicer black dots to the world of points are and those just circle tags thing so preparing this presentation I kind of felt like a play this stuff is so dumb that I was feel bad talking about is like the the as doctors to circle back but I B I I gave it to another place and some people some good feedback so so what style it now companies using the same 3 activities as before using Phil's stroke Stroke and applying those to the dots to the line to the field and you can make this is nice as fast you wanted to you could use gradients so if you wanted to you could that you could do you can use the same CSS trick to to show that the values in each dot or you could use JavaScript for that there's no reason you couldn't you just add 80 that handler to the doctor whatever or at a mouse-over handler to the graph and the and and do things so in case it is ever notice like but the math here is pretty simple but when I went into this this thing I was I was a little bit concerned about the matter but the map is is quite simple a
slide you doing these sort of as far as you doing the simple charts and this is you know for the charts of the temperature at that we typically use and what applications like they're not that are to be scientifically precise and so the basic matters is good enough generally there's only 2 steps you take your raw data you convert that to some sort of graphs space data for example imagine I have a bunch of raw data points and I wanna convert those to a scale of 0 to 100 and cause I on display percentages what to do that I use something like a scale
function and then imagine that I need to position those uh so that the bottom lines up so we don't have upside-down graph you could use an inverse function or something like that I'm not saying these are particularly useful functions for you I'm just showing you the level of complexity we're dealing so we this summer bump it up and match
the because I was so the the donor
charts the errors in the owner to make 100 I don't know that counts upon and that that's 1 way so this Doniger is made up of 2 paths and the 1st path is on the right it's a it's orange and 2nd Pappas on left it's great think it is important that these paths are a
little bit more complicated than with a line chart so 1st and if you look at the D actually were moving to point 10 0 and that's the rightmost point then were telling the catalyst draw an arc to draw out the radius of 10 and it says 10 twice because of the circular arc and you can actually do have elliptical arcs and those would have 2 different radius and there's a bunch of zeros and ones and those are just flags that tell tell us he which way to draw a lot and stuff like that and there are a bunch of uh unrealistically pretty there to unrealistically precise numbers and those are important
as a 2nd step we just use the line command to draw another line and were then we add another art swinging back the other way in and finally we add the command to close arc so this point once I got this far as pretty happy with myself at except is 1 problem I the chart is supposed to represent an 0 to 100 cent like a pie chart but 0 starts at a I guess 0 it's horizontal and as numbered is bigger it sweeps this way I prefer to be like a clock just because clocks can make sense to me so I prefer to be where zeros at the top and as a gets bigger goes around and I guess you know if I had a warm so lazy I could go back and do all the math differently and you know figure out the new points but I am lazy so I is added to transform actually were not really don't talk about this and much in this talk but as G has a huge it's super powerful when it comes to being able to apply transforms to shapes in elements is drawn and being able to control sort of but the coordinate space plate is a ton of stuff you can do so not only get orange and I'll add another path and this path
works just like the last 1 so not gonna step through it but this is a great so how do you get these big numbers of it's really difficult times by thinking about it too that is to come up with the Cartesian coordinates for the points on a circle of that's as almost impossible but it becomes really simple when
you express the problem in terms of polar coordinates and because importance all we have 4 points to define our doughnuts segment and a super easily uh represented as you know percentage of the circle complete or degrees and a radius now the percentage we know because that's our data were trying to represent and the radius is just an arbitrary it's something we set based on how you know how big we like adornments once you have that once you realize that then it's is a simple matter
of plugging it into radial to a the Cartesian coordinates formula and that you the needed here unrealistically precise long numbers the so all all this is great how do you how do you implement and be like what is this look like that I am not willing to spend the time and time on this because what it is because it's so
simple and there's a ton of ways you can do this right STG is just XML i it works a lot like it should on spec you can use
a builder and I really wonder this way just because it's and has not my style but you know you can use it works you can construct SEG using Hamel you can do it you can you can construct it with in the original document or are you can actually create a complete stand-alone SVG files as as handle there's there's no reason you can't and if you wanna get really sort quick and dirty you can
just he string concatenation was I wouldn't know anything about that and but I was gonna take a drink of water and does ponder matching we I mean string concatenation is ugly by is quick and dirty and if you have if you using your own data there's no there's no danger of of cross-site scripting anything we like that so you know why not all numbers so I I hope I hope I've given you a decent case for at least going and play around the city of learning what you can do with CG because you know it's pretty it's pretty fun and once you learn a couple of things doors really start opening and this is something we can really I don't take your front in web development to the next level I think because it's whole complex set of tools that almost nobody uses for what for whatever reasons while out there there are a couple reasons because STT sites in life
and and most of them are
text the SCG the the most glaring problem procedures is that there's no there's no word wrapping there's no support for multiline text which kind of makes sense when you consider its origins as you know trying to replace the file format for illustrator Illustrator in that In the context is going to be laying out the text however illustrator wants to but for us is what developers it's a real pain in the neck i'm because you actually have
to break up the text in the spans and position each of those fans a so the the lesson here is to avoid doing complicated textual stuffed with STD if you can and if you can't then and there are some JavaScript solutions for for laying out text wrapping there they're not the prettiest saying that they work views on time is that this the 2nd major problem with a G is that nobody's really until recently people have been using and so the
documentation is not the most user-friendly staff in the world if you if you google around you can find a recent tutorials that the and I have to do a lot with irregular that is unified java script and stuff like that but if it just comes down to 2 learning basic SVG like what you need to know a lot of times you find it that Google inferring for advances on problem leads you to a specification page and while specification pages can be complete they're not really that you'd like to know what you want up with stuff about nested transformation matrices like when you just trying to figure out how to make something blue and it all of work of and the 3rd major problem all this that major but
if you have to use it if users have to be able to use i.e. or below but it is not gonna work for you and I mean I E 9 uh supports this you pretty well and more modern browsers are pretty standard in there and the implementation but you know you 99 you'll find some weirdness like things will work but you'll have to do this in a completely different way than every other router and I I I know that that's that's that's weird thinking that I would ever do that it's a case of in addition there is you another may be issues of older versions of Android stuff like that so just just understanding Use Case before you get into and if you are interested in learning more about this and there's a really good book and I just got
on trashing Microsoft Internet Explorer but actually published a really good book about this so the hypocrites if have the I'm sorry I've got I'm from Seattle so I got a poker people from Redmond of American so anyway it's a really good luck on how the minute if you're interested so so yes so thank you if you're interested
in learning more about the stuff i'd posts blog posts occasionally stuff and all posted on the Twitter and yet and that's it does anybody have any questions OK the the question was what is a good non-traumatic programmatic way to a build STG if you if you were just sort of getting started what what what I was just getting started with that I found that the the easiest thing to do and the simplest thing was just use my normal text editor and uh and load the file and in Chrome microM can open SVG files and just you know do it like you and how to develop additional really make a change to happens make another change who happens in be your head against a wall for an hour and then I get and so you can do that and another interesting thing that you can do that I mentioned briefly is you can actually export of somewhat readable SEG from Illustrator so if you're dealing with something like a logo and you see how that's put together you can export as Fiji from illustrate hand that and what the cool things about that is that if you have an icon ur-logo and you want to tweak the color that is so that you don't have to go back into Illustrator and do that use open it up as a text file and change the text OK so the question was on what unit were all my numbers and I thought you were my friend use that as a question I was only glossing over so as is kind of this kind of weird about units because it's a scalable format is a vector format but a lot of times you'll see units expressed in pixels which sort of seems a little bit a little bit weird and that's essentially what happens is that SCG has a pretty sophisticated system for defining oracle view boxes and you drawing with in those few boxes so you can just define of the boxes like 100 pixel by 100 pixels wide and then if you if you draw something that's a 10 it will assume that you mean 10 pixels and then sold to 1 10th of the height or whatever and once I get scale it'll get scaled up in proportion but yeah you can also you can also make non-scalable Fiji which is kind of this category actually set 6 dimensions and have everything the exact pixels if you want but but it the kind the kind limits a point of point OK so the question is if you have a bunch of large and as you filed some designers given you uh how do you do yeah how do you reduce the file size so it kind of depends my 1st step would be to open up as G in a text editor and sort of see what it looks like if you're exporting from say illustrator which is how over that's how the most complex strategy files I've seen have come to me as the if a hurts were from illustrated all find that it may be doing weird things and maybe embedding a 20 megabyte image and in the middle of the a SVG file and in that case you might want to you know my own open up and illustrator reduce the size of an image and and restated but if it if there's no if if there is no obvious structural problems with the bile there's no obvious place where you can you can get efficiency then I definitely look into there is an S G I think it's best be gz that's a compressed as you format but you can also serve them as uh as compressed files that if you're if you're loading density file as a separate asset you can serve as a compressed jesus compressed file so we III much is any magic bullets there by but there are a few things you can do I haven't but the question was what happens when when the you filed become larger and become uh and perform the slow and my answer to that is only a prelude on on your device but you're if you're doing it with an older and tablet or something then it is probably a lot slower than you're on a Mac book I personally have have dealt with and you know in addition to these little grass and stuff but I personally dealt with some some fairly complex SVG files and this they they seem to load and perform reasonably well I haven't done a lot of these like crazy visualisations were you have been 20 thousand points and lines and stuff so I don't have any experience here but but uh yeah our were smaller and medium-scale files I've experienced no performance problems and and M 1 benefit that he does have over campus is that what can this once it's so once you drawn something to the screen it's there as as pixels but with SCG view of these have that ability to in theory sort of see that as a separate file to exporter the news in other contexts and different sizes and so forth OK so the question was what whatever the complex SEG file be slower to load than arrested file and I I wanna say it depends but I know that's not all plants and all that was take for example but but a little bit like the the reals complement I have a really small resolution at 100 pixel by 100 pixels but uh the pain version of that is going to be is going to be smaller than SCG version probably but once you start serving larger versions that filed the SVG file the the SEG starts winning and in terms of file size by a lot and so if you need to serve like a 500 pixel by 500 pixels down at 1 thousand pixel version of that same and then the acid divergence can be so be a lot smaller probably and in terms of get in terms in terms of complexity it again it's a really just it it really it really just depends but i've generally found that when I've replaced image assets with SEGS that's in the STG is smaller yeah so the question is is SCG capable of being dynamically sir scaled changed on the fly based on your user data and yes absolutely yes but there are you can animate SEG using CSS 3 transformations there are a lot of jobs require easily do this like a snap and which I showed him a screenshot and there's also a fruit banana that actually a kind of clunky SEG native animation way of doing things but the you can definitely do this and it's like if you go to if you look at the stack website and it's that js then you'll see a lot of good examples of AS being dynamically generated on the fly and 93 does not to like for charts are updated automatically and stuff a battle city about a sort of a missing you yell yeah 5 seconds for 3 to 1 or is free thank you this
might due his
Videospiel
Ausnahmebehandlung
Ungerichteter Graph
Softwareentwickler
Quick-Sort
Statechart
Dienst <Informatik>
Benutzerbeteiligung
Wasserdampftafel
Standardabweichung
Benutzerbeteiligung
Theorem
Bildgebendes Verfahren
Lineares Funktional
Subtraktion
Pixel
Reelle Zahl
Hausdorff-Dimension
Vektor <Datentyp>
Familie <Mathematik>
Vektorraum
Bildgebendes Verfahren
Standardabweichung
Quelle <Physik>
Videospiel
Radius
Bit
Sichtenkonzept
Datennetz
Computer
Ungerichteter Graph
Elektronische Publikation
Menge
Randomisierung
Web-Designer
Gleitendes Mittel
Bildgebendes Verfahren
Standardabweichung
Addition
Zentrische Streckung
Wort <Informatik>
Elektronische Publikation
Computervirus
Rechter Winkel
Gruppenkeim
Visualisierung
Varietät <Mathematik>
Einfach zusammenhängender Raum
Web Site
Benutzeroberfläche
Zahlenbereich
Kartesische Koordinaten
Ungerichteter Graph
Primideal
Zentraleinheit
Framework <Informatik>
Code
Rechenschieber
Knotenmenge
Last
Festspeicher
E-Mail
Gerade
Benutzerbeteiligung
Rechter Winkel
Mailbox
Zeitrichtung
Benutzerführung
Softwareentwickler
Schnitt <Graphentheorie>
Code
Benutzerbeteiligung
Punkt
Menge
Computersicherheit
Datentyp
Kartesische Koordinaten
Web-Seite
Bildgebendes Verfahren
Shape <Informatik>
Kreisfläche
Punkt
Graphische Primitive
Addition
Filter <Stochastik>
Bit
Kreisfläche
Punkt
Eingebettetes System
Verdeckungsrechnung
Kreisbogen
Konfiguration <Informatik>
Quadratzahl
Ellipse
Gerade
Bildgebendes Verfahren
Attributierte Grammatik
Varietät <Mathematik>
Kreisfläche
Template
Wasserdampftafel
Web-Applikation
Klasse <Mathematik>
Abfrage
Element <Mathematik>
Quick-Sort
Code
Client
Quadratzahl
Font
Kantenfärbung
Normalvektor
Tabellenkalkulation
Font
LASER <Mikrocomputer>
Netzbetriebssystem
Mereologie
Codierung
Wort <Informatik>
Störungstheorie
Elektronische Publikation
Bildschirmsymbol
Kombinatorische Gruppentheorie
Shape <Informatik>
Gewichtete Summe
Computergraphik <Kunst>
Rechter Winkel
Gebäude <Mathematik>
Vererbungshierarchie
Rechteck
Kartesische Koordinaten
Gerade
Quick-Sort
Bildgebendes Verfahren
Touchscreen
Soundverarbeitung
Quader
Browser
Cliquenweite
Gruppenkeim
Rechteck
Default
Code
Gerade
Attributierte Grammatik
Rückkopplung
Radius
Subtraktion
Bit
Kreisfläche
Punkt
Plotter
Mathematisierung
Mailing-Liste
Ungerichteter Graph
Element <Mathematik>
Kombinatorische Gruppentheorie
Gradient
Fehlertoleranz
Mapping <Computergraphik>
Skalarprodukt
Quadratzahl
Datenfeld
Flächeninhalt
Minimum
Mustersprache
Message-Passing
Gerade
Zentrische Streckung
Lineares Funktional
Punkt
Matching <Graphentheorie>
Datensichtgerät
Kartesische Koordinaten
Ungerichteter Graph
Komplex <Algebra>
Quick-Sort
Raum-Zeit
Übergang
Rechenschieber
Rohdaten
Umkehrfunktion
Minimum
Gerade
Fehlermeldung
Radius
Shape <Informatik>
Punkt
Fahne <Mathematik>
Mathematisierung
Vererbungshierarchie
Zahlenbereich
Element <Mathematik>
Figurierte Zahl
Raum-Zeit
Kreisdiagramm
Gerade
Kreisbogen
Eins
Radius
Vervollständigung <Mathematik>
Minimalgrad
Kreisfläche
Punkt
Zahlenbereich
Term
Zahlenbereich
Videospiel
Web Site
Cross-site scripting
Vervollständigung <Mathematik>
Menge
Wasserdampftafel
Zahlenbereich
Web-Designer
Elektronische Publikation
Komplex <Algebra>
Übergang
Zeichenkette
Dateiformat
Wort <Informatik>
Kontextbezogenes System
Softwareentwickler
Algorithmische Programmiersprache
Umwandlungsenthalpie
Sichtenkonzept
Darstellungsmatrix
Ortsoperator
Fächer <Mathematik>
Stab
Applet
Skript <Programm>
Statechart
Homepage
Addition
Browser
Versionsverwaltung
Implementierung
Router
Humanoider Roboter
Standardabweichung
Bit
Punkt
Web log
Atomarität <Informatik>
Versionsverwaltung
Ungerichteter Graph
Komplex <Algebra>
Einheit <Mathematik>
Prozess <Informatik>
Visualisierung
Bildauflösung
Divergenz <Vektoranalysis>
Addition
Zentrische Streckung
Sichtenkonzept
Kategorie <Mathematik>
Güte der Anpassung
Kontextbezogenes System
Bildschirmsymbol
Dichte <Physik>
Texteditor
Twitter <Softwareplattform>
Strategisches Spiel
Dateiformat
Benutzerführung
Subtraktion
Web Site
Quader
Hausdorff-Dimension
Mathematisierung
Keller <Informatik>
Zahlenbereich
Transformation <Mathematik>
Term
Physikalische Theorie
Reelle Zahl
Bildgebendes Verfahren
Touchscreen
Schreib-Lese-Kopf
Pixel
Zwei
Vektorraum
Physikalisches System
Elektronische Publikation
Quick-Sort
Offene Menge
Tablet PC
GRASS <Programm>
Kantenfärbung
Normalvektor
Orakel <Informatik>

Metadaten

Formale Metadaten

Titel SVG Charts and Graphics with Ruby
Serientitel RailsConf 2015
Teil 41
Anzahl der Teile 94
Autor Horne, Starr
Lizenz CC-Namensnennung - Weitergabe unter gleichen Bedingungen 3.0 Unported:
Sie dürfen das Werk bzw. den Inhalt zu jedem legalen und nicht-kommerziellen Zweck nutzen, verändern und in unveränderter oder veränderter Form vervielfältigen, verbreiten und öffentlich zugänglich machen, sofern Sie den Namen des Autors/Rechteinhabers in der von ihm festgelegten Weise nennen und das Werk bzw. diesen Inhalt auch in veränderter Form nur unter den Bedingungen dieser Lizenz weitergeben.
DOI 10.5446/30708
Herausgeber Confreaks, LLC
Erscheinungsjahr 2015
Sprache Englisch

Inhaltliche Metadaten

Fachgebiet Informatik
Abstract Many people assume that the only way to add interesting charts and visualizations to their web applications is via JavaScript. But this isn't true. You don't need a 900 kB JavaScript library to generate simple charts. Instead you can use SVG and Ruby. Once you learn how to build your own SVG graphics then it's possible to do cool things like cache them, or use your own CSS and JavaScript to manipulate them. This presentation will show you how.

Ähnliche Filme

Loading...