
ç§ã«ãšã£ãŠããŒã¿ã®èŠèŠåã«é¢ããæé«ã®æ¬ã®1ã€ã¯ãBen Fry ã®Visualizing Dataã§ããããã¯ãProcessingã®ã¯ãªãšã€ã¿ãŒã®1人ã«ããå°ããªæ¬ã§ãã ãã®æ¬ã¯ã1ç³ã§2矜ã®é³¥ã殺ããŸããæ å ±ã®èŠèŠåã®åçã詳ãã説æããããã«åŠçèšèªã䜿çšããæ¹æ³ã説æããŠããŸãã Habrã§ã®åŠçã«ã€ããŠã¯ã ãã¡ããšãã¡ãã§ãã§ã«æžããŠããŸã ã ããŒãžã§ã³2.0a4ãå©çšå¯èœã«ãªããŸããïŒçŸæç¹ã§ã¯ã¢ã«ãã¡çã§ããïŒã ããŒã¿ã®èŠèŠåã®æåã®ç« ã§ãBen Fryã¯ããŒã¿ã®èŠèŠåã®7ã€ã®æ®µéã«ã€ããŠèª¬æããŸãïŒããŒã¿ã®ååŸãããŒã¿ã®è§£æãéå°ãªããŒã¿ã®ãã£ã«ã¿ãªã³ã°ãããŒã¿ã®åŠçïŒããšãã°ãæå°å€ãšæ倧å€ã®æ€çŽ¢ïŒãããŒã¿è¡šçŸã®éžæããã®è¡šçŸã®æ¹åãæåŸã®é ç®ã¯ã€ã³ã¿ã©ã¯ãã£ããªè¿œå ã§ãã 圌ã¯ãŸãããã®ããã»ã¹ã¯å¿ ãããé£ç¶çã§ã¯ãªãããã°ãã°åã®æ®µéã«æ»ããªããã°ãªããªãããšãææããŠããŸãã

ãã¡ãããæåã®é ç®ã¯ããŒã¿èªäœãååŸããããšã§ãã Dumaã®ãŠã§ããµã€ãã§è€æ°ã®ä»£ç人ã®ããŒãžã衚瀺ããåŸãURLã®æ°åã®ã¿ãå€æŽãããŠããããšãæããã«ãªããŸãããç®çã®ç¯å²ã[23494-23964]ã httpïŒ //www.duma.gov.ru/structure/deputies / 23494 / http://www.duma.gov.ru/structure/deputies/23964/ãŸã§ã ããŒãžèªäœã«ã¯ãç¹å®ã®å²åã®ã¡ã³ããŒã·ããã«é¢ããããŒã¿ãšåå ¥ã«é¢ããæ å ±ãå¿ èŠã§ããã CïŒã®ããã°ã©ã ã䜿çšããŠããŒã¿ãããŠã³ããŒãããŸããïŒæ¢ã«æã£ãŠããããïŒããèªåã®ã¹ã¯ãªããã䜿çšããŠãããè¡ãããšã¯é£ãããããŸããã 確ãã«ãç¿æ¥äžé¢ã®ãŠã§ããµã€ãã«ã¢ã¯ã»ã¹ãããšããäœããã®çç±ã§ã代ç人ã®åå ¥ã«é¢ããæ å ±ã衚瀺ãããŸããã§ãã-ãããäœã§ãã£ããã¯ããããŸãã-ä»äºããããããŠä»ã®æ¥ã«ã¯ãã¹ãŠãæŽã£ãŠããŸããã ããããæ°ãæ£ããŸããã æåã®é ç®ãå®äºããŸãã-ããŒã¿ãåä¿¡ãããŸããã ããããèŠèŠåãããšããããã®ã§ãæ£ã°ã©ãããå§ããããšã«ããŸãããããã¯éåžžã«ç°¡åã ããã§ãã

åçã¯ãè°å¡ã®å€§éšåãã»ãŒåããéãåãåããããã«æ¡éãã«å€ããåãåã£ãŠããè°å¡ã®äžéšãããããšããã瀺ããŠããŸãã ãã®ãããªãã£ãŒãã®çæïŒçŽ450ã®ã€ã³ãžã±ãŒã¿ãŒãæ¯èŒããã«ã¯ããŸãé©ããŠããŸããã ããã«ãåå ¥å€ã®å€§ããªå€åã«ãããå°ããªå€ãåºå¥ã§ããªããªããŸãã ãã¡ãããã¹ã±ãŒã«ã察æ°ã«ããããšã¯ã§ããŸããããã®å Žåãã»ãŒ20åãã200äžãæ¯èŒãããšããèŠèŠçãªé°è¬ã¯å€±ãããŸãã è¯ã-åã®å¯Ÿå¿ããé·ãã®ã€ã³ãžã±ãŒã¿ãŒãæ¯èŒããŠãããŸãæ©èœããªããããé¢ç©ãæ¯èŒããå¿ èŠããããŸãïŒ åã®ä»£ããã«åãæããŸãïŒ

ãã°ã«ããã¯å°è±¡çã§ã¯ãããŸãã-æ£æ¹åœ¢ã«çœ®ãæããŸãïŒ

