Contour chart

Show a measure that varies across a surface, as marching-squares contour lines, a filled heat field, or both. HeatField is the filled form on its own. Hover, touch or move through the grid with the arrow keys to read any cell.

Elevation in metres
Row	Column 1	Column 2	Column 3	Column 4	Column 5	Column 6	Column 7	Column 8	Column 9	Column 10	Column 11	Column 12	Column 13	Column 14	Column 15	Column 16	Column 17	Column 18	Column 19	Column 20	Column 21	Column 22	Column 23	Column 24	Column 25	Column 26	Column 27	Column 28	Column 29	Column 30	Column 31	Column 32	Column 33	Column 34	Column 35	Column 36
Row 1	3 m	4 m	6 m	8 m	11 m	15 m	18 m	22 m	25 m	28 m	30 m	30 m	30 m	28 m	26 m	23 m	20 m	17 m	14 m	12 m	10 m	9 m	8 m	7 m	7 m	6 m	6 m	6 m	5 m	5 m	4 m	3 m	3 m	2 m	2 m	1 m
Row 2	3 m	5 m	8 m	11 m	15 m	19 m	24 m	28 m	33 m	36 m	39 m	39 m	39 m	37 m	34 m	30 m	26 m	22 m	19 m	16 m	13 m	12 m	11 m	10 m	9 m	9 m	8 m	8 m	7 m	7 m	6 m	5 m	4 m	3 m	3 m	2 m
Row 3	4 m	7 m	10 m	14 m	18 m	24 m	30 m	35 m	41 m	45 m	48 m	49 m	49 m	46 m	43 m	38 m	33 m	28 m	24 m	20 m	18 m	16 m	14 m	13 m	13 m	12 m	12 m	11 m	10 m	9 m	8 m	7 m	6 m	5 m	4 m	3 m
Row 4	5 m	8 m	12 m	16 m	22 m	28 m	35 m	42 m	49 m	54 m	58 m	59 m	58 m	56 m	51 m	46 m	40 m	34 m	29 m	25 m	22 m	20 m	18 m	17 m	17 m	16 m	15 m	14 m	13 m	12 m	11 m	9 m	8 m	6 m	5 m	4 m
Row 5	6 m	9 m	13 m	19 m	25 m	33 m	41 m	49 m	56 m	62 m	66 m	68 m	67 m	64 m	59 m	53 m	47 m	41 m	35 m	30 m	27 m	25 m	23 m	22 m	21 m	21 m	20 m	19 m	17 m	16 m	14 m	12 m	10 m	8 m	6 m	5 m
Row 6	7 m	10 m	15 m	21 m	28 m	36 m	45 m	54 m	62 m	69 m	73 m	75 m	75 m	72 m	66 m	60 m	53 m	46 m	40 m	35 m	32 m	30 m	28 m	27 m	27 m	26 m	25 m	24 m	22 m	20 m	17 m	15 m	13 m	10 m	8 m	6 m
Row 7	7 m	11 m	16 m	22 m	29 m	38 m	48 m	57 m	66 m	73 m	78 m	80 m	80 m	76 m	71 m	65 m	57 m	51 m	45 m	40 m	37 m	35 m	34 m	33 m	33 m	32 m	31 m	29 m	27 m	24 m	22 m	18 m	15 m	12 m	10 m	8 m
Row 8	7 m	11 m	16 m	22 m	30 m	39 m	49 m	58 m	67 m	75 m	80 m	82 m	82 m	79 m	74 m	67 m	60 m	54 m	48 m	44 m	42 m	40 m	39 m	39 m	39 m	38 m	37 m	35 m	32 m	29 m	26 m	22 m	18 m	15 m	12 m	9 m
Row 9	7 m	11 m	16 m	22 m	30 m	38 m	48 m	57 m	66 m	74 m	79 m	81 m	81 m	78 m	73 m	68 m	61 m	56 m	51 m	48 m	45 m	45 m	44 m	45 m	44 m	44 m	43 m	41 m	38 m	34 m	30 m	26 m	21 m	17 m	14 m	11 m
Row 10	7 m	10 m	15 m	21 m	28 m	36 m	45 m	54 m	63 m	70 m	74 m	77 m	77 m	75 m	71 m	66 m	60 m	56 m	52 m	50 m	49 m	48 m	49 m	50 m	50 m	50 m	48 m	46 m	43 m	39 m	34 m	29 m	24 m	20 m	16 m	12 m
Row 11	6 m	9 m	13 m	19 m	25 m	33 m	41 m	49 m	57 m	63 m	68 m	70 m	71 m	69 m	66 m	62 m	58 m	54 m	52 m	51 m	51 m	51 m	53 m	54 m	54 m	54 m	53 m	50 m	47 m	43 m	37 m	32 m	27 m	22 m	17 m	13 m
Row 12	5 m	8 m	12 m	16 m	22 m	28 m	36 m	43 m	50 m	55 m	59 m	62 m	62 m	61 m	59 m	56 m	54 m	52 m	51 m	51 m	52 m	53 m	55 m	57 m	58 m	58 m	57 m	54 m	50 m	46 m	40 m	34 m	29 m	23 m	18 m	14 m
Row 13	4 m	7 m	10 m	14 m	18 m	24 m	30 m	36 m	42 m	46 m	50 m	52 m	53 m	53 m	52 m	50 m	49 m	48 m	48 m	49 m	51 m	54 m	57 m	59 m	60 m	60 m	59 m	56 m	52 m	47 m	42 m	36 m	30 m	24 m	19 m	15 m
Row 14	3 m	5 m	8 m	11 m	15 m	19 m	24 m	29 m	34 m	38 m	41 m	43 m	44 m	44 m	44 m	43 m	43 m	44 m	45 m	47 m	50 m	53 m	56 m	59 m	60 m	61 m	60 m	57 m	53 m	48 m	42 m	36 m	30 m	25 m	19 m	15 m
Row 15	3 m	4 m	6 m	8 m	11 m	15 m	19 m	22 m	26 m	29 m	32 m	34 m	35 m	36 m	36 m	37 m	37 m	39 m	41 m	44 m	48 m	51 m	55 m	58 m	59 m	60 m	59 m	56 m	52 m	47 m	42 m	36 m	30 m	24 m	19 m	15 m
Row 16	2 m	3 m	4 m	6 m	8 m	11 m	14 m	17 m	20 m	22 m	24 m	26 m	27 m	28 m	29 m	30 m	32 m	34 m	37 m	41 m	45 m	48 m	52 m	55 m	57 m	57 m	56 m	54 m	50 m	45 m	40 m	34 m	29 m	23 m	18 m	14 m
Row 17	1 m	2 m	3 m	4 m	6 m	8 m	10 m	12 m	14 m	16 m	18 m	19 m	21 m	22 m	23 m	25 m	27 m	29 m	33 m	37 m	41 m	45 m	48 m	51 m	53 m	53 m	52 m	50 m	47 m	42 m	37 m	32 m	27 m	22 m	17 m	13 m
Row 18	1 m	1 m	2 m	3 m	4 m	5 m	7 m	8 m	10 m	11 m	13 m	14 m	15 m	16 m	18 m	20 m	22 m	25 m	28 m	32 m	36 m	40 m	43 m	46 m	48 m	48 m	48 m	46 m	42 m	38 m	34 m	29 m	24 m	20 m	16 m	12 m
Row 19	1 m	1 m	1 m	2 m	3 m	4 m	5 m	6 m	7 m	8 m	9 m	10 m	11 m	12 m	14 m	16 m	18 m	21 m	24 m	28 m	31 m	35 m	38 m	41 m	42 m	43 m	42 m	40 m	37 m	34 m	30 m	26 m	21 m	17 m	14 m	11 m
Row 20	0 m	1 m	1 m	1 m	2 m	2 m	3 m	4 m	4 m	5 m	6 m	7 m	8 m	9 m	11 m	12 m	15 m	17 m	20 m	23 m	27 m	30 m	33 m	35 m	36 m	36 m	36 m	34 m	32 m	29 m	26 m	22 m	18 m	15 m	12 m	9 m

