[{"data":1,"prerenderedAt":896},["ShallowReactive",2],{"docs:\u002Ftutorials\u002Fwaffle-chart":3},{"id":4,"title":5,"body":6,"description":886,"extension":887,"meta":888,"navigation":890,"path":892,"seo":893,"stem":894,"__hash__":895},"docs\u002Ftutorials\u002Fwaffle-chart.md","Waffle Chart",{"type":7,"value":8,"toc":881},"minimark",[9,13,17,22,192,195,287,290,416,420,423,689,693,872,877],[10,11,5],"h1",{"id":12},"waffle-chart",[14,15,16],"p",{},"A waffle chart uses a fixed grid to show proportions. A 10 by 10 grid is a good\ndefault because each cell represents one percent.",[18,19,21],"h2",{"id":20},"data-and-layout","Data and Layout",[23,24,29],"pre",{"className":25,"code":26,"language":27,"meta":28,"style":28},"language-python shiki shiki-themes material-theme-lighter github-light-high-contrast github-dark","import pydreamplet as dp\n\ndata = [130, 65, 108]\ndata.sort(reverse=True)\n\nside = 300\nside_count = 10\ngutter = 5\ntotal_cells = side_count**2\ntotal = sum(data)\n","python","",[30,31,32,51,58,90,119,124,135,146,157,174],"code",{"__ignoreMap":28},[33,34,37,41,45,48],"span",{"class":35,"line":36},"line",1,[33,38,40],{"class":39},"sED7I","import",[33,42,44],{"class":43},"soTeR"," pydreamplet ",[33,46,47],{"class":39},"as",[33,49,50],{"class":43}," dp\n",[33,52,54],{"class":35,"line":53},2,[33,55,57],{"emptyLinePlaceholder":56},true,"\n",[33,59,61,64,68,72,76,79,82,84,87],{"class":35,"line":60},3,[33,62,63],{"class":43},"data ",[33,65,67],{"class":66},"sWKEy","=",[33,69,71],{"class":70},"sVsmf"," [",[33,73,75],{"class":74},"sNpir","130",[33,77,78],{"class":70},",",[33,80,81],{"class":74}," 65",[33,83,78],{"class":70},[33,85,86],{"class":74}," 108",[33,88,89],{"class":70},"]\n",[33,91,93,96,99,103,106,110,112,116],{"class":35,"line":92},4,[33,94,95],{"class":43},"data",[33,97,98],{"class":70},".",[33,100,102],{"class":101},"sAK04","sort",[33,104,105],{"class":70},"(",[33,107,109],{"class":108},"sYEV4","reverse",[33,111,67],{"class":66},[33,113,115],{"class":114},"sTy78","True",[33,117,118],{"class":70},")\n",[33,120,122],{"class":35,"line":121},5,[33,123,57],{"emptyLinePlaceholder":56},[33,125,127,130,132],{"class":35,"line":126},6,[33,128,129],{"class":43},"side ",[33,131,67],{"class":66},[33,133,134],{"class":74}," 300\n",[33,136,138,141,143],{"class":35,"line":137},7,[33,139,140],{"class":43},"side_count ",[33,142,67],{"class":66},[33,144,145],{"class":74}," 10\n",[33,147,149,152,154],{"class":35,"line":148},8,[33,150,151],{"class":43},"gutter ",[33,153,67],{"class":66},[33,155,156],{"class":74}," 5\n",[33,158,160,163,165,168,171],{"class":35,"line":159},9,[33,161,162],{"class":43},"total_cells ",[33,164,67],{"class":66},[33,166,167],{"class":43}," side_count",[33,169,170],{"class":66},"**",[33,172,173],{"class":74},"2\n",[33,175,177,180,182,186,188,190],{"class":35,"line":176},10,[33,178,179],{"class":43},"total ",[33,181,67],{"class":66},[33,183,185],{"class":184},"sBTIf"," sum",[33,187,105],{"class":70},[33,189,95],{"class":101},[33,191,118],{"class":70},[14,193,194],{},"Convert each value to a number of cells.",[23,196,198],{"className":25,"code":197,"language":27,"meta":28,"style":28},"proportions = [round(value \u002F total * total_cells) for value in data]\ncell_side = (side - (side_count + 1) * gutter) \u002F side_count\n",[30,199,200,246],{"__ignoreMap":28},[33,201,202,205,207,209,212,214,217,220,223,226,229,232,235,238,241,244],{"class":35,"line":36},[33,203,204],{"class":43},"proportions ",[33,206,67],{"class":66},[33,208,71],{"class":70},[33,210,211],{"class":184},"round",[33,213,105],{"class":70},[33,215,216],{"class":101},"value ",[33,218,219],{"class":66},"\u002F",[33,221,222],{"class":101}," total ",[33,224,225],{"class":66},"*",[33,227,228],{"class":101}," total_cells",[33,230,231],{"class":70},")",[33,233,234],{"class":39}," for",[33,236,237],{"class":43}," value ",[33,239,240],{"class":39},"in",[33,242,243],{"class":43}," data",[33,245,89],{"class":70},[33,247,248,251,253,256,258,261,263,265,268,271,273,276,279,281,284],{"class":35,"line":53},[33,249,250],{"class":43},"cell_side ",[33,252,67],{"class":66},[33,254,255],{"class":70}," (",[33,257,129],{"class":43},[33,259,260],{"class":66},"-",[33,262,255],{"class":70},[33,264,140],{"class":43},[33,266,267],{"class":66},"+",[33,269,270],{"class":74}," 1",[33,272,231],{"class":70},[33,274,275],{"class":66}," *",[33,277,278],{"class":43}," gutter",[33,280,231],{"class":70},[33,282,283],{"class":66}," \u002F",[33,285,286],{"class":43}," side_count\n",[14,288,289],{},"Build a list that maps each cell index to a group.",[23,291,293],{"className":25,"code":292,"language":27,"meta":28,"style":28},"cell_group_map = []\nfor group_index, count in enumerate(proportions):\n    cell_group_map.extend([group_index] * count)\n\nif len(cell_group_map) \u003C total_cells:\n    cell_group_map.extend([None] * (total_cells - len(cell_group_map)))\n",[30,294,295,305,331,357,361,384],{"__ignoreMap":28},[33,296,297,300,302],{"class":35,"line":36},[33,298,299],{"class":43},"cell_group_map ",[33,301,67],{"class":66},[33,303,304],{"class":70}," []\n",[33,306,307,310,313,315,318,320,323,325,328],{"class":35,"line":53},[33,308,309],{"class":39},"for",[33,311,312],{"class":43}," group_index",[33,314,78],{"class":70},[33,316,317],{"class":43}," count ",[33,319,240],{"class":39},[33,321,322],{"class":184}," enumerate",[33,324,105],{"class":70},[33,326,327],{"class":101},"proportions",[33,329,330],{"class":70},"):\n",[33,332,333,336,338,341,344,347,350,352,355],{"class":35,"line":60},[33,334,335],{"class":43},"    cell_group_map",[33,337,98],{"class":70},[33,339,340],{"class":101},"extend",[33,342,343],{"class":70},"([",[33,345,346],{"class":101},"group_index",[33,348,349],{"class":70},"]",[33,351,275],{"class":66},[33,353,354],{"class":101}," count",[33,356,118],{"class":70},[33,358,359],{"class":35,"line":92},[33,360,57],{"emptyLinePlaceholder":56},[33,362,363,366,369,371,374,376,379,381],{"class":35,"line":121},[33,364,365],{"class":39},"if",[33,367,368],{"class":184}," len",[33,370,105],{"class":70},[33,372,373],{"class":101},"cell_group_map",[33,375,231],{"class":70},[33,377,378],{"class":66}," \u003C",[33,380,228],{"class":43},[33,382,383],{"class":70},":\n",[33,385,386,388,390,392,394,397,399,401,403,405,407,409,411,413],{"class":35,"line":126},[33,387,335],{"class":43},[33,389,98],{"class":70},[33,391,340],{"class":101},[33,393,343],{"class":70},[33,395,396],{"class":114},"None",[33,398,349],{"class":70},[33,400,275],{"class":66},[33,402,255],{"class":70},[33,404,162],{"class":101},[33,406,260],{"class":66},[33,408,368],{"class":184},[33,410,105],{"class":70},[33,412,373],{"class":101},[33,414,415],{"class":70},")))\n",[18,417,419],{"id":418},"cell-paths","Cell Paths",[14,421,422],{},"Drawing one path per group is more compact than appending 100 separate\nrectangles.",[23,424,426],{"className":25,"code":425,"language":27,"meta":28,"style":28},"paths = {index: \"\" for index in range(len(data))}\n\nfor index in range(total_cells):\n    column = index % side_count\n    row = index \u002F\u002F side_count\n\n    x = gutter + column * (cell_side + gutter)\n    y = gutter + row * (cell_side + gutter)\n\n    group = cell_group_map[index]\n    if group is not None:\n        paths[group] += f\"M {x} {y} h {cell_side} v {cell_side} h -{cell_side} Z \"\n",[30,427,428,470,474,491,505,519,523,550,576,580,597,617],{"__ignoreMap":28},[33,429,430,433,435,438,441,444,448,450,453,455,458,460,463,465,467],{"class":35,"line":36},[33,431,432],{"class":43},"paths ",[33,434,67],{"class":66},[33,436,437],{"class":70}," {",[33,439,440],{"class":43},"index",[33,442,443],{"class":70},":",[33,445,447],{"class":446},"sqo_7"," \"\"",[33,449,234],{"class":39},[33,451,452],{"class":43}," index ",[33,454,240],{"class":39},[33,456,457],{"class":184}," range",[33,459,105],{"class":70},[33,461,462],{"class":184},"len",[33,464,105],{"class":70},[33,466,95],{"class":101},[33,468,469],{"class":70},"))}\n",[33,471,472],{"class":35,"line":53},[33,473,57],{"emptyLinePlaceholder":56},[33,475,476,478,480,482,484,486,489],{"class":35,"line":60},[33,477,309],{"class":39},[33,479,452],{"class":43},[33,481,240],{"class":39},[33,483,457],{"class":184},[33,485,105],{"class":70},[33,487,488],{"class":101},"total_cells",[33,490,330],{"class":70},[33,492,493,496,498,500,503],{"class":35,"line":92},[33,494,495],{"class":43},"    column ",[33,497,67],{"class":66},[33,499,452],{"class":43},[33,501,502],{"class":66},"%",[33,504,286],{"class":43},[33,506,507,510,512,514,517],{"class":35,"line":121},[33,508,509],{"class":43},"    row ",[33,511,67],{"class":66},[33,513,452],{"class":43},[33,515,516],{"class":66},"\u002F\u002F",[33,518,286],{"class":43},[33,520,521],{"class":35,"line":126},[33,522,57],{"emptyLinePlaceholder":56},[33,524,525,528,530,533,535,538,540,542,544,546,548],{"class":35,"line":137},[33,526,527],{"class":43},"    x ",[33,529,67],{"class":66},[33,531,532],{"class":43}," gutter ",[33,534,267],{"class":66},[33,536,537],{"class":43}," column ",[33,539,225],{"class":66},[33,541,255],{"class":70},[33,543,250],{"class":43},[33,545,267],{"class":66},[33,547,278],{"class":43},[33,549,118],{"class":70},[33,551,552,555,557,559,561,564,566,568,570,572,574],{"class":35,"line":148},[33,553,554],{"class":43},"    y ",[33,556,67],{"class":66},[33,558,532],{"class":43},[33,560,267],{"class":66},[33,562,563],{"class":43}," row ",[33,565,225],{"class":66},[33,567,255],{"class":70},[33,569,250],{"class":43},[33,571,267],{"class":66},[33,573,278],{"class":43},[33,575,118],{"class":70},[33,577,578],{"class":35,"line":159},[33,579,57],{"emptyLinePlaceholder":56},[33,581,582,585,587,590,593,595],{"class":35,"line":176},[33,583,584],{"class":43},"    group ",[33,586,67],{"class":66},[33,588,589],{"class":43}," cell_group_map",[33,591,592],{"class":70},"[",[33,594,440],{"class":43},[33,596,89],{"class":70},[33,598,600,603,606,609,612,615],{"class":35,"line":599},11,[33,601,602],{"class":39},"    if",[33,604,605],{"class":43}," group ",[33,607,608],{"class":66},"is",[33,610,611],{"class":66}," not",[33,613,614],{"class":114}," None",[33,616,383],{"class":70},[33,618,620,623,625,628,630,633,637,641,645,648,651,653,656,658,661,663,666,668,671,673,675,677,680,682,684,686],{"class":35,"line":619},12,[33,621,622],{"class":43},"        paths",[33,624,592],{"class":70},[33,626,627],{"class":43},"group",[33,629,349],{"class":70},[33,631,632],{"class":66}," +=",[33,634,636],{"class":635},"sfdCM"," f",[33,638,640],{"class":639},"s_jvP","\"M ",[33,642,644],{"class":643},"smmm7","{",[33,646,647],{"class":43},"x",[33,649,650],{"class":643},"}",[33,652,437],{"class":643},[33,654,655],{"class":43},"y",[33,657,650],{"class":643},[33,659,660],{"class":639}," h ",[33,662,644],{"class":643},[33,664,665],{"class":43},"cell_side",[33,667,650],{"class":643},[33,669,670],{"class":639}," v ",[33,672,644],{"class":643},[33,674,665],{"class":43},[33,676,650],{"class":643},[33,678,679],{"class":639}," h -",[33,681,644],{"class":643},[33,683,665],{"class":43},[33,685,650],{"class":643},[33,687,688],{"class":639}," Z \"\n",[18,690,692],{"id":691},"draw-the-chart","Draw the Chart",[23,694,696],{"className":25,"code":695,"language":27,"meta":28,"style":28},"svg = dp.SVG(side, side)\ncolors = [\"#14b8a6\", \"#f59e0b\", \"#6366f1\"]\n\nfor group_index, path_data in paths.items():\n    if path_data:\n        svg.append(dp.Path(d=path_data, fill=colors[group_index]))\n\nsvg.save(\"waffle-chart.svg\")\n",[30,697,698,725,763,767,791,800,847,851],{"__ignoreMap":28},[33,699,700,703,705,708,710,713,715,718,720,723],{"class":35,"line":36},[33,701,702],{"class":43},"svg ",[33,704,67],{"class":66},[33,706,707],{"class":43}," dp",[33,709,98],{"class":70},[33,711,712],{"class":101},"SVG",[33,714,105],{"class":70},[33,716,717],{"class":101},"side",[33,719,78],{"class":70},[33,721,722],{"class":101}," side",[33,724,118],{"class":70},[33,726,727,730,732,734,737,740,742,744,747,750,752,754,756,759,761],{"class":35,"line":53},[33,728,729],{"class":43},"colors ",[33,731,67],{"class":66},[33,733,71],{"class":70},[33,735,736],{"class":446},"\"",[33,738,739],{"class":639},"#14b8a6",[33,741,736],{"class":446},[33,743,78],{"class":70},[33,745,746],{"class":446}," \"",[33,748,749],{"class":639},"#f59e0b",[33,751,736],{"class":446},[33,753,78],{"class":70},[33,755,746],{"class":446},[33,757,758],{"class":639},"#6366f1",[33,760,736],{"class":446},[33,762,89],{"class":70},[33,764,765],{"class":35,"line":60},[33,766,57],{"emptyLinePlaceholder":56},[33,768,769,771,773,775,778,780,783,785,788],{"class":35,"line":92},[33,770,309],{"class":39},[33,772,312],{"class":43},[33,774,78],{"class":70},[33,776,777],{"class":43}," path_data ",[33,779,240],{"class":39},[33,781,782],{"class":43}," paths",[33,784,98],{"class":70},[33,786,787],{"class":101},"items",[33,789,790],{"class":70},"():\n",[33,792,793,795,798],{"class":35,"line":121},[33,794,602],{"class":39},[33,796,797],{"class":43}," path_data",[33,799,383],{"class":70},[33,801,802,805,807,810,812,815,817,820,822,825,827,830,832,835,837,840,842,844],{"class":35,"line":126},[33,803,804],{"class":43},"        svg",[33,806,98],{"class":70},[33,808,809],{"class":101},"append",[33,811,105],{"class":70},[33,813,814],{"class":101},"dp",[33,816,98],{"class":70},[33,818,819],{"class":101},"Path",[33,821,105],{"class":70},[33,823,824],{"class":108},"d",[33,826,67],{"class":66},[33,828,829],{"class":101},"path_data",[33,831,78],{"class":70},[33,833,834],{"class":108}," fill",[33,836,67],{"class":66},[33,838,839],{"class":101},"colors",[33,841,592],{"class":70},[33,843,346],{"class":101},[33,845,846],{"class":70},"]))\n",[33,848,849],{"class":35,"line":137},[33,850,57],{"emptyLinePlaceholder":56},[33,852,853,856,858,861,863,865,868,870],{"class":35,"line":148},[33,854,855],{"class":43},"svg",[33,857,98],{"class":70},[33,859,860],{"class":101},"save",[33,862,105],{"class":70},[33,864,736],{"class":446},[33,866,867],{"class":639},"waffle-chart.svg",[33,869,736],{"class":446},[33,871,118],{"class":70},[873,874],"svg-preview",{"alt":875,"src":876},"Three-color 10 by 10 waffle chart.","\u002Fshowcase\u002Ftutorial_waffle_chart.svg",[878,879,880],"style",{},"html pre.shiki code .sED7I, html code.shiki .sED7I{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#A0111F;--shiki-default-font-style:inherit;--shiki-dark:#F97583;--shiki-dark-font-style:inherit}html pre.shiki code .soTeR, html code.shiki .soTeR{--shiki-light:#90A4AE;--shiki-default:#0E1116;--shiki-dark:#E1E4E8}html pre.shiki code .sWKEy, html code.shiki .sWKEy{--shiki-light:#39ADB5;--shiki-default:#A0111F;--shiki-dark:#F97583}html pre.shiki code .sVsmf, html code.shiki .sVsmf{--shiki-light:#39ADB5;--shiki-default:#0E1116;--shiki-dark:#E1E4E8}html pre.shiki code .sNpir, html code.shiki .sNpir{--shiki-light:#F76D47;--shiki-default:#023B95;--shiki-dark:#79B8FF}html pre.shiki code .sAK04, html code.shiki .sAK04{--shiki-light:#6182B8;--shiki-default:#0E1116;--shiki-dark:#E1E4E8}html pre.shiki code .sYEV4, html code.shiki .sYEV4{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#702C00;--shiki-default-font-style:inherit;--shiki-dark:#FFAB70;--shiki-dark-font-style:inherit}html pre.shiki code .sTy78, html code.shiki .sTy78{--shiki-light:#39ADB5;--shiki-default:#023B95;--shiki-dark:#79B8FF}html pre.shiki code .sBTIf, html code.shiki .sBTIf{--shiki-light:#6182B8;--shiki-default:#023B95;--shiki-dark:#79B8FF}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sqo_7, html code.shiki .sqo_7{--shiki-light:#39ADB5;--shiki-default:#032563;--shiki-dark:#9ECBFF}html pre.shiki code .sfdCM, html code.shiki .sfdCM{--shiki-light:#9C3EDA;--shiki-default:#A0111F;--shiki-dark:#F97583}html pre.shiki code .s_jvP, html code.shiki .s_jvP{--shiki-light:#91B859;--shiki-default:#032563;--shiki-dark:#9ECBFF}html pre.shiki code .smmm7, html code.shiki .smmm7{--shiki-light:#F76D47;--shiki-default:#A0111F;--shiki-dark:#79B8FF}",{"title":28,"searchDepth":60,"depth":60,"links":882},[883,884,885],{"id":20,"depth":53,"text":21},{"id":418,"depth":53,"text":419},{"id":691,"depth":53,"text":692},"Build a proportional 10 by 10 waffle chart with SVG path cells.","md",{"category":889},"tutorials",{"title":891},"Waffle chart","\u002Ftutorials\u002Fwaffle-chart",{"title":5,"description":886},"tutorials\u002Fwaffle-chart","r2xjSowzwXFiqGkUxLtGKrlGbRj_ev3Yg943JvYiZy4",1780692544469]