2d:null 2e:["$","title",null,{"children":"Normalized Stacked Bar Chart by g2/antv, transpose it | xi li | Observable"}] 33:T46d,function mutableForm(form) { const view = html`

${form}`; linkProperties(form, view, ['output'], ['value']); view.form = form; const input = form.input; const setBoxes = (n, v) => { const checked = new Set(v); n.forEach(n => n.checked = checked.has(n.value)); }; const isCheckbox = input instanceof RadioNodeList && input[0].type === 'checkbox'; const setValue = isCheckbox ? setBoxes : (n, v) => n.value = v; Object.defineProperty(view, 'value', { enumerable: true, get: () => form.value, set: v => { setValue(input, v); const name = input instanceof RadioNodeList ? 'change' : 'input'; form.dispatchEvent(new Event(name)); } }); return view; function linkProperties(source, target, attribs = [], exclude = []) { const props = Object.keys(source).filter(k => !exclude.includes(k)); for(let k of attribs) if(source.hasAttribute(k) && !props.includes(k)) props.push(k); for(let k of props) { Object.defineProperty(target, k, { enumerable: true, get: () => source[k], set: v => source[k] = v }); } } }34:[] 31:{"id":"7bde917b59b0d56b","slug":"100-intervalstack-by-g2","title":"Normalized Stacked Bar Chart by g2/antv, transpose it","thumbnail":"531527219bf016a197e97b438782183588561488fbffa696399ec6647a413361","access_level":"public","create_time":"$D2018-12-24T02:13:53.844Z","update_time":"$D2020-03-16T13:15:08.977Z","view_time":null,"first_public_time":"$D2018-12-26T09:57:10.256Z","has_unpublished_edits":null,"fork":false,"stars":6,"starred":false,"owner":{"type":"team","id":"289c7b23fa26b460","login":"bbsqq","name":"xi li","avatar_url":"https://avatars-next.observableusercontent.com/7696a9c597617d194223d6f7e6749d644a7559d8a575b399a0c8516fea032601","tier":"starter_2024"},"version":362,"publish_version":362,"role":null,"authored":false,"authors":[{"type":"individual","id":"5251836db7e459f9","login":"bbsqq","name":"xi li","avatar_url":"https://avatars-next.observableusercontent.com/7696a9c597617d194223d6f7e6749d644a7559d8a575b399a0c8516fea032601","tier":null}],"members":[{"type":"individual","id":"5251836db7e459f9","login":"bbsqq","name":"xi li","avatar_url":"https://avatars-next.observableusercontent.com/7696a9c597617d194223d6f7e6749d644a7559d8a575b399a0c8516fea032601","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":12,"collection":{"id":"7ed6f1704be47349","slug":"antv-g","title":"AntV/G2","owner":{"id":"289c7b23fa26b460","login":"bbsqq","name":"xi li"}},"type":"notebook","body":{"title":"Normalized Stacked Bar Chart by g2/antv, transpose it","cells":[{"id":0,"value":"md`# Normalized Stacked Bar Chart by g2/antv, transpose it\n\n### Visual chart analysis\n* antv/g2 is a front-end visualization library based on grammar of graph\n* bar chart (bar chart) -> stacked bar chart -> 100% stacked bar chart
\n** Bar chart (bar chart) ** : often used to indicate relationships between different classifications
\n** Stack bar chart ** : stacking the related values of a group of graphs together, to see the comparison relation between the total amount of each group, and to get the relation of the value of each class within the group
\n** 100% stacked bar chart ** : the proportion of each category in the whole group is clearly reflected
\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":253,"value":"md`\n
\n### Business scenario analysis\n* note: this example is derived from a business scenario in a sales department ( data is mocked ) *\n\nEvery month, the sales department needs to assign cars from the center to the region, and then the region will be assigned to the city. In actual work, it is an important business measurement standard whether to assign average scores to each region **. It is not only necessary to give a very average proportion of each color to the cars in the north, south, east and west regions, but also to see whether the colors in each region are average\nThe data structure is shown in the following table:\n\n\n|region|color|amount|\n| :---: | :---: | :---: |\n|East|red|30|\n|...|...|...|\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":294,"value":"md`\n
\n### In the actual project\nBecause customers are used to looking at tables\n* tabulate the data into a two-dimensional array\n* do all this using matrix inversion (d3.transpose())\n\n** Use the 100% stacked bar chart to visually see the specific proportion **\nantv/data-set is used to add the corresponding percentage to each kind of subdivision plan\n\n|region|color|amount|percent|\n| :---: | :---: | :---: | :---: |\n|East|red|30|0.222|\n|...|...|...|...|\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":57,"value":"sourceData = [\n \n {region: 'North', color: 'red', amount: 30},\n {region: 'East', color: 'red', amount: 10},\n {region: 'South', color: 'red', amount: 20},\n {region: 'West', color: 'red', amount: 25},\n \n {region: 'North', color: 'gray', amount: 20},\n {region: 'East', color: 'gray', amount: 12},\n {region: 'South', color: 'gray', amount: 18},\n {region: 'West', color: 'gray', amount: 35},\n \n {region: 'North', color: 'black', amount: 50},\n {region: 'East', color: 'black', amount: 40},\n {region: 'South', color: 'black', amount: 38},\n {region: 'West', color: 'black', amount: 29},\n \n {region: 'North', color: 'brown', amount: 30},\n {region: 'East', color: 'brown', amount: 42},\n {region: 'South', color: 'brown', amount: 22},\n {region: 'West', color: 'brown', amount: 35},\n \n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":207,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":126,"value":"viewof group = mutableForm(radio({options:['color', 'region'], value:'color'}))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":185,"value":"{\n const dimension = group == 'region'? 'color': 'region'\n return md`**group:** ${group}
**dimension:** ${dimension}`\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":58,"value":"data = {\n const dv = new DataSet.View().source(sourceData);\n const dimension = group == 'region'? 'color': 'region'\n dv.transform({\n type: 'percent',\n field: 'amount',\n dimension: dimension,\n groupBy: group,\n as: 'percent',\n });\n return dv.rows;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":42,"value":"{\n const dimension = group == 'region'? 'color': 'region'\n const w = Math.min(width, 640);\n const container = html`

`;\n const chart = new G2.Chart({\n container,\n width: w,\n animate: false\n });\n chart.source(data);\n chart.coord().transpose();\n chart.intervalStack()\n .position(`${group}*percent`)\n .label('percent', percent => percent.toFixed(2) + '%', {\n position: 'middle', \n offset: 0,\n textStyle:{fill: 'white'} \n })\n .color(dimension)\n .tooltip(false)\n chart.render();\n return container;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":332,"value":"md`\n### About API:\n* coord: default is rect, it also can set polar or theta\n* intervalStack: graphic properties\n* position: it is mapped to the X-axis and Y-axis in the two-dimensional coordinate system\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"G2 = require(\"@antv/g2@3\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"DataSet = require(\"@antv/data-set\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":204,"value":"import {radio} from '@jashkenas/inputs'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 32:"$31:body"