Community Visualizations: Converting Existing Visualizations

Community Visualizations: Converting Existing Visualizations


[MUSIC PLAYING] YULAN LIN: Hi, my
name is Yulan Lin, and I’m a Developer
Advocate for Data Studio. In a previous
video, I showed you how to get started with the Data
Studio developer tooling, which provides a template
visualization and really opinionated and helpful scripts
to help you get started. In this video, I’ll
show you how I actually use the tooling to
build a visualization. Often, when I’m building a
visualization for community visualizations, I’m
starting with a viz that I’ve already
built using local data, and I’m converting it to work
with Data Studio Community Visualizations. Let’s take a look at
a heat map that I’ve built in D3.js that I’d like
to put into Data Studio. So I’ve built this heat map. It shows temperature by day
of week and time of day. And so you can see that
there is two dimensions. There’s an x-dimension and
a y-dimension along which the tiles are distributed. And I have one metric that– in this case, it’s temperature–
that I use to color the tiles. Now, in order to use the
local development tooling to convert this into a
community visualizations, there’s two parts to it. One is the local
development workflow. What are the things I
use with our tooling? How do I get started? What’s the order in which
I run different scripts? The second
consideration I have is, what’s the difference between
having a visualization that runs off of local JSON
and a visualization that’s taking in data and user input,
sometimes, from Data Studio? So let’s review what
some of those differences are, what some of those
workflows look like. So the workflow for developing
a community visualization using the tooling, first thing you
start with is you make a new project using npx
@google/dscc-gen viz. You run this command
in the command line. It sets up a project for you. You have sample data. You have a working
visualization. You have some nice
helper scripts. The next thing you do is
you update your config. You update your
visualization config so that you can get
new sample data. We have some helper
functions that allow you to run a quick command
so you can deploy something in Data Studio and get
a sample of the message that you might get
from Data Studio when you’re running
the visualization. Then you develop locally. This is what’s really fun. You’re able to see your changes
really quickly in your browser, and once you’re happy with them,
deploy them to a dev bucket, maybe make a couple
more changes, and then deploy a prod
version, something that you’re ready to share,
and then use it in reports, share it with other people. The other thing we want
to talk through first is how you would
convert a visualization. So one is that the data
format is different. I’m not going to
talk through all of the nuances of how to access
your data in Data Studio. But if you review
our documentation, we have a very specific way
that you access your data that might be different from,
maybe, a hard-coded JSON file that you’re used to. And most of that
is because we want to make sure that you know how
to access the data no matter what fields the user inputs
into the dimensions and metrics of your visualization. The second thing
to pay attention to is how to update variables
for accessing style elements. Community visualizations
expose style elements in the Property
panel, where you’re able to say, change the font
based on user selection, or change the color of something
based on user selection. But this means that, instead of
hard-coding what your font is or hard-coding what
your color scheme is, you want to change
those to be variables to access the data that
Data Studio passes to you. These are points that
I’m going to gloss over in the next couple of minutes. So keep them in mind
when I talk about, maybe, some of the things
that I’ve skipped from going from a
local visualization to a community visualization. So now let’s take a look at
the community visualization template. All right, so I’ve
set up a template viz that I’m going to use to
convert into the heat map. And so this is
basically what pops out at the end of creating
the viz template flow. Now I’m going to
go into my editor. And this is index.js
of the viz template. A couple of things
to note right now– one is that local is true, and
two is that I’m currently using this viz.firstViz(), which
is the viz template that the visualization
template spits out. Now what I want to do is I
want to update the config. So I want to update
source index.json. And so what I’m
going to do is I’m going to replace it with
a configuration that defines two dimensions
and one metric, as I was talking about
with the heat map before. And I’m going to
copy and paste it in, because I don’t think any of
you have interest in watching me write JSON from scratch. But just to review– two dimensions, one metric,
and then one style element. Basically, I want
the end user to be able to choose what font
the visualization is using. So now that I’ve done that, I’m
going to go into my terminal. And I’m going to run
this command, npm run update_message. And what this does is it
deploys a visualization to Data Studio that allows
me to get a sample post message from Data Studio. And so I will copy that viz
bucket that was spit out, deploy the visualization
in Data Studio. And you see, now, that
I have a sample message. I’m going to go into the
style of the Property panel and select a particular
font, maybe Tahoma, go into View mode,
and copy this message. The next thing I’m going
to do is go back to my code and look at this
localMessage.js file. So this file used to contain
the sample visualization data for the visualization
that shipped with the template. And I’m just going
to paste in the thing that Data Studio printed out. Now that I’ve done that, I
can update the JavaScript file to have a version
of that heat map. Not going to bore you with the
details of my D3 development workflow. And go back to the browser. And this is the–
so this, now, is the heat map converted to work
with the Data Studio code. So what I’ve done here is
I have a sample message from Data Studio. I’ve changed the
styling, and I’ve changed the way data is
parsed to reflect that. And let’s see what
that looks like when I deploy it to Data Studio. I want to go back here, change
this const LOCAL to false. Because if it’s at– in a Data Studio report,
it’s no longer local. I’m going to run this
build:dev command. And that just means I’m
building without caching and without minification. And then I’m pushing
it to my dev bucket. And now if I go back to Data
Studio, and I refresh the page, I have a heat map. And if I go into Edit mode,
I’m also able to, let’s say, switch the x and y dimensions,
maybe change the font family. Now, what if, for
example, I wanted to make some changes
to my visualization before I decided that I
was ready for caching, ready for a minified deployment? I would go back
into my code and I would say const LOCAL is true. And when I do that, you can see
it running in my browser again. And let’s say I wanted to
change the color scheme. So what I would do here is
just change this line to say, let’s say,
interpolateSpectral(). And you can see that, now,
the heat map running locally in my browser has
changed color schemes. Let’s say, now, that I wanted
to deploy this to Data Studio, and I’m ready for this to be
my final production version– build:prod. So here I’m running with
caching enabled and minification on so that my JavaScript files
are a little bit smaller. And once it’s built,
my visualization is now being deployed
to my prod GCS bucket. And so you can see
that it’s giving me a Google Cloud
Storage bucket that’s named video-heatmap-prod. Go back into Data Studio. And if I replace it,
that visualization, with this prod one– actually forgot a step here. I should have changed
LOCAL to false. And so let me rebuild. And now we can see
it in Data Studio. And we have a heat map. And we’ve changed the color
scheme for the heat map here as well. You can add other
styling elements, if you wanted to be able
to add a title or not, if you wanted the user
to be able to change the color scheme through the
style in the Property panel. So let’s quickly go
back and summarize what that workflow
was for converting a visualization for
developing a community visualization with tooling. You made a new project,
updated the config. You have to get
new sample data, so that as you’re developing
and making changes locally, it’s reflective of
the kinds of data you’re going to get
back from Data Studio. Then you develop, then you
deploy to your dev bucket, make maybe a few more changes,
deploy your production version. And then you’re ready
to share it and deploy your visualization. So I’ve just shown you how to
take an existing visualization and convert it to a Data
Studio Community Visualization, as well as how to use the
local development workflow. This is the workflow that’s
reflective of a lot of the ways I build my visualizations
day to day. And I hope you find it helpful. [MUSIC PLAYING] Review our documentation
at developers.googl e.com/datastudio/visualization. Share them with
us on social media using the hashtag
#datastudiodevs. And thanks for watching. Happy visualizing.

Author: Kennedi Daugherty

2 thoughts on “Community Visualizations: Converting Existing Visualizations

  1. // Obtain the shared Tracker instance.
    AnalyticsApplication application = (AnalyticsApplication) getApplication();
    mTracker = application.getDefaultTracker();

Leave a Reply

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