2d:null 2e:["$","title",null,{"children":"🌍 Visualize Sophie's World by AntV | Bairui Su | Observable"}] 33:T537,barchart = { const data = [ { name: "questions", value: questions.length }, { name: "schools", value: schools.length }, { name: "philosophers", value: philosophers.length } ]; const w = 480; const h = 300; const m = 15; const context = DOM.context2d(w + m * 2, h + m * 2); const nameColor = { questions: "#5B8FF9", philosophers: "#61DDAA", schools: "#65789B" }; const [_, maxValue] = extent(data, (d) => d.value); context.translate(m, m); for (let i = 0; i < data.length; i++) { const { name, value } = data[i]; const color = nameColor[name]; const step = w / data.length; const x = step * i; const width = step * 0.8; const height = (h * 0.8 * value) / maxValue; const y = h - 20 - height; // draw bars context.fillStyle = color; context.fillRect(x, y, width, height); // draw names context.fillStyle = "black"; context.textAlign = "center"; context.textBaseline = "top"; context.font = "14px PingFangSC-Regular, sans-serif"; context.fillText(name, x + width / 2, y + height + 10); // draw values context.textBaseline = "middle"; context.fillStyle = "white"; context.font = "25px PingFangSC-Regular, sans-serif"; context.fillText(value, x + width / 2, y + height / 2); } return context.canvas; }34:Tbcd,scatter = { // prepare data const container = html`

`; yield container; const data = philosophers.map(d => ({ birthYear: +new Date(d.lifespan[0], 0, 1), year: d.lifespan[1] - d.lifespan[0], name: d.name })); // prepare canvas const w = 600; const h = 300; const m = 50; const canvas = new G.Canvas({ container, width: w + m * 2, height: h + m * 2 }); const [minBirth, maxBirth] = extent(data, d => d.birthYear); const [minYear, maxYear] = extent(data, d => d.year); // draw shapes for (const { birthYear, year } of data) { const x = m + ((birthYear - minBirth) / (maxBirth - minBirth)) * w; const y = m + ((year - minYear) / (maxYear - minYear)) * h; canvas.addShape('circle', { attrs: { x: x, y: h + m * 2 - y, r: 5, fill: '#5B8FF9' } }); } // draw xAxis const xTicks = ticksByInterval( year(yearCeil(minBirth, 200)), year(yearFloor(maxBirth, 200)), 200 ).map(d => +DateYear(d)); for (const tick of xTicks) { const x = m + ((tick - minBirth) / (maxBirth - minBirth)) * w; const y = h + m * 2 - 30; canvas.addShape('line', { attrs: { x1: x, x2: x, y1: y - 5, y2: y, stroke: 'black' } }); canvas.addShape('text', { attrs: { text: `${year(tick)}`, x: x, y: y + 3, stroke: 'black', textAlign: 'center', textBaseline: 'top', fontSize: 10, fontWeight: 'lighter' } }); } // draw yAxis const yTicks = ticksByInterval( Math.ceil(minYear / 10) * 10, Math.floor(maxYear / 10) * 10, 10 ); for (const tick of yTicks) { const x = m - 15; const y = h + m * 2 - (m + ((tick - minYear) / (maxYear - minYear)) * h); canvas.addShape('line', { attrs: { x1: x - 5, x2: x, y1: y, y2: y, stroke: 'black' } }); canvas.addShape('text', { attrs: { text: tick, x: x - 15, y, stroke: 'black', textAlign: 'right', textBaseline: 'middle', fontSize: 10, fontWeight: 'lighter' } }); } function ticksByInterval(start, end, interval) { const size = (((end - start) / interval) | 0) + 1; return new Array(size).fill(0).map((_, i) => start + i * interval); } function yearCeil(timestamp, count) { const y1 = year(timestamp); const y2 = Math.ceil(y1 / count) * count; return +DateYear(y2); } function yearFloor(timestamp, count) { const y1 = year(timestamp); const y2 = Math.floor(y1 / count) * count; return +DateYear(y2); } function year(timestamp) { return new Date(timestamp).getFullYear(); } function DateYear(year) { if (0 <= year && year < 100) { const date = new Date(-1, 0, 1); date.setFullYear(year); return date; } return new Date(year, 0, 1); } }35:Tc1f,pie = { // prepare container const container = html`

`; yield container; const w = 300; const h = 300; const m = 50; const canvas = new G.Canvas({ container, width: w + m * 2, height: h + m * 2 }); // prepare data with DataSet and Adjust const ds = new DataSet(); const data = ds .createView() .source(schools) .transform({ type: 'aggregate', fields: ['type'], operations: ['count'], as: ['value'], groupBy: ['type'] }) .rows.map(d => ({ type: d.type, value: d.value, key: 'pie' })); const stack = new (Adjust.getAdjust('stack'))({ yField: 'value', xField: 'pie' }); const stackedData = stack .process([data])[0] .map(({ value, ...rest }) => ({ min: value[0], max: value[1], ...rest })); const { min: minValue, max: maxValue } = ds .createView() .source(stackedData) .transform({ type: 'aggregate', fields: ['min', 'max'], operations: ['min', 'max'], as: ['min', 'max'] }).rows[0]; const types = ds .createView() .source(data) .transform({ type: 'aggregate', fields: ['type'], as: ['count'], groupBy: ['type'], operations: ['count'] }) .rows.map(d => d.type); // prepare scales with Scale const color = new Scale.Ordinal({ domain: types, range: colors }); const x = new Scale.Linear({ domain: [minValue, maxValue], range: [0, 1] }); const y = new Scale.Band({ domain: ['pie'], range: [0, 1] }); // prepare coordinate by Coordinate const polar = new Coord.Coordinate({ width: w, height: h, x: m, y: m }) .transform('translate', 0.5, 0.5) .transform('reflect.y') .transform('translate', -0.5, -0.5) .transform('polar', 0, Math.PI * 2, 0, 1) .transform('cartesian'); // draw arcs for (const d of stackedData) { const { key, type, min, max } = d; const fill = color.map(type); const l = max - min > (maxValue - minValue) / 2 ? 1 : 0; const [p0, p1] = [[min, key], [max, key]].map(([dx, dy]) => polar.map([x.map(dx), y.map(dy)]) ); const cx = m + w / 2; const cy = m + h / 2; const r = w / 2; canvas.addShape('path', { attrs: { fill, path: [ ['M', cx, cy], ['L', p0[0], p0[1]], ['A', r, r, 0, l, 1, p1[0], p1[1]], ['L', cx, cy], ['Z'] ] } }); } // draw legend const ty = new Scale.Band({ domain: types, range: [0, 50], padding: 0.4 }); for (const t of types) { const y = ty.map(t); const x = w - 20; const fill = color.map(t); const size = ty.getBandWidth(); canvas.addShape('rect', { attrs: { fill, x, y, width: size, height: size } }); canvas.addShape('text', { attrs: { fill: 'black', text: t, x: x + size + 5, y: y + size / 2, textAlign: 'left', textBaseline: 'middle' } }); } }36:T5c4,forceGraph = { const container = html`

`; yield container; const height = 450; const width = 600; const graph = new G6.Graph({ container: container, width, height, layout: { type: 'force', preventOverlap: true, linkDistance: d => (d.source.id === 'center' ? 100 : 50), nodeStrength: d => (d.type === 'p' ? -50 : -30), edgeStrength: d => (d.source.type === 'q' ? 0.7 : 0.1) }, defaultNode: { color: '#5B8FF9' }, modes: { default: [ 'drag-node', 'drag-canvas', { type: 'tooltip', formatText: d => `

${d.name || d.title}

`, shouldUpdate: d => true } ] } }); const data = getForceGraphData(); const nodes = data.nodes; console.log(data); graph.data({ nodes, edges: data.edges.map((edge, i) => ({ ...edge, id: 'edge' + i })) }); graph.render(); graph.on('node:dragstart', e => { graph.layout(); refreshDragedNodePosition(e); }); graph.on('node:drag', e => { refreshDragedNodePosition(e); }); graph.on('node:dragend', e => { e.item.get('model').fx = null; e.item.get('model').fy = null; }); function refreshDragedNodePosition(e) { const model = e.item.get('model'); model.fx = e.x; model.fy = e.y; } }37:T5cb,function getWordCloudData(w, h) { // prepare for data const data = unique(getData(), d => d.word); const dv = new DataSet().createView().source(data); const fontSize = new Scale.Linear({ range: [24, 70], domain: dv.range('value') }); dv.transform({ type: 'tag-cloud', fields: ['word', 'value'], size: [w, h], font: 'Verdana', padding: 0, rotate() { let random = ~~(Math.random() * 4) % 4; if (random === 2) { random = 0; } return random * 90; // 0, 90, 270 }, fontSize(d) { return d.value ? fontSize.map(d.value) : 0; } }); return dv.rows; function getData() { if (dataType === 'questions') { return questions .map(d => d.words.map(({ weight, ...rest }) => ({ value: weight, title: d.title, ...rest })) ) .reduce((total, cur) => [...total, ...cur], []); } else if (dataType === 'answers') { return [...philosophers, ...schools] .map(d => d.words.map(({ weight, ...rest }) => ({ value: weight, title: d.name, ...rest })) ) .reduce((total, cur) => [...total, ...cur], []); } else if (dataType === 'responders') { return [...philosophers, ...schools].map(d => ({ word: d.name, value: d.points.length, title: d.points && d.points[0] })); } return []; } }38:[{"id":"695f463d85e0c0bee8c53650d1785f830beb2c6c45d416698965df3b12703d06a57ca1f8db21f54695cc796a0a2c3a09df38389063af4fe36adce13f32c2a759","href":"https://static.observableusercontent.com/files/695f463d85e0c0bee8c53650d1785f830beb2c6c45d416698965df3b12703d06a57ca1f8db21f54695cc796a0a2c3a09df38389063af4fe36adce13f32c2a759","name":"relations@2.csv","type":"text/csv","lastModified":1626311514109.73,"size":696},{"id":"acc91ccdda0b3105c524c211ad0b03394772ff28673aeb52e93a0d70e2218a3cfd88d72e7f928eac70856eb82f8a2ddea62f98b7aa1a68779cb00cbdeec7a949","href":"https://static.observableusercontent.com/files/acc91ccdda0b3105c524c211ad0b03394772ff28673aeb52e93a0d70e2218a3cfd88d72e7f928eac70856eb82f8a2ddea62f98b7aa1a68779cb00cbdeec7a949","name":"philosophers@5.json","type":"application/json","lastModified":1626702557768.008,"size":17418},{"id":"dbca0ffbd44f33c787e16092b91ab68e8b1f3321893baf416e5c13336882ccc38a98cbfebd21afe2e99d9b2d9b87839b83431b8c0edb9f24833ad378b5a1ae96","href":"https://static.observableusercontent.com/files/dbca0ffbd44f33c787e16092b91ab68e8b1f3321893baf416e5c13336882ccc38a98cbfebd21afe2e99d9b2d9b87839b83431b8c0edb9f24833ad378b5a1ae96","name":"questions@4.json","type":"application/json","lastModified":1626702572928.081,"size":6007},{"id":"4bc607acd121a109a0aad28f6be2f0f9e11641cf5ff5ac162c0d25ddb61ea9a41a12ff28ef8fc67a5eece543353f3f8001431032774d8db7a138a5ddf95cf659","href":"https://static.observableusercontent.com/files/4bc607acd121a109a0aad28f6be2f0f9e11641cf5ff5ac162c0d25ddb61ea9a41a12ff28ef8fc67a5eece543353f3f8001431032774d8db7a138a5ddf95cf659","name":"schools@5.json","type":"application/json","lastModified":1626702565513.475,"size":9639}] 31:{"id":"4b96bbc7a6cc095e","slug":"visualize-sophies-world-by-antv","title":"🌍 Visualize Sophie's World by AntV","thumbnail":"9491c4194937cd7f3dbd22a248947db0089dc95725c5d1e6a21f6294ef1580b0","access_level":"public","create_time":"$D2021-07-01T06:13:05.909Z","update_time":"$D2024-10-09T14:43:37.645Z","view_time":null,"first_public_time":"$D2021-07-15T12:01:59.972Z","fork":false,"stars":9,"starred":false,"owner":{"type":"team","id":"3e931206c18366b5","login":"pearmini","name":"Bairui Su","avatar_url":"https://avatars-next.observableusercontent.com/0c55731913f2096b86eadf187f5e21ae0a951f3c4dd6bbde4bf2a8536c5b6e49","tier":"starter_2024"},"version":1622,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"76ec39dbb0bd8e40","login":"pearmini","name":"Bairui SU","avatar_url":"https://avatars-next.observableusercontent.com/0c55731913f2096b86eadf187f5e21ae0a951f3c4dd6bbde4bf2a8536c5b6e49","tier":null}],"members":[{"type":"individual","id":"76ec39dbb0bd8e40","login":"pearmini","name":"Bairui SU","avatar_url":"https://avatars-next.observableusercontent.com/0c55731913f2096b86eadf187f5e21ae0a951f3c4dd6bbde4bf2a8536c5b6e49","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":3,"collection":{"id":"a0f6a38febb1c6b6","slug":"visualization","title":"Visualization","owner":{"id":"3e931206c18366b5","login":"pearmini","name":"Bairui Su"}},"type":"notebook","body":{"title":"🌍 Visualize Sophie's World by AntV","cells":[{"id":0,"value":"md`# 🌍 Visualize Sophie's World by AntV`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1442,"value":"md`[\"Sophie's World\"](https://en.wikipedia.org/wiki/Sophie%27s_World) is a famous novel, offers a summary history of philosophy embedded in a philosophical mystery disguised as a children's book but only sophisticated young adults would be remotedly interested.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1444,"value":"md`It tells a story about a girl named Sophie Amundsen who receives a letter from a philosopher named Albert Knox and then begins her journey to learn philosophy. During thier education, they gradually find they are in a book which means their whole world is just the world described in the book.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1482,"value":"md`The fundamental of philosophy is the **eternal questions**, such as\n- Where the world comes from?\n- Who are you?\n\nAnd it is aslo about the answers and the people who answers the eternal questions.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1461,"value":"md`This article is going to visualize the main content of this book, in other words: **Sophie's World** by [AntV Visualization Solutions](https://antv.vision/).`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1469,"value":"md`There are two purposes for this article:\n- Show the core *questions*, *schools*, *philosophers* and the relations between them during the history of philosophy.\n- Give a breif introduction of *AntV Visulization Tools* from different levels which described in picture below.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1311,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":336,"value":"md`## Native Render Techs`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1240,"value":"md`Firstly, we will start using native graphic drawing techs to get a breif overview of data, and see what we will get.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1232,"value":"md`\n- **Question**: How many questions, schools and philosophers show up in Sophie's World?\n- **Tool**: Bar Chart\n- **Insight**: Philosophical questions may be limited, but people's mind is full of posibilities.\n- **Issues**:\n - Canvas API is a little bit complex.\n - Canvas, SVG, WebGl do not have the same API, it will be very troublesome if we want to render the same chart in different context.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":340,"value":"$33","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":390,"value":"md`## Graphics Library`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1243,"value":"md`To solve the issues mentioned above and known more about philosophers, we will plot a scatter with [G](https://g.antv.vision/zh/docs/guide/introduce) which is the basic render engine for AntV tech stack.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1248,"value":"md`\n- **Question**: What does the relationship between philosophers' birth year and lifespan look like?\n- **Tool**: A scatter whose x dimension is the philosophers' birth year and the y dimension is their lifespan.\n- **Insight**: \n - Generally speaking, philosophers in different periods live a long life.\n - There are few philosophers mentioned in Sophie's world during The Middle Ages(-5～1500), that because it's a depressive age. The dominant view at that time is that humans are only part of nature and they pay more attention to God rather than themselves.\n- **Issues**:\n - Difficult to map data into visual mark's attribute.\n - Difficult to draw some basic visualization components: axis, legend, title, etc.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":401,"value":"$34","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":608,"value":"md`## Low-Level Building Blocks`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1254,"value":"md`At this point we known how to plot charts with the help of graphics libray, next we will dive into finding the relations between different schools and using low-level building blocks in AntV.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1258,"value":"md`\n- **Questions**: What is the most common criteria for dividing schools?\n- **Tool**: Pie plot with the help of [*@antv/scale*](https://github.com/antvis/scale), [*@antv/coord*](https://github.com/antvis/coord), [*@antv/data-set*](https://github.com/antvis/data-set), [*@antv/adjust*](https://github.com/antvis/adjust).\n- **Insight**: Topic is main factor to bind people together(Humanism, Romanticism), followed by Time(The Middle Age, Renaissance). Country(Philosophy of Athens, Greek philosophy) is the least important factor.\n- **Issues**: It is still not convenient enougth to plot a chart, there must be a more easier way to plot.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":615,"value":"$35","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":676,"value":"md`## Visualization Grammers`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1261,"value":"md`After we having a brief overview of the three most common things in Sophie's world: *quesions*, *philosophers* and *schools* and getting familiar with the power of low-level building blocks, we are going find some details about Sophie's world and using declarative visulization grammers to boost your visualization speed.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1265,"value":"md`\n- **Questions**: What are the key words of quesions, answers and responders in Sophie's world?\n- **Tool**: Word cloud by [G2](https://g2.antv.vision) which is for statistics data.\n- **Insight**:\n - People pay more a lot attention to God, the birth of the world, christian and the relationship between their rationality and sensibility.\n - A lot of people try to answer questions from nature and heart or spirit.\n - Marx and Descartes have great impact on human history.\n- **Issues**: Some people don't want to learn visulization grammers because they don't have many custom needs, they just want some more common visulization components.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":816,"value":"viewof dataType = Inputs.radio([\"questions\", \"answers\", \"responders\"], {\n label: \"Data Type\",\n value: \"questions\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":819,"value":"wordCloud = {\n const { Chart, registerShape, Util } = G2;\n\n registerWordCloud(registerShape, Util);\n\n // prepare for canvas\n const container = html`

`;\n yield container;\n\n const w = 800;\n const h = 400;\n const chart = new Chart({\n container,\n autoFit: false,\n width: w,\n height: h,\n padding: 0\n });\n const data = getWordCloudData(w, h);\n\n chart.data(data);\n chart.legend(false);\n chart.axis(false);\n chart.tooltip({\n showTitle: false,\n showMarkers: false\n });\n chart.coordinate().reflect();\n chart\n .point()\n .position(\"x*y\")\n .color(\"title\", colors)\n .shape(\"cloud\")\n .tooltip(\"title\");\n\n chart.interaction(\"element-active\");\n chart.render();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1030,"value":"md`## High-Level Building Blocks`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1274,"value":"md`Now let's find the relationship between questions and philosophers, and learn a more easy way to plot charts: *high-level building blocks*.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1277,"value":"md`\n- **Questions**: What does the relationship between questions and philosophers look like?\n- **Tool**: G6 is for relationship data. The blue and pink nodes are questions nodes and the green nodes are philosophers nodes. The links connect a philosopher/school with the questions he/it answered.\n- **Insight**: One philosopher/school may be interseted in multiple questions.\n- **Issues**: The main issue for this level is that some people don't want to learn visualization at tall, they just want to draw some common and simple charts.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1036,"value":"$36","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":789,"value":"md`## Chart Template`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1282,"value":"md`Then we come to find the relationship for philosophers and experience the magic of Chart Templates.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1300,"value":"md`\n- **Questions**: What does the relationship between schools and philosophers look like?\n- **Tool**: Circle Packing from [G2Plot](https://g2plot.antv.vision).\n- **Insight**: A lot of people is interested in the the composition and change of the world.\n- **Issues**: Need human to participate in.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":948,"value":"circlePacking = {\n const container = html`

`;\n yield container;\n\n const plot = new G2Plot.CirclePacking(container, {\n width: 600,\n height: 600,\n appendPadding: 30,\n autoFit: true,\n padding: 0,\n data: getCirclePackingData(),\n colorField: 'r',\n color: 'rgb(252, 253, 191)-rgb(231, 82, 99)-rgb(183, 55, 121)',\n pointStyle: {\n stroke: 'rgb(183, 55, 121)',\n lineWidth: 0.5\n },\n label: {\n formatter: d => {\n return d.children.length === 0 ? format(d.name) : '';\n },\n offsetY: 10,\n style: {\n fontSize: 12,\n textAlign: 'center',\n fill: 'rgba(0,0,0,0.65)'\n }\n },\n hierarchyConfig: {\n padding: 0.01\n },\n legend: false\n });\n\n plot.render();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1428,"value":"md`## AVA`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1529,"value":"md`At last, we will see how to automatically plot a chart by [AVA Auto Charts](https://ava.antv.vision) and the distributions of philosophers in terms of country.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1532,"value":"md`\n- **Questions**: What is distributions of philosophers in terms of country.?\n- **Tool**: Auto Charts from AVA, which only need container and data.\n- **Insight**: Greek, Italy, England and Germany are the gradles of philosophers.\n- **Issues**: Only for some simple circumstance.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1434,"value":"AVAChart = {\n const container = html`

`;\n yield container;\n AVA.autoChart(container, getAVAData());\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1526,"value":"md`## The End`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1538,"value":"md`During this article, we now have a breif overivew of the history of philosophy and the whole architecture of AntV.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1545,"value":"md`Althougth there is no doubt about it's expressiveness, it indeed has some problems about deficiency documentation or inconsistent and unreasonable API desgin.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1550,"value":"md`So it is welcome for you to [join us](https://github.com/antvis) to make it better. Thanks for reading!`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":46,"value":"md`## Data`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":805,"value":"schools = await FileAttachment(\"schools@5.json\").json({ typed: true })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":808,"value":"questions = await FileAttachment(\"questions@4.json\").json({ typed: true })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":811,"value":"philosophers = await FileAttachment(\"philosophers@5.json\").json({ typed: true })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":940,"value":"relations = await FileAttachment(\"relations@2.csv\").csv()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":350,"value":"md`## Helpers`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":354,"value":"function extent(data, accessor) {\n return [Math.min(...data.map(accessor)), Math.max(...data.map(accessor))];\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":733,"value":"colors = [\n '#5B8FF9',\n '#5AD8A6',\n '#5D7092',\n '#F6BD16',\n '#6F5EF9',\n '#6DC8EC',\n '#945FB9',\n '#FF9845',\n '#1E9493',\n '#FF99C3'\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":867,"value":"function unique(data, key) {\n return data.filter(\n (d, index) => data.findIndex(i => key(i) === key(d)) === index\n );\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1021,"value":"function format(string, cnt = 4) {\n if (string.length <= cnt) return string;\n return string.slice(0, cnt - 1) + '...';\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1386,"value":"function rollup(data, key) {\n const map = new Map();\n for (const d of data) {\n const k = key(d);\n const v = map.get(k);\n if (v) {\n v.push(d);\n } else {\n map.set(k, [d]);\n }\n }\n return Array.from(map);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":905,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":917,"value":"registerWordCloud = function(registerShape, Util) {\n // prepare for shape : register a word cloud shape for point\n registerShape('point', 'cloud', {\n draw(cfg, container) {\n const attrs = getTextAttrs(cfg);\n const textShape = container.addShape('text', {\n attrs: {\n ...attrs,\n x: cfg.x,\n y: cfg.y\n }\n });\n if (cfg.data.rotate) {\n Util.rotate(textShape, (cfg.data.rotate * Math.PI) / 180);\n }\n return textShape;\n }\n });\n\n function getTextAttrs(cfg) {\n return {\n ...cfg.defaultStyle,\n ...cfg.style,\n fontSize: cfg.data.size,\n text: cfg.data.text,\n textAlign: 'center',\n fontFamily: cfg.data.font,\n fill: cfg.color || cfg.defaultStyle.stroke,\n textBaseline: 'Alphabetic'\n };\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":971,"value":"function getCirclePackingData() {\n const root = {\n name: '哲学家',\n children: []\n };\n\n const schoolPhilosophers = relations.filter(d => d.type === '0');\n const map = new Map();\n for (const { from, to } of schoolPhilosophers) {\n const s = schools.find(d => d.id === +from);\n const p = philosophers.find(d => d.id === +to);\n const pNode = {\n name: p.name,\n value: 1,\n children: []\n };\n const sNode = map.get(s.name);\n\n if (!sNode) {\n const newSNode = {\n name: s.name,\n children: [pNode]\n };\n map.set(s.name, newSNode);\n } else {\n sNode.children.push(pNode);\n }\n }\n\n for (const [key, value] of map) {\n if (value.children.length <= 1) {\n const node = value.children[0];\n node.name = `${node.name}: ${value.name}`;\n root.children.push(node);\n } else {\n root.children.push(value);\n }\n }\n\n return root;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1606,"value":"getCirclePackingData()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1041,"value":"function getForceGraphData() {\n const questionsPhilosophers = relations.filter(d => d.type === '1');\n const centerNode = {\n id: 'center',\n name: '永恒的问题',\n type: 'q',\n style: {\n fill: '#BDD2FD'\n }\n };\n const nodes = [centerNode];\n const edges = [];\n\n for (const { from, to } of questionsPhilosophers) {\n const q = questions.find(d => d.id === +from);\n const p = [...philosophers, ...schools].find(d => d.id === +to);\n const qNode = {\n ...q,\n id: `${q.id}`,\n type: 'q',\n style: { fill: '#BDD2FD' }\n };\n const pNode = {\n ...p,\n id: `${p.id}`,\n type: 'p',\n style: { fill: '#BDEFDB' }\n };\n addNode(nodes, qNode);\n addNode(nodes, pNode);\n\n const e1 = { source: qNode.id, target: pNode.id };\n const e2 = { source: centerNode.id, target: qNode.id };\n edges.push(e1, e2);\n }\n\n function addNode(list, node) {\n const t = list.find(d => d.id === node.id);\n if (!t) list.push(node);\n }\n\n return {\n nodes,\n edges\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1367,"value":"function getMapData() {\n return rollup(philosophers, d => d.country).map(([key, value]) => ({\n value: value.length,\n name: key,\n start: Math.min(...value.map(v => v.lifespan[0]))\n }));\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1436,"value":"function getAVAData() {\n return rollup(philosophers, d => d.country).map(([key, value]) => ({\n value: value.length,\n name: key,\n }));\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"md`## Tools`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"G2 = require(\"@antv/g2@4.0.0\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"G6 = require(\"@antv/g6@4.0.0\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":397,"value":"G = require(\"@antv/g-canvas@0.5.12\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":952,"value":"G2Plot = require('@antv/g2plot')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":501,"value":"Scale = require('@antv/scale')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":516,"value":"Coord = require('@antv/coord')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":624,"value":"DataSet = require('@antv/data-set')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1620,"value":"Adjust = import(\"@antv/adjust\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1430,"value":"AVA = require(\"@antv/chart-advisor@0.1.3-alpha.17\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W38","stdlib":"1","titling":"auto"}} 32:"$31:body"