Lesson 5
Data-Driven Article
Structure of a data-driven article
Charts for social media
Typography and icons
Charts for social media
Typography and icons
Data-Driven Article
After you have finished all the previous steps, you can finally join them all together on a website. For instance, using Tilda.
If you want to, you may add your Tilda or Wix project to Google Search results via Google Search Console.
If you want to, you may add your Tilda or Wix project to Google Search results via Google Search Console.
Article Structure
This is the structure of the article you need to prepare as your final group project. You can also view the requirements here.
The main block should be divided into subsections (sections, semantic blocks) with subheaders
The main block should be divided into subsections (sections, semantic blocks) with subheaders
- Introduction
- Background picture
- Title
- Subtitle
- Your names
- Date of publication
- Lead paragraphOne paragraph: what will we tell you about in the article?
The lead paragraph should visually differ from the main text - Main text1. Description of the problem and general context: what is happening now?
2. Background (this paragraph can be anywhere): how was it before?
3. 5 charts, created according to all the rules of visualization. To each of them:- Lead paragraph to the chart: why does it appear?
- Short text description of the key visual point of the graph: where should we look? which data point is the most important one?
- Analysis and interpretation of the chart + additional information from external sources: why does it happen? what do we know about it?
4. Quote, that visually differs from the main text:- photo of the speaker
- name, position, country of the speaker
- in-text link to the primary source
- text of the quote
- Conclusions1. Subheader — e.g. "Conclusions" or "What we learned" etc.
2. Key findings (briefly summarise what has already been mentioned above in the main body of the article): what did you find in your analysis? why is it important?
3. Takeaway message: what is the main idea that readers should remember from your article? what is the most interesting point in it that they will tell their friends about months and years after reading it?
Links for the class
- Pogodaiklimat — Moscow weather archive, we will analyse Te — temperature by feel in the shade.
- Rawgraphs — tool for creating SVG charts.
- Figma — vector editor.
- Internet Movie Database — the biggest database of world cinema.
- Color Palette Generator by Big Huge Labs — determines key colours in the picture and organizes them in a nice palette.
- Datawrapper — you can create interactive charts and embed them into websites, but you can't download them in SVG.
Chart Descriptions
Examples from the article "Severe drought threatens honey bees in Chile" by Christine Chan and Dave Sherwood, Reuters Graphics, 2019
Words instead of numbers
50 % — a half
30–35 % — a third
25 % — every fourth
25/100 : 5 = 5/20 : 5 = 1/4
20 % — every fifth
10 % — one in ten, every tenth
In English:
- one in ten — a share
- one out of ten — there are only ten elements in general
Design in Figma
Website: figma.com
You can use both the web version and the desktop application. This is a vector graphic editor.
Must-have plugins:
You can use both the web version and the desktop application. This is a vector graphic editor.
Must-have plugins:
- Iconify — quick search for icons with open license.
- Image tracer — converts images from raster to vector type.
- Unsplash — fast insertion of photos with an open license.
- Icon8 Background remover — removes the background in the picture, details can be corrected with a mask.
Useful instruments:
- Freepik — a lot of free vector images.
- EPS to SVG Converter — in Freepik, a lot of files are in another vector format, EPS. Figma can read only SVG, so we should convert the vector image before using.
Elements in Figma
- Frame
- Group
- Mask
- Component (Master object)
- Child component
Typography
- Between a number and %, one should sometimes put a non-breaking space — it depends on the editorial policy.
- You should also put a non-breaking space between a number and words such as thousand or million.
- On Windows it is entered with Alt 255, but on Mac you need to press Shift Option Space. In Tilda, it is # nbsp; (remove the space after the hashtag)
Icons
Fonts
How to create a line chart
using RAWgraphs and Figma
using RAWgraphs and Figma
How to display multiple lines in Rawgraphs
in Russian
How to style a chart from RAWGraphs in Figma
in Russian
How to invert a mask in Figma
in Russian
How to make a gradient transition
to transparency in Figma
to transparency in Figma
in Russian
Tilda Basics
