MobileVisFixer: Tailoring Web Visualizations for Mobile Phones Leveraging an Explainable Reinforcement Learning Framework

Optimization

G1: Simulate a trial-and-error process for manual repair.Manualcreationofmobile-friendlyvisualizationsisknowntobeanad hoc.,iterativeprocess[hoffswelltechniques],involvingtheadjustmentofvisualencodingswhileensuringthattheseadjustmentsdonotimpactotherpartsofthevisualization.MobileVisFixeraimstoautomatethisprocessbymimickinghumanbehavior.G2: Ensure the transparency and explainability of the automation.Algorithmicinterpretabilityandtransparencyareincreasinglyimportantforautomatedsystems.Byutilizingexplainableapproaches,MobileVisFixeraimsnotonlytosupportusinunderstandingourmodel,butalsotohelpusgaininsightsfordesigningmobile-friendlyvisualizationsbysummarizingwhatmachineshavelearned.G3: Remain as faithful as possible to the original visualization.Visualizationsareusuallycraftedwithdeliberatedesigns,whichmachinescouldfailtounderstandandpreserve.Asanautomatedframework,MobileVisFixerstrivestomaintainthevisualencodinganddesign.G4: Support compatibility with other algorithms.Mobile-friendlyissuesofvisualizationsarecomplexandevenpotentiallyill-posed--aone-size-fits-allsolutionmaynotexist,whichdoesnotrequiremodificationsbyahuman.MobileVisFixer′sgoalistoalleviatesuchchallengesbysupportingexistingalgorithmsforoptimizingvisualizations.G5: Execute in browser rendering time.ThelastgoalofMobileVisFixerconcernspracticalapplicability--theautomaticprocessshouldterminateinapproximatelysimilartimetothebrowserrenderingprocesstomeetreal-worldperformanceneeds.

2 ExplainableMDPModel

(G1)[peng2018deepmimic].AreinforcementframeworkismodelledasaMarkovdecisionprocess(MDP),asillustratedinFigure 6.Theenvironmentisthevisualizationspecifiedbydeclarativeparameterψ.AninterpretercalculatesthecostJ(ψ)inrespecttomobile-friendlyissues.Theagentobservesthestate(s∈S)andreward(r∈R),therebytakinganaction(a∈A)tomanipulateψandconsequentlytheenvironment.Theagent′sactionselectionisbasedonthepolicyΠ(a|s)-theprobabilitythattheagenttakesactionawheninstates.Thus,thegoalistolearntheoptimalpolicythatmaximizestherewardsandthereforesolvesLABEL:optFunc2effectively.Inthefollowingtext,weexplainthestates,actions,andcostsindetail.

G2).Specifically,statesdescribemobile-friendlyissuesthatareobservablebybothhumansandcomputers(i.e.,theinterpreter).Thenotationsofthoseissues,denotedN,aresummarizedinTable5.2.MobileVisFixerassumesthatavisualizationcanbescrolledinfinitelytowardsthebottom,and,thusthebottomorientationisnotincludedintheout-of-viewportcategory.MobileVisFixerclassifiesnotationsintoglobal(NG)andlocal(NL).Theformerappliestotheglobalvisualization,whilethelatterisspecifictoanindividualvisualelement.Consequently,thetotalnumberofpossibleissuesinavisualizationis|NG|+|E|×|NL|.Considerthatthoseissuescouldappearsimultaneouslywhichmeansthatthetotalnumberofstatesbecomes2|NG|+|E|×|NL|whichrendersthetimecomplexityexponential.Inaddition,asvisualizationscanvaryfrom