Medium stories with interactive charts and tables

Oleg Seriaga
Vizydrop
Published in
4 min readNov 25, 2019

Communicate data in your articles using interactive visualizations created in a simple and natural way

Find below how the visualization of interest to Product Hunt look like when it is embedded into Medium article as a chart. Data was taken from Google Trends. Don’t forget to move the mouse over the chart to see the exact numbers.

Product Hunt Interest via Google Trends

You may click the logo in the left bottom corner of the chart to open it in full screen.

Find below how the table looks like when it is embedded. This is about top 20 voted products on Product Hunt (it is a report with permanent data which was taken on 25 November 2019 via Product Hunt API)

Top 20 Voted Products on Product Hunt

Sparklines for some GitHub Vizydrop’s repositories.

GitHub Stats using Table

Stocks data represented as a line chart embedded below. Move the mouse over the chart to see the tooltip with data diff.

Stocks and Lines

or chart with facets may be used for the same data.

Stocks and Facets

Many authors choose a visual way to provide information using charts and tables. I am not going to prove the efficiency of using visualizations since it was done many times before. I just want to share another one way to create stories supercharged with interactive, good looking charts or tables.

We have implemented the possibility to integrate reports via our visualization platform Vizydrop into Medium articles to simplify the embedding flow. So…

The guide of embedding a report into Medium.

  1. Login to Vizydrop using your Google, Facebook or Github account.
  2. Drop files or choose the app connector and configure the source. We have the ability to provide links, google sheets, and other apps out of the box.
Drop File

3. Setup a chart or table using a simple drag and drop. Use a calculations editor if you feel the power.

Setup Chart

4. Click Share, copy the link, paste into Medium article and press Enter.

Share. Copy. Paste. Press [Enter]

It may take some time to load frame, so please be patient and wait for several seconds until the frame is loaded. That’s it.

Reasons why you may like to use Vizydrop for embedding visualizations into your articles:

  1. Interactivity. The reader can explore the data.
  2. Easy to change. In case you decide to fix your chart or table after publication, then you may change it just in Vizydrop and the report is updated for article automatically without wasting time on copy-pasting images.
  3. Chart data is auto-updated. You may use static files to create visualizations that are not changed over time. But sometimes there is a need to have live reports with data which can be changed from time to time. You may use dynamic sources for your charts like Google Sheets or other apps we have out of the box or connect youth. So the chart or table attached to the article will be updated automatically.
  4. Easy to create. Easy to use drag-n-drop editor with a user-friendly and comprehensive guide. And it is supercharged with report calculations powered by autocompleting help you to modify visualizations like a pro.
  5. Three reports are free.
  6. Find more reasons at https://vizydrop.com

Vizydrop is a visualization platform, can be used standalone, in Fibery and as Trello power-up. It is available as Jira add-on in Atlassian Marketplace.

Bar charts, lines, areas with annotations, facets, tables with pivots, visual encoding and sparklines, in other words almost all popular chart types are waiting for being embedded, but there are some exceptions.

Thanks for giving us a try.

--

--