Hey everyone,
I’m really excited to share a dashboard I’ve been working on and couldn’t wait to show you all. It’s inspired by the Financial Times visual vocabulary, and it already exists in other technologies like the Tableau visual vocabulary. My goal was to create a version using Plotly charts and embed them into a Vizro dashboard, which is built using Dash.
Visual vocabulary made with Vizro and Plotly hosted on: Visual Vocabulary - a Hugging Face Space by vizro
The dashboard includes a variety of charts, along with tips on when to use each one, and the code needed to generate and integrate them into a Vizro dashboard. You can also use the pure Plotly code for a stand-alone Dash app.
I’d love to get your feedback, and contributions are definitely welcome, as this is still a work-in-progress dashboard! 
You can find the source code for the dashboard here.
10 Likes
@PipInstallPython @RenaudLN - I’m planning to add solutions inspired by your bump chart and pictogram soon. I wanted to see if you’re interested in contributing directly to the repository. If not, I can finish the PRs for you and make sure you get proper credit by linking your GitHub profile and Plotly post. Thanks again for figuring this out! 
1 Like
Cool stuff! I’ve been meaning to check out vizro from a bit closer, this sounds like a good opportunity to do so, happy to contribute something 
1 Like
Wow -this is awesome! Are you planning on hosting this app somewhere? I would keep that link bookmarked as I expect I’d refer to it daily 
2 Likes
Yes! It’s hosted on Huggingface - just click on the image above 
or use this link: Visual Vocabulary - a Hugging Face Space by vizro
1 Like
Also happy to help. Explored a few different builds of the bump chart. Just dm me on discord with the path you’ll be interested in bulding a Vizro example around.
Like i’ve shown the go.Scatter approach
The go.Sankey approach
And the component i built out Dash Nivo
Not sure of what all would be needed to help, havent looked through any Vizro code base your referring to with the examples page. But that hugging face is really cool
2 Likes
@li.nguyen
This is a powerful educational tool that the data viz community would greatly benefit from knowing about and bookmarking, like @AnnMarieW plans to do.
There are so many graphs that one can build with Plotly, that it’s often hard to know which graph to use unless you studied data visualization or have a lot of experience in the field. This tool is like a guidebook for anyone that would like to get started with graphing their data set of interest.
One recommendation I have is to modify the layout slightly. In addition to the separate Overview (home) tab at the very top, I recommend integrating it into all the other tabs. For example, add this Overview sub-tab inside the correlation tab, so the user can easily see all the description/definitions of correlation data sets and a few link/resources where they can read more about it.
One way that can help mass adoption of this project is to make it more accessible to the data viz community that is not a Dash/Vizro user. One idea is to create a separate Plotly graph example on py.cafe for each one of the graphs that you built. Then, each sub-tab/graph in your app would have a open/access Plotly Graph link that will take them to py.cafe with the Plotly/graph-only code.
2 Likes
One thing i could add into the last suggestion @adamschroeder made was i really like the idea of an example page having dynamic props.
Getting better at setting this up on my own docs.
But the idea would be instead of just showing code and example i like adding a random aspect to the data to always display something new on refresh. And any props i could make into forms and connect via a callback to change the graph / example itself.
Kinda like what i did for the props section in:
Could be very helpful.
Then again… their is a code editor so its kinda reduntent 
idk, the forms kinda give a quick pre load of different routes you could take with the individual component
3 Likes
Thanks @adamschroeder! Really appreciate the feedback! We were already considering those two points—you might have noticed them in the code comments, haha.
We deprioritized them for the first iteration, but I’ll move them up the list now. You make some great points. We also want this dashboard to be useful for people even if they don’t use Vizro, so I definitely see the value of a separate tab with just the Plotly code as you suggested 
@PipInstallPython - love that idea! 
I would actually love to have these dynamic props because I often need to lookup the syntax for the same post-update calls again. I did see that functionality in the latest Plotly product survey, which I thought was super helpful! They were asking for opinions whether such a view might be helpful. So who knows, maybe this is coming soon from Plotly? 
2 Likes
I think that to be most useful the dynamic properties might not be just things that you can update in a fig.update_layout call but would directly change some of the arguments of the original px.scatter (or whatever) function. Like log_x, log_y, size etc. In fact we could do better than just updating the graph it shows and also update the code snippet on the fly too.
Maybe it would be a bit like a very simplified version of https://chart-studio.plotly.com/ but for plotly express graphs only (and without data upload I guess). Ideally there’d be some way of automatically parsing plotly express and figuring out from that how to make a form to apply those options like a dropdown or checkbox etc. Unfortunately I don’t think there’s a schema for plotly express? And the source code doesn’t have arguments type annotated so it would probably need to use docstrings which isn’t so good. So probably this isn’t feasible for now, and instead we’d need to manually pick 5-10 “most commonly modified” argument for each chart.
4 Likes
