30:[{"id":"817cf484569f559fddbd703f010e669bacb4c2cb8c4c99853fd37706eaf4f6219e880aec97b72c64cb1dd99f35f5b10a92049f02c724cfae25249c24e9dda9f6","href":"https://static.observableusercontent.com/files/817cf484569f559fddbd703f010e669bacb4c2cb8c4c99853fd37706eaf4f6219e880aec97b72c64cb1dd99f35f5b10a92049f02c724cfae25249c24e9dda9f6","name":"API_NY.GDP.MKTP.CD_DS2_zh_csv_v2_2165131.csv","type":"text/csv","lastModified":1616995621907.299,"size":257330}] 2e:{"title":"GDP History","cells":[{"id":0,"value":"md`# GDP History`","pinned":false,"hidden":false,"mode":"ojs"},{"id":44,"value":"md`## Visualization`","pinned":false,"hidden":false,"mode":"ojs"},{"id":102,"value":"md`### Show Multiple Countries`","pinned":false,"hidden":false,"mode":"ojs"},{"id":105,"value":"function displayCountryGDP(containerID, countries, title) {\n removeAllChildNodesByID(containerID); // Remove old canvas or svg\n\n const data = composeByCountry(countries);\n\n const chart = new G2.Chart({\n container: containerID,\n autoFit: true,\n height: 400\n });\n\n chart.data(data);\n chart.scale({\n year: {\n range: [0, 1]\n },\n gdp: {\n min: 0,\n nice: true\n }\n });\n\n chart.tooltip({\n showCrosshairs: true,\n shared: true,\n });\n chart.line().position('year*gdp').color('country').shape('smooth');\n chart\n .point()\n .position('year*gdp')\n .color('country')\n .size(4)\n .shape('circle')\n\n chart.render();\n\n return md`### ${title}`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":50,"value":"displayCountryGDP('gdp-china', [\"中国\"], \"China\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":45,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":66,"value":"displayCountryGDP(\"gdp-japan\", [\"中国\", \"日本\", \"印度\"], \"Japan & India\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":63,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":122,"value":"displayCountryGDP(\"gdp-united\", [\"中国\", \"美国\", \"英国\", \"法国\"], \"United Nations\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":116,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":144,"value":"displayCountryGDP(\"gdp-europe\", [\"德国\", \"英国\", \"法国\", \"意大利\", \"荷兰\", \"西班牙\", \"瑞典\", \"希腊\"], \"Europe\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":142,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":132,"value":"displayCountryGDP(\"gdp-golden\", [\"墨西哥\", \"印度\", \"南非\", \"阿根廷\", \"土耳其\"], \"Golden\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":129,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"md`## Load Data`","pinned":false,"hidden":false,"mode":"ojs"},{"id":69,"value":"md`### Original Data`","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"Origin = await FileAttachment(\"API_NY.GDP.MKTP.CD_DS2_zh_csv_v2_2165131.csv\").text()","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"GDP = {\n let gdp = {};\n \n const countries = Origin.replaceAll('\"\"', '0').replaceAll('\"', '').split('\\r\\n').splice(5)\n countries.forEach(item => {\n const c = item.split(',')\n\n gdp[c[0]] = c.splice(4, 60).map((n, i) => {\n return {\n year: `${1960+i}`,\n gdp: parseFloat(n) / 100000000\n }\n })\n })\n\n return gdp\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":72,"value":"md`### Compose`","pinned":false,"hidden":false,"mode":"ojs"},{"id":75,"value":"function composeByCountry(countries) {\n let data = []\n \n countries.forEach(country => {\n if (!GDP[country]) {\n return\n }\n\n GDP[country].forEach(item => data.push({\n country,\n ...item\n }))\n })\n\n return data\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":86,"value":"md`#### Test`","pinned":false,"hidden":false,"mode":"ojs"},{"id":87,"value":"composeByCountry([\"中国\", \"日本\"])","pinned":false,"hidden":false,"mode":"ojs"},{"id":35,"value":"md`## Import`","pinned":false,"hidden":false,"mode":"ojs"},{"id":36,"value":"G2 = require('@antv/g2')","pinned":false,"hidden":false,"mode":"ojs"},{"id":40,"value":"function removeAllChildNodesByID(id) {\n const parent = document.querySelector(`#${id}`);\n while (parent.firstChild) {\n parent.removeChild(parent.firstChild);\n }\n}","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W30","stdlib":"1","titling":"auto"}