2f:null 30:["$","title",null,{"children":"RAMPVIS Idiom : Scalable Pixel Based Visualization | jason dykes | Observable"}] 35:T42d,Several state of the art solutions have been proposed to address such issues including: * Pixel Boosting. [Oelke et al., 2011]( https://doi.org/10.1111/j.1467-8659.2011.01936.x) investigate boosting techniques such as halos, background coloring, distortion, and hatching and their effectiveness in supporting trend and pattern detection as well as visual saliency of sparse pixels. ${await FileAttachment("Oelke-Boosting-Fig3-rsz.PNG").image()} * [Ankerst (2001)](https://citeseerx.ist.psu.edu/viewdoc/download?doi=10.1.1.134.2511&rep=rep1&type=pdf) show several applications of scalable pixel oriented visualization techniques to support mining and exploration of high dimensional data. ${await FileAttachment("Ankerst-Fig8-rsz.PNG").image()} ${await FileAttachment("Ankerst-Fig10-rsz.PNG").image()} * [Raidou et al. (2019)](https://doi.org/10.1109/TVCG.2019.2903956) propose Pixel-Relaxed Scatter Plots (PRSP) to improve the display of dense scatter plots, using pixel-based, space-filling mappings. ${await FileAttachment("Raidou-Fig9-rsz.PNG").image()} 36:[{"id":"b0b0bb9ca37f4e5c4db052229dad5a52842a7c1cab5665f90f2b472b2f1d65be9d50f11bf46e2a3c3f70960db71a45811e655b52b01f6df86a115fd5c800b9f7","href":"https://static.observableusercontent.com/files/b0b0bb9ca37f4e5c4db052229dad5a52842a7c1cab5665f90f2b472b2f1d65be9d50f11bf46e2a3c3f70960db71a45811e655b52b01f6df86a115fd5c800b9f7","name":"Matrix-v1@1.2-rsz.png","type":"image/png","lastModified":1629897011250.983,"size":179635},{"id":"a618763c38aaac39054c01b97e139bfad4516fe8d599e90526f75d0a620518c4c908d066c93342a5377227232dfc63c49806854bc7d47d6a0fe0b9a294c6e3ea","href":"https://static.observableusercontent.com/files/a618763c38aaac39054c01b97e139bfad4516fe8d599e90526f75d0a620518c4c908d066c93342a5377227232dfc63c49806854bc7d47d6a0fe0b9a294c6e3ea","name":"Raidou-Fig9-rsz.PNG","type":"image/png","lastModified":1629897011250.983,"size":206483},{"id":"38db32f0ff7fe030e5d8e5e53651973f9f2fdcca658fe63635799b401774d56356c17ff062fd22334076a371a6a752f237f382daa60d50b3f9e4c193bc84d76c","href":"https://static.observableusercontent.com/files/38db32f0ff7fe030e5d8e5e53651973f9f2fdcca658fe63635799b401774d56356c17ff062fd22334076a371a6a752f237f382daa60d50b3f9e4c193bc84d76c","name":"Ankerst-Fig10-rsz.PNG","type":"image/png","lastModified":1629897011250.983,"size":528066},{"id":"344f6e4207f634172477796a4317e6d9df294f85fc8b4a6f9eced4c0bda3a09cae36e70607519fe73ba378c386810e6227836432370077dfa3c25f073ed83262","href":"https://static.observableusercontent.com/files/344f6e4207f634172477796a4317e6d9df294f85fc8b4a6f9eced4c0bda3a09cae36e70607519fe73ba378c386810e6227836432370077dfa3c25f073ed83262","name":"Ankerst-Fig8-rsz.PNG","type":"image/png","lastModified":1629897011250.983,"size":363197},{"id":"9c17f2085aee0c75178102b126eef42870c6854e9a6bc978a2acf8f75c883bd89e65d864b746b6a63239713d13123e92492b42a6ae8efbdba817d721deb2a622","href":"https://static.observableusercontent.com/files/9c17f2085aee0c75178102b126eef42870c6854e9a6bc978a2acf8f75c883bd89e65d864b746b6a63239713d13123e92492b42a6ae8efbdba817d721deb2a622","name":"Oelke-Boosting-Fig3-rsz.PNG","type":"image/png","lastModified":1629897011250.983,"size":135387}] 33:{"id":"d1eb0d5d00fb79dc","slug":"rampvis-idiom-scalable-pixel-based-visualization","title":"RAMPVIS Idiom : Scalable Pixel Based Visualization","thumbnail":"e939017a1e73c01ec7c0226bfbb8ae7fe3315d8df69dccf83b86455505390c4e","access_level":"public","create_time":"$D2021-08-25T13:10:11.250Z","update_time":"$D2021-08-25T13:11:28.904Z","view_time":null,"first_public_time":"$D2021-08-25T13:12:05.491Z","has_unpublished_edits":null,"fork":true,"stars":1,"starred":false,"owner":{"type":"team","id":"262e0f3061f34839","login":"jsndyks","name":"jason dykes","avatar_url":"https://avatars-next.observableusercontent.com/ce8c740e3f4f161e440b04f5d1f16368eb63cba559ce4c7bdec538f4316764d8","tier":"starter_2024"},"version":778,"publish_version":778,"role":null,"authored":false,"authors":[{"type":"individual","id":"955e37df990d4e95","login":"jsndyks","name":"jason dykes","avatar_url":"https://avatars-next.observableusercontent.com/ce8c740e3f4f161e440b04f5d1f16368eb63cba559ce4c7bdec538f4316764d8","tier":null}],"members":[{"type":"individual","id":"955e37df990d4e95","login":"jsndyks","name":"jason dykes","avatar_url":"https://avatars-next.observableusercontent.com/ce8c740e3f4f161e440b04f5d1f16368eb63cba559ce4c7bdec538f4316764d8","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":null,"type":"notebook","body":{"title":"RAMPVIS Idiom : Scalable Pixel Based Visualization","cells":[{"id":0,"value":"md`# RAMPVIS Idiom : Scalable Pixel Based Visualization`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":360,"value":"---\n## 1. TASK & USERS - User Story","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":334,"value":" * As **a visualization researcher**\n * I would like to\n * **support epidemiological model builders to analyze the features of input and output parameter space of their models** \n * * so that they can **quantify uncertainty in their model and select the most appropriate parameter configurations for their simulation models**\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":128,"value":"---\n\n## 2. DATA","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":346,"value":"The data is generated using the EEERA model \n* https://github.com/ScottishCovidResponse/Covid19_EERAModel\n \nThe model runs with 16 parameters, 160 different parameter configurations. For each configuration there are 1000 run of \nthe model.\n\nEach run of the model is execute for 8 age groups and covers a total of 200 days.\n\nTherefore: \n\n16 (parameters) x 160 (parameter configurations) x 1000 (runs) x 8 (age groups) = 20,480,000 time series of 200 days each\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"---\n\n## 3. NAME - and description","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":365,"value":"**Scalable Pixel based visualization** supports design of multi-resolution pixel based layouts. Display can be sub-divided into regions representing data at different level of detail. Levels of data granularity are driven by pre-defined relevance criteria. \n\nGiven the hierarchical nature of the visualization, tree structures are commonly used to manage the different level of detail.\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":371,"value":"---\n## 4. ORIGIN & CONTEXT","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":376,"value":"**Pixel-based visualization** techniques rely on mapping data points to pixels leveraging pixels visual features such as size, color, transparency, brightness etc.\n\nPixel-based visualization effectively supports visualization and exploration of large data sets, while providing an intuitive mapping from raw data to visual form.\n\nDespite their expressive power Pixel based visualization suffer from scalability issues.\n\nIn [Keim et al (2006)](https://doi.org/10.1007/978-3-540-71027-1_2) identify 3 types of scalability issues: display resolution, data size, data dimensionality.\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"___\n\n## 5. EXAMPLES","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":388,"value":"$35","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":53,"value":"---\n## 6. DESCRIPTION & USE","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":400,"value":"We have an example in development as part of the EnsembleVis web application\n\n![Matrix-v1.2-rsz.png](${await FileAttachment(\"Matrix-v1@1.2-rsz.png\").url()})\n\nIn our visualization each row represents a configuration and each column its parameters. \nEach individual *miniature* plot (e.g. glyph) summarises information related to each parameter within a configuration.\nParameter information can include: average, min, max, distance from overall average, etc.\nPlots are created dynamically.\n\nInteraction allows for selection of multiple configurations and zooming. Selection results is more space given to selected configurations, zoom currently defines the granularity at which information are displayed.\n\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":410,"value":"---\n## 7. REFLECTION","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":446,"value":"### 7.0 Reflective Discussion ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":451,"value":"Scalable Pixel based visualization idiom tightly integrates mining algorithms with the visual encoding.
\nThe modelers use the *pixel based matrix* as a companion to mine configurations which lead to similar outputs.
\nInteraction gives modelers the freedom to inspect both at the level of the individual parameter configuration as well as across clusters of configurations.
\nIntegration within a linked view system allows modelers to control and steer the mining and comparison process based either on the visual feedback given by from a low resolution visualization of large sets of configurations data, or on the individual parameters features provided by high resolution view of small sets of configurations. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":415,"value":"### 7.1 What Worked","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":427,"value":"* pixel-based visualizations are effective when data are not sparse (which is our case)\n* using the idiom as part of a linked view system provided the modelers with the opportunity to see the same data from different viewpoint and all at once\n* selection made the pixel matrix to be used for exploration and refinement of both input parameters and output in a sort of *loop*.\n\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":434,"value":"### 7.2 What Didn't Work","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":438,"value":"* trends and patterns of potential interest may be camouflaged at low resolution\n* choice of how to color pixels when resolution changes needs to be carefully and better engineered\n* different arrangements of rows may favour/disfavour data exploration\n\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":461,"value":"### 7.3 Recommendations & Opportunities","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":425,"value":"The goal of scalable pixel based visualization is to provide an initial overview of the dataset (in our case aggregate data, e.g. descriptive statistics) as a whole leveraging the available screen estate.
\nEssential to its success is interaction. In this context the most recurring terms used by our modelers were: selection and comparison.
\n\nThrough interactive manipulation we hope to enable the modelers to select configurations of interest and present them at the required and most effective level of detail. We also look forward in investigate how to improve comparison currently restricted to a restructuring of the row ordering which clusters together selected configurations.
\nWe hope to develop a relevance driven objective function to guide clustering of selected configurations.\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":624,"value":"### 7.4 Who Was Involved?\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":628,"value":"Borgo, Rita and Wang, Qiru and Swallow, Ben and Turkay, Cagatay and Torsney-Mueller, Thomas","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"---\n\n## 8. REFERENCES","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":27,"value":"**Oelke, D., Janetzko, H., Simon, S., Neuhaus, K., & Keim, D. (2011).**
\nVisual boosting in pixel-based visualizations.
\nIn Proceedings of the 13th Eurographics / IEEE - VGTC conference on Visualization (EuroVis'11). \nhttps://doi.org/10.1111/j.1467-8659.2011.01936.x","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":719,"value":"**Keim D.A., Schneidewind J. & Sips M. (2007)**
\nScalable Pixel Based Visual Data Exploration.
\nIn: Lévy P.P. et al. (eds) Pixelization Paradigm. VIEW 2006. Lecture Notes in Computer Science, vol 4370. Springer, Berlin, Heidelberg
\nhttps://doi.org/10.1007/978-3-540-71027-1_2","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":726,"value":"**R. G. Raidou, M. E. Gröller and M. Eisemann (2019).**
\nRelaxing Dense Scatter Plots with Pixel-Based Mappings.
\nIn IEEE Transactions on Visualization and Computer Graphics, 25(6), 2205-2216. \nhttps://doi.org/10.1109/TVCG.2019.2903956.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":737,"value":"**Ankerst, M. (2001)**
\nVisual Data Mining with Pixel-oriented Visualization Techniques.
\nIn ACM SIGKDD Workshop on Visual Data Mining, San Francisco, CA.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":57,"value":"---\n### Imports","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":468,"value":"> Add any imports that are required here - describe them briefly if you can.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":542,"value":"> ### For example ...\n>

import { exampleODmatrix, animTimer } from \"@jsndyks/rampvis_exampleodmatrix\"

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":202,"value":"---\n\n### Styling","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":474,"value":"> Show or hide instructions with the CSS Styling of blockquote as described here :\n> \n> display:block; - will **show** blockquote comments and instructions
\n> display:none; - will **hide** blockquote comments and instructions \n>\n> Or just toggle the **Instructions Toggler** below!\n> **block** is on, **none** is off.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":601,"value":"viewof instructionsOnOff = Inputs.radio([\"block\", \"none\"], {\n label: \"Instructions Toggler (on/off)\",\n value: \"block\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":207,"value":"","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":521,"value":"> Ignore everything from here down to keep styling consistent:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":514,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W36","stdlib":"1","titling":"auto"}} 34:"$33:body"