30:T4d4,chart = { const svg = d3 .create("svg") .attr("viewBox", [0, 0, width, height]) // .style("width", "100%") // .style("height", "auto"); const tooltip = d3.select("body") .append("div") .style("position", "absolute") .style("z-index", "10") .style("visibility", "hidden") .attr("class", "tooltip") svg.append("g") .attr("transform", "translate(10,20)") .append(() => legend({color: colorScale, title: 'Male/Female Ratio of Age '+ages[step]+' in 2010' , tickFormat: "+%"})); svg.append("g") .selectAll("path") .attr("class", "province") .data(provinces) .join("path") .attr("fill", d => colorScale(data.get(d.properties.NAME)-1) || '#dddddd') .attr("stroke", strokeColor) .attr("stroke-width", strokeWidth) .attr("d", path) .on("mousemove", (e,d) => { tooltip.style("visibility", "visible") .style("top", (e.pageY-20)+"px").style("left",(e.pageX+20)+"px") .html(`${d.properties.NAME}:${d3.format(",.2f")(d.properties.male/d.properties.female)}
male: ${d.properties.male}
female: ${d.properties.female}`) }) .on("mouseleave", () => {tooltip.style("visibility", "hidden")}); return svg.node(); }31:T6fd,population_bubble = { const svg = d3 .create("svg") .attr("viewBox", [0, 0, width, height]) .style("width", "100%") .style("height", "auto"); const tooltip = d3.select("body") .append("div") .style("position", "absolute") .style("z-index", "10") .style("visibility", "hidden") .attr("class", "tooltip") const path = d3.geoPath(projection); svg.append("g") .selectAll("path") .data(provinces) .join("path") .attr("stroke", strokeColor) .attr("fill", "#dddddd") .attr("stroke-width", strokeWidth) .attr("d", path) svg.append("g") .selectAll("circle") // .data(provinces) .data(spreadProvinces) .enter().append("circle") .attr("cx", d => d.properties.centroid ? d.properties.centroid[0] : 0) .attr("cy", d => d.properties.centroid ? d.properties.centroid[1] : 0) // .attr("cx", d=>d.x) // .attr("cy", d=>d.y) .attr("r", d => d.properties.radius) .attr("fill", d => colorScale(data.get(d.properties.NAME)-1) || 'none') .on("mousemove", (e,d) => { tooltip.style("visibility", "visible") .style("top", (e.pageY-20)+"px").style("left",(e.pageX+20)+"px") .html(`${d.properties.NAME}:${d3.format(",.2f")(d.properties.male/d.properties.female)}
male: ${d.properties.male}
female: ${d.properties.female}`) }) .on("mouseleave", () => {tooltip.style("visibility", "hidden")}); svg.append("g") .attr("transform", "translate(10,20)") .append(() => legend({color: colorScale, title: 'Male/Female Ratio of Age '+ages[step]+' in 2010', tickFormat: "+%"})); svg.append("g") .attr("transform", "translate(10,100)") .call(legendPopulation); return svg.node(); }32:[{"id":"5645b0f3609b8198b5c785604bcdf080cbe18d81054f703eecdfa5c0082fe35c4336cd3e06da516b8a2300ad03039e63bfb27ead785299dd0707af540464bf18","href":"https://static.observableusercontent.com/files/5645b0f3609b8198b5c785604bcdf080cbe18d81054f703eecdfa5c0082fe35c4336cd3e06da516b8a2300ad03039e63bfb27ead785299dd0707af540464bf18","name":"China_adm-1.json","type":"application/json","lastModified":1613656128707.291,"size":2367506},{"id":"d75db621118699b4249a2180151638c21ac8f8e053c0576c3f8c77f8b17a8749512240954ac5426659b4798f564b9986942c5defc737f368938180b54b44ef77","href":"https://static.observableusercontent.com/files/d75db621118699b4249a2180151638c21ac8f8e053c0576c3f8c77f8b17a8749512240954ac5426659b4798f564b9986942c5defc737f368938180b54b44ef77","name":"total_gender@4.csv","type":"text/csv","lastModified":1613728639372.429,"size":18788}] 2e:{"title":"Gender Ratio of China","cells":[{"id":17,"value":"md`# Gender Ratio of China`","pinned":true,"hidden":false,"mode":"ojs"},{"id":31,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":536,"value":"html`\n

Age groups

\n\n ${d3.range(steps).map(d => html`\n \n`)}\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":661,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":360,"value":"viewof scale = select({\n title: \"Choose Color Scale\",\n options: [\"divering\", \"divergingSqrt\"]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":346,"value":"divergingScale = d3.scaleDiverging([-0.2, 0, 0.2], d3.interpolateRdBu)\n// same as d3.scaleSequential\n// sequentialScale = d3.scaleSequential([-0.1, 0.1], d3.interpolateRdBu)","pinned":false,"hidden":false,"mode":"ojs"},{"id":354,"value":"legend({\n color: divergingScale,\n title: \"Diverging scale\",\n tickFormat: \"+%\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":904,"value":"d3.interpolateRdBu(0)","pinned":true,"hidden":false,"mode":"ojs"},{"id":473,"value":"divergingSqrtScale = d3.scaleDivergingSqrt([-0.2, 0, 0.2], d3.interpolateRdBu)","pinned":false,"hidden":false,"mode":"ojs"},{"id":471,"value":"legend({\n color: divergingSqrtScale,\n title: \"Diverging Square Root\",\n tickFormat: \"+%\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":517,"value":"colorScale = {\n switch (scale){\n case 'diverging':\n default:\n return divergingScale\n case 'divergingSqrt':\n return divergingSqrtScale\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":58,"value":"viewof strokeWidth = slider({min: 0, max:1, step:0.1, title: \"Stroke width:\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":75,"value":"viewof strokeColor = color({\n value: \"#f3f3f3\",\n title: \"Stroke Color\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":27,"value":"// viewof height = slider({min: \"150\", max: 700, step:10, title: \"height:\"})\nheight = 600","pinned":true,"hidden":false,"mode":"ojs"},{"id":592,"value":"viewof step = Range([0, steps], {step: 1})","pinned":true,"hidden":false,"mode":"ojs"},{"id":597,"value":"steps = 10","pinned":true,"hidden":false,"mode":"ojs"},{"id":161,"value":"md`## Utils`","pinned":true,"hidden":false,"mode":"ojs"},{"id":695,"value":"spreadProvinces = applySimulation(provinces)","pinned":true,"hidden":false,"mode":"ojs"},{"id":666,"value":"provinces = china_p.features.map(province => {\n const place = filteredData.find(p => p.place === province.properties.NAME)\n \n return {\n ...province,\n properties: {\n ...province.properties,\n male: place ? place.male: 0 ,\n female: place ? place.female: 0,\n centroid: projection(turf.centroid(province.geometry).geometry.coordinates),\n radius: place ? radiusScale((+place.female) + (+place.male)) : 0\n }\n }\n})\n.filter(c => c.properties.centroid)\n.sort((a,b) => a.properties.centroid[0] < b.properties.centroid[0] ? -1 : 1)\n.map((d, i) => {\n let geometry;\n if (d.geometry.type !== \"MultiPolygon\") { \n geometry = d.geometry\n } else {\n geometry = {\n type: d.geometry.type,\n coordinates: d.geometry.coordinates.sort((a,b) => \n turf.area(turf.polygon(a)) > turf.area(turf.polygon(b)) ? -1 : 1\n ).slice(0, 1)\n }\n }\n return {\n ...d, \n rank: i, \n geometry\n }\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":771,"value":"populationMax = d3.max(filteredData, d => d.female + d.male)\n","pinned":true,"hidden":false,"mode":"ojs"},{"id":449,"value":"filteredData = allData\n .filter(d => \"\"+d.age===ages[step])","pinned":true,"hidden":false,"mode":"ojs"},{"id":679,"value":"radiusScale = d3.scaleLinear()\n .domain([0, populationMax])\n .range([1, 20]) ","pinned":false,"hidden":false,"mode":"ojs"},{"id":677,"value":"nodePadding = 0.1","pinned":false,"hidden":false,"mode":"ojs"},{"id":675,"value":"applySimulation = (nodes) => {\n const simulation = d3.forceSimulation(nodes)\n .force(\"x\", d3.forceX(width / 2))\n .force(\"y\", d3.forceY(height / 2))\n // .force(\"collide\", d3.forceCollide().radius(d => d.r + 1))\n // .force(\"cx\", d3.forceX().x(d => width / 2).strength(0.02))\n // .force(\"cy\", d3.forceY().y(d => height / 2).strength(0.02))\n // .force(\"x\", d3.forceX().x(d => d.properties.centroid ? d.properties.centroid[0] : 0).strength(0.3))\n // .force(\"y\", d3.forceY().y(d => d.properties.centroid ? d.properties.centroid[1] : 0).strength(0.3))\n .force(\"charge\", d3.forceManyBody().strength(-1))\n .force(\"collide\", d3.forceCollide().radius(d => d.properties.radius + nodePadding).strength(1))\n .stop()\n\n let i = 0; \n while (simulation.alpha() > 0.01 && i < 200) {\n simulation.tick(); \n i++;\n // console.log(`${Math.round(100*i/200)}%`)\n }\n\n return simulation.nodes();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":164,"value":"// projection = d3.geoTransverseMercator().rotate([-110,0]).fitExtent([[65, 80], [width, height]], china_p);\n// projection = d3.geoAzimuthalEqualArea()\n// .rotate([-110, -40])\n// .scale(height)\nprojection = d3.geoMercator()\n .center([110, 40])\n .scale([height]);","pinned":true,"hidden":false,"mode":"ojs"},{"id":168,"value":"path = d3.geoPath(projection)","pinned":true,"hidden":false,"mode":"ojs"},{"id":544,"value":"function set(input, value) {\n input.value = value;\n input.dispatchEvent(new CustomEvent(\"input\"));\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":768,"value":"// Create a legend generator like so:\nlegendPopulation = legendCircle()\n .scale(radiusScale)\n .tickValues([populationMax * 0.1, populationMax * 0.5, populationMax])\n .tickFormat((d, i, e) => d3.format(\",.1f\")(d/1000000) + \"M\")\n .tickSize(10); // defaults to 5","pinned":true,"hidden":false,"mode":"ojs"},{"id":867,"value":"xMale = d3.scaleLinear()\n .domain([0, d3.max(aggregateList.filter(d => d.gender =='male'), d => d.value)])\n .rangeRound([width / 2, 10])","pinned":true,"hidden":false,"mode":"ojs"},{"id":869,"value":"xFemale = d3.scaleLinear()\n .domain([0, d3.max(aggregateList.filter(d => d.gender =='female'), d => d.value)])\n .rangeRound([width / 2, width -10])","pinned":true,"hidden":false,"mode":"ojs"},{"id":871,"value":"y = d3.scaleBand()\n .domain(aggregateList.map(d => d.age))\n .rangeRound([height - 10, 10])\n .padding(0.1)","pinned":true,"hidden":false,"mode":"ojs"},{"id":818,"value":"style = html`\n\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":912,"value":"pyramidChart = {\n const svg = d3.create(\"svg\")\n .attr(\"viewBox\", [0, 0, width, height])\n .attr(\"font-family\", \"sans-serif\")\n .attr(\"font-size\", 10);\n\n \n svg.append(\"g\")\n .selectAll(\"rect\")\n .data(aggregateList)\n .join(\"rect\")\n .attr(\"fill\", d => d3.schemeSet1[d.gender === \"male\" ? 1 : 0])\n .attr(\"x\", d => d.gender === \"male\" ? xMale(d.value) : xFemale(0))\n .attr(\"y\", d => y(d.age))\n .attr(\"width\", d => d.gender === \"male\" ? xMale(0) - xMale(d.value) : xFemale(d.value) - xFemale(0))\n .attr(\"height\", y.bandwidth());\n\n return svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":0,"value":"md`## Data\nsource: [www.stats.gov.cn](www.stats.gov.cn/tjsj/pcsj/rkpc/6rp/indexch.htm)\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":624,"value":"data = new Map(filteredData.map(({place, male, female}) => ([place, male/female])))","pinned":true,"hidden":false,"mode":"ojs"},{"id":859,"value":"aggregateList = {\n let list = []\n Object.keys(aggregateData.get(\"all\")).forEach((gender) => {\n Array.from(aggregateData, ([key, value]) => ({key: \"\"+key, value}))\n .filter(d => d.key!='all')\n .forEach((d) => {\n list.push({\n age: d.key,\n gender,\n value: d.value[gender]\n })\n })\n })\n return list;\n}\n","pinned":true,"hidden":false,"mode":"ojs"},{"id":845,"value":"aggregateData = d3.rollup(allData, v => ({male: d3.sum(v, d=> d.male), female: d3.sum(v, d=> d.female)}), d => d.age)","pinned":true,"hidden":false,"mode":"ojs"},{"id":704,"value":"allData = d3.csvParse(await FileAttachment(\"total_gender@4.csv\").text(), d3.autoType)","pinned":true,"hidden":false,"mode":"ojs"},{"id":565,"value":"ageMap = (index) => ages[index]","pinned":true,"hidden":false,"mode":"ojs"},{"id":552,"value":"ages = [...new Set(d3.csvParse(await FileAttachment(\"total_gender@4.csv\").text(), ({age}) => (age)))]","pinned":true,"hidden":false,"mode":"ojs"},{"id":157,"value":"china_p = topojson.feature(china_geo, china_geo.objects.China_adm)","pinned":true,"hidden":false,"mode":"ojs"},{"id":13,"value":"china_geo = FileAttachment(\"China_adm-1.json\").json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"md`## Library`","pinned":true,"hidden":false,"mode":"ojs"},{"id":155,"value":"topojson = require(\"topojson-client@3\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":8,"value":"d3 = require(\"d3@6\", \"d3-geo-projection@2\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":670,"value":"turf = require(\"@turf/turf@5\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":764,"value":"import { legendCircle } from \"@harrystevens/circle-legend\";","pinned":true,"hidden":false,"mode":"ojs"},{"id":292,"value":"import {legend} from \"@d3/color-legend\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":10,"value":"import {slider, radio, text, select, color} from '@jashkenas/inputs'","pinned":true,"hidden":false,"mode":"ojs"},{"id":546,"value":"import {Input, Button, Range, bind, html} from \"@observablehq/inputs\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":95,"value":"md`## Reference\n* https://observablehq.com/@d3/diverging-scales\n* https://observablehq.com/@harrystevens/circle-legend\n`","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}