Chapter 5 Medium

Medium is part blogging platform, part social network. Like most any other blogging platform, Medium allows you to post multimedia content. Unlike some other platforms, however, Medium also lets you follow other users, mention and link to other users (just like an @ on Twitter or tag on Facebook or Instagram). You can also follow particular topics (e.g., “Education,” “JavaScript”) and tag your own content with topics.

5.2 Pasting Markdown-authored content into Medium

You can compose directly in Medium’s editor, but in this class we compose in Markdown. We use Markdown because Markdown content can become so many other types of content. (See the Markdown chapter of this book.) Composing in Markdown also ensures that you always have a copy on your own computer. After all, you never know when you might lose your internet connection.

To cleanly paste your Markdown-authored content into Medium, you should first convert your content into an HTML file, then open that HTML file in your browser, copy the file’s contents, then paste into Medium.

Converting from Markdown to HTML
To convert your Markdown content to HTML, you can use two methods. If you have installed the pandoc package, you can convert to HTML the same way you would convert to Word or any other format:

  1. In Atom, make sure your cursor is in your Markdown file.
  2. Open the Command Palette by typing cmd+shift+p (Mac) or ctrl+shift+p (Win).
  3. In the text entry field, type “pandoc html5” and press return.
  4. Choose the name and path of your file. Make sure your filename ends in .html (e.g., filename.html, NOT simply filename). If the suggested filename contains the text .md, you may delete that text.
  5. Press return. You should receive confirmation if the process succeeds.

If you don’t have pandoc, you can follow the alternate instructions below.

  1. In Atom, make sure you’re viewing your Markdown file. Open Markdown Preview by selecting Packages => Markdown Preview => Toggle Preview.
  2. Right-click some blank space in the preview window and select Save As HTML. Atom will give you the options of renaming your file and selecting a save location. Be sure the filename ends in .html (if you see something like filename.md.html, you can delete the .md part). Save it to your documents folder (or wherever).
  3. Find your new HTML file on your computer, and double-click it to open it in your web browser. If you want to view or edit the HTML file, simply open it in Atom!

Pasting HTML into Medium
This part is simpler. To paste your HTML into Medium, simply

  1. Find the HTML file on your computer and open it in your web browser (Chrome recommended).
  2. Copy the contents of the page to your clipboard.
  3. Paste the contents of the page into Medium’s editor.

In most cases, the content should paste perfectly. Sometimes, however, you may encounter problems such as

  • Images don’t paste. If you included an image in your Markdown file, it will only paste into Medium if the image was located on the web (e.g., on Google Images, NOT on your computer). To add an image that IS located on your computer, see the Medium Help Center.
  • Headings look different. Medium offers two levels of headings, no more. If you try to include additional levels of headings, Medium will change your formatting. Use only two levels of headings.
  • Just straight-up didn’t work. You may have converted your file incorrectly, pasted incorrectly, or written invalid or too-complicated Markdown. See me for help.

5.3 Using images: resources and fair use guidelines

The internet unlocked access to more content than any of us could ever consume. Anyone with a fast enough connection can download software, videos, podcasts, blogs, and of course images.

While much of this content is freely available, U.S. intellectual property laws apply even to free content–including images. Contrary to popular belief, using someone else’s image violates the law in most cases, even if you acknowledge the source.

The U.S. Copyright Office’s fair use guidelines includes four criteria for judging fair use of intellectual property:

  • Purpose and character of the use, including whether the use is of a commercial nature or is for nonprofit educational purposes. Nonprofit use is more likely to be considered fair, and so is transformative use (i.e., use that adds something new and doesn’t substitute for the original use). However, nonprofit use is NOT necessarily fair use.
  • Nature of the copyrighted work. Use of news or documentary content is more likely to be considered fair than use of “creative” content like novels or songs.
  • Amount and substantiality of the portion used in relation to the copyrighted work as a whole. Use of small portions is more likely to be considered fair. However, despite what you may have heard, there is no “10% rule.”
  • Effect of the use upon the potential market for or value of the copyrighted work. The less impact the use has on the value of the copyrighted work, the more likely it is that the use will be considered fair.