Elevation contours
Row	Column 1	Column 2	Column 3	Column 4	Column 5	Column 6	Column 7	Column 8	Column 9	Column 10	Column 11	Column 12	Column 13	Column 14	Column 15	Column 16	Column 17	Column 18	Column 19	Column 20	Column 21	Column 22	Column 23	Column 24	Column 25	Column 26	Column 27	Column 28	Column 29	Column 30	Column 31	Column 32	Column 33	Column 34	Column 35	Column 36
Row 1	2.7	4.1	5.9	8.4	11.3	14.6	18.2	21.9	25.2	27.9	29.7	30.4	30.0	28.5	26.1	23.2	20.1	17.0	14.2	11.8	10.0	8.7	7.7	7.1	6.7	6.3	6.0	5.6	5.2	4.6	4.1	3.5	2.9	2.4	1.9	1.4
Row 2	3.5	5.3	7.7	10.8	14.6	19.0	23.7	28.4	32.7	36.2	38.5	39.5	38.9	37.0	34.0	30.3	26.3	22.3	18.7	15.8	13.4	11.8	10.6	9.9	9.3	8.9	8.4	7.9	7.3	6.6	5.8	4.9	4.1	3.3	2.6	2.0
Row 3	4.3	6.6	9.6	13.5	18.2	23.7	29.5	35.4	40.7	45.1	48.1	49.3	48.6	46.3	42.6	38.0	33.1	28.2	23.9	20.3	17.5	15.5	14.2	13.3	12.7	12.1	11.6	10.9	10.0	9.0	7.9	6.8	5.7	4.6	3.6	2.8
Row 4	5.2	7.9	11.5	16.2	21.8	28.3	35.3	42.3	48.8	54.1	57.6	59.1	58.4	55.7	51.3	45.9	40.1	34.4	29.4	25.2	22.1	19.8	18.4	17.4	16.7	16.1	15.4	14.5	13.4	12.1	10.6	9.1	7.6	6.2	4.9	3.7
Row 5	5.9	9.0	13.2	18.6	25.1	32.6	40.7	48.7	56.2	62.2	66.4	68.1	67.4	64.3	59.4	53.4	46.9	40.5	34.9	30.4	27.0	24.6	23.1	22.2	21.5	20.8	20.0	18.8	17.4	15.7	13.8	11.8	9.9	8.0	6.3	4.9
Row 6	6.6	10.0	14.6	20.6	27.8	36.0	45.0	53.9	62.1	68.9	73.5	75.5	74.7	71.5	66.3	59.8	52.8	46.1	40.2	35.5	32.0	29.7	28.3	27.5	26.8	26.1	25.1	23.8	22.0	19.9	17.5	15.0	12.5	10.1	8.0	6.2
Row 7	7.0	10.6	15.5	21.8	29.5	38.3	47.8	57.3	66.0	73.3	78.2	80.4	79.8	76.5	71.2	64.5	57.4	50.7	44.8	40.2	37.0	34.9	33.8	33.1	32.6	31.9	30.8	29.2	27.1	24.4	21.5	18.5	15.4	12.5	9.9	7.6
Row 8	7.1	10.8	15.9	22.3	30.1	39.1	48.8	58.5	67.5	74.9	80.0	82.4	81.9	78.8	73.6	67.2	60.3	53.9	48.5	44.3	41.5	40.0	39.2	38.9	38.6	38.0	36.8	34.9	32.4	29.3	25.8	22.1	18.4	15.0	11.8	9.1
Row 9	7.0	10.6	15.5	21.9	29.5	38.3	47.8	57.4	66.3	73.6	78.7	81.2	80.9	78.1	73.4	67.5	61.3	55.6	50.9	47.5	45.5	44.6	44.4	44.5	44.5	44.0	42.7	40.6	37.7	34.1	30.0	25.7	21.5	17.4	13.8	10.6
Row 10	6.6	10.0	14.6	20.6	27.8	36.1	45.1	54.2	62.6	69.5	74.5	77.0	77.0	74.7	70.6	65.6	60.4	55.7	52.0	49.7	48.6	48.5	49.0	49.6	49.9	49.5	48.2	45.9	42.6	38.6	34.0	29.2	24.3	19.8	15.6	12.0
Row 11	6.0	9.1	13.3	18.6	25.2	32.7	40.9	49.1	56.8	63.2	67.8	70.3	70.6	68.9	65.7	61.7	57.7	54.3	51.9	50.7	50.6	51.4	52.7	53.8	54.5	54.3	53.0	50.5	46.9	42.5	37.5	32.1	26.8	21.8	17.2	13.2
Row 12	5.2	7.9	11.5	16.2	21.9	28.5	35.6	42.8	49.5	55.2	59.4	61.8	62.4	61.3	59.1	56.3	53.7	51.6	50.5	50.6	51.6	53.3	55.3	57.0	58.0	57.9	56.6	54.0	50.3	45.5	40.2	34.4	28.7	23.3	18.4	14.2
Row 13	4.3	6.6	9.6	13.6	18.3	23.8	29.8	35.9	41.6	46.5	50.2	52.4	53.2	52.8	51.6	50.0	48.6	47.9	48.2	49.4	51.4	53.9	56.5	58.7	60.0	60.1	58.9	56.3	52.4	47.5	41.8	35.9	30.0	24.3	19.2	14.8
Row 14	3.5	5.3	7.7	10.9	14.7	19.2	24.0	28.9	33.6	37.7	40.8	42.9	43.9	44.1	43.7	43.2	43.1	43.6	45.0	47.2	50.1	53.3	56.4	58.9	60.5	60.8	59.6	57.0	53.1	48.1	42.4	36.4	30.4	24.7	19.5	15.0
Row 15	2.7	4.1	6.0	8.4	11.4	14.8	18.6	22.5	26.1	29.4	32.0	33.9	35.1	35.7	36.1	36.6	37.4	38.9	41.2	44.2	47.8	51.4	54.9	57.7	59.4	59.8	58.7	56.2	52.3	47.4	41.8	35.9	30.0	24.3	19.2	14.8
Row 16	2.0	3.0	4.4	6.3	8.5	11.0	13.9	16.8	19.6	22.2	24.3	26.0	27.2	28.2	29.2	30.3	31.9	34.2	37.1	40.6	44.5	48.5	52.1	54.9	56.7	57.2	56.2	53.8	50.2	45.5	40.1	34.4	28.7	23.3	18.4	14.2
Row 17	1.4	2.2	3.2	4.5	6.1	7.9	10.0	12.1	14.2	16.1	17.8	19.3	20.6	21.8	23.1	24.7	26.8	29.5	32.8	36.5	40.6	44.5	48.1	51.0	52.8	53.3	52.4	50.2	46.8	42.4	37.4	32.1	26.8	21.8	17.2	13.2
Row 18	1.0	1.5	2.2	3.1	4.2	5.5	6.9	8.4	9.9	11.4	12.7	14.0	15.2	16.5	18.0	19.8	22.2	25.0	28.4	32.2	36.1	39.9	43.4	46.1	47.8	48.3	47.5	45.5	42.4	38.5	34.0	29.1	24.3	19.8	15.6	12.0
Row 19	0.6	1.0	1.4	2.0	2.8	3.6	4.6	5.6	6.7	7.8	8.8	9.9	11.0	12.3	13.8	15.7	18.1	20.9	24.1	27.7	31.4	34.9	38.0	40.5	42.1	42.5	41.9	40.2	37.4	34.0	30.0	25.7	21.5	17.4	13.8	10.6
Row 20	0.4	0.6	0.9	1.3	1.8	2.3	3.0	3.7	4.4	5.2	6.0	6.9	7.9	9.1	10.5	12.3	14.5	17.1	20.1	23.3	26.6	29.7	32.5	34.7	36.0	36.5	35.9	34.5	32.1	29.1	25.7	22.1	18.4	15.0	11.8	9.1

