Data Visualization Workshop: From Start to Finish

Data Visualization Workshop: From Start to Finish


Just to kind of give everyone a baseline of what the expectations are for today, I’m kind
of assuming that if you’re here you’re interested in, one, either
if you’re interested in web development, or you’re interested in how
people like myself are putting together visualizations and how to
specifically work with a specific audience, so in my case, I work
with a lot of faculty members, so in that case I’ll be walking through one
particular project and making sure that I talk about all the little
steps in between that are not so much coding development, but mostly
understanding that user group that I’ll be developing
for. So again, if you’re interested in the web development side, we’ll have some
information about that, and we’ll be talking a lot about the human factors so
that connection between the person and the actual sort of final product if you
will.What I’m going to do now is share my screen. There are a couple slides with this that are going to have some sound. I
typically don’t like to do this, kind of going online, and kind of having
a secondary video playing while I’m doing my presentation, but I
have a couple small videos, they’re only about two to three minutes long, in total,
but hopefully this will work out as it should. So let me share my screen and,
again, if someone in the chat can just kind of let me know that you guys
can see what I’m seeing in terms of the presentation on my screen, again, that
would be very helpful, just to make sure that we’re all starting at the same sort of place. Thank you everybody!
So let me get started here… Okay, so let me make this full screen and start going..
Okay. So I go to this place one second sorry…
Actually, it’ll be fine right where it is, so I’m going it down just a little bit.
Okay so yes, just getting started with this, basically the idea of today is
to start to talk about starting a project and
hitting the end of the project as well, All the little steps in between. The
project I’ll be talking about is actually a project I worked on about a
few months ago, with one of the faculty members here at Huck Institute for Life
Sciences. Specifically, we’re going to be walking through the
first conversation to looking at the data to getting some prototypes together
to sort of finding a final sort of product and at the end of all of this. So
basically, we’ll be walking through all those sort of incremental
steps, and hopefully you’d be able to pull some information from
how this development process actually goes through and how we refined
the prototypes and ideas and get to a final product. A little bit about
myself, I should mention my name is Patrick, Patrick Dudas and I actually
would like to do a little special thanks to Institute for CyberSciences who helped me
market this particular workshop and in terms of Teaching and Learning with Technology, when I have the live version we have a room set up for Althouse Labs,
and they’re nice enough to lend me that location for those particular talks. A
little bit about myself, my PhD is through the University of Pittsburgh where I was
specifically an information scientist and I was specifically looking at data
visualization, social media, and data mining, and I actually currently support
a large portion of the university here at Penn State
through the Huck Institute for Life Sciences, Institute for CyberSciences, and the
Eberly College of Sciences as well. A couple things I’ll
make note of is the fact that when
it comes to these workshops, I kind of think about this in terms of four
different dimensions, when we talk about sort of this development process, one is
the UI/UX, which stands for user interface and user experience,
so basically a lot of stuff that we’ll talk about today, the data and
how we put the product together, coding in terms of developing
the ideas and putting them to a point where we can actually see them online or
put them in a way that we can make use out of them.
And finally, Art, so aesthetics or how things are looking and how if it’s eye-catching or was something where it gets people
involved or interested in what the story we’re
specifically trying to tell is. At the bottom of the screen I have my github
accounts, dudaspm, and in one second I’m actually gonna showcase that. If you
go to my github account, I’ll throw that link into our chat, so if you
go there you’re going to be able to see something called DataWorkshop, and in
there you’re going to see all the workshops that I’ve developed for
specifically that and had some code involved with it, and what we’ll be doing is
working with workshop 5. So I’ll kind of leave it there for now, but if you’re
interested, you can check out that to get resources, there are a number
of different things I’ll be talking about, I’m not going to go into all the
specifics of all these projects if you will, but if you’re interested you can
always go here and utilize this to actually run your own sort of visualizations,
specifically for that one. So again, all the resources used today will be located
here. The final product that I ended up putting together, there’s actually a couple, so… Sorry, should’ve had this, I forgot to keep this rolling…
but the final product for this was actually,
I’ll show right now was looking at connecting
data, specifically about antibody counts and how and when that data was being
collected, so this top plot here, and we were mapping that specifically to a
histogram at the bottom here, but I’ll showcase the data as well as we move
forward, and you’re going to find that it’s not a lot of you know, we’ve got
five different columns of information, a lot of data points, but for the
most part, kind of simple idea, and what the professor or the faculty member was
trying to do is to walk somebody through an example animation. So this was a video we put together, and this was our final product
specifically for that. And I’ll kind of let it play out for a couple more
seconds here, but we’ll get to most of these steps today, and you’ll
have access to a lot of the code that you’re seeing here, the text box is not
presented, but for everything else is actually presented to you if you want to,
again, you can reproduce this particular graph later on if you would like to. So i just showcased the final product. So today, what
we’ll be covering specifically is the development of the project in terms of
some human factors, and human factors is exactly how it sounds, just specifically
it’s basically thinking about that end user, the person sort that will be
utilizing something like this, and it goes into a lot of those topics in terms
of design. I’ll walk you through the project itself, we’ll talk about
something called “paper prototypes” and how you can think about them, utilizing
something called iterative design. Front-end analysis is basically getting
to know your end user better basically, getting to know that information
so you can design specifically for that user group and then finalizing
our project. I break this presentation up into two
sections basically and I have sort of markers as we go through the
presentation you’ll be able to see this. One is the technical side so,
what programs do I need to start this type of work if you if you’re interested,
how do I get these applications to work properly,
create graphs and things of that nature, and then on the human factors side, we’re
going to talk about steps to design, how do I talk to a
specific audience or target a specific audience, and how many designs I actually
need to get a good final product. So we’ll start off
with the human factors side of this conversation, and there’s a number of
different topics that I could hit on, but I’ll just mention a few of them,
again a lot of these have to go into a lot of the final products and final
designs when I’m putting them together, one of the best resources for something
like this is a wonderful book by Don Norman called The Design of Everyday
Things, I utilized it before for classes
when I was teaching students, and it’s still something I use today. And the
design aspect he talks about is concerned with how things work,
how they’re controlled, and the nature of interaction between people and
technology. But specifically, he talks about different appliances, dishes, or you
can see here he has a coffee pot, he talks about basically anything in terms
of design, so it’s not just limited to webpage design or data visualization
design, it’s meant to be sort of an open discussion about any type of design. So a
couple things in terms of why we see poor design, it’s one of those situations
where we don’t notice it until we actually see it kind of situation, where if we see good design we kind of just sort of take
it for granted, unless it’s something that’s sort of novel or so remarkable in
some way shape or form, but we notice this poor design. Basically you can think
about this in terms of, something that I always think about when it comes to poor
design is whenever you go to a shopping mall like a or a grocery store
or something like that and you go to the checkout aisle, and you go to swipe your
credit card and you notice that the fact that there’s no sort of standardization
with those types of devices, so in one situation, you might have to ask, “How do I
swipe? Do I put my chip in?” You know, different button layouts, things of that
nature, so that’s sort of a broad example of poor design, basically having all these different ways to do the same sort of
interaction. When it comes to design, a lot of things in terms of trade-offs
occur, why do we have these trade-off? Things like cost, a specific
aesthetic choice, maintenance, experiences that matter,
but most importantly when it comes to human behavior there’s a lot of
assumptions that are made and it comes from the fact that people assume
that because they’re a person, that they innately understand the human
behavior behind all contexts — which is not the case. We have one perspective, and
so we need to know and understand the other perspectives as well. This first slide is
actually one of those videos I’ll be showing now, but basically on the
left hand side you should be able to see John Norman, basically he’s on the
left hand side there, and what he’ll be talking about is something called a
conceptual model. Basically, a conceptual model is an intuitive
layout or arrangement of an object and helps design, and how well
basically we apply our past experiences to that particular project
or object specifically. So it’s basically if we can
design for that conceptual model, we’re gonna have a better chance
at designing specifically so more people understand it intuitively. So I’m gonna
play this and hopefully everything works as planned… One of the things both of us have
talked about for a long time is the importance of a conceptual model. The
fact that, you know, the designer has some model of what this thing is, and the
person using it is trying to figure out what the model is, and the only thing to
go on is the device itself. And you said you had trouble with this and it looks
to me like it’s a pretty straightforward bowl, so what’s the story? Well I came
across this at a hotel in Stockholm, Sweden, they had a whole big stack of
jumbled up for us to put our breakfast cereal in and so I made the mistake of
putting my breakfast cereal in it. I poured the cereal into the bowl, and
then I added some milk, and I do like my milk, so… All the way up to the rim yeah, because that’s just the way I like it and then I put it down on the table. Now that does not require a warning notice, that requires a redesign. So the
conceptual model of a bowl is that is flat and horizontal and that’s what people expect… and as long as you’re
holding it this way it looks like it is right? Yes and particularly the way it
was jumbled, one bowl on top of the other, now, what it was intended for was
to make a nice presentation, for having the chef fill this bowl, and then a
waiter bring it out to your table so they’d pressed it into a different
service. So wait a minute, you found this in a hotel in Sweden? Alright, I’m gonna pause it there but if you’re
interested, you can watch the rest of this, but again just sort of gives you a
little bit of introduction to what a conceptual model is, and when it breaks
down some of the issues you might run into. Keep an eye on the chat
as well… Okay, the next topic we’ll be going into is going to be something called
affordances and anti-affordances. So when we’re thinking about the bit with like a
visualization or any kind of web page specifically, we’re going to be thinking
about making things intuitive and making sure that people know that
there’s some sort of relationship between what they’re seeing and how to
interact with it. And affordances are basically that
relationship between an actual object and noticing how to use that particular object intuitively without having to have
instructions or something to tell us exactly what it is. I
have two examples, I’ll go over this, the top right-hand side is actually a bad
example of affordances, which is a little bit easier to showcase versus
good affordances kind of idea. But what you see is basically, if you’ve ever gone
to, I see this a lot in terms of like movie theatres, but it’s basically that
bar that goes between the two doors, and so when you
walk up to it you walk the wrong side and all the sudden you’re pushing on in
and kind of walking into the door kind of situation… You know you’re supposed to
push it, but you’re not sure what angle to come from to actually interact
with it. On the bottom right hand corner is
something called an anti affordance so we’re trying to make people not do a
certain action, so this is sort of a great example of that, where they use
lines on the road and basically, the lines get closer and closer together. And
what that sort of tells the person as they’re driving is, even though they’re
trying to slow down to go 25 miles an hour, it’s a situation because the lines
are getting closer together, it’s actually causing them to slow down even
more, because it looks like the lines are sort of coming at the same speed which
is going to kind of make us want to slow down a little bit more in that regards. And so that’s the idea of that affordance
versus anti-avoidance idea. A signifier is basically attached to that affordance
idea, it’s more or less just a marker or sign or signal of some sort, so an
exit sign is a very good example of this, basically it’s telling you
specifically what to do or what the action is that can occur at that point.
So basically, if you want to be really good at design, you’re going to have a
signifier plus the affordance, but you can get away with either-or, but for the
most part if you need a signifier, it basically is kind of one of those
situations where maybe it’s not as intuitive as you would like it to be, so
just a different way of looking at it. One another topic is the
idea of mapping and this is sort of mapping relationships
between objects in this regard. So my example here at the bottom of the screen
is, we see that we have a situation where we have
some various layouts of a stovetop, and so on the bottom left-hand corner, we
have more of a very poor design in terms of the mapping is
sort of incorrect, it’s very difficult to actually figure out which
of those knobs goes to which of the burners. And it gets a little better
as you kind of move from left to right. And then full mapping is basically a
very intuitive mapping between those two different types of layouts if you will. I
can attest to this because this is actually, what you’re seeing here, is
actually my stove top, and I used some white circles to highlight where the
burners are specifically but for this it’s sort of the same situation. If, you know,
the top right-hand corner is actually where one goes to, bottom right-hand
corner is two, top left is thre, and then four is the bottom left hand corner. So
it’s not intuitive in terms of making that connection between what
we’re seeing on the right hand side and how the actual burners are laid out. And
it’s caused some issues before, luckily no one’s ever been burnt or anything
like that, but it’s just one of the situations where it’s
something you see a lot in terms of poor mapping between
the two objects being involved here. Okay, so in terms of our
our client, if you will, the faculty member I was working on, so we kind of
hit some of the basics in terms of the human factors side, we’re getting now
into the project, there’s a faculty member, Maciej who’s here at the Huck Insitute of
Life Sciences, and basically he approached me to
help him put together an animation or a visualization to promote some of his
research, and so basically he reached out me, he’s a mathematic, statistics, and that
nature, and so he came to me and said, “Hey, could you help me with a visualization
that I’m trying to put together?” And for the most part, here’s the data set, first
I’ll make note, there’s obviously no human data to connect to any
individual or anything like that, it’s very very very high level in terms of he had
an antibody count and, don’t ask me what disease or virus he’s talking about,
I specifically meant to kind of keep this at a very very high level. So
basically, there was an antibody count or a value, so that’s what you see on the
left hand side, and a date where this information was taken, so a test was
done, and an infection date. So an actual infection date. So the idea was the
relationship is going to be, if it has a higher antibody count, we’d assumed that
the infection was a lot farther back, or vice-versa in terms of lower values. This
gets us into one of our topics, one of the main topics that I’ll be talking
about in terms of putting together some ideas if you will. And this goes into
this idea of sketching. So sketching is basically a very quick and crude way of
actually getting ideas on a piece of paper, and what we’ll do is I’ll sit down
and we’ll think about things in terms of you know developing ideas and working with a faculty member to communicate these ideas via piece of
paper and a pencil. Great for design choices, ideation, putting together these ideas. It’s also to kind of think through
the ideas, force ourselves to kind of visualize a lot of the medium,
and also helps in terms of getting a common ground between myself
and the faculty member. Also I can come back to these records in terms of I
have these designs, so I can come back to them and say “We started here, how
did we sort of move from that process?” and sort of reflect and
communicate between each other as I already mentioned. So this is actually
one of the things I use utilize a lot in terms of my design I have a sketchbook
and a number of colored pencils. And what I’ll do is I’ll sit down with that
faculty member, and I’ll open that up in terms of the colored pencils, and I’ll
let them sort of walk me through and use colors and draw out what they’re thinking specifically, so it allows me to actually
very easily connect to them and ask questions without doing a
lot of design aspects. I know this is a little bit difficult to see, I think it’s
a little bit better in the actual presentation, but this was actually
one of our first drawings and our first starting point if you
will. And as you can kind of see here, the top graph and the bottom graph kind of
emulate a lot of what we’ve seen, the final product. Basically
having the antibody account going up the the y-axis, and having the year, in this
case it says 2013, and then mapping it back to some sort of histogram if you
will. So this is our first conversation piece to kind of
get us going in terms of seeing putting an idea together.
I have a couple other sites I’m going to show here, but one of the nice things
about doing these sketches is the fact that I’m not developing
anything. There’s not a lot of expectation in terms of this
development process, we can have an easy conversation, I don’t have to
code something, come to him, come back and sort of situation, again, this is just
a good starting conversation and again, a lot easier for me to take that
piece of paper and throw it away versus doing a lot of coding and
development beforehand. So this is again that first sort of way of
looking at this if you will. I have a couple quick little examples,
I’m going to kind of share about 20 seconds of each of them, basically there
is — Sorry, let me mute that… we don’t need to
sound for these ones, but for these ones basically, they’re just kind of showing
you different ways of doing paper prototypes. So on the right hand side, we
have a situation where they just think you know – picking a piece of the paper,
folding it up, layering on top of one another, a lot more sort of I’ll say more
you know a little bit more fidelity in terms of the prototype, but for the most
part it kind of gets that idea across pretty quickly. The one on the left hand, basically, I’m just going to skip forward, it’s a very very
detailed paper prototype if you will, so again I won’t go through the
entire video, but it kind of gives you an idea of how elaborate some of
these can be actually. So they’re using some sticks to actually move and have the
changing of the character, the hair of the character, facial features,
things of that nature kind of they have a sort of player in
there, they’re designing a game of some sort, and so they have a lot of detail
and a lot of movement and stuff like that, again, a little bit more detail
than I usually get into but for the most part, another kind of cool way of
actually doing game design in this case, without having to do any kind
of coding. Okay, so now we’re going to be walking into the more technical side of
things. So to this point, we’ve kind of walked through the idea of
putting together, thinking about the project and how we’re starting that
particular project. This first step is actually getting us more into the
conversation of, if you’re interested in developing a web project or
something like that, how you would actually go about doing so. I’m going to
spend a little bit of time in terms of going through some of these
steps, but for the most part the instructions are available through the
presentation, but if you run into issues please let me know we can have a
conversation after this one today, but for the most part, this is to me is
one of the more straightforward ways of doing this. When
it comes to running a web server, if you’re on a Mac
they natively have this installed for you, but for Windows you
have to actually install something to get a web server actually up and running.
So to do this, I provided a link, and I’ll kind of walk through this a little bit… Apache is a open-source product,
basically it’s sort of a way for you to download and install, it’s a
the web server of some kind… If you already have access to web server, a whole lot
of this information you don’t have to worry about, this is just if you’re
interested in development and you want to do something that’s local to your
machine. The one I recommend is the Apache lounge, so that button there… And
if you are again, the Windows user more than likely you’re going to use that
win64 version for most modern systems. So we just click on that and it will have a
zip file at that point. All I need to do at this point is, if I unzip this, so open
it up, I”m gonna have a folder called Apache 24, and all I
need to do is open up my C-Drive, and drop it in there. I’m not going to do
that now, because I already have one installed, but you just take it over and drop it
over here. And for us, that’s all you need to do to kind of get things installed if
you will, again, it’s one of those situations where I really like this
installation because it doesn’t really “install” anything per se, you’re just
running the actual server when you need it and when you don’t need it kind of
situation. Again, Macs have this built in natively, so you actually
don’t need to do anything specific for that. So as I already mentioned, you’d go to
the Apaches, sort of drop it into the C folder, and you have it installed there.
One thing I’d would like to mention and I do recommend this very much so, is the
fact that if you would run this Apache application, basically it kind of opens
your computer up to be a web server. It’s actually what they would utilize on any
kind of web server. So one thing you do want to edit is something in the, it’s called
the “httpd.config” file. It’s basically the config file for Apache.
And what I’ll do is, I will open mine on here, so it’s located at C:Apache24 and then inside the config folder… Config and then inside there, there’s going to be a file called “httpd.config”.
For Mac users, it’s going to probably be on a different location, I kind of list
ones that I’ve ran into, so I have that tested here. And all you need to do is
actually just open up this file as a text file, so let me open that up, I’ll
expand this a bit… And for the most part the main thing we want to change is, and
you can either search for this or just scroll down, is this section right here.
In this case originally it’s going to look like this and it’s going to say “Listen 12.3 4.56.78:80. What we want to do is
just add a line here that says “Listen”, and then this specific number
sequence. So 127.0.0.1 : 80 and all that means is it’s
only going to listen for traffic from that particular IP address
which is actually your local machine. So
basically it won’t allow any outside connections,
it’ll only let you as a developer go to this particular IP
address, and you’re the only one that is going to be able to see this. So it doesn’t open up any kind of issues or anything like that, but basically it sort
of locks it down so only traffic that’s going to be utilizing your webserver is
just your local machine specifically. And so what you’ll do is make that edit,
you’d save it, you’ll see I saved it… Come back here… Again, you do that for
both Mac and for the PC versions. You still have the documents, and what we need to
do now is basically start the web server, if you will. And again, I kind of
like this because you’re going to be actually starting the server,
turning it off as well. Again, if you have access to a department web
server that you can develop on, that’s the best scenario, but if you
wanna have a local instance this is going to be how you’re going to do it.
I have both the Mac version and the Windows version, so for Windows, all
you need to do is actually go to your little window icon at the bottom, and
type “cmd”, and this is going to bring up something called the command prompt. And all we need to do is navigate to where
the actual application is. And so what I’ll showcase is a couple really
quick commands to get this actually
accomplished. And this is true for not only Windows, but also for Mac or Linux
or anything like that. The command is C as in Charlie, D as in David, and then
space dot dot, and all this does is basically, if you see here, it says “C:Userspmd19”, if I run that it moves me back one folder. Then I do that again and
it takes me to the C Drive. And now all I have to do is CD, and that means change
directory, to Apache, and then into bin. And so now, I’m inside that bin folder. So right now I’m in the bin folder, and
all I need to do to start this actual server is type in httpd.exe, and hit
enter and it’ll start. I already have one running so it won’t let me run it again
I’m you know because it’s obviously already running for me and so I’ll run
this, and basically as long as this command propmt is open, the server is
running. If I want to turn off the server,
I click the exit, the little X button, and the server’s off. And again, this is going to be something where this allows you to actually
have a web server to actually develop and put your programs
and start developing in that environment if you will. Let me minimize this… Okay,
and for Mac it’s a little bit different, you’re gonna open up a Terminal, and to
do that I have some instructions up at the magnifying glass you just search
Terminal, and then you just have to run this particular command. And that’ll get
things going for you. And to test this all we have to do is go into a browser,
so in this case, although my browser is obviously already open, and what you
would do is type in either 127.0.0.1, which I’ll do now, it’s
going to be a little bit different on my end versus what you’ll see on your end,
this is going to show you all the projects that I’m working on, because
I don’t have the particular file… I’ve used this a lot, let’s put it that way.
You can either do that, or do something called localhost. And if you type out
localhost, it will be the same exact thing. And again, localhost
and that 127.0.0.1 is all local to your machine, it’s not going out to
the internet at all. It’s basically just running everything locall. And what you
should see on your end, if you’re just doing this for the first time, you should
see a window that pops up and it says, “It works!”. And that’s it basically, if you see
that, it’s working for you as an attendant. The last thing I’ll
make mention of is, just to get things going with our project today, what
we’re going to do is we’re going to go to our github account, and github is a
way to sort of publicly make projects available, it’s a free service
for people to utilize… So again, something where if you’re working on a
project and you want to get other people’s feedback on it and you’re
okay with it being in the public space if you will, github is a great
way to do that. Let’s go to github real quick… And when you go to that
particular site, again, this is gonna take you to dudaspm, my github account/Data
Workshop, which is the workshop for this particular Data Visualization
Workshop. You should see a button over here that says clone or download. You’re
going to click on that, and you’re going to see an option for download zip. So you
see at the bottom left hand corner, it downloaded, I can now open it, and what I
want to do is actually drop that into… we’re going to go, under C:, we’re going to
go to Apache, and then when you put, if you have projects you’re going to start
working on, where you want to put those particular projects is the folder called
htdocs. So I open up that, and again, for you it’s going to just have one
single file, but for me cuz I have a obviously a lot of projects that I’m
working on, you’re going to see a lot more folders in here. But all we need to do is unzip the folder and then drop it directly into your htdocs folder. And you should
see a file that’s called Data Visualization-master. And in there
you’re going to see a couple projects which is the ones we see right here, and
we can actually start looking at some of these projects. So if you go on your web
browser, and go localhost, and you find that DataWorkshop-master, workshop5, and then let’s say we start with start.html… There you go, you
should see that webpage pop-up, and it should say “very basic webpage” or we can
do basic, and you should see that basic webpage visualization pop up for
you as well. Just trying to keep an eye on the chat in case there’s any kind of
questions… so yes this is how you go about starting this whole
process to actually get starting on development. So for the most part, if you
can get to this point, you can start putting these projects together and
developing some of these actual web projects or data visualizations, web data
visualizations as well. Ok, back to the presentation,
one thing I’ll make note of is the fact that in terms of text editors that are
available, the one I typically use is something called Notepad++,
here’s a link to it. It’s what you saw here… So basically it’s nice because it
has different tabs so you can sort of see different pages you’re working on, it’ll also encode each of the pages as well, so if I go, and let’s say I choose this index page, it’s going to encode things, so comments are specific
color, numbers are a certain color as well so it just helps in terms of
making it more readable in that regard. So here is our first design. And so
basically, I took the data that we talked about already, and just plotted
this out. And what I’d like to do is just talk a little bit about
designing a very basic web page and how we got this first
visualization put together. I’m not going to spend a ton of time on the further
projects, only because the focus today is on getting things started. But again, if you’re interested, all
the source code is made available to you. So mine starts HTML, if
you’re new to development this is basically what a web page is. This is, any
web page in terms of what you go to, you know Penn State or Google or anything
like that, this is the basic structure of an HTML page or a web page. You have some tags that sort of start and have a little slash, it’s sort of end thing, that sort of tells you that this is an HTML page, and then you have two specific
parts: you have the head or the header and then the body. Basically the body is
what you see when you go to that web page. So if I go through here and save, and go back to here, and check that out.
You see I made a little small change in the body and now that’s showing up on
the webpage now. So that’s just sort of the basic structure if you will.
Now in terms of the visualization and again, I’m not going to spend a ton of time, I also try to go through and add documentation throughout this, so if you
have any questions you can kind of refer back to this and hopefully kind of walk
through it. I use something called D3 to do most of my visualizations, so let me
show that real quick. D3 stands for data-driven documents, again, open source,
free library to utilize, it’s something called JavaScript, so it’s basically if
you get into development, Java Script is the programming
language if you will of web pages, one of the more basic front ends if you will in terms of coding or development.
D3 is a wonderful library to try out different types of visualizations,
definitely a little bit of a learning curve to it, but it still gets you kind
of going in terms of some of these ideas. If you’re interested in something that’s
a little, again, this has a little bit of a learning curve to it, if
you’re interested in getting baby steps
into data visualization, I’d highly recommend checking out something called
Vega-Lite. I’ll show that right now… Again, free to utilize in terms of it’s
open source in that regards, has some great examples, so examples here, very straight, a lot easier to walk through some of these examples, a good
starting place if you’re interested in getting into making
some of these data visualizations, try this out first. It uses D3 for a lot of
what you’re seeing, so basically once you get a good handle on this, coming
back to D3 you have to learn some of the little nuances and stuff like that, but
again, it’s sort of a nice little way to get your feet wet if
you will to getting some data visualizations together. So for ours,
again, what we’re doing is we’re creating, D3 uses something called SVG or
scalable vector graphics, vector graphics is sort of the way it’s generating these
plots. It’s reading in a file and it’s mapping it to an XY coordinate plot,
and what we’re mapping is basically the date that data was being collected, and
the antibody value. So it’s using that sort of as our plot, let me bring that
back up real quick… There we go. And so we see at the bottom we have all
the years of the data that’s provided to us and antibody value. And
it goes from, I think basically, right above 0 to about 1800. So basically,
this is where we started. So we started with that first sketch, and then here is
basically the first conversation and the first thing that I actually coded for
the faculty member. So is our first design, and what I’m going
to do is get back here. Oh, one other thing I’ll make mention of is
that while you’re developing, you might want to double check and
you might run into errors or issues with the code, it is coding so
obviously there’s a way to debug this type of information and I’ll show
you how to do this in Chrome, so let me do that right now. So
in here I have my project up and running, and what you can do is, if you click the
dots over here and go to More Tools and then developer tools, or Ctrl-Shift-I,
if you want a shortcut, you’re gonna have a prompt show up and basically in here
is your development tools and specifically under this console is where
you’re going to see errors that sort of pop up. So let me make an error… So
save, and refresh… it’s going to say, “Oh we ran into an issue!”
Basically this combination of letters I just put on here is not defined. So it’s
not a variable, it’s not a string, it’s basically just…. it’s an error. So it
tells me where it is, it tells me which line it’s on so it can highlight it so it’s
easy for me to debug it, come back, make sure everything works okay, save, reload
and… no errors. Everything is good, basically. But as you develop more code,
you’re going to use this debugger or console down here to make
sure that things are working properly or if you get any errors you’re going to be able to check here and see specifically where that
actual code is referencing and where the error is actually specifically occurring.
So a great way to sort of debug things. So I kind of wanted to walk through this,
and so we have the technical level we’ve talked about, getting our web server up
and running, securing it so it basically only listens to that local traffic, we
moved our project into our htdocs folder so we can actually run and utilize this,
and we talked very basically of what makes up a web page and hopefully
you have some links now that you can check out and see
as we’re developing how we actually developed this particular project. So
moving back into the human factors side of the conversation, we’re going to start
talking about something called front-end analysis and what front-end analysis is
basically, they’re common questions I’ll ask a faculty member when
I’m starting to develop these projects. Who are the end-users that
are going to be utilizing this and in what type of environment will this be
utilized? What are the tasks, so what does he need to have accomplished, or
what will his users need to have accomplished? And what functions, what
things does the system have to do to facilitate completing
those particular tasks? The first thing we’ll talk about is
something called the “User analysis”, again that’s who’s going to be utilizing this
system? One of my biggest pet peeves when it comes to teaching this particular
thing to students, is the idea that when I talk to students I’ll ask, “Hey, you know
when we talk about users, who’s using this system?” A lot of times I’ll get feedback from them saying, “Well, everyone’s going to be using
this particular sort of thing,” Everybody is my user group, basically. And
so I would tell them, I have this slide pop up and say, “No,”
that you can’t assume that everyone is going to utilize what you’re trying to
put together. Difference between another faculty member seeing this
information versus my three-year-old daughter seeing it kind of situation. Like,
there’s going to be some specific people that are going to be utilizing this
particular webpage or visualization, and we need to design specifically for that.
Things to think about in terms of user analysis, age, gender, educational level,
reading ability, basically a lot of task relevant skills and familiarity to the
product idea as well. So for us it was basically fellow researchers or
doctors, roughly 25 to 60, gender, both male and female, and then familiarity to the
product they would be familiar to the concept, but the idea itself is very
novel, so it’s basically a novel way of actually presenting this information. Environment goes into where this
is going to be utilized, and this is actually more crucial than
most people think. Typically you’ll think about things like location, temperature,
or lighting, things like that, weather or noise, stuff like that, and again that’s
more for any types of system. So for us, we had to consider the fact that he
wanted to present this information at a conference, which he did not know if he
would have Wi-Fi access, it was meant to be during a presentation, and also he
wanted to provide a voiceover while he was showcasing this particular
visualization. And that’s why the final product ended up being an
animation. He could download it, embed it into one of his Powerpoints, and just
push play, and have it play out as well. Another thing that this
brought up is the fact that while we were developing it and if we’re going to
be using it for an animation, we actually had to talk about putting a
script together, so he would give me information so I knew where pauses
needed to be, and where text needed to be as well. So a couple crucial things were
learned through the environment analysis. Tasks basically is, what do users need in terms of what tasks are they interested in having and how do we accomplish those tasks? So the functions needed to do that. For us it was, present
a novel idea that showcased the two specific scenes and the function
basically means the visualization would have to smoothly transition
between those two different scenes. So basically, when data was at the top of
the screen and then moving to specifically the other visualization at the bottom. Task number two would basically show small
examples to build to larger ideas, and so for us we decided, instead of showing all
the information at once, we were just going to showcase one specific year, so
2015. So basically, taking the entire set and then specifically stopping and talking about specific points first, then introducing a
year, and then giving the whole data set at that point. So couple things,
design for short video, something that can be embedded into a PowerPoint, and
develop a script for small data set to one year, to all the data. In terms
of design, one of the best ways to actually go about doing a design-
process, if you will, is the idea of iterative design process. Sometimes, it’s a situation where I’ll kind of reference some of the
students I’ve worked with over my time of teaching and things of that nature,
they always kind of would have a project and a
deadline for a project, they would put all the projects, you know, they would
develop the project, and at the end of it they would just hand over the project to
the teacher. So they would turn in the assignment if you will. And in situations
where something like this is going to used in a presentation, we need to have
sort of a back and forth between myself and that faculty member. So we will start
with basically that sketch, first draft, second draft, third drafts,
all these drafts basically till we get to a final product. And that’s basically this
iterative design process. I’d like to showcase it, I’m only going
to show about two minutes, I think two and a half minutes, of this particular
TED talk, it’s about eight minutes long, I highly recommend maybe coming back to it,
and checking out the rest of it, but it talks about the iterative design
idea. It’s specifically for something called the Marshmallow Challenge. So I’m
going to mute myself here, and put this back in place. So again, I’m only going to
show a couple minutes of this. “Several years ago here at TED, Peter
Skillman introduced a design challenge called the Marshmallow Challenge and the
idea is pretty simple: teams of four have to build the tallest freestanding
structure out of 20 sticks of spaghetti, one yard of tape, one yard of string, and
a marshmallow, and the marshmallow has to be on top. And though it seems
really simple, it’s actually pretty hard, because it forces people to collaborate
very quickly. And so I thought this was an interesting idea, and I incorporated
it into a design workshop and it was a huge success. And since then, I’ve
conducted about 70 design workshops across the world with students and
designers, and architects, even the CTOs of the Fortune 50, and there’s something
about this exercise that reveals very deep lessons about the nature of
collaboration and I’d like to share some of them with you. So normally, most people
begin by orienting themselves to the task: they talk about it, they figure out
what it’s going to look like, they jockey for power, then they spend some time
planning, organizing, they sketch in, they lay out spaghetti, they spend the
majority of their time assembling the sticks into ever-growing structures and
then finally just as they’re running out of time, someone takes out the
marshmallow, and then they generally put it on top and they stand back and, ta dah!
They admire their work. But what really happens most of the time is that the
‘ta dah’ turns into an ‘uh-oh’, because the weight of the marshmallow causes the entire
structure to buckle and to collapse. So there are a number of people who have a
lot more uh-oh moments than others, and among the worst are recent graduates of
business school, they lie, they cheat, they get distracted,
then they produce really lame structures and of course, there’s teams
that have a lot more tada structures and among the best are recent graduates of
kindergarten. And it’s pretty amazing, as Peter tells us, not only do they produce
the tallest structures, but they’re the most interesting structures of them all. So
the question you want to ask is, “How come? Why? What is it about them?” And Peter
likes to say that none of this, none of the kids spend any time trying to be CEO
of Spaghetti Inc, right? They don’t spend time jockeying for power, but there’s
another reason as well and the reason is that business students are trained to
find the single, right plan, right? And then they execute on it. And then what
happens is when they put the marshmallow on top, they run out of time, and what
happens? It’s a crisis! Sound familiar? Right? Okay, what kindergarteners do
differently, is that they start with the marshmallow, and they build prototypes,
successive prototypes, always keeping the marshmallow on top, so they have multiple
times to fix it and build prototypes along the way. So designers recognize
this type of collaboration as the essence of the iterative process, and
with each version, kids get instant feedback about what works and what
doesn’t work.” Okay, and
yeah, again, a couple more minutes, he goes into a conversation about
how when incentives are used as well, how that changes the
construction, how well it actually is done in terms of a complete structure,
kind of a cool initiative for that as well, so check it out if you’re
interested. But it sort of highlights specifically the idea that, you know,
basically, we have to think about design processes in terms of iterative design,
it can’t just be a final marshmallow on top of the design process. Last thing in
terms of just things to consider, critiquing, I kind of bring
this in here just to, on the last two sort of points, basically, you know if
you’re working and you’re working with that faculty member, you want to
make sure that when you get feedback you’re getting an idea of why
they have that particular feeling, so you can make
sure you design specifically between, focus on that why and make actionable suggestions. So basically when you’re trying to get feedback, make
sure we have a good plan put in place for the next iteration if you will. So back
to the technical side of things, so this was our first design, and basically I sent this out, we started working from there, I have a couple
little emails back and forth, couple of the things, one of the nice things
about starting at this level it was, one, we were able to find an issue
with my code in terms of, I’ve mentioned that this was months, when actually it
should have been weeks, so they should have been basically per week and then
per year as well, and so we were able to correct that, I had some questions about the
data and the max values, as you can see there was a lot of max values
up here and I was wondering about that and I was able to get that feedback to get our second round put together. Things I learned from
that process was that anything that had a value of zero or N/A, we need
to remove it Month should be mapped to week
specifically, not you know, month to month, kind of situation and… we were concerned with, we were comparing
the date taken that of the antibody value and the date that was taken versus the antibody count itself,
so a histogram final display. And so here, the second
iteration of this basically put these two ideas together, so we have our
two plots, and I’ll show that real quick here… Second design, and so this was the second design, and so basically we see a lot more data being filled in because I
changed it from months to weeks, we also have a couple of simple
interactions at this point, so anything with a N/A value or zero is immediately
removed, which happened to be values basically around 150 and lower and so, we got that out of the way, and
then the next thing we did was I wanted to transition smoothly from the top plot down to the
bottom plot and that’s what you’re seeing here right now. This worked in terms
of getting some ideas together, but we weren’t satisfied with that
version as well. So what we talked about, and I’ll talk about that right now. First of all, the first animation needed to be quicker. It was basically very quick we didn’t need to really see that information so that had to be sped up a
bit. That is in batches, one of the things that I was told about was, because
of these weekly pooling of information, or testing, or something
to that effect that a lot of the the information was actually pooled, you know,
so you can actually see specific sort of patterns in the data… And I’ll maybe
refresh this so you can kind of see that there is data, gap, data, gap, data, gap, data,
gap, and so on and so forth. And so could we use that to our advantage to
tell our story? Okay, the next thing is also to slow down
the second animation. Originally as you can see here, basically,
I’ll just say random values were being moved from the top to the bottom,
and we needed to show that in a more elegant way as well, just to tell
that story better. And so, I’m sorry, the wrong image here, but I’ll show you the
final one for what we have… This is our third design, so a couple things we wanted to
be changed on this is that we decided to color code, these weekly
bins if you will, and again you can see data, nothing, data, nothing, data, nothing, so
we were able to, I’ll just say, loosely cluster all this information.
We’re focusing on just from 2015… well one other thing we did but that I didn’t
mention specifically was we had a common x-axis, so we have a date/time lined up
so we can tell that if something is happening up here, we can map it directly
to the same timeline. Now when I click, very quick, get rid of that data,
click again, and we transition and what it’s doing now is actually transitioning
from the lower values up to the higher values of the antibodies. And you can kind
of see the lower values map farther back versus the higher values, which makes
sense in that regard. So I’ll let just kind of play out for a second here, but
this was our takeaway in terms of one of our good final products if you will. There was a couple designs in-between
all this and whatnot, but for the most part, this is what we were looking to
accomplish and tell that specific story. A couple other things:
Basically, you know, same at the top and the bottom, we’ve kind of already
mentioned a lot of this informatin, what we learn in terms of, we also filtered
the data and clustered basically on that weekly data collection.
So if you’re interested, say you design, you put together this animation, and now
you want to put it together in terms of recording it
and creating a natural animation. For Mac users, I think they might natively have
something that you can use to record your screen, but if you’re a Windows user, I
highly recommend something called the Open Broadcast Software or OBS. A lot of
people are utilizing this now for recording videos and putting them on
YouTube or on streaming services that are out there, but it’s a very easy way to record actual video for your project. So it’s also free
as well, so you can play around with it and actually record some of
these animations and so you can do that for projects as well. And one other thing
I’ll mention about that, is when I finish up a video, sometimes PowerPoint has some
issues with encoding issues or something to that effect. Another website, it’s free
to utilize if you’re only using for it for a smaller project, called Cloud
Convert, you drop your video file, your mp4 or whatever that your video is, and
then you can change it to different formats, make sure it’s the right
encoding for PowerPoint and all that stuff, so this is a great resource to utilize.
So yeah, that kind of hit specifically everything I wanted to
talk about today, we talked about going through some of the human factors of design, things to consider, ideas to consider as well, we talked about how
we sort of approach projects in terms of things to consider in terms of
affordances, anti-affordances, conceptual models, mapping, everything of that nature.
And so you kind of get that relationship, also we talked about
introducing the project and walking through some of the basic steps,
we talked about paper prototyping and that iterative design
process, some of the common questions I get into in terms of that front-end
analysis, so who are we designing for? What environment will be utilized? And
then finalizing that project. So from here, I’d like to thank everybody
for coming out today, I’d like to stay on the line here just so if there are any
kind of questions, I can answer them now, if there are follow-up questions, feel
free to email me at [email protected] and i’ll be happy to
follow up with you in that regard as well. If there’s any kind of
clarification, always feel free to email me in this regards, but again, I’d like to
thank everybody for coming out, this is our last workshop for at least the
summer, hopefully we’ll be coming back with these in the fall, so if you have
any suggestions, again, email me or check out the survey that I’ll be sending out
probably tomorrow morning, and provide some feedback so I know how to design
some of these for moving forward. So again, thank you for coming out, I’ll keep
an eye on the chat here… So if there’s any questions, if not,
again, thank you for coming out today and I appreciate everyone taking the time to
check out designing some data visualizations and the human factors
involved with it. You’re welcome everyone, I very much
appreciate you guys coming out to hear me talk today, so again feel free
to email me or contact me, and I’ll be happy to have a follow-up with you as
well. So there’s a question in terms of the
video, I do record these and I send this off to the Institute for CyberSciences
and they actually will have it on their YouTube page, so if you check out their
YouTube page, again, it’s ICS or Institute for CyberSciences, their YouTube page
through Penn State, well, they’re a Penn State Department and they have a
YouTube channel, you’ll eventually see it up on there as well, so it will be made
available afterwards. Again if there’s any follow-up questions,
please let me know, I’ll be happy to address them, if not, again, thank you for
coming out today! you you I’m going to close up things on my end
here if there’s any follow-up questions please feel free to email me I’ll put my
email address in the chat : feel free to email me and I’ll be happy to follow up
but I’m going to close out for today again thank you for coming out today!

Related Posts

26: Getting Creative with Digital Arts  with Janaina Oliveira

26: Getting Creative with Digital Arts with Janaina Oliveira

Hello welcome to this episode of A Creative Approach Podcast I'm your host Karen Poirier-Brod. I'm excited today to have
Appreciate Arts & Culture in Daytona Beach, Florida :60
ART/ARCHITECTURE: Andy Warhol

ART/ARCHITECTURE: Andy Warhol

Andy Warhol Was the most Glamorous Figure of 20th Century American Art Born in Pennsylvania in 1928 to czech parents

Leave a Reply

Your email address will not be published. Required fields are marked *