so for today the topic we'll be talking about specifically is computational
essays this is a fairly new topic and it's sort of built off a at least the
term actually what I should probably do first is do a little introduction so the
computational idea I'll get there in a second but for the most part it's a
really fairly new topic I'll be presenting this information as always
with these workshops my name is Patrick Judas I have some some thank yous to the
Institute for cyber sciences for helping me with advertising even though it was a
little later than usual again that was on my end of my my fault
on that end and then teaching learning and technology typically when we do the
live version they have a the old house lab I usually utilize that's there with
that particular group I'm actually a PhD through the University of Pittsburgh
where I spent most of time looking at data visualizations and now I support
here at Penn State the hubs of people life sciences the Institute for cyber
sciences and Eberly College of Sciences
okay so my first sort of conversation piece and if you have you've actually
attention attended these workshops before you'll kind of notice one thing
is the fact that there is not a lot of there's not as many slides as usual so
I'm trying to be kind of succinct in terms of the motivation for why I'm even
having this type of conversation and this first sort of thing is basically
kind of specifying that when it comes to publications academic publication you'll
have one of the first ones that I was able to pull up was the Philosophical
Transactions back in 1666 I was the first sort of publication it was kind of
formalized if you will and if you think about it philosophers would come
together they would you know hang out with one another and sort of chitchat
and eventually one of them decided hey let's put this down in terms of on paper
and you can see in a typical article back then the title there was an
abstract and then there was an introduction
there'd be some figures as well throughout the actual paper paper itself
fast forward to today about 352 years later and if you look at it now we have
that sort of same scenario still planning out academic papers are very
much you know people get you know flux first get together at conferences you
know PhDs academics in that regard to get together and they put together these
papers that have titles abstracts introductions and figures as well so
that conversation piece has not changed over the last like it's at 350 years and
so these computational essays sort of change that dynamic and so the idea of
the computational essay is to be able to write formally in some way shape or form
that has an introduction a title some sort of context to the conversation and
allow you to actually put in ways to see visualizations either dynamically or
have algorithms that are allow without an individual to change values and see
how things change without them throughout the rest of the algorithm so
make these things a little bit more accessible in my hope is someday a lot
of this turns into that domain so but now especially now that we have things
like our iPads and iPhones and things of that tablets and that regards perhaps
this might be something coming in the near future and how we sort of approach
is you know articles or at least publications so the idea is basically
over the last 350 some years it's been about basically if it ain't broke why
fix the kind of approach but this is sort of changed dramatically over the
last decade or so where we are no longer living in this information age that we
were sort of in but we live in a sort of more big data data age in that regard so
we have to sort of develop ways to take this data and create information and
knowledge from it so where is something that was easily sort of graphs or
sketched or sort of interpreted on a piece of paper might not be as
applicable today because there's so much more information that's made available
for projects especially with the big data projects or data projects in
general now this concept even though I
mentioning the computational si side of it is relatively new we've seen
something similar to this in terms of interactive journalism for a number of
years at this point in time and actually have a couple examples I'd like to bring
up what I mean by this is basically going to web pages or sort of these
articles that are now being developed by by journalist and sort of having sort of
an overarching conversation piece but at the same time making it more interactive
so the storytelling element is a lot more dynamic in that regard so as we
kind of as we sort of scroll through here we see that the actual web page
changes and we can kind of scroll through a little bit more we can say
sort of see pop-up information sort of as we scroll through the landscape and
so this is just one example another one okay through the New York Times so New
York Times is sort of another has been doing this for a number of years they've
they have a number of different types of these either something that incorporates
video or animation or graphs that sort of have this dynamic quality to them
there's a number of these sort of avenues that are already been developed
one of the ones I recently saw and kind of a cool website if you're interested
it's called putting cool it kind of has a lot of these types of interactive
journal articles if you will and so in this case the title some text and in
this case they were looking at sort of gender specifically roles within
different Disney movies so how often a male would speak or a female would speak
in the actual movie or production and so as you scroll you see the data you see
it's sort of change and augments and kind of reorient itself as you're moving
throughout the page itself and so it's kind of a kind of a cool way to sort of
explore the information while tailoring it specifically to a message that beings
where the text and sort of the storyline as you progress so this is something
that's been around for a number of years as I mentioned so trying to develop
platforms to do these conversations sort of the next major step in this
regards now in terms of ways of actually going about doing this there's a number
there's actually a few different ways to actually go about this the one I'll be
talking about specifically today is something called observables and it's
that bottom link there and as a solicitor there's a beta it's lit it's
only been around since about January so it's still being developed and one thing
I'll make a note of is the fact that Mike Bostock
if you've ever attended one of these workshops before I typically use
something called III it's a open source library that allows people to create
graphics and visualizations animations things of that nature he developed that
particular library with help with some colleagues he and then eventually went
on to the New York Times to help work with those interactive journalism graphs
and visualization so the things you saw before and about a year and a half ago
left New York Times and started working on this observables idea so basically
it's in good hands if you will in terms of sort of the progression of this
development other ways to look at other ways to actually go about doing this is
Jupiter and Jupiter lab again if you've attended workshops before we typically
used something called you would download they call it anaconda and then we would
use some we would use Jupiter to do the actual programming steps of this and
that's those are types of computation last days typically with those you'll
have various cells kind of greeting from top at the bottom and you could have
code at the top and sort of run it from top to bottom so it kind of trickle-down
effect if you will Google collaborators is another brief sort of way of doing
this and for the most part it actually uses Jupiter sort of it's made how
Google collaborated is actually kind of an interesting idea because you can say
thanks to your Google Drive and sort of access things that way as well so if you
know it might be something to look into if you're interested so observables is
basically a very interesting sort of approach to this and I'll go through an
example here in a couple seconds but basically you're creating cells as
of Jupiter in that regards but in this case everything is sort of connected to
one another so as codes changing at the top or at the bottom of the page
everything that sort of connected to it is also updating as well and I'll show
an example here in a moment it does only use things like JavaScript but you can
coorporate any kind of JavaScript libraries that are out there and more
functionalities being put into play literally in a daily basis kind of a
funny situation happened last yesterday evening where we one of the questions I
was asked at the live version of this conversation if there was ways to take
things from Jupiter cz from observables and put it with two like a local machine
or to export it somehow and prior to that event the answer was no literally
during the event yesterday around 4:30 a tweet was sent out by Mike Bostock and
they had implemented something like that as of yesterday evening so I actually
can show that here today so there are ways to export these projects as well
just to kind of clarify a little bit in terms of some of the little bit of these
differences so if you had attended last time with the workshops we talked about
this idea of reader works with author-driven so when you're designing
things like visualizations or graphs you have to think about is the reader
driving sort of this reader driven in terms of how the actual ad messaging is
getting to the individual or is it more author driven author driven is basically
a linear story that they're trying to tell there's a specific message involved
and typically there's no interactivity in that regard so that's kind of where
that even though there is a little bit more of that so that would be sort of a
standard article something that sort of in the middle would be like those
interactive journalism articles reader driven is basically something that is
doesn't necessarily have a prescribed order or specific messaging per se it
allows somebody to really interact and that sort of specific to what we're
talking about today so it even though you're sort of describing a topic it
gives some of the flexibility to change numbers you know delete things add
things all in sort of within this sort of environment if you will so even so in
this regards there's no clear divide so those journalism interactive journalism
articles are sort of author and reader driven these observables are a little
bit more in terms of the reader sort of having that free action if you will and
I kind of again sort from last time a infographic would be a good example of
an author driven approach where you have specifically an author with having sort
of their characteristics and wanting to push up specific message something
that's more reader driven might be a model of some sort because there's no
you're just modeling a system and then the visualization kind of falls in
between there I think this is one a few more slides here and then we're kind of
to talking about specifically the code in for examples so the basic component
of this is you're going to go and sort of create these the composition is sort
of you have some sort of ordinary text to it so there's some context and
motivation to it there's a computer input so you
give them a file or allow them to you know input information and then there's
a desired output so connecting the input me output specifically another example
of this is actually something that happened back in 2001 we bring that up
real quick close out of these O's in one frame so basically what was done is they
were sort of an idea that a researcher was going to take sort of the content of
an actual article an academic article and make a couple little interactive
components to help sort of you know heighten the information and that's very
Brett Victor's is the the researcher who did this back in 2011 a little bit
collected more to the journalist interactive journalism approach but
basically taking sort of a static sort of publication and then having all those
key characteristics but instead of having just sort of static images things
like the algorithm itself with sort of in place so we can actually have a
little slider here that lets us sort of increment through the algorithm itself
as ticka probability increases how things sort of augment within the
network itself so again sort of just sort of relaying the information within
the actual document but it gave users sort of the ability to see what happens
and sort of interact with the actual algorithms to help maybe an increase
sort of the learnability if you will of the actual algorithm itself so it was
one of the first sort of approaches in this regards so I'd like to kind of show
sort of an example of something like that so this is actually one I recently
just put together and it's meant to be sort of a literal sort of random number
sort of generator that produces some plots so at the top here and I'll talk
sort of through this basically the first thing you're going to need to sort of
start these projects projects is to have a github account which I would recommend
having it it's sort of a nice place to put code
that it's sort of maybe might be something that's more open source or
collaborate on projects but it's a nice resource in that regards but once you
have a get up account you can start creating these projects what you would
need to do is click on new and it would start up your first project from there
and so from here you start you know typing in title so testing and being
able to run it from there you can publish it at that point I wouldn't
recommend it without a little bit more details here but then you can go back if
you want to so I can go back to my notebooks I can see my public available
one person with my draft versions ones that are made public and anyone that
I've trashed as well so you can kind of go through and sort of keep keep an idea
of putting these projects together over time so let me go back to my random
number one so in this case again what we have is cells and so each of these cells
you will be able to add additional cells that need be in this first case and I'm
going to talk about some of the terminology or the coding if you will
put that in quotes in terms of using something called a markdown language
markdown basically is a way of formatting text in these documents even
though this is actually applicable not only for observables but it's also
applicable for something like Jupiter or the Google collabs as well so this is
sort of a standard what standardized way of adding text to these documents now
first thing I did was adding title and from there I sort of gave it a you know
an introduction so my random number generator is randomly generating number
from 0 to 200 99 this line basically is the code utilized to sort of produce
these random numbers basically it's just this part here is just a random number
generator and every 10 seconds it goes through and creates a new random number
so it goes from 0 v 399 the variable name so the variable name itself is
called random number and that's what's listed here on the side one of the cool
things you can do is though is the fact that in my text ear I can
actually import that specific number so as that number is being randomly
generated in my text here it's actually automatically updating as well so as you
can see if those presence random number 260 in this case which is the random
number you can then we will then create an array and for each indices in this
array so what in this case we have 121 positions in our array we're just going
to pick a random number between 0 and 19 and that's what's going on here so the
entire data set is being driven by this this particular array and again next a
line there I have a table that's just showing the first five indices and the
value it's being represented by and this again is being automatically generated
every time this random number is chosen so it's nothing I don't have to
dynamically or excuse me automatic or go back and reach ange these these tables
it's just after 10 seconds that's random number generator runs and then all this
information updates below and from here I have a number of about three different
plots using that d3 library that I had mentioned before and just three
different ways to sort of visualize this randomly generated away in this regard
so nothing too special in that regard in the sense of you know it's just as I'm
creating these random information it's visualizing them and sort of
updating the visualizations as that information is randomly generated so and
what you can do is sort of copy through this and sort of have this sort of
available to you and the way you would go about doing that is once you logged
into github there would be a button here that says fork you would click on that
and that would basically download this entire project and let you start editing
at that point so that's one way of actually sort of getting access to this
particular document if you will now one thing I'll make a mention of it and
again this is sort of something that came into play literally last night made
available to us basically the the observable look audience if you will is
the fact that we can now export these a question that was brought up yesterday
was once it's an observable does it just stay there so how would we share this
information one way you can do that is if you can once it's published you can
send somebody the link and they'd be able to access this or now based on some
of the new things that were added yesterday we can actually export it as
well so specifically I won't go into a lot of the terminology in this regards
but you can download this and actually put this into a an actual web page so
this is a web page running locally on my machine that allows me to reproduce
exactly what was in that observable document so this would be sort of the
output if you will that's a million chance
great question both github and observables are open source and
available for free so yes you can access them and observables specifically uses
the believe it's MIT licensing so you can use it for it's it's either that are
comparable to it so basically it's available for you to use for research
purposes and for commercial purposes as well so anything that you create there
is basically yours at that point but if yes github and observables are free
platforms to utilize one thing I'll make a note of is they are meant to be sort
of an online presence so github if you have a public account people have access
to it so if you have sensitive information that you don't want to get
out there in terms of like an you know sensitive information or maybe an
academic project maybe github might not be the best source for you but for that
you can purchase private sort of projects if you will but for the most
part people will typically just use the free public version so and again that's
available for free open source as well as observable which is free and open
source as well okay so back to back to the actual plot itself and so this is
basically my way of creating this you know I was able to put this website
together pretty straightforward you could do this with any other projects
that are available through observe and sort of make it a webpage at that
point and I can run this locally so if I wasn't connected to the Wi-Fi or to the
Internet access here I can still have access to it or I can put it on a web
server to make it accessible to other people as well so basically this is sort
of your way of exporting and making this project available via other sources as
well and as I can do here one second the mobile version basically it also helps
in terms of a mobile version as well so this would be sort of a mobile version
of this particular webpage so still if you're running this on like an iPhone or
an Android device again works pretty straightforward in this regards in terms
of being able to see all that same information see all the graphs sort of
populate as that new a new random number is chosen all right so that is sort of a
kind of a beginner sort of program if you will in regards to observables what
I would recommend is to just kind of go to their website first off just to kind
of see they have a number of introductions visualisations explorable
Maps things like that so a lot of projects that are just already pre-made
for you and also for the most part I know when I'm teaching things like d3 v3
definitely has some nuances to it so it's something where you have to kind of
learn how to develop in a d3 project one thing I wanted to make note of is there
are other projects Orta sort of languages to sort of take your
data and make it available through something like observable particular
something called Vega a biga light or Vega basically I'll show that real quick
it's got links Vega light is basically sort of a way to take data and
sort of create sort of prepackaged visualizations or graphs that are
interactive so I'll just choose one here so pretty straightforward in this regard
this is all you would need to sort of generate this particular plot and and
basically you sort of reads in any in this case a CSV so at the CSV sort of
comma separated values and then have different sort of encoding for X Y and
then color as well so and this is basically it would produce something
like this on the right hand side so not a lot of coding involved mostly sort of
using a template to sort of create these visualizations or graphs another one
I'll make mention up is something called plotting plotly is sort of an another
way of sort of doing this as well something you can do in R as well as
sort of an online version as well so mottley is basically in the JavaScript
library that observables can utilize is Oka free to do to utilize so just
another sort of option as well so plently j/s so again sort of has
these sort of generate sort of visualizations that can be generated
with a few lines of code so here might be example where the data is coming from
you know the JavaScript utilized and it actually has some interactivity to it as
well so I can sort of highlighter the numbers as well so again this is
something that can be built directly into those observable documents okay so
a couple things to make notes so this is actually the main sort of workshop sort
of a template that I put together for something like this for this
conversation a couple things that make note of is this actually is from a open
viz which was the conference that occurred virtually last week literally
last week I should say and was created on May 16 so very new in terms of being
made available I added also things like a table of
content so if there's something you want to kind of go back to if we
want to kind of click on it so we're gonna edit it will direct you down to
that editing section section so basically what this Dokken has is sort
of just the beginning structures of what you might need to consider when you're
creating these documents these are observable documents a couple things
like shortcuts like keyboard shortcuts that are available here so you can kind
of have this available if you want to use things like that but for the most
part as you can tell I've done some editing here the first thing you'll
notice is the fact that when we create a new cell but one of the first things if
you won't want to do is just add some text to it and that's what this markdown
sort of comment is so anything within this bracket here it's going to be the
text that shows up right above it so if I put testing thing and when this cell
this is now part of this document and I can add different things to it or add
other additional comments as well I'm not going to go through every single
sort of piece of this this is meant to be sort of just sort of a resource you
can come back to maybe kind of make sure you you know hit some of the main
characteristics if you're interested in maybe some things that you can do with
them so inserting cells the mouse clicks or keyboard shortcuts merging cells
leading cells things like that so for the most part a lot of these are just
basic interactions but for the most part if you want to access the content of the
cell you just click the drop-down box or the drop-down arrow and then you'll see
the code in there that could be altered or changed also if you would like to
kind of keep this on the screen you can click on the little in here and then
that was actually pin this open so if you wanted people to see the code behind
this particular you know markdown piece of text you can click on that and that
will actually show it there and keep it open for people if you don't click it
again and it'll collapse again as mentioned markdown is sort of the sort
of agreed-upon standard if you will in terms of
the agreed-upon standard in terms of ways that people are sort of creating
text contents for these these particular note documents and there's a couple
different things you can do with this in terms of specific headers so if you want
something to be a little bit bolder larger than others that you might see
typically and like a word document this would be sort of your way of doing it
different headers use basically these these the pound symbol or hash tags if
you will one gives you header one two of them gives you a head of two and so on
and so forth so if I wanted to create one of header two I would go hashtag
hash tag and and then run that cell and there's the text showing up as header
number two and if you want to by the way I should have made mention of this is
once you go to this document it's basically allowing you to also edit as
well so if you want to go in here change some things up it's not going to hurt
the original document the original document that I sent out that there
everybody is sort of controlled by me so I sort of declare like the last time
this was published and so if you wanted to you could go through and delete every
one of these cells and it would still work for everybody else because it's
basically utilizing whatever the last public published version is utilizing so
again if you go to this particular webpage and start going you know putting
some random text in that whatnot and running it it might look you know
different on your end but for the most part no one else is going to
specifically see those changes because it's sort of my publish document so if i
refresh this it'll look different for me because again so if I'm kind of like the
main editor if you will it'll look different for me but for everyone else
it should sort of you know what you're able to change things without having to
worry about sort of losing the original message couple things as well you can
have old text or italicized text as well again it sort of has its own little
nomenclature if you will but if you're interested in some of these things what
I would recommend you is to go to a thursday i included a
link for the markdown tutorial which lets you kind of go through some basic
ideas in terms of here's how you do the italicize and you can kind of edit text
and what they're lining kind of follow through this sort of lesson plan if you
will okay you can do things like add a URL so in this case I added a URL to
that particular slide of the the markdown a lesson you can add images so
this is an image we use typically for these workshops so you can add an image
there's actually a couple different ways you can add images to a particular
document this is sort of the standardized way but for the most part
one of the major issues with this is the fact that we can't set a particular size
of the object or excuse me the size of the image so there's a couple ways to
work around that the markdown version of this is just to include something at the
HTML tag for including an actual image if if you've ever looked into HTML at
all in terms of some of the HTML sort of ways of creating things like images or
links this is sort of the standardized way of doing it you set the source and
then you can style it by saying I want to be 300 pixels big or you can do that
directly through the HTML tag other things you can do are add things like
block quotes lists indented length lists as well numbered lists tables are pretty
straightforward so we kind of just kind of copy them and paste this template and
for the most part you'll just kind of see as as you sort of set up the text
the table will sort of shrink or grow based on sort of sort of the length of
the word or the symbol or anything like that in this regards if you want to
include things like JavaScript directly into the block this ways of doing it one
of them new one of a more one of the cooler features about this
is being able to embed things like latex or latex or our it would like to
pronounce it but for the most part this is sort of a standard way if you've ever
written a publication before in terms of academics or complications if you're
writing out an equation you can actually do that as well within this document so
a couple different ways of doing it as well so again you can sort of embed it's
sort of these standards if you will within lay tech as well so from here
there's a couple examples in terms of Java scripts loading data creating
things like HTML SVG which is the when we create things like in d3 those create
things like SVG objects so there's ways to just easily sort of sort of embedding
those into these documents what I'd like to show actually next is basically sort
of a very straight sort of a beginner level look at sort of creating a
observable document importing data and sort of outputting some information and
also eventually a graph as well and so I kind of want to walk through this sort
of this particular document and as you will notice as well for each of these I
pinned them open so you can see all the code that's involved with this and again
a lot of times it's just more or less for the most part you just kind of you
know making it copying and pasting from other project or sort of some small
changes here and there to get other projects working as well so what I
started off with with a header so whether data and big alight again sort
of that the program that's sort of you can embed within these observables a
couple things to make note of when you want to reference other libraries you
would actually have to do it I'm going to scroll to the bottom I usually put
these at the bottom just because I don't want them specifically taking up space
but specifically if I wanted to include something like Vega Vega light in terms
of the actual library which is actually into observable so it's actually very
easy to do all I need to do is include this line and now if I wonder its
reference they got like I only have to do is reference that particular variable
which I'm it's called big alight in this regard
I'm also used something called d3 again built-ins observable so very
straightforward in this regard all I do is say D 3 require and then the
name of whatever I'm using from that d3 library so again to choose pretty
straightforward lines in terms of I went the library for Vega like and I went the
library for d3 and so when I reference them in this entire block of code I you
just need to reference those particular variables so again the first thing we're
going to do is that we want to import some data and at this point so if I go
to this particular link well this is being cooled from I've totally forgot I
was waiting for a length of show up here but it's actually being done with it at
the bottom so it's just a CSV file so basically if you open up in Excel this
would be the data sets its precipitation in Seattle based on dates precipitation
temperature max min winds and weather so rain snow drizzle things of that nature
so it's just using this data that is sort of it's starting data set for the
project and we go back in there to those and so all I'm doing here is I have a
variable named data and I'm reading in using D threes sort of standardization
in terms of reading in a CSV file you can also do this for TS d which is pass
separated values and jason as well so J which is sort of the JavaScript sort of
standardization but again sort of just you pick whatever you need in terms of
the data source if you will so now I have a variable called data and
I went to here and just take a look at data it's an array of 140 1400 data
points that we saw before I want to look at the first one I have a array of a
date precipitation max min wind and weather as well and you kind of see the
first object if you will the first part of the array I want to see a another one
again just sort of lets me sort of explore this if you will
these next two lines of code are kind of just in the earth we should say next
three lines are just some ways and sort of a template of sort of presenting what
are the in this case the columns of our original CSV file and so what we see
here is we call these keys instead of columns if you will so keys do each of
these data points and so I again sort of just create a value for that and sort of
output it so now I have a row if you will the road the actual it should
actually be columns in my data sets so columns the columns in my data set it
again that a precipitation is known and so forth Megan this is just me sort of
making sure that if somebody was looking at this particular observable document
they could easily tell that you know there are six columns that they'll be
working with and what's the names of each of those columns are next again I
just sort of give an example data set so basically if you've ever used are you
might you know sort of the header of the actual data set so I gave you the first
three rows again hard-coded a lot of these sort of things some ways to
automate this but for the most part I just kind of wanted to just showcase how
you might want to do this manually and for the most part this is just creating
a table listing all the keys or all the columns in the data set and an example
for the first second and third data points within our original data set here
so basically from then we would use Vega light as sort of our template to create
the craft that you see here and for the most part all you have to sort of read
into this is the values so we read in the data we sort of specify what type of
graph we would like to have in this case a line graph and what sort of dimensions
are being encoded in this case we have temporal information so per month so we
want to sort of make that sort of known so we want to list some ones on the
x-axis here and on the y-axis we just want to list the precipitation we wanted
to we could also do this and say oh man take a look at the temperature max
prostitution
there we go well space in between the causing an issue so hey maybe we would
we'd like to see also plotted on this is sort of on the y-axis we might changes
to the temperature max in that regard so all I needed to do was change that
particular field to match our column name or it would say wins again pretty
straightforward in this regards so we can see the winds changing and now we're
creating these graphs pretty pretty easily in that regard for the most part
if it's that that's sort of a basic tutorial of how you might go about sort
of creating your first project do you have to worry too much about learning
the d3 languages I've talked about before in the workshop but using
something like a Vega lights or plotly again is another way of doing this as
well simple library to start getting these projects up and running so you
just kind of want to sort of lay this out so this would be sort of a template
of a project you might want to use a lot and there's a number of available ones
that are on on the observable website as well okay going back it to some other
things that I've done before in terms of bring up what other projects so other
ways to ask I'll also include some information as well like I said you can
also incorporate things like HTML SVG things of that nature and the nice thing
about this is the fact that when you start involving things like HTML you can
add some other cool functionality to some of these projects specifically in
this example here I was looking at sort of creating sort of a template for
talking about social networks and specifically one of the you know one of
the first sort of people to sort of talk about these and start putting these in
the players with somebody named Jacob Moreno and he started talking about
something called sociograms and sociograms are basically picked
representations of people interacting with one another and so in my example
here I included things like an image but I also included a way to create a
tooltip and so what I can do now is sort of hover over the sociogram and it
actually produces one of those images one of those first sociograms particular
types of Jacob Marino's original work other things you can sort of look at
here is one of the things I wanted to create was also sort of a timeline so
when that actually occurred and so had some other timeline pieces as well
but one of those sort of the interesting things about this is the fact that if
you kind of scroll to the bottom we can look at a given graph and one of the
talking points specifically for this was looking at sort of degree type so in in
degree outdegree in that regard so I can actually change my drop-down box here -
it's a in degree and that'll actually update the graph listed above as well so
ways to sort of include things like drop-down boxes sliders things of that
nature that you might typically see in like a typical HTML page but now we're
able to utilize them to dynamically change and sort of allow people and
students or anything in that regards to see you know in this case this graph
change based on some of those calculations so again some examples on
how to go about doing this and other examples I've seen as well and
I just kind of want to point these out just so you can kind of have a good
understanding of what's available you can actually include things like sound I
won't play the sounds in this regards because it would be there are their sine
waves or their kind of a high-pitched frequencies and stuff like that but here
is a project that looks at sort of mapping out sine waves and sort of their
their correlations to sounds as well so there's a play button here if you play
it you hear that the actual frequency we can change up the sine specifically to
whatever Hertz were interested in looking at click the play and would play
that sort of sound signature as well in this in this case this project they look
at different types of frequencies in that regards but
for the most part it's a nice little tutorial of how to incorporate things
like not only showing the graphical representation of this information but
if any sound with the nation as well one of the other things I would sort of also
wanted to include as well at least without this discussion is sort of the
different ways that we can sort of add additional functionality if you will
there's a lot of and I won't go through all these sort of the standard library
here but for the most part you can it like I said we've already hit a couple
of these as well but we can do things like you know add content use via the
markdown language via HTML as well but for things like green also have things
like drop-down boxes you know inputs for range in terms of sort of allowing
people to kind of scroll through various values if you don't want to go to a
particular source you can also have people sort of download or sort of
upload information to the particular observable document there's way to
generate information so in this case if we wanted to generate values there's
sort of dynamic ways of doing that this required statement basically is
requiring basic basically it's tied to whatever the outside libraries you would
like to use and so that's sort of a standard way of bringing in those
particular libraries and this idea there are these things called promises and
promises basically are observables way of handling sort of connecting all the
dots in terms of the given documents and sort of where data points sort of
resolve with one another so when you sort of create these again sort of call
promises it's sort of let's the program know that something is going to be
changing in this particular part and it's going to affect other parts of the
actual given graph as well so again just sort of different ways to incorporate
some interesting sort of HTML or JavaScript sort
libraries and projects that have already been developed so another great resource
in that regard okay so for the most part as mentioned before the first things are
going to be starting to look at is how do I first start creating these these
particular documents and for the most part you're gonna be using those
markdown markdown texts and sort of ways of like lists and quotes and numbered
information tables things of that nature that's going to be the sort of the
starting point to developing these particular observable documents from
there it's basically learning a little bit of JavaScript to kind of help you in
terms of getting data and sort of information that's accessible to the
reader or the observer in that regards and for the most part some of these
things are as simple as in this case our X variable equals 42 and allowing
somebody to change that to another number and seeing what happens. This is
sort of true in terms of our random numbers, I come back to our random number
plotter... For the most part I have a function that's sort of randomly
generating this number for us, but if I wanted to I could set this to 123. Play,
and now, as you can see it's going to be -- our arrays, 123 in size, and for the
most part it's going to update all those graphs as well. So some of this is very
simple in terms of you know variable equals a number or something to that
effect, so even at that lower level you can start developing these observable
documents. So for the most part I've actually been able to sort of cover
most of what I'm going to talk about. One of the things I just wanted to mention
today was starting to get people interested in this this Observable idea,
sort of mentioned ways to start creating some of these observable documents, let
people also know because of what I've learned recently was the fact that you
can actually start not only publishing these and making them accessible that
way but downloading them and making them into your own personal projects as well.
So that's something that actually can be done, very recently as well. What I'd like
to do in terms of amount of time I have left here today
I know I'm cutting off a little bit earlier than usual, but I'd like to
open this up in terms of questions... Trying to remember if there was any
questions from yesterday's that I would like to bring in today, but for the most
part, typically people are just you know sort of, questions were sort of
revolving around sort of that idea of being able to download and use these
offline as well. So if there's any questions, I'd be happy to take any
questions now on the other chat. If not we can kind of end our conversation for
today and what we'll be talking about next week, or excuse me, next month in June
for the next workshop, I'd actually like to sort of showcase, next month, basically
from a data source to a completed animation. So I kind of want to walk
through an entire project basically with the group because that's typically what
I'll get question-wise is, "how do we just start-to-finish, how do we get a project
going?" This will also include things like my interactions with an actual professor
and/or a faculty member to sort of get their design ideas together. Also once I
have any animation together, how do I record this and put this and make it
available via either you know a visualization or via video as well. So
that'll be handled next month so I look forward to having that conversation as
well. But again, I'd like to kind of stop things for today in terms of
this workshop but I'd like to make sure I open it up to questions if there are
any. If not, I'm very happy sort of presenting this information today and I'd be happy
to follow up with anybody if there's follow-up questions at all and you know
as normal, please let me know if there's any questions after the fact, and I'd be
happy to sort of address them as well. So kind of keep an eye on the chat here...
And just kind of keep an eye on to see if there's any other questions, if
not, again I'd like to thank everybody for coming
out today. Like I said, next time we'll be doing... I'll be doing a much much much
better job in terms of getting the message out a little bit earlier
than I did in this particular workshop but for the most part, again
questions, always feel free to email me or send me messages and I'll be happy to
sort of respond those that way as well. So thank you everybody for coming out
today and very much appreciate everyone participating as well. So I'll stick
around on the chat here just in case there's any follow-up questions but if
not, thank you everybody for coming up today!
For more infomation >> Profanaron la tumba de Cantinflas | Suelta La Sopa | Entretenimiento - Duration: 2:02. 
For more infomation >> Ladrón se hace pasar por Daddy Yankee para robarle | Suelta La Sopa | Entretenimiento - Duration: 0:42. 
For more infomation >> Se vuelve tensa la relación entre madre de CR7 y su novia | Suelta La Sopa | Entretenimiento - Duration: 0:34. 
For more infomation >> Fans hacen donativos a Sabrina Sabrok para su aumento de senos | Suelta La Sopa | Entretenimiento - Duration: 0:38. 
For more infomation >> Fidel Rueda presenta su nuevo sencillo | Suelta La Sopa | Entretenimiento - Duration: 1:48. 
For more infomation >> Bill Snyder, K-State football coach, gets contract extension - Duration: 4:46. 
For more infomation >> Dear Samsung - Duration: 9:23. 
For more infomation >> France floods: Pensioner missing and 1600 evacuated from campsites after torrential rain hits ... - Duration: 2:48. 
For more infomation >> What to watch for in 2018 Texans preseason opener - Duration: 3:20. 
For more infomation >> [VOSTFR] iKON - '죽겠다(KILLING ME)' M/V - Duration: 3:22. 
For more infomation >> Ex-Milwaukee TV reporter reaches deal in ballpark punch | National - Duration: 1:25. 
Không có nhận xét nào:
Đăng nhận xét