{"id":10251,"date":"2020-06-16T09:19:56","date_gmt":"2020-06-16T01:19:56","guid":{"rendered":"https:\/\/www.finereport.com\/en\/?p=10251"},"modified":"2021-01-14T11:07:05","modified_gmt":"2021-01-14T03:07:05","slug":"bar-chart-race-a-complete-guide","status":"publish","type":"post","link":"https:\/\/frg.fineres.com\/en\/2020\/06\/16\/bar-chart-race-a-complete-guide\/","title":{"rendered":"Bar Chart Race: A Complete Guide"},"content":{"rendered":"

Have\u00a0such\u00a0videos\u00a0been hot recently? Its professional name is the bar chart race. You may have seen this video many times. The effect can be said to be very intuitive and shocking, but do you know how to do it?<\/p>\n

\"\"<\/a><\/p>\n

Under normal circumstances, a lot of code needs to be developed\u00a0to make a chart like this. For most people, the requirements are too high, and the cost of learning is also high. There are many tutorials made by PowerPoint or Excel, but the results are not very good. Just in time of the COVID-19, I\u00a0plan\u00a0to find the simplest way and make a guide for you!<\/p>\n

I tried many ways, and find two simplest ways for you. It only takes 10 minutes to make a bar chart race like this! I wish can give you some help!<\/p>\n

I will share two quick and easy, practical methods and public data sources in the following articles. After reading the detailed production process below, I am sure you can make it!<\/p>\n

Method 1: Flourish<\/a><\/b><\/strong><\/h2>\n

It can be said that it is the best online data visualization website. There are a lot of data visualization templates here. Our job is to find the data from the Internet, and then import the data into the template, and set the corresponding color, icon, and other information, and all is completed.\"\"<\/a><\/p>\n

The operation is very simple. The first step is to click on the bar chart race template we want to make in the upper right corner. Click on the “Data” column above, we can see the data is uploaded here, and then click on “upload data file” ” to upload the information form we want to use.\"\"<\/a><\/p>\n

The template itself defines the format of the table. As shown in the following figure, column A is the indicator name, column B is the attribute, column C is the URL column where the icon is stored, and column D is the time change column. Follow the format when preparing the Excel data.<\/p>\n

After importing the data from Excel, the template will prompt you how many pieces of data have been imported.<\/p>\n

\"\"<\/a><\/p>\n

The second step is to optimize the chart. Click “Preview” above, and you will find that the template has automatically started to scroll according to time!<\/p>\n

\"\"<\/a><\/p>\n

Of course, we still need to do some modifications. There is an edit zone on the right, mainly to beautify the details such as labels, colors, playback speed, ruler size, time display format, etc. After setting it according to your own style, a cool video is finished.<\/p>\n

\"\"<\/a><\/p>\n

Method 2: FineReport<\/b><\/strong><\/h2>\n

\"\"<\/a><\/p>\n

Many people who make reports may have heard of it. In fact, FineReport can also achieve such a function, and it does not need to write a bunch of code, you only need to write SQL syntax, but I think it is easy for most people.<\/p>\n

Take the bar chart race I mentioned above, the main idea is to set the time parameter to filter data in the SQL query syntax, the value of the time parameter will change with time, and then regularly reorganize the chart.<\/p>\n

First, open the FineReport10.0 designer<\/a>, create a data link, then create a new decision report, create a data set ds1, enter the SQL syntax to query the desired data.<\/p>\n

\"\"<\/a><\/p>\n

The database query syntax is as follows:<\/p>\n

SELECT<\/p>\n

country,<\/p>\n

strftime(\u201c%Y-%m-%d\u201d,date) date,<\/p>\n

sum(confirm) confirm<\/p>\n

FROM datasource<\/p>\n

where strftime(\u2018%Y-%m-%d\u2019,date)=\u2019${datedelta(\u201c2020-01-28\u201d,mod((datetonumber(now())-datetonumber(p1))\/1000,DATEDIF(\u201c2020-01-28\u2033,today(),\u201dD\u201d)))}\u2019<\/p>\n

group by country,strftime(\u201c%Y-%m-%d\u201d,date)<\/p>\n

order by confirm<\/p><\/blockquote>\n

\"\"<\/a><\/p>\n

Then click on the \u201ctemplate\u201d in the menu bar to select \u201ctemplate parameter\u201d, and create a new template parameter \u201cp1\u201d with a preset value: now.<\/p>\n

\"\"<\/a><\/p>\n

Insert the bar chart: Insert->Cell Element->Insert Chart<\/p>\n

\"\"<\/a><\/p>\n

We set the title as \u201cUNIQUEARRAY(ds1.select(\u201cdate\u201d))\u201d, then the title will change according to the time.<\/p>\n

\"\"<\/a><\/p>\n

Then select the label, click \u201cuse label\u201d, select the value for the text, and set the position outside.<\/p>\n

\"\"<\/a><\/p>\n

Finally, add a new timing refresh, select the interactive attribute\u00a0as the special effect, and the background detection is turned on at a time interval of 1s.<\/p>\n

\"\"<\/a><\/p>\n

Boom, all have done!<\/p>\n

\"\"<\/a><\/p>\n

Data Sources<\/b><\/strong><\/h2>\n

After reading this article, you must have the idea of doing this kind of video. Just like the sample Flourish website mentioned above, the data is labeled below from the World Bank. I found that the data of these institutions are very rich, and you can even find the population estimate of 2100.<\/p>\n

<\/p>\n

World Bank: https:\/\/data.worldbank.org.cn\/<\/p>\n

United Nations: https:\/\/www.un.org\/zh\/databases\/index.html<\/p>\n

China National Data: http:\/\/data.stats.gov.cn\/<\/p>\n

Oxford University Project: https:\/\/ourworldindata.org\/<\/p>\n

IMF International Monetary Organization: https:\/\/www.imf.org\/en\/Data<\/p>\n

IFS: http:\/\/www.ifs.du.edu\/ifs\/frm_MainMenu.aspx<\/p>\n

Organization for Economic Cooperation and Development OECD: http:\/\/oecdchina.org\/statistics\/index.html<\/p>\n

*TheStatistcs Portal (perfect database, payment required): https:\/\/www.statista.com\/<\/p>\n

GitHub collation (38.2K stars): https:\/\/github.com\/awesomedata\/awesome-public-datasets<\/p>\n

Google data set search: https:\/\/www.statista.com\/<\/p>\n

The dataset provided in Kaggle, such as Youtube related: https:\/\/www.kaggle.com\/datasnaek\/youtube-new<\/p>\n

Summary<\/b><\/strong><\/h2>\n

Now I believe that after you have finished the above tutorial, you must no longer feel difficult to make a data visualization video anymore. In fact, in my opinion, it is more critical to find high-quality data and find interesting information in the data. Now, since there are data sources and tools, do you have a try?<\/p>\n","protected":false},"excerpt":{"rendered":"

A completed guide for you to make a bar chart race, 10 minutes are enough!<\/p>\n","protected":false},"author":1,"featured_media":10252,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[854],"tags":[118],"_links":{"self":[{"href":"https:\/\/frg.fineres.com\/en\/wp-json\/wp\/v2\/posts\/10251"}],"collection":[{"href":"https:\/\/frg.fineres.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/frg.fineres.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/frg.fineres.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/frg.fineres.com\/en\/wp-json\/wp\/v2\/comments?post=10251"}],"version-history":[{"count":17,"href":"https:\/\/frg.fineres.com\/en\/wp-json\/wp\/v2\/posts\/10251\/revisions"}],"predecessor-version":[{"id":11373,"href":"https:\/\/frg.fineres.com\/en\/wp-json\/wp\/v2\/posts\/10251\/revisions\/11373"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/frg.fineres.com\/en\/wp-json\/wp\/v2\/media\/10252"}],"wp:attachment":[{"href":"https:\/\/frg.fineres.com\/en\/wp-json\/wp\/v2\/media?parent=10251"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/frg.fineres.com\/en\/wp-json\/wp\/v2\/categories?post=10251"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/frg.fineres.com\/en\/wp-json\/wp\/v2\/tags?post=10251"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}