CSV de exemplo
| Date | Commits |
|---|---|
| 2024-01-01 | 8 |
| 2024-01-02 | 6 |
| 2024-01-03 | 9 |
| 2024-01-04 | 6 |
| 2024-01-05 | 12 |
How to Create a Calendar Heatmap
A step by step walkthrough for turning a sheet of dates and daily values into a published calendar heatmap in PlotSet, with one shaded square for every day.
Cerca de 6 minutosOne square for each day, laid out in calendar weeks and shaded by how much happened: that is what you will have. Busy weekdays, quiet weekends, seasonal swells and long gaps all show up at a glance.
Expect about six minutes. The template needs just two columns, so most of the time goes on choosing a colour theme and checking the scale.
Os dados que você precisa
One row per day with two columns: a date, and the number for that day.
Use one row per day. Days you leave out are drawn in the no-data colour.
ISO dates, such as 2024-01-05, are the safest. Anything the platform's date parser accepts will work.
The grid spans every year present in your data, with one band per year.
A day with a value of zero is not the same as a missing day. Keep zeros if they are real readings.
Os passos
O caminho exato no PlotSet, de um modelo em branco até o gráfico finalizado.
- 01
Open the Calendar Heatmap template
From the PlotSet dashboard, start a new project and choose Calendar Heatmap from the Heatmaps category. It loads with two years of sample commits so you can see the layout straight away.
Todo guia começa aqui. Escolha a categoria e depois o modelo: a grade é a mesma, seja qual for o tipo de gráfico que você quer. - 02
Prepare your daily data
Put the date in the first column and the number in the second, one row per day. Remove any blank or text rows from the number column.
- 03
Upload the file, or connect it live
Import a CSV or .xlsx file from the data panel, paste rows from a spreadsheet, or connect a Google Sheet so the chart can follow your updates. The first row is read as the headers.
A visualização de dados, aqui em um projeto de gráfico de barras. Envie um CSV, extraia os números de uma imagem com o Magic Import ou sincronize um Google Sheet. O painel é idêntico para todos os tipos de gráfico. - 04
Check the column bindings
Confirm that the date column is bound to dates and the other column to values. This is usually right automatically when the headers are clear.
Os vínculos definem qual coluna vira o rótulo, qual fornece os valores e qual comanda a cor. O Auto Binding tenta adivinhá-los a partir dos seus cabeçalhos, então confira o resultado em vez de dar como certo. - 05
Choose a colour theme
In the Color tab pick a theme for the scale, and set the colour for days with no data. Keep the no-data colour clearly different from the palest shade of the scale.
A aba Preview de um gráfico do tipo Calendar Heatmap. Todos os controles de estilo ficam no painel contornado em vermelho: aparência, cabeçalho, rodapé e as opções específicas desse tipo de gráfico. Cada grupo fica em sua própria aba. - 06
Tune the cells and labels
In the Cells tab set the square size, corner radius and gap. In the Labels tab show or hide the month, weekday and year labels.
- 07
Set the colour scale
Leave the Scale tab on automatic, or enter a minimum and maximum so a single extreme day does not wash out the rest.
- 08
Add the legend, title and source
Style the legend ramp, then use the Header and Footer tabs for a title, a subtitle and a source line.
- 09
Publish or export
Publish for a live chart and copy the embed code from the Share dialog, or use Export for a PNG or SVG.
É pelo Share que um gráfico finalizado vira um link público e um código de incorporação.
Comece pelo modelo de Calendar Heatmap com dados de exemplo já carregados, depois substitua-os pelos seus.
Abrir o modeloPublique, incorpore ou exporte
A 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.
Share: link público e código de incorporação
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.
Export: SVG, PNG ou JPG
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.
Dicas de estilo para um Calendar Heatmap
Start with a single year
One year gives the largest squares and the clearest reading of the weekly rhythm.
Cap the scale
If one day dwarfs the rest, set a custom maximum and say so in the footer.
Keep real zeros
A quiet day is a fact. Only leave a day out when you truly have no reading.
Use the tooltip
Hovering a square shows its date and value, so you do not need to print numbers on every cell.
Erros comuns ao fazer um Calendar Heatmap
The grid is empty
Dates probably failed to parse. Use ISO dates and check the date column is bound correctly.
Everything looks the same shade
An outlier is stretching the scale. Set a custom maximum in the Scale tab.
The squares are tiny
Too many years are crowding the grid. Trim the data to the span you need.
Missing days look like low days
Make the no-data colour clearly different from the low end of the scale.
Saiba mais sobre o Calendar Heatmap
Não tem certeza se o Calendar Heatmap é a escolha certa? Veja o que é, quando usar e quando evitar.
Calendar Heatmap: perguntas frequentes
A date column and a numeric value column, with one row per day.
Crie seu Calendar Heatmap agora
Grátis para começar com mais de 300 modelos. Sem cartão de crédito.