Elevation heat field
Row	Column 1	Column 2	Column 3	Column 4	Column 5	Column 6	Column 7	Column 8	Column 9	Column 10	Column 11	Column 12	Column 13	Column 14	Column 15	Column 16	Column 17	Column 18	Column 19	Column 20	Column 21	Column 22	Column 23	Column 24	Column 25	Column 26	Column 27	Column 28	Column 29	Column 30	Column 31	Column 32	Column 33	Column 34	Column 35	Column 36
Row 1	2.7	4.1	5.9	8.4	11.3	14.6	18.2	21.9	25.2	27.9	29.7	30.4	30.0	28.5	26.1	23.2	20.1	17.0	14.2	11.8	10.0	8.7	7.7	7.1	6.7	6.3	6.0	5.6	5.2	4.6	4.1	3.5	2.9	2.4	1.9	1.4
Row 2	3.5	5.3	7.7	10.8	14.6	19.0	23.7	28.4	32.7	36.2	38.5	39.5	38.9	37.0	34.0	30.3	26.3	22.3	18.7	15.8	13.4	11.8	10.6	9.9	9.3	8.9	8.4	7.9	7.3	6.6	5.8	4.9	4.1	3.3	2.6	2.0
Row 3	4.3	6.6	9.6	13.5	18.2	23.7	29.5	35.4	40.7	45.1	48.1	49.3	48.6	46.3	42.6	38.0	33.1	28.2	23.9	20.3	17.5	15.5	14.2	13.3	12.7	12.1	11.6	10.9	10.0	9.0	7.9	6.8	5.7	4.6	3.6	2.8
Row 4	5.2	7.9	11.5	16.2	21.8	28.3	35.3	42.3	48.8	54.1	57.6	59.1	58.4	55.7	51.3	45.9	40.1	34.4	29.4	25.2	22.1	19.8	18.4	17.4	16.7	16.1	15.4	14.5	13.4	12.1	10.6	9.1	7.6	6.2	4.9	3.7
Row 5	5.9	9.0	13.2	18.6	25.1	32.6	40.7	48.7	56.2	62.2	66.4	68.1	67.4	64.3	59.4	53.4	46.9	40.5	34.9	30.4	27.0	24.6	23.1	22.2	21.5	20.8	20.0	18.8	17.4	15.7	13.8	11.8	9.9	8.0	6.3	4.9
Row 6	6.6	10.0	14.6	20.6	27.8	36.0	45.0	53.9	62.1	68.9	73.5	75.5	74.7	71.5	66.3	59.8	52.8	46.1	40.2	35.5	32.0	29.7	28.3	27.5	26.8	26.1	25.1	23.8	22.0	19.9	17.5	15.0	12.5	10.1	8.0	6.2
Row 7	7.0	10.6	15.5	21.8	29.5	38.3	47.8	57.3	66.0	73.3	78.2	80.4	79.8	76.5	71.2	64.5	57.4	50.7	44.8	40.2	37.0	34.9	33.8	33.1	32.6	31.9	30.8	29.2	27.1	24.4	21.5	18.5	15.4	12.5	9.9	7.6
Row 8	7.1	10.8	15.9	22.3	30.1	39.1	48.8	58.5	67.5	74.9	80.0	82.4	81.9	78.8	73.6	67.2	60.3	53.9	48.5	44.3	41.5	40.0	39.2	38.9	38.6	38.0	36.8	34.9	32.4	29.3	25.8	22.1	18.4	15.0	11.8	9.1
Row 9	7.0	10.6	15.5	21.9	29.5	38.3	47.8	57.4	66.3	73.6	78.7	81.2	80.9	78.1	73.4	67.5	61.3	55.6	50.9	47.5	45.5	44.6	44.4	44.5	44.5	44.0	42.7	40.6	37.7	34.1	30.0	25.7	21.5	17.4	13.8	10.6
Row 10	6.6	10.0	14.6	20.6	27.8	36.1	45.1	54.2	62.6	69.5	74.5	77.0	77.0	74.7	70.6	65.6	60.4	55.7	52.0	49.7	48.6	48.5	49.0	49.6	49.9	49.5	48.2	45.9	42.6	38.6	34.0	29.2	24.3	19.8	15.6	12.0
Row 11	6.0	9.1	13.3	18.6	25.2	32.7	40.9	49.1	56.8	63.2	67.8	70.3	70.6	68.9	65.7	61.7	57.7	54.3	51.9	50.7	50.6	51.4	52.7	53.8	54.5	54.3	53.0	50.5	46.9	42.5	37.5	32.1	26.8	21.8	17.2	13.2
Row 12	5.2	7.9	11.5	16.2	21.9	28.5	35.6	42.8	49.5	55.2	59.4	61.8	62.4	61.3	59.1	56.3	53.7	51.6	50.5	50.6	51.6	53.3	55.3	57.0	58.0	57.9	56.6	54.0	50.3	45.5	40.2	34.4	28.7	23.3	18.4	14.2
Row 13	4.3	6.6	9.6	13.6	18.3	23.8	29.8	35.9	41.6	46.5	50.2	52.4	53.2	52.8	51.6	50.0	48.6	47.9	48.2	49.4	51.4	53.9	56.5	58.7	60.0	60.1	58.9	56.3	52.4	47.5	41.8	35.9	30.0	24.3	19.2	14.8
Row 14	3.5	5.3	7.7	10.9	14.7	19.2	24.0	28.9	33.6	37.7	40.8	42.9	43.9	44.1	43.7	43.2	43.1	43.6	45.0	47.2	50.1	53.3	56.4	58.9	60.5	60.8	59.6	57.0	53.1	48.1	42.4	36.4	30.4	24.7	19.5	15.0
Row 15	2.7	4.1	6.0	8.4	11.4	14.8	18.6	22.5	26.1	29.4	32.0	33.9	35.1	35.7	36.1	36.6	37.4	38.9	41.2	44.2	47.8	51.4	54.9	57.7	59.4	59.8	58.7	56.2	52.3	47.4	41.8	35.9	30.0	24.3	19.2	14.8
Row 16	2.0	3.0	4.4	6.3	8.5	11.0	13.9	16.8	19.6	22.2	24.3	26.0	27.2	28.2	29.2	30.3	31.9	34.2	37.1	40.6	44.5	48.5	52.1	54.9	56.7	57.2	56.2	53.8	50.2	45.5	40.1	34.4	28.7	23.3	18.4	14.2
Row 17	1.4	2.2	3.2	4.5	6.1	7.9	10.0	12.1	14.2	16.1	17.8	19.3	20.6	21.8	23.1	24.7	26.8	29.5	32.8	36.5	40.6	44.5	48.1	51.0	52.8	53.3	52.4	50.2	46.8	42.4	37.4	32.1	26.8	21.8	17.2	13.2
Row 18	1.0	1.5	2.2	3.1	4.2	5.5	6.9	8.4	9.9	11.4	12.7	14.0	15.2	16.5	18.0	19.8	22.2	25.0	28.4	32.2	36.1	39.9	43.4	46.1	47.8	48.3	47.5	45.5	42.4	38.5	34.0	29.1	24.3	19.8	15.6	12.0
Row 19	0.6	1.0	1.4	2.0	2.8	3.6	4.6	5.6	6.7	7.8	8.8	9.9	11.0	12.3	13.8	15.7	18.1	20.9	24.1	27.7	31.4	34.9	38.0	40.5	42.1	42.5	41.9	40.2	37.4	34.0	30.0	25.7	21.5	17.4	13.8	10.6
Row 20	0.4	0.6	0.9	1.3	1.8	2.3	3.0	3.7	4.4	5.2	6.0	6.9	7.9	9.1	10.5	12.3	14.5	17.1	20.1	23.3	26.6	29.7	32.5	34.7	36.0	36.5	35.9	34.5	32.1	29.1	25.7	22.1	18.4	15.0	11.8	9.1

