A step by step walkthrough for building an animated race of lines, with flags or logos and a live rank label, in PlotSet.
Unos 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.
El camino exacto en PlotSet, desde una plantilla en blanco hasta el gráfico terminado.
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.
Empieza con la plantilla de Horserace Chart, que ya trae datos de ejemplo cargados, y sustitúyelos por los tuyos.
Abrir la plantillaEl último tramo es igual en todos los tipos de gráfico: Share convierte el gráfico en un enlace público en vivo y un código de incrustación, y Export lo guarda como un archivo estático.
Al activar el código de incrustación y el enlace público, el gráfico queda publicado. El enlace se lo puedes enviar a cualquiera sin problema, y el código de incrustación se coloca en cualquier página como un iframe que conserva los tooltips al pasar el cursor y toda la interactividad. Si editas el gráfico más adelante, haz clic en Recreate para llevar esos cambios a ambos.
Export guarda una copia estática en el tamaño que necesites. El SVG se mantiene nítido a cualquier escala y se puede seguir editando en una herramienta de diseño; PNG y JPG son la opción segura para diapositivas y documentos. El multiplicador de escala es lo que te da una imagen nítida en una pantalla 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.
¿No estás seguro de que el Horserace Chart sea la opción correcta? Descubre qué es, cuándo usarlo y cuándo no.
Yes. Turn on autoplay in the Playback tab, and choose whether it loops.
Gratis para empezar con más de 300 plantillas. No se necesita tarjeta de crédito.
