Interactive Graphics Reporter for Hearst Connecticut Media Group
Public
Edited
Mar 28, 2023
chart = {
const root = pack(getJsonData()); // start to calculate
let focus = root;
let view;
updateLegend();
// create svg under main div
const svg = d3.create("svg")
.attr("viewBox", `-${width / 2} -${height / 2} ${width} ${height}`)
.style("display", "block")
.style("margin", "0 -14px")
.style("background", color(0))
.style("cursor", "pointer")
.on("click", (event) => zoom(event, root));
// draw circles
const node = svg.append("g")
.selectAll("circle")
.data(root.descendants().slice(1))
.join("circle")
.attr("fill", d => {
if (d.data.name_pinyin == "Local residence") {
return colorLocalResidence;
} else if (d.data.name_pinyin == "Living outside") {
return colorLivingOutside;
} else if (d.data.name_pinyin == "Pending") {
return colorPending;
} else if (d.data.name_pinyin == "Living abroad") {
return colorLivingAbroad;
} else {
return color(d.depth);
}
})
.attr("pointer-events", d => !d.children ? "none" : null)
.on("mouseover", function () { d3.select(this).attr("stroke", "#000"); })
.on("mouseout", function () { d3.select(this).attr("stroke", null); })
.on("click", (event, d) => focus !== d && (zoom(event, d), event.stopPropagation()));
// draw label for each circle
const label = svg.append("g")
.style("font", "10px sans-serif")
.attr("pointer-events", "none")
.attr("text-anchor", "middle")
.selectAll("text")
.data(root.descendants())
.join("text")
.style("fill-opacity", d => d.parent === root ? 1 : 0)
.style("display", d => d.parent === root ? "inline" : "none")
.text(d => {
if (d.data.name_pinyin == "Local residence"
|| d.data.name_pinyin == "Living outside"
|| d.data.name_pinyin == "Pending"
|| d.data.name_pinyin == "Living abroad") {
return d.data.name_pinyin + ":" + d.data.value;
} else {
return d.data.name_pinyin;
}
})
.attr("font-size","18px")
.style("fill", "#004669");
zoomTo([root.x, root.y, root.r * 2]);
function zoomTo(v) {
const k = width / v[2];
view = v;
label.attr("transform", d => `translate(${(d.x - v[0]) * k},${(d.y - v[1]) * k})`);
node.attr("transform", d => `translate(${(d.x - v[0]) * k},${(d.y - v[1]) * k})`);
node.attr("r", d => d.r * k);
}
function zoom(event, d) {
const focus0 = focus;
var focus = d;
const transition = svg.transition()
.duration(event.altKey ? 7500 : 750)
.tween("zoom", d => {
const i = d3.interpolateZoom(view, [focus.x, focus.y, focus.r * 2]);
return t => zoomTo(i(t));
});
label
.filter(function (d) { return d.parent === focus || this.style.display === "inline"; })
.transition(transition)
.style("fill-opacity", d => d.parent === focus ? 1 : 0)
.on("start", function (d) { if (d.parent === focus) this.style.display = "inline"; })
.on("end", function (d) { if (d.parent !== focus) this.style.display = "none"; });
}
return svg.node();
}
colorLivingAbroad = "hsl(0,80%,80%)";
colorPending = "hsl(160,60%,90%)";
colorLivingOutside = "hsl(89,60%,80%)";
colorLocalResidence = "hsl(238,80%,70%)";
width = 1200;
height = 1200;
function updateLegend() {
// update legend background color
var ele = document.getElementById("legendLocalResidence");
ele.style.backgroundColor = colorLocalResidence;
ele = document.getElementById("legendLivingOutside");
ele.style.backgroundColor = colorLivingOutside;
ele = document.getElementById("legendPending");
ele.style.backgroundColor = colorPending;
ele = document.getElementById("legendLivingAbroad");
ele.style.backgroundColor = colorLivingAbroad;
}
pack = data => d3.pack()
.size([width, height])
.padding(3)
(d3.hierarchy(data)
.sum(d => d.value)
.sort((a, b) => b.value - a.value));
color = d3.scaleLinear()
.domain([0, 5])
.range(["hsl(152,80%,80%)", "hsl(228,30%,40%)"])
.interpolate(d3.interpolateHcl);
function getJsonData() {
return {
name: "全国",
name_pinyin: "Nationwide",
isProvince: "false",
value: "1332810869",
children: [
{
name: "北京",
name_pinyin: "BeiJing",
isProvince: "true",
value: "19612368",
children: [
{
name: "本地居住",
name_pinyin: "Local residence",
isProvince: "false",
value: "50000",
children: []
},
{
name: "外地居住",
name_pinyin: "Living outside",
isProvince: "false",
value: "10498288",
children: []
},
{
name: "户籍待定",
name_pinyin: "Pending",
isProvince: "false",
value: "120250",
children: []
},
{
name: "国外居住",
name_pinyin: "Living abroad",
isProvince: "false",
value: "120",
children: []
}
]
},
{
name: "天津",
name_pinyin: "TianJing",
isProvince: "true",
value: "12938693",
children: [
{
name: "本地居住",
name_pinyin: "Local residence",
isProvince: "false",
value: "7912258",
children: []
},
{
name: "外地居住",
name_pinyin: "Living outside",
isProvince: "false",
value: "4952225",
children: []
},
{
name: "户籍待定",
name_pinyin: "Pending",
isProvince: "false",
value: "56773",
children: []
},
{
name: "国外居住",
name_pinyin: "Living abroad",
isProvince: "false",
value: "17437",
children: []
}
]
},
{
name: "河北",
name_pinyin: "HeBei",
isProvince: "true",
value: "71854210",
children: [
{
name: "本地居住",
name_pinyin: "Local residence",
isProvince: "false",
value: "62987340",
children: []
},
{
name: "外地居住",
name_pinyin: "Living outside",
isProvince: "false",
value: "8297279",
children: []
},
{
name: "户籍待定",
name_pinyin: "Pending",
isProvince: "false",
value: "549998",
children: []
},
{
name: "国外居住",
name_pinyin: "Living abroad",
isProvince: "false",
value: "19593",
children: []
}
]
},
{
name: "山西",
name_pinyin: "ShanXi",
isProvince: "true",
value: "35712101",
children: [
{
name: "本地居住",
name_pinyin: "Local residence",
isProvince: "false",
value: "28640978",
children: []
},
{
name: "外地居住",
name_pinyin: "Living outside",
isProvince: "false",
value: "6764665",
children: []
},
{
name: "户籍待定",
name_pinyin: "Pending",
isProvince: "false",
value: "300661",
children: []
},
{
name: "国外居住",
name_pinyin: "Living abroad",
isProvince: "false",
value: "5797",
children: []
}
]
},
{
name: "内蒙古",
name_pinyin: "NeiMengGu",
isProvince: "true",
value: "24706291",
children: [
{
name: "本地居住",
name_pinyin: "Local residence",
isProvince: "false",
value: "17389253",
children: []
},
{
name: "外地居住",
name_pinyin: "Living outside",
isProvince: "false",
value: "7170889",
children: []
},
{
name: "户籍待定",
name_pinyin: "Pending",
isProvince: "false",
value: "134459",
children: []
},
{
name: "国外居住",
name_pinyin: "Living abroad",
isProvince: "false",
value: "11690",
children: []
}
]
},
{
name: "辽宁",
name_pinyin: "LiaoNing",
isProvince: "true",
value: "43746323",
children: [
{
name: "本地居住",
name_pinyin: "Local residence",
isProvince: "false",
value: "34172463",
children: []
},
{
name: "外地居住",
name_pinyin: "Living outside",
isProvince: "false",
value: "9310058",
children: []
},
{
name: "户籍待定",
name_pinyin: "Pending",
isProvince: "false",
value: "159026",
children: []
},
{
name: "国外居住",
name_pinyin: "Living abroad",
isProvince: "false",
value: "104776",
children: []
}
]
},
{
name: "吉林",
name_pinyin: "JiLin",
isProvince: "true",
value: "27452815",
children: [
{
name: "本地居住",
name_pinyin: "Local residence",
isProvince: "false",
value: "22617333",
children: []
},
{
name: "外地居住",
name_pinyin: "Living outside",
isProvince: "false",
value: "4462177",
children: []
},
{
name: "户籍待定",
name_pinyin: "Pending",
isProvince: "false",
value: "90876",
children: []
},
{
name: "国外居住",
name_pinyin: "Living abroad",
isProvince: "false",
value: "282429",
children: []
}
]
},
{
name: "黑龙江",
name_pinyin: "HeiLongJiang",
isProvince: "true",
value: "38313991",
children: [
{
name: "本地居住",
name_pinyin: "Local residence",
isProvince: "false",
value: "32508828",
children: []
},
{
name: "外地居住",
name_pinyin: "Living outside",
isProvince: "false",
value: "5557828",
children: []
},
{
name: "户籍待定",
name_pinyin: "Pending",
isProvince: "false",
value: "123130",
children: []
},
{
name: "国外居住",
name_pinyin: "Living abroad",
isProvince: "false",
value: "124205",
children: []
}
]
},
{
name: "上海",
name_pinyin: "ShangHai",
isProvince: "true",
value: "23019196",
children: [
{
name: "本地居住",
name_pinyin: "Local residence",
isProvince: "false",
value: "10142052",
children: []
},
{
name: "外地居住",
name_pinyin: "Living outside",
isProvince: "false",
value: "12685316",
children: []
},
{
name: "户籍待定",
name_pinyin: "Pending",
isProvince: "false",
value: "75231",
children: []
},
{
name: "国外居住",
name_pinyin: "Living abroad",
isProvince: "false",
value: "116597",
children: []
}
]
},
{
name: "江苏",
name_pinyin: "JiangSu",
isProvince: "true",
value: "78660941",
children: [
{
name: "本地居住",
name_pinyin: "Local residence",
isProvince: "false",
value: "59693914",
children: []
},
{
name: "外地居住",
name_pinyin: "Living outside",
isProvince: "false",
value: "18226819",
children: []
},
{
name: "户籍待定",
name_pinyin: "Pending",
isProvince: "false",
value: "597379",
children: []
},
{
name: "国外居住",
name_pinyin: "Living abroad",
isProvince: "false",
value: "142829",
children: []
}
]
},
{
name: "浙江",
name_pinyin: "ZheJiang",
isProvince: "true",
value: "54426891",
children: [
{
name: "本地居住",
name_pinyin: "Local residence",
isProvince: "false",
value: "33976850",
children: []
},
{
name: "外地居住",
name_pinyin: "Living outside",
isProvince: "false",
value: "19900863",
children: []
},
{
name: "户籍待定",
name_pinyin: "Pending",
isProvince: "false",
value: "383252",
children: []
},
{
name: "国外居住",
name_pinyin: "Living abroad",
isProvince: "false",
value: "165926",
children: []
}
]
},
{
name: "安徽",
name_pinyin: "AnHui",
isProvince: "true",
value: "59500468",
children: [
{
name: "本地居住",
name_pinyin: "Local residence",
isProvince: "false",
value: "51501605",
children: []
},
{
name: "外地居住",
name_pinyin: "Living outside",
isProvince: "false",
value: "7100608",
children: []
},
{
name: "户籍待定",
name_pinyin: "Pending",
isProvince: "false",
value: "873043",
children: []
},
{
name: "国外居住",
name_pinyin: "Living abroad",
isProvince: "false",
value: "25212",
children: []
}
]
},
{
name: "福建",
name_pinyin: "FuJian",
isProvince: "true",
value: "36894217",
children: [
{
name: "本地居住",
name_pinyin: "Local residence",
isProvince: "false",
value: "24864626",
children: []
},
{
name: "外地居住",
name_pinyin: "Living outside",
isProvince: "false",
value: "11074525",
children: []
},
{
name: "户籍待定",
name_pinyin: "Pending",
isProvince: "false",
value: "587028",
children: []
},
{
name: "国外居住",
name_pinyin: "Living abroad",
isProvince: "false",
value: "368038",
children: []
}
]
},
{
name: "江西",
name_pinyin: "JiangXi",
isProvince: "true",
value: "44567797",
children: [
{
name: "本地居住",
name_pinyin: "Local residence",
isProvince: "false",
value: "38468867",
children: []
},
{
name: "外地居住",
name_pinyin: "Living outside",
isProvince: "false",
value: "5302276",
children: []
},
{
name: "户籍待定",
name_pinyin: "Pending",
isProvince: "false",
value: "785230",
children: []
},
{
name: "国外居住",
name_pinyin: "Living abroad",
isProvince: "false",
value: "11424",
children: []
}
]
},
{
name: "山东",
name_pinyin: "ShanDong",
isProvince: "true",
value: "95792719",
children: [
{
name: "本地居住",
name_pinyin: "Local residence",
isProvince: "false",
value: "81179825",
children: []
},
{
name: "外地居住",
name_pinyin: "Living outside",
isProvince: "false",
value: "13698321",
children: []
},
{
name: "户籍待定",
name_pinyin: "Pending",
isProvince: "false",
value: "814595",
children: []
},
{
name: "国外居住",
name_pinyin: "Living abroad",
isProvince: "false",
value: "99978",
children: []
}
]
},
{
name: "河南",
name_pinyin: "HeNan",
isProvince: "true",
value: "94029939",
children: [
{
name: "本地居住",
name_pinyin: "Local residence",
isProvince: "false",
value: "83362187",
children: []
},
{
name: "外地居住",
name_pinyin: "Living outside",
isProvince: "false",
value: "9764067",
children: []
},
{
name: "户籍待定",
name_pinyin: "Pending",
isProvince: "false",
value: "867230",
children: []
},
{
name: "国外居住",
name_pinyin: "Living abroad",
isProvince: "false",
value: "36455",
children: []
}
]
},
{
name: "湖北",
name_pinyin: "HuBei",
isProvince: "true",
value: "57237727",
children: [
{
name: "本地居住",
name_pinyin: "Local residence",
isProvince: "false",
value: "47349628",
children: []
},
{
name: "外地居住",
name_pinyin: "Living outside",
isProvince: "false",
value: "9250228",
children: []
},
{
name: "户籍待定",
name_pinyin: "Pending",
isProvince: "false",
value: "610599",
children: []
},
{
name: "国外居住",
name_pinyin: "Living abroad",
isProvince: "false",
value: "27272",
children: []
}
]
},
{
name: "湖南",
name_pinyin: "HuNan",
isProvince: "true",
value: "65700762",
children: [
{
name: "本地居住",
name_pinyin: "Local residence",
isProvince: "false",
value: "57153579",
children: []
},
{
name: "外地居住",
name_pinyin: "Living outside",
isProvince: "false",
value: "7898815",
children: []
},
{
name: "户籍待定",
name_pinyin: "Pending",
isProvince: "false",
value: "628595",
children: []
},
{
name: "国外居住",
name_pinyin: "Living abroad",
isProvince: "false",
value: "19773",
children: []
}
]
},
{
name: "广东",
name_pinyin: "GuangDong",
isProvince: "true",
value: "104320459",
children: [
{
name: "本地居住",
name_pinyin: "Local residence",
isProvince: "false",
value: "65828074",
children: []
},
{
name: "外地居住",
name_pinyin: "Living outside",
isProvince: "false",
value: "36806649",
children: []
},
{
name: "户籍待定",
name_pinyin: "Pending",
isProvince: "false",
value: "1537199",
children: []
},
{
name: "国外居住",
name_pinyin: "Living abroad",
isProvince: "false",
value: "148537",
children: []
}
]
},
{
name: "广西",
name_pinyin: "GuangXi",
isProvince: "true",
value: "46023761",
children: [
{
name: "本地居住",
name_pinyin: "Local residence",
isProvince: "false",
value: "38793142",
children: []
},
{
name: "外地居住",
name_pinyin: "Living outside",
isProvince: "false",
value: "6291811",
children: []
},
{
name: "户籍待定",
name_pinyin: "Pending",
isProvince: "false",
value: "914848",
children: []
},
{
name: "国外居住",
name_pinyin: "Living abroad",
isProvince: "false",
value: "23960",
children: []
}
]
},
{
name: "海南",
name_pinyin: "HaiNan",
isProvince: "true",
value: "8671485",
children: [
{
name: "本地居住",
name_pinyin: "Local residence",
isProvince: "false",
value: "6661050",
children: []
},
{
name: "外地居住",
name_pinyin: "Living outside",
isProvince: "false",
value: "1843430",
children: []
},
{
name: "户籍待定",
name_pinyin: "Pending",
isProvince: "false",
value: "159072",
children: []
},
{
name: "国外居住",
name_pinyin: "Living abroad",
isProvince: "false",
value: "7933",
children: []
}
]
},
{
name: "重庆",
name_pinyin: "ChongQing",
isProvince: "true",
value: "28846170",
children: [
{
name: "本地居住",
name_pinyin: "Local residence",
isProvince: "false",
value: "23167091",
children: []
},
{
name: "外地居住",
name_pinyin: "Living outside",
isProvince: "false",
value: "5440776",
children: []
},
{
name: "户籍待定",
name_pinyin: "Pending",
isProvince: "false",
value: "229682",
children: []
},
{
name: "国外居住",
name_pinyin: "Living abroad",
isProvince: "false",
value: "8621",
children: []
}
]
},
{
name: "四川",
name_pinyin: "SiChuan",
isProvince: "true",
value: "80417528",
children: [
{
name: "本地居住",
name_pinyin: "Local residence",
isProvince: "false",
value: "67887450",
children: []
},
{
name: "外地居住",
name_pinyin: "Living outside",
isProvince: "false",
value: "11735152",
children: []
},
{
name: "户籍待定",
name_pinyin: "Pending",
isProvince: "false",
value: "766368",
children: []
},
{
name: "国外居住",
name_pinyin: "Living abroad",
isProvince: "false",
value: "28558",
children: []
}
]
},
{
name: "贵州",
name_pinyin: "GuiZhou",
isProvince: "true",
value: "34748556",
children: [
{
name: "本地居住",
name_pinyin: "Local residence",
isProvince: "false",
value: "29403067",
children: []
},
{
name: "外地居住",
name_pinyin: "Living outside",
isProvince: "false",
value: "4629542",
children: []
},
{
name: "户籍待定",
name_pinyin: "Pending",
isProvince: "false",
value: "711251",
children: []
},
{
name: "国外居住",
name_pinyin: "Living abroad",
isProvince: "false",
value: "4696",
children: []
}
]
},
{
name: "云南",
name_pinyin: "YunNan",
isProvince: "true",
value: "45966766",
children: [
{
name: "本地居住",
name_pinyin: "Local residence",
isProvince: "false",
value: "39295800",
children: []
},
{
name: "外地居住",
name_pinyin: "Living outside",
isProvince: "false",
value: "6053805",
children: []
},
{
name: "户籍待定",
name_pinyin: "Pending",
isProvince: "false",
value: "578461",
children: []
},
{
name: "国外居住",
name_pinyin: "Living abroad",
isProvince: "false",
value: "38700",
children: []
}
]
},
{
name: "西藏",
name_pinyin: "XiZang",
isProvince: "true",
value: "3002165",
children: [
{
name: "本地居住",
name_pinyin: "Local residence",
isProvince: "false",
value: "2691210",
children: []
},
{
name: "外地居住",
name_pinyin: "Living outside",
isProvince: "false",
value: "262005",
children: []
},
{
name: "户籍待定",
name_pinyin: "Pending",
isProvince: "false",
value: "48587",
children: []
},
{
name: "国外居住",
name_pinyin: "Living abroad",
isProvince: "false",
value: "363",
children: []
}
]
},
{
name: "陕西",
name_pinyin: "ShanXi",
isProvince: "true",
value: "37327379",
children: [
{
name: "本地居住",
name_pinyin: "Local residence",
isProvince: "false",
value: "31180416",
children: []
},
{
name: "外地居住",
name_pinyin: "Living outside",
isProvince: "false",
value: "5894416",
children: []
},
{
name: "户籍待定",
name_pinyin: "Pending",
isProvince: "false",
value: "241379",
children: []
},
{
name: "国外居住",
name_pinyin: "Living abroad",
isProvince: "false",
value: "11168",
children: []
}
]
},
{
name: "甘肃",
name_pinyin: "GanSu",
isProvince: "true",
value: "25575263",
children: [
{
name: "本地居住",
name_pinyin: "Local residence",
isProvince: "false",
value: "22191912",
children: []
},
{
name: "外地居住",
name_pinyin: "Living outside",
isProvince: "false",
value: "3112722",
children: []
},
{
name: "户籍待定",
name_pinyin: "Pending",
isProvince: "false",
value: "267420",
children: []
},
{
name: "国外居住",
name_pinyin: "Living abroad",
isProvince: "false",
value: "3209",
children: []
}
]
},
{
name: "青海",
name_pinyin: "QingHai",
isProvince: "true",
value: "5626723",
children: [
{
name: "本地居住",
name_pinyin: "Local residence",
isProvince: "false",
value: "4418430",
children: []
},
{
name: "外地居住",
name_pinyin: "Living outside",
isProvince: "false",
value: "1140954",
children: []
},
{
name: "户籍待定",
name_pinyin: "Pending",
isProvince: "false",
value: "66097",
children: []
},
{
name: "国外居住",
name_pinyin: "Living abroad",
isProvince: "false",
value: "1242",
children: []
}
]
},
{
name: "宁夏",
name_pinyin: "NingXia",
isProvince: "true",
value: "6301350",
children: [
{
name: "本地居住",
name_pinyin: "Local residence",
isProvince: "false",
value: "4691550",
children: []
},
{
name: "外地居住",
name_pinyin: "Living outside",
isProvince: "false",
value: "1534482",
children: []
},
{
name: "户籍待定",
name_pinyin: "Pending",
isProvince: "false",
value: "74218",
children: []
},
{
name: "国外居住",
name_pinyin: "Living abroad",
isProvince: "false",
value: "1100",
children: []
}
]
},
{
name: "新疆",
name_pinyin: "XinJiang",
isProvince: "true",
value: "21815815",
children: [
{
name: "本地居住",
name_pinyin: "Local residence",
isProvince: "false",
value: "17087295",
children: []
},
{
name: "外地居住",
name_pinyin: "Living outside",
isProvince: "false",
value: "4276951",
children: []
},
{
name: "户籍待定",
name_pinyin: "Pending",
isProvince: "false",
value: "412498",
children: []
},
{
name: "国外居住",
name_pinyin: "Living abroad",
isProvince: "false",
value: "39071",
children: []
}
]
}
]
};
}
d3 = require("d3@6")
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