Usage

use hydroxy_leptos::contour_chart::*;
use leptos::prelude::*;

/// Two overlapping hills on a 36 × 20 grid.
fn terrain() -> Vec<f64> {
    let hill = |x: f64, y: f64, cx: f64, cy: f64, h: f64, r: f64| {
        h * (-((x - cx).powi(2) + (y - cy).powi(2)) / (2.0 * r * r)).exp()
    };
    (0..20)
        .flat_map(|r| (0..36).map(move |c| (f64::from(c), f64::from(r))))
        .map(|(x, y)| hill(x, y, 11.0, 7.0, 80.0, 5.0) + hill(x, y, 25.0, 13.0, 60.0, 6.0))
        .collect()
}

#[component]
pub fn Demo() -> impl IntoView {
    view! {
        <div style="display: grid; gap: var(--space-10);">
            // Contour lines at nice levels, over a filled heat field.
            <ContourChart values=terrain() columns=36 label="Elevation in metres" filled=true format=|v: f64| format!("{v:.0} m") />
            // Lines alone.
            <ContourChart values=terrain() columns=36 label="Elevation contours" levels=8 />
            // A heat field alone.
            <HeatField values=terrain() columns=36 label="Elevation heat field" />
        </div>
    }
}

use dioxus::prelude::*;
use hydroxy_dioxus::contour_chart::{ContourChart, HeatField};

