Searching the Visual Style and Structure of D3 Visualizations
We present a search engine for D3 visualizations that allows queries based on their visual style and underlying structure. To build the engine we crawl a collection of 7860 D3 visualizations from the Web and deconstruct each one to recover its data, its data-encoding marks and the encodings describi...
Gespeichert in:
| Veröffentlicht in: | IEEE transactions on visualization and computer graphics 2020-01, Vol.26 (1), p.1236-1245 |
|---|---|
| Hauptverfasser: | , |
| Format: | Artikel |
| Sprache: | eng |
| Schlagworte: | |
| Online-Zugang: | Volltext bestellen |
| Tags: |
Tag hinzufügen
Keine Tags, Fügen Sie den ersten Tag hinzu!
|
| container_end_page | 1245 |
|---|---|
| container_issue | 1 |
| container_start_page | 1236 |
| container_title | IEEE transactions on visualization and computer graphics |
| container_volume | 26 |
| creator | Hoque, Enamul Agrawala, Maneesh |
| description | We present a search engine for D3 visualizations that allows queries based on their visual style and underlying structure. To build the engine we crawl a collection of 7860 D3 visualizations from the Web and deconstruct each one to recover its data, its data-encoding marks and the encodings describing how the data is mapped to visual attributes of the marks. We also extract axes and other non-data-encoding attributes of marks (e.g., typeface, background color). Our search engine indexes this style and structure information as well as metadata about the webpage containing the chart. We show how visualization developers can search the collection to find visualizations that exhibit specific design characteristics and thereby explore the space of possible designs. We also demonstrate how researchers can use the search engine to identify commonly used visual design patterns and we perform such a demographic design analysis across our collection of D3 charts. A user study reveals that visualization developers found our style and structure based search engine to be significantly more useful and satisfying for finding different designs of D3 charts, than a baseline search engine that only allows keyword search over the webpage containing a chart. |
| doi_str_mv | 10.1109/TVCG.2019.2934431 |
| format | Article |
| fullrecord | <record><control><sourceid>proquest_RIE</sourceid><recordid>TN_cdi_crossref_primary_10_1109_TVCG_2019_2934431</recordid><sourceformat>XML</sourceformat><sourcesystem>PC</sourcesystem><ieee_id>8809832</ieee_id><sourcerecordid>2317727212</sourcerecordid><originalsourceid>FETCH-LOGICAL-c349t-974dbf4fddc2ce096c198153496947c740c558e1bf441d3818873756961a0fbd3</originalsourceid><addsrcrecordid>eNpdkEFLwzAUx4Mobk4_gAhS8OKlMy9Jm-TgQapOYeBhc9eQpanr6NqZtIf56c1Y3cHD4_3h_d7j8UPoGvAYAMuH-SKbjAkGOSaSMkbhBA1BMohxgtPTkDHnMUlJOkAX3q8xBsaEPEcDGgKRAg_R48xqZ1Zl_RW1KxstSt_pKpq1u8pGus5Dcp1pO2ejpoieaQ-UP7otm9pforNCV95e9X2EPl9f5tlbPP2YvGdP09hQJttYcpYvC1bkuSHGYpkakAKSMEsl44YzbJJEWAgMg5wKEIJTnqQyBY2LZU5H6P5wd-ua7876Vm1Kb2xV6do2nVeECJwkVIYaobt_6LrpXB2-U4QC54QTIIGCA2Vc472zhdq6cqPdTgFWe7dq71bt3arebdi57S93y43Njxt_MgNwcwBKa-1xLASWghL6C2PherE</addsrcrecordid><sourcetype>Aggregation Database</sourcetype><iscdi>true</iscdi><recordtype>article</recordtype><pqid>2317727212</pqid></control><display><type>article</type><title>Searching the Visual Style and Structure of D3 Visualizations</title><source>IEEE Electronic Library (IEL)</source><creator>Hoque, Enamul ; Agrawala, Maneesh</creator><creatorcontrib>Hoque, Enamul ; Agrawala, Maneesh</creatorcontrib><description>We present a search engine for D3 visualizations that allows queries based on their visual style and underlying structure. To build the engine we crawl a collection of 7860 D3 visualizations from the Web and deconstruct each one to recover its data, its data-encoding marks and the encodings describing how the data is mapped to visual attributes of the marks. We also extract axes and other non-data-encoding attributes of marks (e.g., typeface, background color). Our search engine indexes this style and structure information as well as metadata about the webpage containing the chart. We show how visualization developers can search the collection to find visualizations that exhibit specific design characteristics and thereby explore the space of possible designs. We also demonstrate how researchers can use the search engine to identify commonly used visual design patterns and we perform such a demographic design analysis across our collection of D3 charts. A user study reveals that visualization developers found our style and structure based search engine to be significantly more useful and satisfying for finding different designs of D3 charts, than a baseline search engine that only allows keyword search over the webpage containing a chart.</description><identifier>ISSN: 1077-2626</identifier><identifier>EISSN: 1941-0506</identifier><identifier>DOI: 10.1109/TVCG.2019.2934431</identifier><identifier>PMID: 31442980</identifier><identifier>CODEN: ITVGEA</identifier><language>eng</language><publisher>United States: IEEE</publisher><subject>Adolescent ; Adult ; Charts ; Collection ; Computer Graphics - classification ; Data mining ; Data visualization ; Demographics ; Design analysis ; Encoding ; Female ; Humans ; Image color analysis ; Indexes ; Internet ; Male ; Search Engine ; Search engines ; search user interfaces ; Typefaces ; User-Computer Interface ; Visualization ; visualization design ; visualization search engine ; Web Browser ; Young Adult</subject><ispartof>IEEE transactions on visualization and computer graphics, 2020-01, Vol.26 (1), p.1236-1245</ispartof><rights>Copyright The Institute of Electrical and Electronics Engineers, Inc. (IEEE) 2020</rights><lds50>peer_reviewed</lds50><woscitedreferencessubscribed>false</woscitedreferencessubscribed><citedby>FETCH-LOGICAL-c349t-974dbf4fddc2ce096c198153496947c740c558e1bf441d3818873756961a0fbd3</citedby><cites>FETCH-LOGICAL-c349t-974dbf4fddc2ce096c198153496947c740c558e1bf441d3818873756961a0fbd3</cites></display><links><openurl>$$Topenurl_article</openurl><openurlfulltext>$$Topenurlfull_article</openurlfulltext><thumbnail>$$Tsyndetics_thumb_exl</thumbnail><linktohtml>$$Uhttps://ieeexplore.ieee.org/document/8809832$$EHTML$$P50$$Gieee$$H</linktohtml><link.rule.ids>314,777,781,793,27905,27906,54739</link.rule.ids><linktorsrc>$$Uhttps://ieeexplore.ieee.org/document/8809832$$EView_record_in_IEEE$$FView_record_in_$$GIEEE</linktorsrc><backlink>$$Uhttps://www.ncbi.nlm.nih.gov/pubmed/31442980$$D View this record in MEDLINE/PubMed$$Hfree_for_read</backlink></links><search><creatorcontrib>Hoque, Enamul</creatorcontrib><creatorcontrib>Agrawala, Maneesh</creatorcontrib><title>Searching the Visual Style and Structure of D3 Visualizations</title><title>IEEE transactions on visualization and computer graphics</title><addtitle>TVCG</addtitle><addtitle>IEEE Trans Vis Comput Graph</addtitle><description>We present a search engine for D3 visualizations that allows queries based on their visual style and underlying structure. To build the engine we crawl a collection of 7860 D3 visualizations from the Web and deconstruct each one to recover its data, its data-encoding marks and the encodings describing how the data is mapped to visual attributes of the marks. We also extract axes and other non-data-encoding attributes of marks (e.g., typeface, background color). Our search engine indexes this style and structure information as well as metadata about the webpage containing the chart. We show how visualization developers can search the collection to find visualizations that exhibit specific design characteristics and thereby explore the space of possible designs. We also demonstrate how researchers can use the search engine to identify commonly used visual design patterns and we perform such a demographic design analysis across our collection of D3 charts. A user study reveals that visualization developers found our style and structure based search engine to be significantly more useful and satisfying for finding different designs of D3 charts, than a baseline search engine that only allows keyword search over the webpage containing a chart.</description><subject>Adolescent</subject><subject>Adult</subject><subject>Charts</subject><subject>Collection</subject><subject>Computer Graphics - classification</subject><subject>Data mining</subject><subject>Data visualization</subject><subject>Demographics</subject><subject>Design analysis</subject><subject>Encoding</subject><subject>Female</subject><subject>Humans</subject><subject>Image color analysis</subject><subject>Indexes</subject><subject>Internet</subject><subject>Male</subject><subject>Search Engine</subject><subject>Search engines</subject><subject>search user interfaces</subject><subject>Typefaces</subject><subject>User-Computer Interface</subject><subject>Visualization</subject><subject>visualization design</subject><subject>visualization search engine</subject><subject>Web Browser</subject><subject>Young Adult</subject><issn>1077-2626</issn><issn>1941-0506</issn><fulltext>true</fulltext><rsrctype>article</rsrctype><creationdate>2020</creationdate><recordtype>article</recordtype><sourceid>RIE</sourceid><sourceid>EIF</sourceid><recordid>eNpdkEFLwzAUx4Mobk4_gAhS8OKlMy9Jm-TgQapOYeBhc9eQpanr6NqZtIf56c1Y3cHD4_3h_d7j8UPoGvAYAMuH-SKbjAkGOSaSMkbhBA1BMohxgtPTkDHnMUlJOkAX3q8xBsaEPEcDGgKRAg_R48xqZ1Zl_RW1KxstSt_pKpq1u8pGus5Dcp1pO2ejpoieaQ-UP7otm9pforNCV95e9X2EPl9f5tlbPP2YvGdP09hQJttYcpYvC1bkuSHGYpkakAKSMEsl44YzbJJEWAgMg5wKEIJTnqQyBY2LZU5H6P5wd-ua7876Vm1Kb2xV6do2nVeECJwkVIYaobt_6LrpXB2-U4QC54QTIIGCA2Vc472zhdq6cqPdTgFWe7dq71bt3arebdi57S93y43Njxt_MgNwcwBKa-1xLASWghL6C2PherE</recordid><startdate>20200101</startdate><enddate>20200101</enddate><creator>Hoque, Enamul</creator><creator>Agrawala, Maneesh</creator><general>IEEE</general><general>The Institute of Electrical and Electronics Engineers, Inc. (IEEE)</general><scope>97E</scope><scope>RIA</scope><scope>RIE</scope><scope>CGR</scope><scope>CUY</scope><scope>CVF</scope><scope>ECM</scope><scope>EIF</scope><scope>NPM</scope><scope>AAYXX</scope><scope>CITATION</scope><scope>7SC</scope><scope>7SP</scope><scope>8FD</scope><scope>JQ2</scope><scope>L7M</scope><scope>L~C</scope><scope>L~D</scope><scope>7X8</scope></search><sort><creationdate>20200101</creationdate><title>Searching the Visual Style and Structure of D3 Visualizations</title><author>Hoque, Enamul ; Agrawala, Maneesh</author></sort><facets><frbrtype>5</frbrtype><frbrgroupid>cdi_FETCH-LOGICAL-c349t-974dbf4fddc2ce096c198153496947c740c558e1bf441d3818873756961a0fbd3</frbrgroupid><rsrctype>articles</rsrctype><prefilter>articles</prefilter><language>eng</language><creationdate>2020</creationdate><topic>Adolescent</topic><topic>Adult</topic><topic>Charts</topic><topic>Collection</topic><topic>Computer Graphics - classification</topic><topic>Data mining</topic><topic>Data visualization</topic><topic>Demographics</topic><topic>Design analysis</topic><topic>Encoding</topic><topic>Female</topic><topic>Humans</topic><topic>Image color analysis</topic><topic>Indexes</topic><topic>Internet</topic><topic>Male</topic><topic>Search Engine</topic><topic>Search engines</topic><topic>search user interfaces</topic><topic>Typefaces</topic><topic>User-Computer Interface</topic><topic>Visualization</topic><topic>visualization design</topic><topic>visualization search engine</topic><topic>Web Browser</topic><topic>Young Adult</topic><toplevel>peer_reviewed</toplevel><toplevel>online_resources</toplevel><creatorcontrib>Hoque, Enamul</creatorcontrib><creatorcontrib>Agrawala, Maneesh</creatorcontrib><collection>IEEE All-Society Periodicals Package (ASPP) 2005-present</collection><collection>IEEE All-Society Periodicals Package (ASPP) 1998-Present</collection><collection>IEEE Electronic Library (IEL)</collection><collection>Medline</collection><collection>MEDLINE</collection><collection>MEDLINE (Ovid)</collection><collection>MEDLINE</collection><collection>MEDLINE</collection><collection>PubMed</collection><collection>CrossRef</collection><collection>Computer and Information Systems Abstracts</collection><collection>Electronics & Communications Abstracts</collection><collection>Technology Research Database</collection><collection>ProQuest Computer Science Collection</collection><collection>Advanced Technologies Database with Aerospace</collection><collection>Computer and Information Systems Abstracts Academic</collection><collection>Computer and Information Systems Abstracts Professional</collection><collection>MEDLINE - Academic</collection><jtitle>IEEE transactions on visualization and computer graphics</jtitle></facets><delivery><delcategory>Remote Search Resource</delcategory><fulltext>fulltext_linktorsrc</fulltext></delivery><addata><au>Hoque, Enamul</au><au>Agrawala, Maneesh</au><format>journal</format><genre>article</genre><ristype>JOUR</ristype><atitle>Searching the Visual Style and Structure of D3 Visualizations</atitle><jtitle>IEEE transactions on visualization and computer graphics</jtitle><stitle>TVCG</stitle><addtitle>IEEE Trans Vis Comput Graph</addtitle><date>2020-01-01</date><risdate>2020</risdate><volume>26</volume><issue>1</issue><spage>1236</spage><epage>1245</epage><pages>1236-1245</pages><issn>1077-2626</issn><eissn>1941-0506</eissn><coden>ITVGEA</coden><abstract>We present a search engine for D3 visualizations that allows queries based on their visual style and underlying structure. To build the engine we crawl a collection of 7860 D3 visualizations from the Web and deconstruct each one to recover its data, its data-encoding marks and the encodings describing how the data is mapped to visual attributes of the marks. We also extract axes and other non-data-encoding attributes of marks (e.g., typeface, background color). Our search engine indexes this style and structure information as well as metadata about the webpage containing the chart. We show how visualization developers can search the collection to find visualizations that exhibit specific design characteristics and thereby explore the space of possible designs. We also demonstrate how researchers can use the search engine to identify commonly used visual design patterns and we perform such a demographic design analysis across our collection of D3 charts. A user study reveals that visualization developers found our style and structure based search engine to be significantly more useful and satisfying for finding different designs of D3 charts, than a baseline search engine that only allows keyword search over the webpage containing a chart.</abstract><cop>United States</cop><pub>IEEE</pub><pmid>31442980</pmid><doi>10.1109/TVCG.2019.2934431</doi><tpages>10</tpages></addata></record> |
| fulltext | fulltext_linktorsrc |
| identifier | ISSN: 1077-2626 |
| ispartof | IEEE transactions on visualization and computer graphics, 2020-01, Vol.26 (1), p.1236-1245 |
| issn | 1077-2626 1941-0506 |
| language | eng |
| recordid | cdi_crossref_primary_10_1109_TVCG_2019_2934431 |
| source | IEEE Electronic Library (IEL) |
| subjects | Adolescent Adult Charts Collection Computer Graphics - classification Data mining Data visualization Demographics Design analysis Encoding Female Humans Image color analysis Indexes Internet Male Search Engine Search engines search user interfaces Typefaces User-Computer Interface Visualization visualization design visualization search engine Web Browser Young Adult |
| title | Searching the Visual Style and Structure of D3 Visualizations |
| url | https://sfx.bib-bvb.de/sfx_tum?ctx_ver=Z39.88-2004&ctx_enc=info:ofi/enc:UTF-8&ctx_tim=2025-01-19T11%3A46%3A46IST&url_ver=Z39.88-2004&url_ctx_fmt=infofi/fmt:kev:mtx:ctx&rfr_id=info:sid/primo.exlibrisgroup.com:primo3-Article-proquest_RIE&rft_val_fmt=info:ofi/fmt:kev:mtx:journal&rft.genre=article&rft.atitle=Searching%20the%20Visual%20Style%20and%20Structure%20of%20D3%20Visualizations&rft.jtitle=IEEE%20transactions%20on%20visualization%20and%20computer%20graphics&rft.au=Hoque,%20Enamul&rft.date=2020-01-01&rft.volume=26&rft.issue=1&rft.spage=1236&rft.epage=1245&rft.pages=1236-1245&rft.issn=1077-2626&rft.eissn=1941-0506&rft.coden=ITVGEA&rft_id=info:doi/10.1109/TVCG.2019.2934431&rft_dat=%3Cproquest_RIE%3E2317727212%3C/proquest_RIE%3E%3Curl%3E%3C/url%3E&disable_directlink=true&sfx.directlink=off&sfx.report_link=0&rft_id=info:oai/&rft_pqid=2317727212&rft_id=info:pmid/31442980&rft_ieee_id=8809832&rfr_iscdi=true |