[{"data":1,"prerenderedAt":2567},["ShallowReactive",2],{"navigation_docs":3,"-guide-reactive-data":60,"-guide-reactive-data-surround":2562},[4,22,43],{"title":5,"path":6,"stem":7,"children":8,"page":21},"Getting Started","\u002Fgetting-started","1.getting-started",[9,13,17],{"title":10,"path":11,"stem":12},"Introduction","\u002Fgetting-started\u002Fintroduction","1.getting-started\u002F1.introduction",{"title":14,"path":15,"stem":16},"Installation","\u002Fgetting-started\u002Finstallation","1.getting-started\u002F2.installation",{"title":18,"path":19,"stem":20},"Setup","\u002Fgetting-started\u002Fsetup","1.getting-started\u002F3.setup",false,{"title":23,"path":24,"stem":25,"children":26,"page":21},"Guide","\u002Fguide","2.guide",[27,31,35,39],{"title":28,"path":29,"stem":30},"Marks as Children","\u002Fguide\u002Fmarks-as-children","2.guide\u002F1.marks-as-children",{"title":32,"path":33,"stem":34},"Marks as Props","\u002Fguide\u002Fmarks-as-props","2.guide\u002F2.marks-as-props",{"title":36,"path":37,"stem":38},"Reactive Data","\u002Fguide\u002Freactive-data","2.guide\u002F3.reactive-data",{"title":40,"path":41,"stem":42},"Nuxt Integration","\u002Fguide\u002Fnuxt-integration","2.guide\u002F4.nuxt-integration",{"title":44,"path":45,"stem":46,"children":47,"page":21},"Api","\u002Fapi","3.api",[48,52,56],{"title":49,"path":50,"stem":51},"VPlot","\u002Fapi\u002Fvplot","3.api\u002F1.vplot",{"title":53,"path":54,"stem":55},"Mark Components","\u002Fapi\u002Fmark-components","3.api\u002F2.mark-components",{"title":57,"path":58,"stem":59},"TypeScript Types","\u002Fapi\u002Ftypes","3.api\u002F3.types",{"id":61,"title":36,"body":62,"description":2554,"extension":2555,"links":2556,"meta":2557,"navigation":176,"path":37,"seo":2558,"stem":38,"__hash__":2561},"docs\u002F2.guide\u002F3.reactive-data.md",{"type":63,"value":64,"toc":2545},"minimark",[65,69,74,390,397,401,796,804,808,811,1375,1379,1389,1922,1926,1929,2406,2410,2413,2438,2523,2527,2541],[66,67,68],"p",{},"Vue Plot automatically re-renders when your data changes. Bind reactive data to your marks — the plot re-renders on change.",[70,71,73],"h2",{"id":72},"basic-reactivity","Basic reactivity",[75,76,82],"pre",{"className":77,"code":78,"filename":79,"language":80,"meta":81,"style":81},"language-vue shiki shiki-themes kanagawa-lotus material-theme kanagawa-dragon","\u003Cscript setup lang=\"ts\">\nimport { ref } from 'vue'\nimport { VPlot } from '@memotux\u002Fvue-plot'\n\nconst data = ref([\n  { x: 1, y: 2 },\n  { x: 2, y: 4 },\n  { x: 3, y: 1 },\n])\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CVPlot :width=\"680\">\n    \u003CPlotDot :data=\"data\" x=\"x\" y=\"y\" \u002F>\n  \u003C\u002FVPlot>\n\u003C\u002Ftemplate>\n","App.vue","vue","",[83,84,85,121,150,171,178,197,228,250,272,278,288,293,303,325,371,381],"code",{"__ignoreMap":81},[86,87,90,94,98,102,105,108,112,116,118],"span",{"class":88,"line":89},"line",1,[86,91,93],{"class":92},"s4RQF","\u003C",[86,95,97],{"class":96},"sv6DF","script",[86,99,101],{"class":100},"sWKss"," setup",[86,103,104],{"class":100}," lang",[86,106,107],{"class":92},"=",[86,109,111],{"class":110},"sou9m","\"",[86,113,115],{"class":114},"s9-zz","ts",[86,117,111],{"class":110},[86,119,120],{"class":92},">\n",[86,122,124,128,131,135,138,142,145,147],{"class":88,"line":123},2,[86,125,127],{"class":126},"su7sr","import",[86,129,130],{"class":92}," {",[86,132,134],{"class":133},"sOCQP"," ref",[86,136,137],{"class":92}," }",[86,139,141],{"class":140},"seCTJ"," from",[86,143,144],{"class":110}," '",[86,146,80],{"class":114},[86,148,149],{"class":110},"'\n",[86,151,153,155,157,160,162,164,166,169],{"class":88,"line":152},3,[86,154,127],{"class":126},[86,156,130],{"class":92},[86,158,159],{"class":133}," VPlot",[86,161,137],{"class":92},[86,163,141],{"class":140},[86,165,144],{"class":110},[86,167,168],{"class":114},"@memotux\u002Fvue-plot",[86,170,149],{"class":110},[86,172,174],{"class":88,"line":173},4,[86,175,177],{"emptyLinePlaceholder":176},true,"\n",[86,179,181,184,187,190,193],{"class":88,"line":180},5,[86,182,183],{"class":100},"const",[86,185,186],{"class":133}," data ",[86,188,107],{"class":189},"sqN5v",[86,191,134],{"class":192},"sfbsL",[86,194,196],{"class":195},"sfkeP","([\n",[86,198,200,203,207,210,214,217,220,222,225],{"class":88,"line":199},6,[86,201,202],{"class":92},"  {",[86,204,206],{"class":205},"sNH7Q"," x",[86,208,209],{"class":92},":",[86,211,213],{"class":212},"svr3b"," 1",[86,215,216],{"class":92},",",[86,218,219],{"class":205}," y",[86,221,209],{"class":92},[86,223,224],{"class":212}," 2",[86,226,227],{"class":92}," },\n",[86,229,231,233,235,237,239,241,243,245,248],{"class":88,"line":230},7,[86,232,202],{"class":92},[86,234,206],{"class":205},[86,236,209],{"class":92},[86,238,224],{"class":212},[86,240,216],{"class":92},[86,242,219],{"class":205},[86,244,209],{"class":92},[86,246,247],{"class":212}," 4",[86,249,227],{"class":92},[86,251,253,255,257,259,262,264,266,268,270],{"class":88,"line":252},8,[86,254,202],{"class":92},[86,256,206],{"class":205},[86,258,209],{"class":92},[86,260,261],{"class":212}," 3",[86,263,216],{"class":92},[86,265,219],{"class":205},[86,267,209],{"class":92},[86,269,213],{"class":212},[86,271,227],{"class":92},[86,273,275],{"class":88,"line":274},9,[86,276,277],{"class":195},"])\n",[86,279,281,284,286],{"class":88,"line":280},10,[86,282,283],{"class":92},"\u003C\u002F",[86,285,97],{"class":96},[86,287,120],{"class":92},[86,289,291],{"class":88,"line":290},11,[86,292,177],{"emptyLinePlaceholder":176},[86,294,296,298,301],{"class":88,"line":295},12,[86,297,93],{"class":92},[86,299,300],{"class":96},"template",[86,302,120],{"class":92},[86,304,306,309,311,314,316,318,321,323],{"class":88,"line":305},13,[86,307,308],{"class":92},"  \u003C",[86,310,49],{"class":96},[86,312,313],{"class":100}," :width",[86,315,107],{"class":92},[86,317,111],{"class":110},[86,319,320],{"class":114},"680",[86,322,111],{"class":110},[86,324,120],{"class":92},[86,326,328,331,334,337,339,341,344,346,348,350,352,355,357,359,361,363,366,368],{"class":88,"line":327},14,[86,329,330],{"class":92},"    \u003C",[86,332,333],{"class":96},"PlotDot",[86,335,336],{"class":100}," :data",[86,338,107],{"class":92},[86,340,111],{"class":110},[86,342,343],{"class":114},"data",[86,345,111],{"class":110},[86,347,206],{"class":100},[86,349,107],{"class":92},[86,351,111],{"class":110},[86,353,354],{"class":114},"x",[86,356,111],{"class":110},[86,358,219],{"class":100},[86,360,107],{"class":92},[86,362,111],{"class":110},[86,364,365],{"class":114},"y",[86,367,111],{"class":110},[86,369,370],{"class":92}," \u002F>\n",[86,372,374,377,379],{"class":88,"line":373},15,[86,375,376],{"class":92},"  \u003C\u002F",[86,378,49],{"class":96},[86,380,120],{"class":92},[86,382,384,386,388],{"class":88,"line":383},16,[86,385,283],{"class":92},[86,387,300],{"class":96},[86,389,120],{"class":92},[66,391,392,393,396],{},"When ",[83,394,395],{},"data.value"," changes, the plot updates automatically.",[70,398,400],{"id":399},"adding-data-points","Adding data points",[75,402,404],{"className":77,"code":403,"filename":79,"language":80,"meta":81,"style":81},"\u003Cscript setup lang=\"ts\">\nimport { ref } from 'vue'\nimport { VPlot } from '@memotux\u002Fvue-plot'\n\nconst data = ref([\n  { x: 1, y: 2 },\n  { x: 2, y: 4 },\n  { x: 3, y: 1 },\n])\n\nfunction addPoint() {\n  data.value = [\n    ...data.value,\n    { x: data.value.length + 1, y: Math.random() * 10 },\n  ]\n}\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CVPlot :width=\"680\">\n    \u003CPlotDot :data=\"data\" x=\"x\" y=\"y\" r=\"4\" \u002F>\n  \u003C\u002FVPlot>\n  \u003Cbutton @click=\"addPoint\">Add Point\u003C\u002Fbutton>\n\u003C\u002Ftemplate>\n",[83,405,406,426,444,462,466,478,498,518,538,542,546,560,579,593,643,648,653,662,667,676,695,746,755,787],{"__ignoreMap":81},[86,407,408,410,412,414,416,418,420,422,424],{"class":88,"line":89},[86,409,93],{"class":92},[86,411,97],{"class":96},[86,413,101],{"class":100},[86,415,104],{"class":100},[86,417,107],{"class":92},[86,419,111],{"class":110},[86,421,115],{"class":114},[86,423,111],{"class":110},[86,425,120],{"class":92},[86,427,428,430,432,434,436,438,440,442],{"class":88,"line":123},[86,429,127],{"class":126},[86,431,130],{"class":92},[86,433,134],{"class":133},[86,435,137],{"class":92},[86,437,141],{"class":140},[86,439,144],{"class":110},[86,441,80],{"class":114},[86,443,149],{"class":110},[86,445,446,448,450,452,454,456,458,460],{"class":88,"line":152},[86,447,127],{"class":126},[86,449,130],{"class":92},[86,451,159],{"class":133},[86,453,137],{"class":92},[86,455,141],{"class":140},[86,457,144],{"class":110},[86,459,168],{"class":114},[86,461,149],{"class":110},[86,463,464],{"class":88,"line":173},[86,465,177],{"emptyLinePlaceholder":176},[86,467,468,470,472,474,476],{"class":88,"line":180},[86,469,183],{"class":100},[86,471,186],{"class":133},[86,473,107],{"class":189},[86,475,134],{"class":192},[86,477,196],{"class":195},[86,479,480,482,484,486,488,490,492,494,496],{"class":88,"line":199},[86,481,202],{"class":92},[86,483,206],{"class":205},[86,485,209],{"class":92},[86,487,213],{"class":212},[86,489,216],{"class":92},[86,491,219],{"class":205},[86,493,209],{"class":92},[86,495,224],{"class":212},[86,497,227],{"class":92},[86,499,500,502,504,506,508,510,512,514,516],{"class":88,"line":230},[86,501,202],{"class":92},[86,503,206],{"class":205},[86,505,209],{"class":92},[86,507,224],{"class":212},[86,509,216],{"class":92},[86,511,219],{"class":205},[86,513,209],{"class":92},[86,515,247],{"class":212},[86,517,227],{"class":92},[86,519,520,522,524,526,528,530,532,534,536],{"class":88,"line":252},[86,521,202],{"class":92},[86,523,206],{"class":205},[86,525,209],{"class":92},[86,527,261],{"class":212},[86,529,216],{"class":92},[86,531,219],{"class":205},[86,533,209],{"class":92},[86,535,213],{"class":212},[86,537,227],{"class":92},[86,539,540],{"class":88,"line":274},[86,541,277],{"class":195},[86,543,544],{"class":88,"line":280},[86,545,177],{"emptyLinePlaceholder":176},[86,547,548,551,554,557],{"class":88,"line":290},[86,549,550],{"class":100},"function",[86,552,553],{"class":192}," addPoint",[86,555,556],{"class":92},"()",[86,558,559],{"class":92}," {\n",[86,561,562,565,568,572,575],{"class":88,"line":295},[86,563,564],{"class":133},"  data",[86,566,567],{"class":92},".",[86,569,571],{"class":570},"smkSw","value",[86,573,574],{"class":189}," =",[86,576,578],{"class":577},"s7e5W"," [\n",[86,580,581,584,586,588,590],{"class":88,"line":305},[86,582,583],{"class":189},"    ...",[86,585,343],{"class":133},[86,587,567],{"class":92},[86,589,571],{"class":570},[86,591,592],{"class":92},",\n",[86,594,595,598,600,602,605,607,609,611,614,617,619,621,623,625,628,630,633,635,638,641],{"class":88,"line":327},[86,596,597],{"class":92},"    {",[86,599,206],{"class":205},[86,601,209],{"class":92},[86,603,604],{"class":133}," data",[86,606,567],{"class":92},[86,608,571],{"class":133},[86,610,567],{"class":92},[86,612,613],{"class":133},"length",[86,615,616],{"class":189}," +",[86,618,213],{"class":212},[86,620,216],{"class":92},[86,622,219],{"class":205},[86,624,209],{"class":92},[86,626,627],{"class":133}," Math",[86,629,567],{"class":92},[86,631,632],{"class":192},"random",[86,634,556],{"class":577},[86,636,637],{"class":189}," *",[86,639,640],{"class":212}," 10",[86,642,227],{"class":92},[86,644,645],{"class":88,"line":373},[86,646,647],{"class":577},"  ]\n",[86,649,650],{"class":88,"line":383},[86,651,652],{"class":92},"}\n",[86,654,656,658,660],{"class":88,"line":655},17,[86,657,283],{"class":92},[86,659,97],{"class":96},[86,661,120],{"class":92},[86,663,665],{"class":88,"line":664},18,[86,666,177],{"emptyLinePlaceholder":176},[86,668,670,672,674],{"class":88,"line":669},19,[86,671,93],{"class":92},[86,673,300],{"class":96},[86,675,120],{"class":92},[86,677,679,681,683,685,687,689,691,693],{"class":88,"line":678},20,[86,680,308],{"class":92},[86,682,49],{"class":96},[86,684,313],{"class":100},[86,686,107],{"class":92},[86,688,111],{"class":110},[86,690,320],{"class":114},[86,692,111],{"class":110},[86,694,120],{"class":92},[86,696,698,700,702,704,706,708,710,712,714,716,718,720,722,724,726,728,730,732,735,737,739,742,744],{"class":88,"line":697},21,[86,699,330],{"class":92},[86,701,333],{"class":96},[86,703,336],{"class":100},[86,705,107],{"class":92},[86,707,111],{"class":110},[86,709,343],{"class":114},[86,711,111],{"class":110},[86,713,206],{"class":100},[86,715,107],{"class":92},[86,717,111],{"class":110},[86,719,354],{"class":114},[86,721,111],{"class":110},[86,723,219],{"class":100},[86,725,107],{"class":92},[86,727,111],{"class":110},[86,729,365],{"class":114},[86,731,111],{"class":110},[86,733,734],{"class":100}," r",[86,736,107],{"class":92},[86,738,111],{"class":110},[86,740,741],{"class":114},"4",[86,743,111],{"class":110},[86,745,370],{"class":92},[86,747,749,751,753],{"class":88,"line":748},22,[86,750,376],{"class":92},[86,752,49],{"class":96},[86,754,120],{"class":92},[86,756,758,760,763,766,768,770,773,775,778,781,783,785],{"class":88,"line":757},23,[86,759,308],{"class":92},[86,761,762],{"class":96},"button",[86,764,765],{"class":100}," @click",[86,767,107],{"class":92},[86,769,111],{"class":110},[86,771,772],{"class":114},"addPoint",[86,774,111],{"class":110},[86,776,777],{"class":92},">",[86,779,780],{"class":133},"Add Point",[86,782,283],{"class":92},[86,784,762],{"class":96},[86,786,120],{"class":92},[86,788,790,792,794],{"class":88,"line":789},24,[86,791,283],{"class":92},[86,793,300],{"class":96},[86,795,120],{"class":92},[797,798,799,800,803],"warning",{},"Always replace the array (immutable update) rather than mutating it with ",[83,801,802],{},"push()",". Vue's reactivity system tracks array references, not mutations.",[70,805,807],{"id":806},"filtering-data","Filtering data",[66,809,810],{},"Use computed properties to derive filtered views:",[75,812,814],{"className":77,"code":813,"filename":79,"language":80,"meta":81,"style":81},"\u003Cscript setup lang=\"ts\">\nimport { ref, computed } from 'vue'\nimport { VPlot } from '@memotux\u002Fvue-plot'\n\nconst data = ref([\n  { name: 'A', value: 10, category: 'odd' },\n  { name: 'B', value: 20, category: 'even' },\n  { name: 'C', value: 15, category: 'odd' },\n  { name: 'D', value: 25, category: 'even' },\n])\n\nconst filter = ref('all')\n\nconst filteredData = computed(() => {\n  if (filter.value === 'all') return data.value\n  return data.value.filter(d => d.category === filter.value)\n})\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CVPlot :width=\"680\">\n    \u003CPlotBarY :data=\"filteredData\" x=\"name\" y=\"value\" \u002F>\n  \u003C\u002FVPlot>\n  \u003Cbutton @click=\"filter = 'all'\">All\u003C\u002Fbutton>\n  \u003Cbutton @click=\"filter = 'odd'\">Odd\u003C\u002Fbutton>\n  \u003Cbutton @click=\"filter = 'even'\">Even\u003C\u002Fbutton>\n\u003C\u002Ftemplate>\n",[83,815,816,836,859,877,881,893,935,974,1012,1050,1054,1058,1082,1086,1106,1144,1186,1193,1201,1205,1213,1231,1272,1280,1308,1337,1366],{"__ignoreMap":81},[86,817,818,820,822,824,826,828,830,832,834],{"class":88,"line":89},[86,819,93],{"class":92},[86,821,97],{"class":96},[86,823,101],{"class":100},[86,825,104],{"class":100},[86,827,107],{"class":92},[86,829,111],{"class":110},[86,831,115],{"class":114},[86,833,111],{"class":110},[86,835,120],{"class":92},[86,837,838,840,842,844,846,849,851,853,855,857],{"class":88,"line":123},[86,839,127],{"class":126},[86,841,130],{"class":92},[86,843,134],{"class":133},[86,845,216],{"class":92},[86,847,848],{"class":133}," computed",[86,850,137],{"class":92},[86,852,141],{"class":140},[86,854,144],{"class":110},[86,856,80],{"class":114},[86,858,149],{"class":110},[86,860,861,863,865,867,869,871,873,875],{"class":88,"line":152},[86,862,127],{"class":126},[86,864,130],{"class":92},[86,866,159],{"class":133},[86,868,137],{"class":92},[86,870,141],{"class":140},[86,872,144],{"class":110},[86,874,168],{"class":114},[86,876,149],{"class":110},[86,878,879],{"class":88,"line":173},[86,880,177],{"emptyLinePlaceholder":176},[86,882,883,885,887,889,891],{"class":88,"line":180},[86,884,183],{"class":100},[86,886,186],{"class":133},[86,888,107],{"class":189},[86,890,134],{"class":192},[86,892,196],{"class":195},[86,894,895,897,900,902,904,907,910,912,915,917,919,921,924,926,928,931,933],{"class":88,"line":199},[86,896,202],{"class":92},[86,898,899],{"class":205}," name",[86,901,209],{"class":92},[86,903,144],{"class":110},[86,905,906],{"class":114},"A",[86,908,909],{"class":110},"'",[86,911,216],{"class":92},[86,913,914],{"class":205}," value",[86,916,209],{"class":92},[86,918,640],{"class":212},[86,920,216],{"class":92},[86,922,923],{"class":205}," category",[86,925,209],{"class":92},[86,927,144],{"class":110},[86,929,930],{"class":114},"odd",[86,932,909],{"class":110},[86,934,227],{"class":92},[86,936,937,939,941,943,945,948,950,952,954,956,959,961,963,965,967,970,972],{"class":88,"line":230},[86,938,202],{"class":92},[86,940,899],{"class":205},[86,942,209],{"class":92},[86,944,144],{"class":110},[86,946,947],{"class":114},"B",[86,949,909],{"class":110},[86,951,216],{"class":92},[86,953,914],{"class":205},[86,955,209],{"class":92},[86,957,958],{"class":212}," 20",[86,960,216],{"class":92},[86,962,923],{"class":205},[86,964,209],{"class":92},[86,966,144],{"class":110},[86,968,969],{"class":114},"even",[86,971,909],{"class":110},[86,973,227],{"class":92},[86,975,976,978,980,982,984,987,989,991,993,995,998,1000,1002,1004,1006,1008,1010],{"class":88,"line":252},[86,977,202],{"class":92},[86,979,899],{"class":205},[86,981,209],{"class":92},[86,983,144],{"class":110},[86,985,986],{"class":114},"C",[86,988,909],{"class":110},[86,990,216],{"class":92},[86,992,914],{"class":205},[86,994,209],{"class":92},[86,996,997],{"class":212}," 15",[86,999,216],{"class":92},[86,1001,923],{"class":205},[86,1003,209],{"class":92},[86,1005,144],{"class":110},[86,1007,930],{"class":114},[86,1009,909],{"class":110},[86,1011,227],{"class":92},[86,1013,1014,1016,1018,1020,1022,1025,1027,1029,1031,1033,1036,1038,1040,1042,1044,1046,1048],{"class":88,"line":274},[86,1015,202],{"class":92},[86,1017,899],{"class":205},[86,1019,209],{"class":92},[86,1021,144],{"class":110},[86,1023,1024],{"class":114},"D",[86,1026,909],{"class":110},[86,1028,216],{"class":92},[86,1030,914],{"class":205},[86,1032,209],{"class":92},[86,1034,1035],{"class":212}," 25",[86,1037,216],{"class":92},[86,1039,923],{"class":205},[86,1041,209],{"class":92},[86,1043,144],{"class":110},[86,1045,969],{"class":114},[86,1047,909],{"class":110},[86,1049,227],{"class":92},[86,1051,1052],{"class":88,"line":280},[86,1053,277],{"class":195},[86,1055,1056],{"class":88,"line":290},[86,1057,177],{"emptyLinePlaceholder":176},[86,1059,1060,1062,1065,1067,1069,1072,1074,1077,1079],{"class":88,"line":295},[86,1061,183],{"class":100},[86,1063,1064],{"class":133}," filter ",[86,1066,107],{"class":189},[86,1068,134],{"class":192},[86,1070,1071],{"class":195},"(",[86,1073,909],{"class":110},[86,1075,1076],{"class":114},"all",[86,1078,909],{"class":110},[86,1080,1081],{"class":195},")\n",[86,1083,1084],{"class":88,"line":305},[86,1085,177],{"emptyLinePlaceholder":176},[86,1087,1088,1090,1093,1095,1097,1099,1101,1104],{"class":88,"line":327},[86,1089,183],{"class":100},[86,1091,1092],{"class":133}," filteredData ",[86,1094,107],{"class":189},[86,1096,848],{"class":192},[86,1098,1071],{"class":195},[86,1100,556],{"class":92},[86,1102,1103],{"class":100}," =>",[86,1105,559],{"class":92},[86,1107,1108,1112,1115,1118,1120,1122,1125,1127,1129,1131,1134,1137,1139,1141],{"class":88,"line":373},[86,1109,1111],{"class":1110},"s--4S","  if",[86,1113,1114],{"class":577}," (",[86,1116,1117],{"class":133},"filter",[86,1119,567],{"class":92},[86,1121,571],{"class":570},[86,1123,1124],{"class":189}," ===",[86,1126,144],{"class":110},[86,1128,1076],{"class":114},[86,1130,909],{"class":110},[86,1132,1133],{"class":577},")",[86,1135,1136],{"class":1110}," return",[86,1138,604],{"class":133},[86,1140,567],{"class":92},[86,1142,1143],{"class":570},"value\n",[86,1145,1146,1149,1151,1153,1155,1157,1159,1161,1165,1167,1170,1172,1175,1177,1180,1182,1184],{"class":88,"line":383},[86,1147,1148],{"class":1110},"  return",[86,1150,604],{"class":133},[86,1152,567],{"class":92},[86,1154,571],{"class":133},[86,1156,567],{"class":92},[86,1158,1117],{"class":192},[86,1160,1071],{"class":577},[86,1162,1164],{"class":1163},"sW-6-","d",[86,1166,1103],{"class":100},[86,1168,1169],{"class":133}," d",[86,1171,567],{"class":92},[86,1173,1174],{"class":570},"category",[86,1176,1124],{"class":189},[86,1178,1179],{"class":133}," filter",[86,1181,567],{"class":92},[86,1183,571],{"class":570},[86,1185,1081],{"class":577},[86,1187,1188,1191],{"class":88,"line":655},[86,1189,1190],{"class":92},"}",[86,1192,1081],{"class":195},[86,1194,1195,1197,1199],{"class":88,"line":664},[86,1196,283],{"class":92},[86,1198,97],{"class":96},[86,1200,120],{"class":92},[86,1202,1203],{"class":88,"line":669},[86,1204,177],{"emptyLinePlaceholder":176},[86,1206,1207,1209,1211],{"class":88,"line":678},[86,1208,93],{"class":92},[86,1210,300],{"class":96},[86,1212,120],{"class":92},[86,1214,1215,1217,1219,1221,1223,1225,1227,1229],{"class":88,"line":697},[86,1216,308],{"class":92},[86,1218,49],{"class":96},[86,1220,313],{"class":100},[86,1222,107],{"class":92},[86,1224,111],{"class":110},[86,1226,320],{"class":114},[86,1228,111],{"class":110},[86,1230,120],{"class":92},[86,1232,1233,1235,1238,1240,1242,1244,1247,1249,1251,1253,1255,1258,1260,1262,1264,1266,1268,1270],{"class":88,"line":748},[86,1234,330],{"class":92},[86,1236,1237],{"class":96},"PlotBarY",[86,1239,336],{"class":100},[86,1241,107],{"class":92},[86,1243,111],{"class":110},[86,1245,1246],{"class":114},"filteredData",[86,1248,111],{"class":110},[86,1250,206],{"class":100},[86,1252,107],{"class":92},[86,1254,111],{"class":110},[86,1256,1257],{"class":114},"name",[86,1259,111],{"class":110},[86,1261,219],{"class":100},[86,1263,107],{"class":92},[86,1265,111],{"class":110},[86,1267,571],{"class":114},[86,1269,111],{"class":110},[86,1271,370],{"class":92},[86,1273,1274,1276,1278],{"class":88,"line":757},[86,1275,376],{"class":92},[86,1277,49],{"class":96},[86,1279,120],{"class":92},[86,1281,1282,1284,1286,1288,1290,1292,1295,1297,1299,1302,1304,1306],{"class":88,"line":789},[86,1283,308],{"class":92},[86,1285,762],{"class":96},[86,1287,765],{"class":100},[86,1289,107],{"class":92},[86,1291,111],{"class":110},[86,1293,1294],{"class":114},"filter = 'all'",[86,1296,111],{"class":110},[86,1298,777],{"class":92},[86,1300,1301],{"class":133},"All",[86,1303,283],{"class":92},[86,1305,762],{"class":96},[86,1307,120],{"class":92},[86,1309,1311,1313,1315,1317,1319,1321,1324,1326,1328,1331,1333,1335],{"class":88,"line":1310},25,[86,1312,308],{"class":92},[86,1314,762],{"class":96},[86,1316,765],{"class":100},[86,1318,107],{"class":92},[86,1320,111],{"class":110},[86,1322,1323],{"class":114},"filter = 'odd'",[86,1325,111],{"class":110},[86,1327,777],{"class":92},[86,1329,1330],{"class":133},"Odd",[86,1332,283],{"class":92},[86,1334,762],{"class":96},[86,1336,120],{"class":92},[86,1338,1340,1342,1344,1346,1348,1350,1353,1355,1357,1360,1362,1364],{"class":88,"line":1339},26,[86,1341,308],{"class":92},[86,1343,762],{"class":96},[86,1345,765],{"class":100},[86,1347,107],{"class":92},[86,1349,111],{"class":110},[86,1351,1352],{"class":114},"filter = 'even'",[86,1354,111],{"class":110},[86,1356,777],{"class":92},[86,1358,1359],{"class":133},"Even",[86,1361,283],{"class":92},[86,1363,762],{"class":96},[86,1365,120],{"class":92},[86,1367,1369,1371,1373],{"class":88,"line":1368},27,[86,1370,283],{"class":92},[86,1372,300],{"class":96},[86,1374,120],{"class":92},[70,1376,1378],{"id":1377},"updating-marks-reactively","Updating marks reactively",[66,1380,1381,1382,1385,1386,209],{},"When using the ",[83,1383,1384],{},"marks"," prop, wrap marks in a ",[83,1387,1388],{},"computed",[75,1390,1392],{"className":77,"code":1391,"filename":79,"language":80,"meta":81,"style":81},"\u003Cscript setup lang=\"ts\">\nimport { ref, computed } from 'vue'\nimport { VPlot } from '@memotux\u002Fvue-plot'\nimport { barY, ruleY } from '@observablehq\u002Fplot'\n\nconst data = ref([\n  { name: 'A', value: 10 },\n  { name: 'B', value: 20 },\n])\n\nconst showAverage = ref(true)\n\nconst marks = computed(() => {\n  const m = [barY(data.value, { x: 'name', y: 'value' })]\n  if (showAverage.value) {\n    const avg = data.value.reduce((s, d) => s + d.value, 0) \u002F data.value.length\n    m.push(ruleY([avg], { stroke: 'red', strokeDasharray: '4' }))\n  }\n  return m\n})\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CVPlot :width=\"680\" :marks=\"marks\" \u002F>\n  \u003Clabel>\n    \u003Cinput type=\"checkbox\" v-model=\"showAverage\" \u002F>\n    Show average\n  \u003C\u002Flabel>\n\u003C\u002Ftemplate>\n",[83,1393,1394,1414,1436,1454,1479,1483,1495,1519,1543,1547,1551,1570,1574,1593,1648,1665,1733,1791,1796,1803,1809,1817,1821,1829,1858,1867,1899,1904,1913],{"__ignoreMap":81},[86,1395,1396,1398,1400,1402,1404,1406,1408,1410,1412],{"class":88,"line":89},[86,1397,93],{"class":92},[86,1399,97],{"class":96},[86,1401,101],{"class":100},[86,1403,104],{"class":100},[86,1405,107],{"class":92},[86,1407,111],{"class":110},[86,1409,115],{"class":114},[86,1411,111],{"class":110},[86,1413,120],{"class":92},[86,1415,1416,1418,1420,1422,1424,1426,1428,1430,1432,1434],{"class":88,"line":123},[86,1417,127],{"class":126},[86,1419,130],{"class":92},[86,1421,134],{"class":133},[86,1423,216],{"class":92},[86,1425,848],{"class":133},[86,1427,137],{"class":92},[86,1429,141],{"class":140},[86,1431,144],{"class":110},[86,1433,80],{"class":114},[86,1435,149],{"class":110},[86,1437,1438,1440,1442,1444,1446,1448,1450,1452],{"class":88,"line":152},[86,1439,127],{"class":126},[86,1441,130],{"class":92},[86,1443,159],{"class":133},[86,1445,137],{"class":92},[86,1447,141],{"class":140},[86,1449,144],{"class":110},[86,1451,168],{"class":114},[86,1453,149],{"class":110},[86,1455,1456,1458,1460,1463,1465,1468,1470,1472,1474,1477],{"class":88,"line":173},[86,1457,127],{"class":126},[86,1459,130],{"class":92},[86,1461,1462],{"class":133}," barY",[86,1464,216],{"class":92},[86,1466,1467],{"class":133}," ruleY",[86,1469,137],{"class":92},[86,1471,141],{"class":140},[86,1473,144],{"class":110},[86,1475,1476],{"class":114},"@observablehq\u002Fplot",[86,1478,149],{"class":110},[86,1480,1481],{"class":88,"line":180},[86,1482,177],{"emptyLinePlaceholder":176},[86,1484,1485,1487,1489,1491,1493],{"class":88,"line":199},[86,1486,183],{"class":100},[86,1488,186],{"class":133},[86,1490,107],{"class":189},[86,1492,134],{"class":192},[86,1494,196],{"class":195},[86,1496,1497,1499,1501,1503,1505,1507,1509,1511,1513,1515,1517],{"class":88,"line":230},[86,1498,202],{"class":92},[86,1500,899],{"class":205},[86,1502,209],{"class":92},[86,1504,144],{"class":110},[86,1506,906],{"class":114},[86,1508,909],{"class":110},[86,1510,216],{"class":92},[86,1512,914],{"class":205},[86,1514,209],{"class":92},[86,1516,640],{"class":212},[86,1518,227],{"class":92},[86,1520,1521,1523,1525,1527,1529,1531,1533,1535,1537,1539,1541],{"class":88,"line":252},[86,1522,202],{"class":92},[86,1524,899],{"class":205},[86,1526,209],{"class":92},[86,1528,144],{"class":110},[86,1530,947],{"class":114},[86,1532,909],{"class":110},[86,1534,216],{"class":92},[86,1536,914],{"class":205},[86,1538,209],{"class":92},[86,1540,958],{"class":212},[86,1542,227],{"class":92},[86,1544,1545],{"class":88,"line":274},[86,1546,277],{"class":195},[86,1548,1549],{"class":88,"line":280},[86,1550,177],{"emptyLinePlaceholder":176},[86,1552,1553,1555,1558,1560,1562,1564,1568],{"class":88,"line":290},[86,1554,183],{"class":100},[86,1556,1557],{"class":133}," showAverage ",[86,1559,107],{"class":189},[86,1561,134],{"class":192},[86,1563,1071],{"class":195},[86,1565,1567],{"class":1566},"s2EtP","true",[86,1569,1081],{"class":195},[86,1571,1572],{"class":88,"line":295},[86,1573,177],{"emptyLinePlaceholder":176},[86,1575,1576,1578,1581,1583,1585,1587,1589,1591],{"class":88,"line":305},[86,1577,183],{"class":100},[86,1579,1580],{"class":133}," marks ",[86,1582,107],{"class":189},[86,1584,848],{"class":192},[86,1586,1071],{"class":195},[86,1588,556],{"class":92},[86,1590,1103],{"class":100},[86,1592,559],{"class":92},[86,1594,1595,1598,1601,1603,1606,1609,1611,1613,1615,1617,1619,1621,1623,1625,1627,1629,1631,1633,1635,1637,1639,1641,1643,1645],{"class":88,"line":327},[86,1596,1597],{"class":100},"  const",[86,1599,1600],{"class":133}," m",[86,1602,574],{"class":189},[86,1604,1605],{"class":577}," [",[86,1607,1608],{"class":192},"barY",[86,1610,1071],{"class":577},[86,1612,343],{"class":133},[86,1614,567],{"class":92},[86,1616,571],{"class":570},[86,1618,216],{"class":92},[86,1620,130],{"class":92},[86,1622,206],{"class":205},[86,1624,209],{"class":92},[86,1626,144],{"class":110},[86,1628,1257],{"class":114},[86,1630,909],{"class":110},[86,1632,216],{"class":92},[86,1634,219],{"class":205},[86,1636,209],{"class":92},[86,1638,144],{"class":110},[86,1640,571],{"class":114},[86,1642,909],{"class":110},[86,1644,137],{"class":92},[86,1646,1647],{"class":577},")]\n",[86,1649,1650,1652,1654,1657,1659,1661,1663],{"class":88,"line":373},[86,1651,1111],{"class":1110},[86,1653,1114],{"class":577},[86,1655,1656],{"class":133},"showAverage",[86,1658,567],{"class":92},[86,1660,571],{"class":570},[86,1662,1133],{"class":577},[86,1664,559],{"class":92},[86,1666,1667,1670,1673,1675,1677,1679,1681,1683,1686,1688,1690,1693,1695,1697,1699,1701,1704,1706,1708,1710,1712,1714,1717,1719,1722,1724,1726,1728,1730],{"class":88,"line":383},[86,1668,1669],{"class":100},"    const",[86,1671,1672],{"class":133}," avg",[86,1674,574],{"class":189},[86,1676,604],{"class":133},[86,1678,567],{"class":92},[86,1680,571],{"class":133},[86,1682,567],{"class":92},[86,1684,1685],{"class":192},"reduce",[86,1687,1071],{"class":577},[86,1689,1071],{"class":92},[86,1691,1692],{"class":1163},"s",[86,1694,216],{"class":92},[86,1696,1169],{"class":1163},[86,1698,1133],{"class":92},[86,1700,1103],{"class":100},[86,1702,1703],{"class":133}," s",[86,1705,616],{"class":189},[86,1707,1169],{"class":133},[86,1709,567],{"class":92},[86,1711,571],{"class":570},[86,1713,216],{"class":92},[86,1715,1716],{"class":212}," 0",[86,1718,1133],{"class":577},[86,1720,1721],{"class":189}," \u002F",[86,1723,604],{"class":133},[86,1725,567],{"class":92},[86,1727,571],{"class":133},[86,1729,567],{"class":92},[86,1731,1732],{"class":133},"length\n",[86,1734,1735,1738,1740,1743,1745,1748,1751,1754,1757,1759,1761,1764,1766,1768,1771,1773,1775,1778,1780,1782,1784,1786,1788],{"class":88,"line":655},[86,1736,1737],{"class":133},"    m",[86,1739,567],{"class":92},[86,1741,1742],{"class":192},"push",[86,1744,1071],{"class":577},[86,1746,1747],{"class":192},"ruleY",[86,1749,1750],{"class":577},"([",[86,1752,1753],{"class":133},"avg",[86,1755,1756],{"class":577},"]",[86,1758,216],{"class":92},[86,1760,130],{"class":92},[86,1762,1763],{"class":205}," stroke",[86,1765,209],{"class":92},[86,1767,144],{"class":110},[86,1769,1770],{"class":114},"red",[86,1772,909],{"class":110},[86,1774,216],{"class":92},[86,1776,1777],{"class":205}," strokeDasharray",[86,1779,209],{"class":92},[86,1781,144],{"class":110},[86,1783,741],{"class":114},[86,1785,909],{"class":110},[86,1787,137],{"class":92},[86,1789,1790],{"class":577},"))\n",[86,1792,1793],{"class":88,"line":664},[86,1794,1795],{"class":92},"  }\n",[86,1797,1798,1800],{"class":88,"line":669},[86,1799,1148],{"class":1110},[86,1801,1802],{"class":133}," m\n",[86,1804,1805,1807],{"class":88,"line":678},[86,1806,1190],{"class":92},[86,1808,1081],{"class":195},[86,1810,1811,1813,1815],{"class":88,"line":697},[86,1812,283],{"class":92},[86,1814,97],{"class":96},[86,1816,120],{"class":92},[86,1818,1819],{"class":88,"line":748},[86,1820,177],{"emptyLinePlaceholder":176},[86,1822,1823,1825,1827],{"class":88,"line":757},[86,1824,93],{"class":92},[86,1826,300],{"class":96},[86,1828,120],{"class":92},[86,1830,1831,1833,1835,1837,1839,1841,1843,1845,1848,1850,1852,1854,1856],{"class":88,"line":789},[86,1832,308],{"class":92},[86,1834,49],{"class":96},[86,1836,313],{"class":100},[86,1838,107],{"class":92},[86,1840,111],{"class":110},[86,1842,320],{"class":114},[86,1844,111],{"class":110},[86,1846,1847],{"class":100}," :marks",[86,1849,107],{"class":92},[86,1851,111],{"class":110},[86,1853,1384],{"class":114},[86,1855,111],{"class":110},[86,1857,370],{"class":92},[86,1859,1860,1862,1865],{"class":88,"line":1310},[86,1861,308],{"class":92},[86,1863,1864],{"class":96},"label",[86,1866,120],{"class":92},[86,1868,1869,1871,1874,1877,1879,1881,1884,1886,1889,1891,1893,1895,1897],{"class":88,"line":1339},[86,1870,330],{"class":92},[86,1872,1873],{"class":96},"input",[86,1875,1876],{"class":100}," type",[86,1878,107],{"class":92},[86,1880,111],{"class":110},[86,1882,1883],{"class":114},"checkbox",[86,1885,111],{"class":110},[86,1887,1888],{"class":100}," v-model",[86,1890,107],{"class":92},[86,1892,111],{"class":110},[86,1894,1656],{"class":114},[86,1896,111],{"class":110},[86,1898,370],{"class":92},[86,1900,1901],{"class":88,"line":1368},[86,1902,1903],{"class":133},"    Show average\n",[86,1905,1907,1909,1911],{"class":88,"line":1906},28,[86,1908,376],{"class":92},[86,1910,1864],{"class":96},[86,1912,120],{"class":92},[86,1914,1916,1918,1920],{"class":88,"line":1915},29,[86,1917,283],{"class":92},[86,1919,300],{"class":96},[86,1921,120],{"class":92},[70,1923,1925],{"id":1924},"swapping-datasets","Swapping datasets",[66,1927,1928],{},"Replace the entire dataset to switch views:",[75,1930,1932],{"className":77,"code":1931,"filename":79,"language":80,"meta":81,"style":81},"\u003Cscript setup lang=\"ts\">\nimport { ref, computed } from 'vue'\nimport { VPlot } from '@memotux\u002Fvue-plot'\n\nconst datasets = {\n  sales: [\n    { month: 'Jan', revenue: 4000 },\n    { month: 'Feb', revenue: 3000 },\n    { month: 'Mar', revenue: 5000 },\n  ],\n  users: [\n    { month: 'Jan', revenue: 1200 },\n    { month: 'Feb', revenue: 1500 },\n    { month: 'Mar', revenue: 1800 },\n  ],\n}\n\nconst activeDataset = ref('sales')\nconst data = computed(() => datasets[activeDataset.value])\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CVPlot :width=\"680\">\n    \u003CPlotBarY :data=\"data\" x=\"month\" y=\"revenue\" \u002F>\n  \u003C\u002FVPlot>\n  \u003Cbutton @click=\"activeDataset = 'sales'\">Sales\u003C\u002Fbutton>\n  \u003Cbutton @click=\"activeDataset = 'users'\">Users\u003C\u002Fbutton>\n\u003C\u002Ftemplate>\n",[83,1933,1934,1954,1976,1994,1998,2009,2018,2046,2072,2098,2105,2114,2139,2164,2189,2195,2199,2203,2225,2256,2264,2268,2276,2294,2334,2342,2370,2398],{"__ignoreMap":81},[86,1935,1936,1938,1940,1942,1944,1946,1948,1950,1952],{"class":88,"line":89},[86,1937,93],{"class":92},[86,1939,97],{"class":96},[86,1941,101],{"class":100},[86,1943,104],{"class":100},[86,1945,107],{"class":92},[86,1947,111],{"class":110},[86,1949,115],{"class":114},[86,1951,111],{"class":110},[86,1953,120],{"class":92},[86,1955,1956,1958,1960,1962,1964,1966,1968,1970,1972,1974],{"class":88,"line":123},[86,1957,127],{"class":126},[86,1959,130],{"class":92},[86,1961,134],{"class":133},[86,1963,216],{"class":92},[86,1965,848],{"class":133},[86,1967,137],{"class":92},[86,1969,141],{"class":140},[86,1971,144],{"class":110},[86,1973,80],{"class":114},[86,1975,149],{"class":110},[86,1977,1978,1980,1982,1984,1986,1988,1990,1992],{"class":88,"line":152},[86,1979,127],{"class":126},[86,1981,130],{"class":92},[86,1983,159],{"class":133},[86,1985,137],{"class":92},[86,1987,141],{"class":140},[86,1989,144],{"class":110},[86,1991,168],{"class":114},[86,1993,149],{"class":110},[86,1995,1996],{"class":88,"line":173},[86,1997,177],{"emptyLinePlaceholder":176},[86,1999,2000,2002,2005,2007],{"class":88,"line":180},[86,2001,183],{"class":100},[86,2003,2004],{"class":133}," datasets ",[86,2006,107],{"class":189},[86,2008,559],{"class":92},[86,2010,2011,2014,2016],{"class":88,"line":199},[86,2012,2013],{"class":205},"  sales",[86,2015,209],{"class":92},[86,2017,578],{"class":195},[86,2019,2020,2022,2025,2027,2029,2032,2034,2036,2039,2041,2044],{"class":88,"line":230},[86,2021,597],{"class":92},[86,2023,2024],{"class":205}," month",[86,2026,209],{"class":92},[86,2028,144],{"class":110},[86,2030,2031],{"class":114},"Jan",[86,2033,909],{"class":110},[86,2035,216],{"class":92},[86,2037,2038],{"class":205}," revenue",[86,2040,209],{"class":92},[86,2042,2043],{"class":212}," 4000",[86,2045,227],{"class":92},[86,2047,2048,2050,2052,2054,2056,2059,2061,2063,2065,2067,2070],{"class":88,"line":252},[86,2049,597],{"class":92},[86,2051,2024],{"class":205},[86,2053,209],{"class":92},[86,2055,144],{"class":110},[86,2057,2058],{"class":114},"Feb",[86,2060,909],{"class":110},[86,2062,216],{"class":92},[86,2064,2038],{"class":205},[86,2066,209],{"class":92},[86,2068,2069],{"class":212}," 3000",[86,2071,227],{"class":92},[86,2073,2074,2076,2078,2080,2082,2085,2087,2089,2091,2093,2096],{"class":88,"line":274},[86,2075,597],{"class":92},[86,2077,2024],{"class":205},[86,2079,209],{"class":92},[86,2081,144],{"class":110},[86,2083,2084],{"class":114},"Mar",[86,2086,909],{"class":110},[86,2088,216],{"class":92},[86,2090,2038],{"class":205},[86,2092,209],{"class":92},[86,2094,2095],{"class":212}," 5000",[86,2097,227],{"class":92},[86,2099,2100,2103],{"class":88,"line":280},[86,2101,2102],{"class":195},"  ]",[86,2104,592],{"class":92},[86,2106,2107,2110,2112],{"class":88,"line":290},[86,2108,2109],{"class":205},"  users",[86,2111,209],{"class":92},[86,2113,578],{"class":195},[86,2115,2116,2118,2120,2122,2124,2126,2128,2130,2132,2134,2137],{"class":88,"line":295},[86,2117,597],{"class":92},[86,2119,2024],{"class":205},[86,2121,209],{"class":92},[86,2123,144],{"class":110},[86,2125,2031],{"class":114},[86,2127,909],{"class":110},[86,2129,216],{"class":92},[86,2131,2038],{"class":205},[86,2133,209],{"class":92},[86,2135,2136],{"class":212}," 1200",[86,2138,227],{"class":92},[86,2140,2141,2143,2145,2147,2149,2151,2153,2155,2157,2159,2162],{"class":88,"line":305},[86,2142,597],{"class":92},[86,2144,2024],{"class":205},[86,2146,209],{"class":92},[86,2148,144],{"class":110},[86,2150,2058],{"class":114},[86,2152,909],{"class":110},[86,2154,216],{"class":92},[86,2156,2038],{"class":205},[86,2158,209],{"class":92},[86,2160,2161],{"class":212}," 1500",[86,2163,227],{"class":92},[86,2165,2166,2168,2170,2172,2174,2176,2178,2180,2182,2184,2187],{"class":88,"line":327},[86,2167,597],{"class":92},[86,2169,2024],{"class":205},[86,2171,209],{"class":92},[86,2173,144],{"class":110},[86,2175,2084],{"class":114},[86,2177,909],{"class":110},[86,2179,216],{"class":92},[86,2181,2038],{"class":205},[86,2183,209],{"class":92},[86,2185,2186],{"class":212}," 1800",[86,2188,227],{"class":92},[86,2190,2191,2193],{"class":88,"line":373},[86,2192,2102],{"class":195},[86,2194,592],{"class":92},[86,2196,2197],{"class":88,"line":383},[86,2198,652],{"class":92},[86,2200,2201],{"class":88,"line":655},[86,2202,177],{"emptyLinePlaceholder":176},[86,2204,2205,2207,2210,2212,2214,2216,2218,2221,2223],{"class":88,"line":664},[86,2206,183],{"class":100},[86,2208,2209],{"class":133}," activeDataset ",[86,2211,107],{"class":189},[86,2213,134],{"class":192},[86,2215,1071],{"class":195},[86,2217,909],{"class":110},[86,2219,2220],{"class":114},"sales",[86,2222,909],{"class":110},[86,2224,1081],{"class":195},[86,2226,2227,2229,2231,2233,2235,2237,2239,2241,2244,2247,2250,2252,2254],{"class":88,"line":669},[86,2228,183],{"class":100},[86,2230,186],{"class":133},[86,2232,107],{"class":189},[86,2234,848],{"class":192},[86,2236,1071],{"class":195},[86,2238,556],{"class":92},[86,2240,1103],{"class":100},[86,2242,2243],{"class":133}," datasets",[86,2245,2246],{"class":195},"[",[86,2248,2249],{"class":133},"activeDataset",[86,2251,567],{"class":92},[86,2253,571],{"class":570},[86,2255,277],{"class":195},[86,2257,2258,2260,2262],{"class":88,"line":678},[86,2259,283],{"class":92},[86,2261,97],{"class":96},[86,2263,120],{"class":92},[86,2265,2266],{"class":88,"line":697},[86,2267,177],{"emptyLinePlaceholder":176},[86,2269,2270,2272,2274],{"class":88,"line":748},[86,2271,93],{"class":92},[86,2273,300],{"class":96},[86,2275,120],{"class":92},[86,2277,2278,2280,2282,2284,2286,2288,2290,2292],{"class":88,"line":757},[86,2279,308],{"class":92},[86,2281,49],{"class":96},[86,2283,313],{"class":100},[86,2285,107],{"class":92},[86,2287,111],{"class":110},[86,2289,320],{"class":114},[86,2291,111],{"class":110},[86,2293,120],{"class":92},[86,2295,2296,2298,2300,2302,2304,2306,2308,2310,2312,2314,2316,2319,2321,2323,2325,2327,2330,2332],{"class":88,"line":789},[86,2297,330],{"class":92},[86,2299,1237],{"class":96},[86,2301,336],{"class":100},[86,2303,107],{"class":92},[86,2305,111],{"class":110},[86,2307,343],{"class":114},[86,2309,111],{"class":110},[86,2311,206],{"class":100},[86,2313,107],{"class":92},[86,2315,111],{"class":110},[86,2317,2318],{"class":114},"month",[86,2320,111],{"class":110},[86,2322,219],{"class":100},[86,2324,107],{"class":92},[86,2326,111],{"class":110},[86,2328,2329],{"class":114},"revenue",[86,2331,111],{"class":110},[86,2333,370],{"class":92},[86,2335,2336,2338,2340],{"class":88,"line":1310},[86,2337,376],{"class":92},[86,2339,49],{"class":96},[86,2341,120],{"class":92},[86,2343,2344,2346,2348,2350,2352,2354,2357,2359,2361,2364,2366,2368],{"class":88,"line":1339},[86,2345,308],{"class":92},[86,2347,762],{"class":96},[86,2349,765],{"class":100},[86,2351,107],{"class":92},[86,2353,111],{"class":110},[86,2355,2356],{"class":114},"activeDataset = 'sales'",[86,2358,111],{"class":110},[86,2360,777],{"class":92},[86,2362,2363],{"class":133},"Sales",[86,2365,283],{"class":92},[86,2367,762],{"class":96},[86,2369,120],{"class":92},[86,2371,2372,2374,2376,2378,2380,2382,2385,2387,2389,2392,2394,2396],{"class":88,"line":1368},[86,2373,308],{"class":92},[86,2375,762],{"class":96},[86,2377,765],{"class":100},[86,2379,107],{"class":92},[86,2381,111],{"class":110},[86,2383,2384],{"class":114},"activeDataset = 'users'",[86,2386,111],{"class":110},[86,2388,777],{"class":92},[86,2390,2391],{"class":133},"Users",[86,2393,283],{"class":92},[86,2395,762],{"class":96},[86,2397,120],{"class":92},[86,2399,2400,2402,2404],{"class":88,"line":1906},[86,2401,283],{"class":92},[86,2403,300],{"class":96},[86,2405,120],{"class":92},[70,2407,2409],{"id":2408},"performance-considerations","Performance considerations",[66,2411,2412],{},"For large datasets (10k+ points):",[2414,2415,2416,2425,2428],"ul",{},[2417,2418,2419,2420,2422,2423],"li",{},"Use ",[83,2421,333],{}," with small radius instead of ",[83,2424,1237],{},[2417,2426,2427],{},"Consider downsampling data before rendering",[2417,2429,2419,2430,2433,2434,2437],{},[83,2431,2432],{},"PlotHexbin"," or ",[83,2435,2436],{},"PlotDensity"," for aggregated views",[75,2439,2441],{"className":77,"code":2440,"filename":79,"language":80,"meta":81,"style":81},"\u003C!-- Efficient rendering for large datasets -->\n\u003CVPlot :width=\"680\" :height=\"400\">\n  \u003CPlotHexbin\n    :data=\"largeDataset\"\n    x=\"longitude\"\n    y=\"latitude\"\n    fill=\"count\"\n  \u002F>\n\u003C\u002FVPlot>\n",[83,2442,2443,2449,2485,2490,2495,2500,2505,2510,2515],{"__ignoreMap":81},[86,2444,2445],{"class":88,"line":89},[86,2446,2448],{"class":2447},"snOLt","\u003C!-- Efficient rendering for large datasets -->\n",[86,2450,2451,2453,2455,2458,2461,2463,2465,2467,2469,2471,2474,2476,2478,2481,2483],{"class":88,"line":123},[86,2452,93],{"class":92},[86,2454,49],{"class":96},[86,2456,2457],{"class":92}," :",[86,2459,2460],{"class":100},"width",[86,2462,107],{"class":92},[86,2464,111],{"class":110},[86,2466,320],{"class":212},[86,2468,111],{"class":110},[86,2470,2457],{"class":92},[86,2472,2473],{"class":100},"height",[86,2475,107],{"class":92},[86,2477,111],{"class":110},[86,2479,2480],{"class":212},"400",[86,2482,111],{"class":110},[86,2484,120],{"class":92},[86,2486,2487],{"class":88,"line":152},[86,2488,2489],{"class":133},"  \u003CPlotHexbin\n",[86,2491,2492],{"class":88,"line":173},[86,2493,2494],{"class":133},"    :data=\"largeDataset\"\n",[86,2496,2497],{"class":88,"line":180},[86,2498,2499],{"class":133},"    x=\"longitude\"\n",[86,2501,2502],{"class":88,"line":199},[86,2503,2504],{"class":133},"    y=\"latitude\"\n",[86,2506,2507],{"class":88,"line":230},[86,2508,2509],{"class":133},"    fill=\"count\"\n",[86,2511,2512],{"class":88,"line":252},[86,2513,2514],{"class":133},"  \u002F>\n",[86,2516,2517,2519,2521],{"class":88,"line":274},[86,2518,283],{"class":92},[86,2520,49],{"class":96},[86,2522,120],{"class":92},[70,2524,2526],{"id":2525},"whats-next","What's next?",[2414,2528,2529,2535],{},[2417,2530,2531,2534],{},[2532,2533,40],"a",{"href":41}," — Nuxt module setup",[2417,2536,2537,2540],{},[2532,2538,2539],{"href":50},"API Reference"," — Full component API",[2542,2543,2544],"style",{},"html pre.shiki code .s4RQF, html code.shiki .s4RQF{--shiki-light:#4E8CA2;--shiki-default:#89DDFF;--shiki-dark:#9E9B93}html pre.shiki code .sv6DF, html code.shiki .sv6DF{--shiki-light:#77713F;--shiki-default:#F07178;--shiki-dark:#C4B28A}html pre.shiki code .sWKss, html code.shiki .sWKss{--shiki-light:#624C83;--shiki-default:#C792EA;--shiki-dark:#8992A7}html pre.shiki code .sou9m, html code.shiki .sou9m{--shiki-light:#6F894E;--shiki-default:#89DDFF;--shiki-dark:#8A9A7B}html pre.shiki code .s9-zz, html code.shiki .s9-zz{--shiki-light:#6F894E;--shiki-default:#C3E88D;--shiki-dark:#8A9A7B}html pre.shiki code .su7sr, html code.shiki .su7sr{--shiki-light:#CC6D00;--shiki-light-font-style:inherit;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#B6927B;--shiki-dark-font-style:inherit}html pre.shiki code .sOCQP, html code.shiki .sOCQP{--shiki-light:#545464;--shiki-default:#EEFFFF;--shiki-dark:#C5C9C5}html pre.shiki code .seCTJ, html code.shiki .seCTJ{--shiki-light:#624C83;--shiki-light-font-style:inherit;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#8992A7;--shiki-dark-font-style:inherit}html pre.shiki code .sqN5v, html code.shiki .sqN5v{--shiki-light:#77713F;--shiki-default:#89DDFF;--shiki-dark:#C4B28A}html pre.shiki code .sfbsL, html code.shiki .sfbsL{--shiki-light:#4D699B;--shiki-default:#82AAFF;--shiki-dark:#8BA4B0}html pre.shiki code .sfkeP, html code.shiki .sfkeP{--shiki-light:#4E8CA2;--shiki-default:#EEFFFF;--shiki-dark:#9E9B93}html pre.shiki code .sNH7Q, html code.shiki .sNH7Q{--shiki-light:#545464;--shiki-default:#F07178;--shiki-dark:#C5C9C5}html pre.shiki code .svr3b, html code.shiki .svr3b{--shiki-light:#B35B79;--shiki-default:#F78C6C;--shiki-dark:#A292A3}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 .smkSw, html code.shiki .smkSw{--shiki-light:#77713F;--shiki-default:#EEFFFF;--shiki-dark:#C4B28A}html pre.shiki code .s7e5W, html code.shiki .s7e5W{--shiki-light:#4E8CA2;--shiki-default:#F07178;--shiki-dark:#9E9B93}html pre.shiki code .s--4S, html code.shiki .s--4S{--shiki-light:#624C83;--shiki-light-font-weight:bold;--shiki-light-font-style:inherit;--shiki-default:#89DDFF;--shiki-default-font-weight:inherit;--shiki-default-font-style:italic;--shiki-dark:#8992A7;--shiki-dark-font-weight:bold;--shiki-dark-font-style:inherit}html pre.shiki code .sW-6-, html code.shiki .sW-6-{--shiki-light:#545464;--shiki-light-font-style:inherit;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#C5C9C5;--shiki-dark-font-style:inherit}html pre.shiki code .s2EtP, html code.shiki .s2EtP{--shiki-light:#CC6D00;--shiki-default:#FF9CAC;--shiki-dark:#B6927B}html pre.shiki code .snOLt, html code.shiki .snOLt{--shiki-light:#716E61;--shiki-light-font-style:inherit;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#737C73;--shiki-dark-font-style:inherit}",{"title":81,"searchDepth":123,"depth":123,"links":2546},[2547,2548,2549,2550,2551,2552,2553],{"id":72,"depth":123,"text":73},{"id":399,"depth":123,"text":400},{"id":806,"depth":123,"text":807},{"id":1377,"depth":123,"text":1378},{"id":1924,"depth":123,"text":1925},{"id":2408,"depth":123,"text":2409},{"id":2525,"depth":123,"text":2526},"Bind reactive Vue refs and computed properties to Vue Plot marks so charts update automatically when data changes, filters, or swaps datasets.\n","md",null,{},{"title":2559,"description":2560},"Reactive Data — Auto-Updating Charts with Vue Plot","Bind reactive Vue refs and computed properties to Vue Plot so your charts update automatically as data changes, filters, or swaps datasets.","XlgeqdSukQBW2N2YJR7MD3D75enrDkTKv_p2O9WyHfg",[2563,2565],{"title":32,"path":33,"stem":34,"description":2564,"children":-1},"Pass Observable Plot mark functions as props to build charts programmatically, with dynamic mark selection and no Vite plugin required.\n",{"title":40,"path":41,"stem":42,"description":2566,"children":-1},"Install and configure the @memotux\u002Fnuxt-vue-plot module for auto-imports, custom-element compilation, and SSR-compatible chart rendering in Nuxt.\n",1787848462538]