Keep these myths in mind:

  • You do NOT necessarily have the right to use someone else’s images (or other content) just because you acknowledge the creator.
  • You do NOT necessarily have the right to use up to 10% (or any other specific amount) of someone else’s work.
  • Educational use is NOT necessarily fair use.
Photo by Dimitri de Vries on Unsplash

Photo by Dimitri de Vries on Unsplash

Free and legal image resources
Fortunately, you can find freely usable images if you know where to look. Google Images actually has a usage rights search filter, though the quality of the results can vary, as can the constraints on usage.

One way to determine which usage constraints apply is to use only Creative Commons-licensed images. Creative Commons licenses clearly define the terms of fair use for a given image (or other content type). You can read more about license types on Creative Commons’s licenses page.

But if you want to be extra safe AND find reliably high-quality photos, the sites below exclusively offer Creative Commons Zero (CC0)-licensed photographs. A CC0 license entitles you to use licensed content freely and without attribution (though attribution is still good manners).

  • Unsplash. Unsplash offers CC0 photos, but they do encourage you to provide attribution–and they make attribution easy. See an example above.
  • Pixabay. Pixabay offers CC0 photos, illustrations, and video clips.

5.4 Creating a Medium-embeddable data visualization using Datawrapper

By now you’ve probably made a chart or graph using Excel or Google Sheets. But you actually have access to the same datavisualization technology used by professionals at the Washington Post and the Wall Street Journal, as well as by Web-first publications like Vox and Buzzfeed. In fact, Vox used this technology to dunk on Buzzfeed:

Notice how you can hover your mouse over a data point to get more info. You can also create beautiful maps like this one from a VCU student news group:

This technology comes from Datawrapper, and it’s free to use. Let’s try.

Find a visualization that you’d like to imitate

First, sign up for a free account. As far as I know, Datawrapper doesn’t sell your data. After that, you can draw inspiration from one of the many charts, maps, and tables available on Datawrapper’s site.

  1. Start at Datawrapper Academy. Scroll down to the “Example charts and maps” section and select. While you’re on the Academy homepage, note the other offerings like “What to consider.” Use these resources!
  2. Select a type of chart. We’ll pick “Examples of Datawrapper line charts.”
  3. Select an example to use. We’ll pick the one about marriage rates in the U.S.
  4. Experiment with the options in the tabs labeled Chart type, Refine, Annotate, and Design. Try changing colors, line widths, tooltips, and annotations.
  5. When you’re satisfied, choose Publish and get the full-page link. Paste this link into a blank line in Medium and press enter. Your chart should appear!

Make your own chart

  1. Again, start at Datawrapper Academy. Choose the type of visualization you want to make. Review any documentation that applies to your situation. (You can always return to this documentation if you have questions later.)
  2. Return to the Datawrapper homepage and select Dashboard.
  3. Select New Chart, New Map, or New Table.
  4. Paste or import your data and customize your visualization as we practiced in steps 4 and 5 above.

More resources

  • Datawrapper’s River collects charts, maps, and tables created and submitted by Datawrapper users. If you’re not sure what you want to visualize, you might find inspiration there.
  • Google Public Data collects and visualizes dozens of datasets. They link back to their sources, and you can generally access those datasets yourself.
  • Google Dataset Search offers more datasets. Some cost money (don’t use those), but others are free. In any case, always consider the source’s credibility before using a dataset.
  • Data.gov also hosts public datasets.
  • You can always conduct your own survey! Alternatively, if you’re not making a data-driven argument, you could use Datawrapper to create something like Ann Friedman’s Disapproval Matrix or to create a simple table that communicates some aspect of your argument in a visually appealing way, as in the example below.

Other options

  • If you don’t want to use Datawrapper, you could draw a diagram by hand and trace it in Adobe Illustrator or Gravit. (If you don’t know what those words mean, then this option probably isn’t for you.) I’ve never tried vectorizer.io, but I’ve seen it recommended for this purpose.
  • Draw a comic. You can even use clipart (mildy offensive language warning) if you can meet the fair use requirements.