ããè¯ãããã§ãã äœããã®çç±ã§ãç§ã¯ããã«xkcdã®åçãæãåºããŸããã ãããŠãå¥ã®ãªãã·ã§ã³ãæãæµ®ãã³ãŸã- ããªãŒããã ã
Treemapã¯ã Ben Shneidermanã«ããæ å ±èŠèŠåã®ç¬¬äžäººè ã®çºæã§ãã 1990幎ãBen Schneidermanã¯ãã©ã®ãã¡ã€ã«ãããŒããã£ã¹ã¯ã®ã»ãšãã©ã®ã¹ããŒã¹ãå ããã®ãçåã«æããŸããïŒåœŒãåããŠããç 究宀ã§ã¯ã14人ã®ãŠãŒã¶ãŒã80Mãã€ãã®ãã£ã¹ã¯ã䜿çšããŠããŸããïŒã ãã³ã¯ããã©ã«ããŒãšãã¡ã€ã«ã®ããªãŒæ§é ã®ã³ã³ãã¯ããªèŠèŠåã«ã€ããŠèãå§ããŸãããããã§ã圌ã¯åŸã§TreemapãšåŒã°ãããã£ãŒããæãã€ããŸããã Treemappingã®æŽå²ã«ã€ããŠè©³ããã¯ã ãã¡ããã芧ãã ãã ãèšäºã®æåŸã«ããã®ã¿ã€ãã®èŠèŠåã®äœ¿çšäŸãæ°å€ããããŸãã ãããŠãããŒã¿ã®èŠèŠåã®æ¬ã§ã¯ãç« å šäœãããªãŒãããã«åœãŠãããŠããŸãã Processingãã£ã¹ããªãã¥ãŒã·ã§ã³ã«ã¯ãã®æ¬ã®äŸãå«ãŸããŠãããTreemapå°çšã®äŸã2ã€ãããŸãã ã©ã¡ãã®äŸãTreemapã©ã€ãã©ãªã䜿çšããŠããŸã-ãã㯠ãProcessingã§åäœããããã«ä¿®æ£ãããJavaã©ã€ãã©ãªã®ããŒãžã§ã³ã§ãã ãã®ã©ã€ãã©ãªã«ã¯ãã¹ããŒã¹ãé·æ¹åœ¢ã«åå²ããããã®ããã€ãã®ã¢ã«ãŽãªãºã ããããŸãïŒã¹ã©ã€ã¹ãšãã€ã¹ãäžéããšã®ããããããµã€ãºããšã®ããããããµã€ãºããšã®ãããããåå²ã¬ã€ã¢ãŠãã ããã§ç°ãªãã¢ã«ãŽãªãºã ã®åäœãæ¯èŒã§ããŸã ïŒJavaãã©ã°ã€ã³ãå¿ èŠã§ãïŒã ãæ£æ¹åœ¢ã®ã¬ã€ã¢ãŠãããæäŸããç»åã¯ãç§ã®æèŠã§ã¯ãæã楜ãããã®ã§ãã ãã®ã¢ã«ãŽãªãºã ã¯ãé·æ¹åœ¢ãã§ããã ãæ£æ¹åœ¢ã«è¿ããªãããã«é·æ¹åœ¢ãäœæããããšããŸãã Squarifiedã¬ã€ã¢ãŠãã¢ã«ãŽãªãºã ã«ã€ããŠã¯ãJack van Wijkã®èšäºã§èª¬æãããŠããŸãã ã©ã€ãã©ãªã䜿ãå§ããã«ã¯ãã©ã€ãã©ãªã®3ã€ã®ã¯ã©ã¹SimpleMapItemãMapModelãããã³Treemapãç解ããå¿ èŠããããŸãã SimpleMapItemã¯ã©ã¹ã¯åäžã®ã»ã«ãè¡šããMapModelã¯é åå ã®ã»ã«ã®ãªã¹ããæ ŒçŽããTreemapã¯ã©ã¹ã¯èŠèŠåèªäœãæ§ç¯ããã³ã³ã¹ãã©ã¯ã¿ãŒã§MapModelåã®ãªããžã§ã¯ããšãã£ãŒãã®å¢çã®åº§æšãååŸããŸãã MapLayoutãªããžã§ã¯ãã¯ãææã¡ã¢ã«ãŽãªãºã ã®å®è£ ãå®çŸ©ããTreemapãªããžã§ã¯ãã«ãä¿åãããŸãã ããã©ã«ãã§ã¯ãTreemapã¯ãããããµã€ãºããšã®ããããã¢ã«ãŽãªãºã ã䜿çšããŸãããé¢æ°setLayoutïŒMapLayoutã¢ã«ãŽãªãºã ïŒã䜿çšããŠå¥ã®ã¢ã«ãŽãªãºã ãæå®ããããšã劚ãããã®ã¯ãããŸããã ãããã£ãŠãäžè¬ã«ãProcessingã§TreemapèŠèŠåãååŸããã«ã¯ãSimpleMapItemããã³MapModeã€ã³ã¿ãŒãã§ã€ã¹ãããããå®è£ ããDeputatItemããã³DeputatMapã¯ã©ã¹ãäœæããŸãã SimpleMapItemã«ã¯ãããªãŒãããå ã®åè§åœ¢ã®ãµã€ãºã決å®ããsizeãã©ã¡ãŒã¿ãŒãããã代ç人ãç²åŸããéé¡ãå²ãåœãŠãŸãã
ããŒã¿ãèªã¿åããSimpleMapItemã€ã³ã¿ãŒãã§ã€ã¹ãå®è£ ããDeputatItemãªããžã§ã¯ãã«ä¿åããŸãã 代ç人ã«é¢ããæ å ±ãå«ãäœæããããªããžã§ã¯ããDeputatMapãªããžã§ã¯ãã«è¿œå ãããŸãïŒMapModelã€ã³ã¿ãŒãã§ãŒã¹ã®å®è£ ïŒã
DeputatMap dMap = new DeputatMap(); String[] lines = loadStrings("parliamentV2010.csv"); for (int i = 0; i < lines.length; i++) { //... id, party, name, money lines[i] DeputatItem d = new DeputatItem(id, party, name, money); dMap.addDeputat(d); } dMap.finishAdd();
Treemapãªããžã§ã¯ããäœæããDeputatMapãã©ã¡ãŒã¿ãŒãšããã€ã¢ã°ã©ã ãæ§ç¯ããé·æ¹åœ¢ã®å¯žæ³ãäžããŸãã
Treemap treemap = new Treemap(dMap , 0, 0, width - 1, height - 1); // SquarifiedLayout treemap MapLayout algorithm = new SquarifiedLayout(); treemap.setLayout(algorithm); treemap.updateLayout();
åã®ã³ãŒãã¯ãsetupïŒïŒã®åŠçé¢æ°ã§å®è¡ãããdrawïŒïŒã®åŠçé¢æ°ã§ã¯ãtreemapãªããžã§ã¯ãã®drawïŒïŒé¢æ°ãåŒã³åºããŸãã
void draw() { treemap.draw(); }
å代ç人ãæå±ããããŒãã£ã«å¿ããŠè²ãå²ãåœãŠããã代ç人ã«é¢ããæ å ±ããããèš±å¯ãããµã€ãºã®ã»ã«ã«è¡šç€ºãããå Žåã次ã®å³ã衚瀺ãããŸãã

åãããŒãã£ãŒã«å±ãã代ç人ãã°ã«ãŒãåããããšã«ããŸããããã®ããã«ãå¥ã®ã¬ãã«ã®éå±€ã§ããããŒââãã£ãŒãè¿œå ããå¿ èŠããããŸãã æŠç¥çã«ã¯ãåã®æ®µéã§åŸãããããªãŒæ§é ã¯æ¬¡ã®ããã«è¡šãããšãã§ããŸãïŒDuma-> deputiesãè¿œå ãããããŒãã£ãŒïŒDuma-> partys-> deputiesã ãã®ãããªã¹ããŒã ã§ã¯ãããã«2ã€ã®ã¯ã©ã¹PartyItemïŒSimpleMapItemã€ã³ã¿ãŒãã§ãŒã¹ã®å®è£ ïŒãšPartyMapïŒMapModelã€ã³ã¿ãŒãã§ãŒã¹ã®å®è£ ïŒãå¿ èŠã«ãªããŸãã åæ§ã®æé ã§ããªãŒããããäœæãããšã次ã®å³ã衚瀺ãããŸãã


åçã¯ãæåŸåé ã®äžè¬çãªæ§é ãæ確ã«ããŸãããæ®å¿µãªãããåçããç¹å®ã®ä»£ç人ãèŠã€ããããšã¯ã§ããŸããã ãããè¡ãã«ã¯ã 察話åããŒãžã§ã³ã䜿çšãããã windows ã linux ã mac osã®ã¢ããªã±ãŒã·ã§ã³ãããŠã³ããŒããããã ãœãŒã¹ã³ãŒããããŠã³ããŒãããŠåŠçãå®è¡ããŸã ã
PS Treemapã¯ãProcessingã ãã§ãªãæ§ç¯ã§ããŸãã ããã°Flowing dataã®èè ã§ããNatan Yuã¯ãæ å ±ã®èŠèŠåã«å¯Ÿãããã®ã¢ãããŒããä¿é²ããŠããŸããçµ±èšåæããã°ã©ã Rã§ããŒã¿ãåŠçããIllustratorã§çµæã®ã€ã¡ãŒãžãæãæµ®ãã¹ãŸãã ãã€ãµã³ã¯æè¿ããã®ã¢ãããŒãã詳述ããæ¬ããªãªãŒã¹ããŸããã Rã«ã¯ãNathanã®ããã°ã®ãããã¯ãžã®ãªã³ã¯ã«èå³ããã人ã®ããã«ãããªãŒããããäœæããããã®ç¹å¥ãªæ©èœããããŸãã
JavaScriptã®å®è£ ããããŸãã
Google Chart Tools Treemap ;
d3.jsããªãŒããã ;
JavaScript InfoVis ToolkitããªãŒããã ã