A step by step walkthrough for building an animated race of lines, with flags or logos and a live rank label, in PlotSet.
Cerca de 8 minutosYou will end up with an animated chart where each contender's line grows across the stages, with a live rank at its head.
Expect about eight minutes. Most of it goes on shaping the data so there is one column for each stage.
One row per contender, with a column for each stage in running order and, if you want them, a category and a picture link.
| Country | Continent | Flag | Day 1 | Day 2 | Day 3 |
|---|---|---|---|---|---|
| United States | Americas | https://example.com/us.png | 4 | 12 | 20 |
| China | Asia | https://example.com/cn.png | 6 | 15 | 24 |
| Japan | Asia | https://example.com/jp.png | 2 | 7 | 13 |
| France | Europe | https://example.com/fr.png | 1 | 5 | 11 |
Use two or more stage columns, each a plain number, in the order the race runs.
The values should be running totals. If they are per stage, switch on the accumulate setting.
A category column colours the lines and builds the legend.
A picture column of image links replaces the plain circle at the head of each line.
O caminho exato no PlotSet, de um modelo em branco até o gráfico finalizado.
From the PlotSet dashboard, start a new project and choose Horserace from the Line and Area Charts category. It loads with twelve countries over twelve days.
Import a CSV or .xlsx file, paste rows from a spreadsheet, or connect a Google Sheet. Each row is one contender.
Choose the name column, then select every stage column in running order. Add a category and a picture column if you have them.
In the Race tab, choose between score and rank, decide whether higher or lower wins, and limit the race to the top contenders.
The Lines tab sets the curve and width. The Runner heads tab sets the marker size and shape, and the Labels tab sets what each label says.
The Playback tab chooses autoplay, the time spent on each stage, easing and looping.
In the Captions tab, add timed notes for key moments. The Filter controls tab adds buttons that narrow the race to one group.
Publish for a live chart and copy the embed code from the Share dialog. Play it through once at the width of your page before you share it.
Comece pelo modelo de Horserace Chart com dados de exemplo já carregados, depois substitua-os pelos seus.
Abrir o modeloA reta final é igual para todo tipo de gráfico: o Share transforma o gráfico em um link público interativo e em um código de incorporação; o Export gera um arquivo estático.
Ativar o código de incorporação e o link público é o que publica o gráfico. O link pode ser enviado com segurança para qualquer pessoa, e o código de incorporação entra em qualquer página como um iframe que mantém a interatividade e os tooltips ao passar o mouse. Edite o gráfico depois e clique em Recreate para levar essas mudanças aos dois.
O Export grava uma cópia estática no tamanho que você precisar. O SVG continua nítido em qualquer escala e ainda pode ser editado em uma ferramenta de design; PNG e JPG são as escolhas seguras para slides e documentos. É o multiplicador de escala que garante uma imagem nítida em uma tela retina.
Showing the top eight or ten keeps the labels apart at the finish.
Flags and logos help, but only when they are easy to tell apart at a small size.
A restart pause on the loop gives readers time to read the final order.
A single note at the turning point does more than five.
A stage column is empty for that contender. Fill the gap or choose how missing data is handled in the Race tab.
The stage columns are bound in the wrong order. Reselect them from left to right.
The picture link is broken or blocked. Open it in a browser to check.
Too many contenders are close together. Limit the race, or turn on label spacing.
Não tem certeza se o Horserace Chart é a escolha certa? Veja o que é, quando usar e quando evitar.
Yes. Turn on autoplay in the Playback tab, and choose whether it loops.
Grátis para começar com mais de 300 modelos. Sem cartão de crédito.