/// Two overlapping hills on a 36 × 20 grid.
fn terrain() -> Vec<f64> {
    let hill = |x: f64, y: f64, cx: f64, cy: f64, h: f64, r: f64| {
        h * (-((x - cx).powi(2) + (y - cy).powi(2)) / (2.0 * r * r)).exp()
    };
    (0..20)
        .flat_map(|r| (0..36).map(move |c| (f64::from(c), f64::from(r))))
        .map(|(x, y)| hill(x, y, 11.0, 7.0, 80.0, 5.0) + hill(x, y, 25.0, 13.0, 60.0, 6.0))
        .collect()
}

#[component]
pub fn ContourChartDemo() -> Element {
    rsx! {
        div { style: "display: grid; gap: var(--space-10);",
            ContourChart {
                values: terrain(),
                columns: 36,
                label: "Elevation in metres",
                filled: true,
                format: move |v: f64| format!("{v:.0} m"),
            }
            ContourChart { values: terrain(), columns: 36, label: "Elevation contours", levels: 8 }
            HeatField { values: terrain(), columns: 36, label: "Elevation heat field" }
        }
    }
}

Anatomy

Component	data-part	Renders
`ContourChart`	root	figure holding the plot, scale and screen-reader parts
	plot	Focusable group; reads the cell under the pointer
	cell	One square per value, shaded on a sequential scale (filled only); fades in
	contour	A line at one level; darker for higher levels; draws in along its length
	active-cell	Outline on the cell being read
	tooltip	Row, column and value of the cell being read
	scale	Colour ramp with the smallest and largest value
	sr-live	Announces the cell being read
	sr-table	The whole grid with a header row, for screen readers and CSV export

Keyboard

Key	Does
`Arrow keys`	Move between cells
`Home / End`	First or last cell in the row
`Escape`	Clear the active cell

Props

Prop	Type	Notes
`values`	Vec<f64>	Required. Row-major grid; NaN leaves a gap
`columns`	usize	Required. Values per row
`label`	String	Required. What the chart shows; the accessible name
`levels`	usize	About how many contour levels. Default 6
`filled`	bool	Shade each cell under the lines (ContourChart only)
`format`	Fn(f64) -> String	Formats the scale, tooltips and table

Events

Prop	Type	Notes
`on_hover`	Callback<Option<Datum>>	The mark under the pointer or keyboard focus changes, or is left. Fires only on a change
`on_select`	Callback<Datum>	Click, tap or Enter on a mark