Dot plot

📌 What are they?

The Dot Plot in TOKII is a matrix visualization where values are represented by circles of different sizes placed on a two-dimensional grid. Each cell contains a point whose size is proportional to the numerical value, and its position is determined by two categorical dimensions (for example, day and zone).

🔍It resembles a heatmap, but in addition to using color to encode magnitude, it uses the area of the circle as a visual variable, emphasizing the relative comparison between cells.

📥 Data Sending Formats

▸ From dataset

Example structure:

Hour	Monday	Tuesday	Wednesday	Thursday	Friday
08:00	82	85	80	83	78
09:00	85	87	82	85	80
10:00	80	83	85	82	76
11:00	78	80	83	80	72
12:00	90	85	88	86	75
13:00	92	90	91	89	80
14:00	88	89	90	88	82
15:00	85	84	87	85	78
16:00	80	82	85	82	74
17:00	75	78	80	79	70
18:00	70	76	77	74	68

Label: Hour (labels on the X axis)
Label type: String (type of labels)
Values: Monday, Tuesday, Wednesday, Thursday, Friday
Value type: Number (type of data)
Popup: (each segment will show its value; if more data is wanted to be visualized in each segment, it can be selected here)

▸ From MQTT

{
  "08:00": { "Lunes": 82, "Martes": 85, "Miércoles": 80, "Jueves": 83, "Viernes": 78 },
  "09:00": { "Lunes": 85, "Martes": 87, "Miércoles": 82, "Jueves": 85, "Viernes": 80 },
  "10:00": { "Lunes": 80, "Martes": 83, "Miércoles": 85, "Jueves": 82, "Viernes": 76 },
  "11:00": { "Lunes": 78, "Martes": 80, "Miércoles": 83, "Jueves": 80, "Viernes": 72 },
  "12:00": { "Lunes": 90, "Martes": 85, "Miércoles": 88, "Jueves": 86, "Viernes": 75 },
  "13:00": { "Lunes": 92, "Martes": 90, "Miércoles": 91, "Jueves": 89, "Viernes": 80 },
  "14:00": { "Lunes": 88, "Martes": 89, "Miércoles": 90, "Jueves": 88, "Viernes": 82 },
  "15:00": { "Lunes": 85, "Martes": 84, "Miércoles": 87, "Jueves": 85, "Viernes": 78 },
  "16:00": { "Lunes": 80, "Martes": 82, "Miércoles": 85, "Jueves": 82, "Viernes": 74 },
  "17:00": { "Lunes": 75, "Martes": 78, "Miércoles": 80, "Jueves": 79, "Viernes": 70 },
  "18:00": { "Lunes": 70, "Martes": 76, "Miércoles": 77, "Jueves": 74, "Viernes": 68 }
}

Heat maps

Puntos conectados

Any questions? Write to us.