Chart Studio!

[00:00] Okie dokie, welcome to Chart Studio. So this is obviously to address the issue of making charts and graphs that are on-brand, easy to kind of quickly make, and also translate well to the web.

[00:10] So such that we don't have to kind of make everything just an image, that it can be actual HTML and data restructure for mobile and animate and all that stuff.

[00:20] And do other, you know, more dynamic things like being able to hover and see more information and stuff.

[00:30] So this will work well because it'll be able to export all of these as both images and also to the web. So the way this actually works is it's using a couple of open source libraries to build the charts as JavaScript sort of elements and then apply some themes and styling, which we can kind of customize.

[00:50] And then use Claude to actually sort of populate all the data. And then it builds that into a little data set and all the chart and exports it in the different types of formats that we need.

[01:00] So pretty cool, honestly. So it has a couple of different sort of experiment ones or like demo ones in here for us to play with.

[01:10] You can see that this is the actual editor for it. So we can sort of organize them into different groups and you can kind of make as many as you need and save, et cetera.

[01:20] But once you go into one and you start changing it, it is like an autosave. So just be aware of that. That if you need to, I believe we can duplicate.

[01:30] Yeah, you can duplicate one and kind of go from there. So if you want to, that's an easy way to kind of use it. But you'll see that we can give each one of them a title and that there's the type.

[01:40] And so there's a whole bunch of different types built in here to kind of try to show different things that we might be doing. So I would lean into what these little eyebrows are actually saying,

[01:50] because they're actually a good indicator of the type of thing you might be looking for to try to sort of demonstrate.

[02:00] So we have trends and comparison, composition and flow, time and process, all these different things. This will sort of build depending on whatever the different actual chart system there is.

[02:10] So some of them have an actual library that will work. Others will just make an image, just make an SVG that can be exported.

[02:20] And so that can be kind of placed back in the document or uploaded to the Internet. Then we can also use a brief. So if you just want to actually type in or use a voice note or whatever to kind of get the thing going, we can do that as well.

[02:30] And then it will take that and sort of build the stuff in and get cooking. You can see it's found the cloud code on this computer, so it should be all set there.

[02:40] Yeah. Use cloud. I don't know what that means. Oh, wow. Yeah. You can even pick the model. That's fun.

[02:50] Anyway. Okay. So in this case, you can see that once you already have one, you can also switch between the different types, because the types that are shown are sort of relative to the family that they're in,

[03:00] because that way the data is more or less the same. It's just showing it in different ways.

[03:10] So if I scroll down, you'll see here's the actual chart data. We can import this data if we want. So if it's in a Google sheet or if we need cloud to make it into a table or into a CSV or whatever,

[03:20] you see it'll take a couple of different formats there. So we can get that in there, and then that way it can kind of go from there. But either way, the point being is that you can kind of explore different ways of actually displaying that data

[03:30] to sort of help paint the picture. Then over here on the right is where all the styling is. So you can see just by sort of clicking on these, it switches the styling out.

[03:40] Same goes with the background and the text, et cetera. We're going to have to just sort of, I think for the first pass here,

[03:50] just accept that we don't have great access to fonts. There's a couple of reasons for that, from licensing to where the thing actually loads

[04:00] and what fonts will be available in that environment is not something I want to tackle for the first pass. So the actual charts, we'll just use Arial and or Helvetica.

[04:10] It's going to use whichever one is on the actual computer. So on Zara's computer, no Helvetica for you, Sarah, not on Windows. But on Mac, it'll load Helvetica, which would be nice.

[04:20] And again, the sizes and all that sort of stuff, line weights, data points. So all the different things that are typically available in the libraries you can actually use.

[04:30] So you can see we have the hover states as well, and all that stuff we can customize.

[04:40] There's lots of other bits in here you can see. What it would look like on different formats, right? So this might be good for when we actually go to export. You don't have to kind of crop all the time.

[04:50] You can sort of set for what it is. And then you can also switch between the different libraries. So you can see that the way that the two different libraries is actually displaying the data.

[05:00] The data display is the same, it's just, you know, where it might start or the sizing and that kind of thing is going to be slightly different depending on which actual library is being used.

[05:10] So I would, the default is e-charts because that one I think is just a little bit better. But yeah, so great. So now that one's there and you can see if I jump back to all charts like it's auto saved and is already in place.

[05:20] So if we wanted to do a new chart, you could pop that open, right? If we want to do like a workflows kind of thing, you can see it will load with some basic data already there.

[05:30] And then you can kind of go in here and just sort of see live, you know, how it will actually impact it.

[05:40] So even if you don't want to necessarily make this tied to like real data, you can kind of, you know, rough out what you're trying to demonstrate from a diagram perspective.

[05:50] Because it's pretty easy to just sort of change these different things, right? I can just name this after myself. And so you can see now George is leading to some agent assisted stuff.

[06:00] Anyway, pretty cool. So let me know if you have questions or if you have trouble getting to it or whatever.

[06:10] Or if there's something else that you want me to add, because we can pretty much add stuff to this pretty easily, which is pretty cool. So yeah, the other thing I probably should show you is the export.

[06:20] So once you're ready for this, I'm going to look up what that means, because I think that's a misalignment from GPTZ Cloud, but I'll fix that. But either way, the SVG image basically would display here and you can download it.

[06:30] SVGs are always defined in code as well. So it will show you the code for it. You can also paste depending on your application.

[06:40] For Illustrator, you'll just want to download it as a file. You can see the other ones. I can't click on it because this error is very mad. But the other ones here will basically allow me to just copy the code out and paste it into Webflow,

[06:50] so that when we go to kind of move between these things, it'll be very easy. And because, magically, Chart Studio is part of the overall barometer repo,

[07:00] when we actually have the flow that builds these things on its own, Cloud will be able to just use this on the back end and build all the stuff it needs and then get it into place.

[07:10] So one step closer to kind of automating all this stuff while also giving us a tool. Cool. Cheers.