Bestand wählen
Merken

Dynamic Graphic Composition in Ember

Zitierlink des Filmsegments
Embed Code

Automatisierte Medienanalyse

Beta
Erkannte Entitäten
Sprachtranskript
the end the of the the the the the the the the you the money and per cent on the student here were linear and theory college I also work for a company that does analytics so big part of that job is building data visualizations of women using Amber for about a year and I think that Amber is a really good framework for building data visualizations but also think that most people don't take advantage of it and in the biggest where they can have digitization is kind of interesting in that uh there so many examples of the on the web for how to do it but it's very easy to go from the most vague slightest idea that need to visualize some sort of data but and maybe you need like a bar plot you think you need something like a bar plot and then you who would you know maybe something along the lines of 150 3 members chart and and that's all there is to it because you have a complete working example in almost every single case so this is this is really great and but also think there's somewhat of an issue with learning exclusively examples right imagine if you're learning some other subject like NBC uh if the only way you learned NBC was treated used examples you will learn a very well and I think data visualization is somewhere in the same way that the general principles that underlie as a whole and yet it seems like no 1 ever talks about that there always focused on very specific types of visualisations so what I wanna do today is think about datavisualization more general sense and specifically on asked this
question how do we split statistical graphic in parts the about if you think about member but especially the framework has progressed over the years and most of what we build novel applications take the form of components and number 2 . 0 this will only continue to be the case that he thought you had controllers and use it so it just kidding everything is a component and so it's it's someone important to uh a really step back and think like what is this mean for Howard building applications in from the architectural standpoint and it means that you any any problem having application you're attacking the composition right and so for any problem you can ask the question you know how I break this problem down in parts and solid is same thing with data visualization and I think that's going to be a good approach in and if we do this will be a couple benefits but 1st and foremost if we have some problems but it down in winter parts of we're to have to think about each part in isolation easily right so we have some complicated data visualization maybe it's a scatter plot the histogram or something like that but if we break that down into separate parts we don't have to think about it all at once right that matter how smart you are you can only keep so many parts of the moving application you head so a better approach is to put something of parts and then you have to think it's hard if we also do this where did I get some value out knowing what parts of the graphic art and so if you know different parts of Africa are you also know what you can change right so that there are name the graphics out there right the scatter plot is a typographic a bar chart is a topographic map but you treaties in every situation that you have data and so knowing how you can tweak them is gonna enhancer creative process in the space of the point of uh if you have a graphic broken into much different parts you know which parts of it changes what about can be really easy to build new visualizations based on what you already have so you can have that beating vein data better in every situation that you need to that's so all demo to an example of this uh that data appeared attended matters uh it's about about a course each rose carbon in Poland and actually to the car and I'm interested in exploring the question but do have your cars get worse mileage so that the weights of motor cars and also for mileage and others that we represent this like this it's an array of which objects in it sort of columns we have properties on those objects so his scatterplots
and I thought this would be the best way to visualize this data and I had added any labels to get and so the vertical axis I can tell you mileage in the horizontal axis is the weight of the car and also included 1 more piece of information is graphic and that's the color of each point and for each point represents family cylinders the car has considerably really like parts of 4 cylinders the median cost 6 and had a Cosby and so that's cool are we going to see you know it's all their data visualization problem and we can see what correlation is heavy cars which mileage but how is this implemented so here is encode and this is sort of the top level for the scatter plot but does it tell us too much but we can see that we have sort of general my scatter plot component and we give it some data tell it what uh what attributes of the data we wanna use for various aspects of the plot for example the mileage on the Y axis yeah this is called the dramatically reducing application in a couple different ways so maybe there's different scenarios in which a new scatter plot let's pretend that in this particular instance I also want to add a regression line to scatter plot a line of best fit to the data and and so we've got this cataclysmic of places but we also this 1 particular instance 1 had something more to it so uh done that here if you remember in high school and training which calculations for doing simple linear regression truly terrible I put that in a component uh and then displayed on top of the plot to do that but
it looks like this this morning in heard you wouldn't on talk about something called block parameters that's new number 1 point 10 so I use bookworm parameters in this scatter plot to add a regression line and so you can see that instead of this using a simple my scatter-plot components amusing and the block form of the and then passing some actually leads to the the separate regression layer and visualization iPod part ever 1 point and this will be possible because for that regression line making sense it still has to use the same scaling functions as the original scatter plot and so she can see this line and the underlying 3 this as plot that's what's along these the same scaling functions that so the visualization makes sense and then as a 3rd step of this I thought that would be interesting to show how easy it is now at multiple regression lines to this spot that's that's what I've done here again as a factor of the number of cylinders of each part so I'm operating on subsets of data and the 1 that just the original dataset anymore and can see that the colored and there's 1 for each set of scatter points the and this was easily people are easily implemented as well
to see that instead of 1 regression component inside the scatter plot what content of got when iterating over subjects and adding a plot for each point right so another plot regression component has different data but it's still using the same attributes of the plot the but it might also be useful look at how the scatter plot component is implemented so here's the template for that
uh you know there's still no markup in here just more components and the 1st thing we see some axis and if you've ever you had build axes and data visualization of the huge pain and so it's really only 1 I have to do that once flood filling on the margins in simple math that somehow gets complex has so I made that components so never have to do again and and then inside a component in the same way that I added a regression line my plot has its own component I wanna to represent the layer of points in a graphic has its own component as well as you can imagine that in another situation I would have something that is in a scatter plot what I might 1 at a later point to but the devil Lady Bird and the the as the this is a template for points
in the final see what's going on here there's some SPD circles uh to consume broken down the stabilization and a lot of different parts
on the reason I've done this is because uh I wanna have a flexible system for bring together to individual stations in different ways and and it gives a lot about because you're able to easily convey data without doing a lot of work that can do and flexible ways but it's there so the question of like why do they do it this way what they choose to represent the point has a different layers aggression is and and so going back to the original question how we represent a statistical graphics in many parts of it's not an original question a it's actually study many times before 1 possible answer to it is called a grammar
graphics from a guy had with them but as the name suggests it's a way to describe the components the components of a data visualization and also how to put them together it's just like the word grammar in English language that tells us how to put together sentences this grammar graphics tells us how to put together data visualizations it takes the form of a paper was published in 2008 that's agrees read a highly recommended a lot of either there no this is these are the guidelines that followed when building this example add a scatter plot of
1 thing we might change with it is peace out a couple pieces of the grammar and then indescribable grammar that sort of just give a quick introduction to it found 1 thing we notice about the scatter plot is that we're
representing aspects every data source spatially and plot this is like the hallmark datavisualization right we take some hard understand data table and we we do something visual with it so for example here I'm representing the weight of cars on the x axis of the heavier the car further along the axis it's it and then something similar with mileage on the y axis and then there's a a 3rd sort of mapping where I'm taking the number of cylinders each car has representing it as the color of each point of so we could say that there's 3 mappings in this graphic mappings from variables in the dataset 2 aspects of the plot of the grammar formally defines this it's called data to esthetic mappings you can think of those as esthetics of the plot there's the why esthetic in the x esthetic but this isn't just something you find in a scatter plot I you find this in many types of visualization so maybe you can imagine 1st and whether the data to static mappings for histogram boxplot or something like that every graphic is gonna have at least 1 data to state mapping and many times more graphic history another thing but now that we've defined that every graphic has data is that mappings is that but there has to be some mapping function right if you buy a car with 5 times and you get from 5 times that many halfway along the x-axis rate 40 pixels along the axis or something like that but need a mapping function of the grammar defines these as scales the so for every data to esthetic mapping you have some general data visualization you also have a scale for that data to the set of mappings but there's different types of skills imagine that scaled that maps spatially along the x axis and the scale that maps from the number cylinders to the color of a point in different type of function so we in many different types of skills but it's 1 scale for every data to static mapping and something else obvious about this is that we chose use points right and this may seem like the and but we could've done other things as well we could have connect these point appliance maybe Johnson sort of area and the Russian line that would be sort of a different shape representation of each of these data points to the grammar formally defines that as a geometry but so just looking at the simple scatter plot a we very pick something is out it that we think we can apply to every sort of data visualization you have 1 them is the data to esthetic
mappings the scales for each dataset mappings there's different types and when your scales categorical scales and the 3rd thing that the grammar graphics defines a something called layers see notice the plot I had before I had a point later and I was able to add another layer that was for a regression line every single layer you have your plot has a geometry and into other things called that's where them of which is called a stack dimension in in certain data visualizations you need to compute additional information about like a boxplot need can keep upper lower quantiles of the data so that some like just in general statistical transform you have to do on the data advocated to the dataset that so the demographics call that is that in every layer has a so that you could think of the point where as having is that was simply the identity function did nothing and that's 1 more formalism we can sort of define and then for each layer you also have an optional data to static mapping of in the same way that I operated on slightly different datasets in the regression line example I don't necessarily have to use the same data for every layer of your plot and many senses and makes sense not to there are graphics also defines 1 more item of actuation 1 and 1 of which is uh accordant system this may seem pretty obvious that almost all graphics we use the Cartesian plane x points as the coordinate system but there are other ones out there if you have a very circular plot and it's gonna use pork it's likely because that can be when more convenient and if you have something like a mosaic plot actually it funky higher dimensional coordinate systems and if you have your data like you have a mapping 1 displacing information over it but you have an implicit choice of map projections Mercator projection is the most common 1 paragraph it's also finds 1 more thing capacity I just finished at a time and not going to talk about it today but again it's a really good paper and I highly recommend you read that can help you lot with knowing how to compose the visualisations but so as to perform all right
it's a it's an academic paper you had a defines all these different aspects of a plot of but it's hoping is answer the question how do we split statistical graphic in the parts so the thing that remains to do is translate where each of those parts in a like when they look like and right data to esthetic mappings of this was pretty easy reversing at an example this is just on the outer layer of your component you get data and then you also map from esthetics to properties of that data scales were scales look like a number what jobs the general yeah you they have some sort of constructor function which will create a scale so a linear scale so this is just some pretend function that creates 1 I'm doing it domain and range as a sort of specifics of scales skills of pure functions but if that excites you at all and there is excited to be had as local things you can do with them I wanna go down the pediments basically owing to knows that a linear scale will take a number like 5 and computed and will transform into something like 150 and if you give it 150 it can also convert it back and 5 so scale as the function and its inverse and as linear scales up there there's skills that will map from the datasets 2 colors a number of knowledge represent those as computer properties on a component we very seen in earlier talks macros if we have a compute property that retirees over and over again in different data realizations that it can help us to define a compute property macro and then very easily we can use to scales as computer property macros as few properties on components so this is a isn't your property that returns a function where's with layers look like number wall remember the 3 parts of a layer or geometry stats and then you might have a data to a static mapping of specific to later I want to represent each layer my data visualisations as a separate component I think 1 approach there is if you just go out on the web and look for examples of the very self-contained so they have everything in 1 place so that no is the suggestions with your graphics like this with his without each layer into its own component layers are generalizable across different types of data visualization so you can have put them together in new ways injuries and color kind of those always fun and so for each layer of components it looks very much like at the top level data visualization and past and they give it some aspects of your sort have to pass scales to it because that for layer to make any sense we use the same scales consistently throughout a graphic geometries uh number must be we use SPG to represent the the sort of very graphical component of the data visualisations and this is great but here's 1 for i some other geometries that there might be like a point is an SPG that represent the point pretty straightforward we find the data in the template the to data on the components the the so that's the formal grammar right and it tells how to break it graphic inner parts uh it doesn't tell us a few things that when you build data visualizations in amber when those things is activity the meeting about the web is that we visualize data on the web or you can have users interact with the data that's going to convey to them much much better so the grammar specifies nothing about interactivity that was built for something that is an interactive it spoke to produce graphics the printed out on pieces of paper on so that's 1 thing that isn't really considered by this grammar and other things emissions and transitions is a hugely important but for conveying data and data visualizations and there's all these things up there that show if you can uh have transitions in applied it's not just like a pretty you know animation like that that looks nice and actually helps you understand that because that's the whole point of the data visualization is to convey data and it's important to have transitions in your graphics I think for both of these items and they sort of follow naturally from breaking down the problem in a lot of parts right because the way that transitions take place in most of the visualisations is that the this awful like long chain of imperative calls some sort of transition library 93 is most common 1 if you break here graphic into many parts of you only have to do a little bit of that at time and so transitions are sort of inherent complex they operate over time and that's not really dimension restore working within and declarative logic model like embers and with a vector graphic in many parts and it's very easy to add these complex that that's at each individual part only when needed single-strain activity yet to do a lot of sort of manual of understanding of events of the browser like dried events can be really complicated that same thing can break down your graphic in many different parts and it's very easy to add this little snippets of interactivity here and there not gonna complexity interactivity with that the overall complexion of the entire graphic there more thing to think about that he had transitions geographic and now have a performance issue is gonna be updating graphic many times per 2nd you transition as just 1 more thing to think about up so I presented a sort of a general way of how we split the data visualization parts and try to map each of those parts uh so what they mean in amber in mostly by doing this you can convey data more effectively but 1 question asked then is like what is this appropriate right the super of formal abstraction and it would make sense if you had like the most general situation we might have to that implement any sort of data visualization I like to think of it as
a spectrum of sorts on 1 hand you could be building general purpose plotting library matplotlib duty plot or something like that and then on the other hand you can have an application that just has 1 data visualization of a given application has 1 data visualization it does make sense to apply this fall on formal grammar to it and which you building a plotting library it would make a lot of sense so I think prevalent today that is in the data to users and then replication uh you exist just somewhere along this axis and it's helpful to know what the parts are uh in order to that to decide like how how involved with this you wanna get right in this in this demo I try to demonstrate so that's how flexible can be to think of a graphic and the different parts of that but I'm not my goal is to build a general-purpose plotting library so it's up to you to decide in your application to how much of this abstraction you US there military quick and there's a example on GitHub
if you're interested in um got all the code for that time of what's cool things in it at the little transitions in such that also demonstrate that aspect of data visualization number and does anyone have any questions for thank you How do you know what I would love to some of the other moons and in the
Umwandlungsenthalpie
Vervollständigung <Mathematik>
t-Test
Plot <Graphische Darstellung>
Analytische Menge
Physikalische Theorie
Quick-Sort
Framework <Informatik>
Benutzerbeteiligung
Prozess <Informatik>
Digitalisierer
Datentyp
Mereologie
Visualisierung
System Dynamics
Gerade
Subtraktion
Demo <Programm>
Mereologie
Wellenpaket
Punkt
Gewicht <Mathematik>
Prozess <Physik>
Familie <Mathematik>
Zahlenbereich
Kartesische Koordinaten
Framework <Informatik>
Raum-Zeit
Übergang
Bildschirmmaske
Lineare Regression
Visualisierung
Plot <Graphische Darstellung>
Zusammenhängender Graph
Gerade
Korrelationsfunktion
Attributierte Grammatik
Kategorie <Mathematik>
Streuung
Gebäude <Mathematik>
Plot <Graphische Darstellung>
Rechnen
Medianwert
Quick-Sort
Gesetz <Physik>
Objekt <Kategorie>
Mapping <Computergraphik>
Arithmetisches Mittel
Histogramm
Rechter Winkel
Mereologie
System Dynamics
Information
Kantenfärbung
Kreiszylinder
Instantiierung
Fitnessfunktion
Subtraktion
Punkt
Kritischer Exponent
Zahlenbereich
Bildschirmmaske
Maßstab
Lineare Regression
Visualisierung
Zusammenhängender Graph
Inhalt <Mathematik>
Gerade
Attributierte Grammatik
Trennungsaxiom
Nichtlinearer Operator
Parametersystem
Streuung
Template
Plot <Graphische Darstellung>
p-Block
Teilbarkeit
Teilmenge
Menge
Mereologie
System Dynamics
p-Block
Kreiszylinder
Randverteilung
DoS-Attacke
Stabilitätstheorie <Logik>
Subtraktion
Kreisfläche
Punkt
Template
Beschreibungssprache
Streuung
Mathematisierung
Gebäude <Mathematik>
Plot <Graphische Darstellung>
Komplex <Algebra>
Maßstab
Lineare Regression
Mereologie
Visualisierung
Punkt
Plot <Graphische Darstellung>
System Dynamics
Zusammenhängender Graph
SIDIS
Formale Grammatik
Statistik
Subtraktion
Punkt
Arbeitsplatzcomputer
Mereologie
Formale Grammatik
System Dynamics
Demo <Programm>
Formale Grammatik
Bildschirmmaske
Streuung
Formale Sprache
Formale Grammatik
Visualisierung
Plot <Graphische Darstellung>
System Dynamics
Wort <Informatik>
Zusammenhängender Graph
Plot <Graphische Darstellung>
Quick-Sort
Punkt
Selbstrepräsentation
Formale Grammatik
Kartesische Koordinaten
Textur-Mapping
Eins
Maßstab
Lineare Regression
Nichtunterscheidbarkeit
Visualisierung
Punkt
Plot <Graphische Darstellung>
Gerade
Auswahlaxiom
Lineares Funktional
Zentrische Streckung
Shape <Informatik>
Plot <Graphische Darstellung>
Ähnlichkeitsgeometrie
Quellcode
Bitrate
Variable
Histogramm
Menge
Rechter Winkel
Projektive Ebene
Information
Koordinaten
Aggregatzustand
Kreiszylinder
Tabelle <Informatik>
Ebene
Subtraktion
Gewicht <Mathematik>
Kategorizität
Wellenlehre
Hausdorff-Dimension
Zahlenbereich
Keller <Informatik>
Räumliche Anordnung
Hydrostatik
Variable
Datentyp
Drei
Formale Grammatik
Pixel
Streuung
Kanalkapazität
Physikalisches System
Quick-Sort
Mapping <Computergraphik>
Flächeninhalt
Räumliche Anordnung
System Dynamics
Kantenfärbung
Visualisierung
Empirisches Quantil
Demo <Programm>
Bit
Punkt
Browser
Formale Grammatik
Kartesische Koordinaten
Computerunterstütztes Verfahren
Computer
Komplex <Algebra>
Übergang
Vektorgraphik
Maßstab
Prozess <Informatik>
Datenreplikation
Visualisierung
Algorithmische Programmierung
Funktion <Mathematik>
Umwandlungsenthalpie
Zentrische Streckung
Lineares Funktional
Konstruktor <Informatik>
Kategorie <Mathematik>
Abstraktionsebene
Template
Inverse
Systemaufruf
Plot <Graphische Darstellung>
Ereignishorizont
Linearisierung
Verbandstheorie
Rechter Winkel
Deklarative Programmiersprache
Programmbibliothek
Ordnung <Mathematik>
Makrobefehl
Subtraktion
Hausdorff-Dimension
Gruppenoperation
Interaktives Fernsehen
Zahlenbereich
Punktspektrum
Räumliche Anordnung
Mathematische Logik
Benutzerbeteiligung
Informationsmodellierung
Schweizerische Physikalische Gesellschaft
Datentyp
Programmbibliothek
Zusammenhängender Graph
Normalvektor
Formale Grammatik
Statistische Analyse
Quick-Sort
Mapping <Computergraphik>
Mereologie
System Dynamics
Kantenfärbung
Visualisierung
Videokonferenz
COM
Visualisierung
Zahlenbereich
System Dynamics
Dienst <Informatik>
Twitter <Softwareplattform>
Ereignishorizont
Code

Metadaten

Formale Metadaten

Titel Dynamic Graphic Composition in Ember
Serientitel Ember Conf 2015
Autor Henn, Chris
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/34728
Herausgeber Confreaks, LLC
Erscheinungsjahr 2015
Sprache Englisch

Inhaltliche Metadaten

Fachgebiet Informatik
Abstract Ember's declarative object model and data-binding make it an excellent fit for building data visualizations that respond to change. This talk presents two ways to think about building dynamic SVG visualizations in Ember in the context of Hadley Wickham's The Grammar of Graphics. Along the way various subjects will be discussed, including code reuse and composition with Ember components and D3, imperative vs. declarative style tradeoffs, and tips and tricks for making visualizations easy to build and use.

Ähnliche Filme

Loading...
Feedback