[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"detail-sidebar-cat-0-en-105":3,"doc-seo-657589-105":59,"doc-detail-657589-en":130},{"code":4,"msg":5,"data":6},0,"success",[7,13,18,23,28,33,38,43,48,51,55],{"id":8,"doc_module":4,"doc_module_name":9,"category_name":10,"show_sort_weight":11,"slug":12},1,"Document","Story & Novel",90,"story-novel",{"id":14,"doc_module":4,"doc_module_name":9,"category_name":15,"show_sort_weight":16,"slug":17},2,"Literature",80,"literature",{"id":19,"doc_module":4,"doc_module_name":9,"category_name":20,"show_sort_weight":21,"slug":22},4,"Exam",70,"exam",{"id":24,"doc_module":4,"doc_module_name":9,"category_name":25,"show_sort_weight":26,"slug":27},5,"Comic",60,"comic",{"id":29,"doc_module":4,"doc_module_name":9,"category_name":30,"show_sort_weight":31,"slug":32},6,"Technology",50,"technology",{"id":34,"doc_module":4,"doc_module_name":9,"category_name":35,"show_sort_weight":36,"slug":37},7,"Healthcare",40,"healthcare",{"id":39,"doc_module":4,"doc_module_name":9,"category_name":40,"show_sort_weight":41,"slug":42},8,"Research & Report",30,"research-report",{"id":44,"doc_module":4,"doc_module_name":9,"category_name":45,"show_sort_weight":46,"slug":47},9,"Religion & Spirituality",20,"religion-spirituality",{"id":46,"doc_module":4,"doc_module_name":9,"category_name":49,"show_sort_weight":46,"slug":50},"World Cup","world-cup",{"id":52,"doc_module":4,"doc_module_name":9,"category_name":53,"show_sort_weight":52,"slug":54},10,"Lifestyle","lifestyle",{"id":56,"doc_module":4,"doc_module_name":9,"category_name":57,"show_sort_weight":24,"slug":58},19,"General","general",{"code":4,"msg":60,"data":61},"ok",{"site_id":62,"language":63,"slug":64,"title":65,"keywords":66,"description":67,"schema_data":68,"social_meta":123,"head_meta":125,"extra_data":127,"updated_unix":129},105,"en","data-visualization-with-javascript-chapter-5-layouts","Data Visualization with JavaScript - Chapter 5 - Layouts","","Data Visualization with JavaScript (Second Edition) Chapter 5 focuses on D3.js layouts as a preprocessing layer that formats data for common charting methods. The chapter explains how associating datasets with layout structures creates drawable attributes for each data object, and how updating layouts plus rebinding data can use the D3 enter/update/exit pattern together with animated transitions. It introduces histogram and pie-chart animation, then proceeds to layouts including stack, tree, circle packing, and Sankey diagrams and word clouds, illustrating general layout functionality and structure.",{"@graph":69,"@context":122},[70,84,105],{"@type":71,"itemListElement":72},"BreadcrumbList",[73,77,79,82],{"item":74,"name":75,"@type":76,"position":8},"https://docshare.wps.com","Home","ListItem",{"item":78,"name":9,"@type":76,"position":14},"https://docshare.wps.com/document/",{"item":80,"name":30,"@type":76,"position":81},"https://docshare.wps.com/document/technology/",3,{"item":83,"name":65,"@type":76,"position":19},"https://docshare.wps.com/document/data-visualization-with-javascript-chapter-5-layouts/657589/",{"url":83,"name":65,"@type":85,"image":86,"author":91,"headline":65,"publisher":94,"fileFormat":97,"inLanguage":63,"description":67,"dateModified":98,"datePublished":99,"encodingFormat":97,"isAccessibleForFree":100,"interactionStatistic":101},"DigitalDocument",{"url":87,"@type":88,"width":89,"height":90},"https://docshare.wps.com/thumbnails/data-visualization-with-javascript-chapter-5-layouts/657589.png","ImageObject",300,407,{"name":92,"@type":93},"dhado","Person",{"url":74,"name":95,"@type":96},"DocShare","Organization","application/pdf","2026-10-30","2026-10-26",true,{"@type":102,"interactionType":103,"userInteractionCount":81},"InteractionCounter",{"@type":104},"ViewAction",{"@type":106,"mainEntity":107},"FAQPage",[108,114,118],{"name":109,"@type":110,"acceptedAnswer":111},"What are D3 layouts in this chapter?","Question",{"text":112,"@type":113},"Layouts are preprocessing functions that format data into settings needed for charts. They don’t directly draw like generators or components; they prepare data for rendering.","Answer",{"name":115,"@type":110,"acceptedAnswer":116},"How do you update a layout and refresh a visualization?",{"text":117,"@type":113},"You can update a layout, then rebind the altered data to the graphical objects. Using D3 enter/update/exit syntax, paired with transitions, supports interactive dynamic charts.",{"name":119,"@type":110,"acceptedAnswer":120},"How does d3.histogram help build a histogram?",{"text":121,"@type":113},"d3.histogram bins input values automatically using provided thresholds and produces an array of bins. Those bins can then be bound to elements to draw bars using the defined scales.","https://schema.org",{"og:url":83,"og:type":124,"og:title":65,"og:site_name":95,"og:description":67},"article",{"robots":126,"canonical":83},"index,follow",{"doc_id":128,"site_id":62},657589,1793030502,{"code":4,"msg":5,"data":131},{"doc_id":128,"user_id":132,"nickname":92,"user_avatar":133,"doc_module":4,"category_id":29,"category_name":30,"doc_title":65,"doc_description":67,"doc_content":134,"file_id":135,"file_url":136,"file_type":137,"file_size":138,"view_count":81,"is_deleted":4,"is_public":8,"is_downloadable":8,"audit_status":8,"page_count":139,"language":140,"language_code":63,"site_id":62,"html_lang":63,"table_of_contents":141,"faqs":142,"seo_title":143,"seo_description":67,"update_tm":144,"read_time":145},5909893218464,"https://ap-avatar.wpscdn.com/davatar_085a072bc5b1113ac321206ff7593b45","Elijah Meeks  \nData visualization with JavaScript SECOND EDITION  \nSAMPLE CHAPTER  \nM A N N I N G  \nD3.js inAction Second Edition  \nby Elijah Meeks  \nChapter 5  \nCopyright 2017 Manning Publications  \nbrief contents  \nPART 1 D3.JS FUNDAMENTALS ....................................................... 1  \n1 ■ An introduction to D3.js 3  \n2 ■ Information visualization data flow 47  \n3 ■ Data-driven design and interaction 78  \n4 ■ Chart components 109  \n5 ■ Layouts 143  \nPART 2 COMPLEX DATA VISUALIZATION ..................................... 173  \n6 ■ Hierarchical visualization 175  \n7 ■ Network visualization 204  \n8 ■ Geospatial information visualization 240  \nPART 3 ADVANCED TECHNIQUES ............................................... 273  \n9 ■ Interactive applications with React and D3 275  \n10 ■ Writing layouts and components 309  \n11 ■ Mixed mode rendering 330  \n~~ 5~~Layouts  \nThis chapter covers  \n􀂃 Understanding histogram and pie chart layouts  \n􀂃 Learning about simple tweening  \n􀂃 Working with stack layouts  \n􀂃 Using Sankey diagrams and word clouds  \nD3 contains a variety of functions, referred to as layouts, that help you format your data so that it can be presented using a popular charting method. In this chapter we’ll look at several different layouts so that you can understand general layout functionality, learn how to deal with D3’s layout structure, and deploy one of these layouts (several of which are shown in figure 5.1) with your data.  \nIn each case, as you’ll see with upcoming examples, when a dataset is associated with a layout, each of the objects in the dataset has attributes that allow for drawing the data. Layouts don’t draw the data, nor are they called like components or referred to in the drawing code like generators. Rather, they’re a preprocessing step that formats your data so that it’s ready to be displayed in the form you’ve chosen. You can update a layout and then if you rebind that altered data to your graphical objects, you can use the D3 enter/update/exit syntax you encountered in chapter 2 to update your layout. Paired with animated transitions, this can provide you with the framework for an interactive, dynamic chart.  \n144 CHAPTER 5 Layouts  \nFigure 5.1 Multiple layouts are demonstrated in this chapter, includingthe circle pack (section 5.3), tree (section 5.4), stack (section 5.5), and Sankey (section 5.6.1), as well astweening to properly animate shapes like the arcs in pie charts (section 5.2.3) .  \nThis chapter gives an overview of layout structure by implementing popular layouts such as the histogram, pie chart, tree, and circle packing. Other layouts, such as the chord layout and more exotic ones, follow the same principles and should be easy to understand after looking at these. We’ll get started with a kind of chart you’ve already worked with, the bar chart or histogram, which has its own layout that helps abstract the process of building this kind of chart.  \n5.1 Histograms  \nBefore we get into charts that you’ll need layouts for, first we’ll create a chart that we easily made without a layout. In chapter 2, we made a bar chart based on our Twitter data by using d3 .nest() . But D3 has a layout, d3 .histogram(), that bins values automatically and provides us with the necessary settings to draw a bar chart based on a scale that we’ve defined. Many people who get started with D3 think it’s a charting library and that they’ll find a function like d3 .histogram that creates a bar chart in a \u003Cdiv> when it’s run. But D3 layouts don’t result in charts; they result in the settings necessary for charts. You have to put in a bit of extra work for charts, but you have enormous flexibility (as you’ll see in this and later chapters) that allows you to make diagrams and charts that you can’t find in other libraries.  \n5.1.1 Drawing a histogram  \nListing 5.1 shows the code to create a histogram layout and associate it with a particular scale. I’ve also included an example of how you can use interactiv","cbCair0J2Fw3pMgd","https://ap.wps.com/l/cbCair0J2Fw3pMgd","pdf",2435121,33,"English","# This chapter covers\n## Understanding histogram and pie chart layouts\n## Learning about simple tweening\n## Working with stack layouts\n## Using Sankey diagrams and word clouds\n# 5.1 Histograms\n## Drawing a histogram","[{\"question\":\"What are D3 layouts in this chapter?\",\"answer\":\"Layouts are preprocessing functions that format data into settings needed for charts. They don’t directly draw like generators or components; they prepare data for rendering.\"},{\"question\":\"How do you update a layout and refresh a visualization?\",\"answer\":\"You can update a layout, then rebind the altered data to the graphical objects. Using D3 enter/update/exit syntax, paired with transitions, supports interactive dynamic charts.\"},{\"question\":\"How does d3.histogram help build a histogram?\",\"answer\":\"d3.histogram bins input values automatically using provided thresholds and produces an array of bins. Those bins can then be bound to elements to draw bars using the defined scales.\"}]","Data Visualization with JavaScript - Chapter 5 - Layouts | PDF",1792984269,83]