mappings = await d3.json("https://raw.githubusercontent.com/hongtaoh/ChineseMenData/refs/heads/main/data/mappings.json");
import {interval} from '@mootari/range-slider'
result_block =
html`<div class="grid grid-cols-2">
<!-- Card 1 -->
<div class="card" style="padding: 16px; background: white; border-radius: 8px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); font-size: 1em; line-height: 1.5;">
<p>
每 <strong>「一百万」</strong> 中国男性中有:
<span style="font-size: 1.5em; color: #FF4B4B; font-weight: bold;">
${Math.round(total_perc * 1_000_000).toLocaleString()}
</span> 人符合你的择偶要求，比例为 <strong style="font-size: 1.5em; color: #FF4B4B; font-weight: bold;">${(total_perc * 100).toFixed(2)}%</strong>
</p>
<p style="color: #666;">
全国约 <strong>7亿</strong> 男性中，大约有:
<span style="font-size: 1.2em; color: #FF4B4B; font-weight: bold;">
${Math.round(700_000_000 * total_perc).toLocaleString()}
</span> 人符合你的要求
</p>
</div>
<!-- Card 2 -->
<div class="card" style="padding: 16px; background: white; border-radius: 8px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); font-size: 1em; line-height: 1.5;">
<p>
在你所选择的 <strong>${age[0]}-${age[1]}</strong> 岁年龄段中，每 <strong>「一百万」</strong> 中国男性中有:
<span style="font-size: 1.5em; color: #FF4B4B; font-weight: bold;">
${Math.round(age_range_perc * 1_000_000).toLocaleString()}
</span> 人符合你的择偶要求，比例为 <strong style="font-size: 1.5em; color: #FF4B4B; font-weight: bold;">${(age_range_perc * 100).toFixed(2)}%</strong>。<span style="color: #666;">这个比例仅考虑了你选择的年龄段内的男性。</span>
</p>
</div>
`
viewof age = interval([0, 99], {
step: 1,
value: [18, 45],
label: '年龄',
})
viewof height = interval([150, 200], {
step: 1,
value: [150, 200],
label: '身高 (厘米)',
})
viewof education = Inputs.select(Object.keys(mappings.mappings.education), { label: "最低学历" });
viewof face_score = Inputs.range([1, 5], { label: "最低颜值", step: 1, value:1 });
viewof humor_score = Inputs.range([1, 5], { label: "最低幽默指数", step: 1, value:1 });
viewof sex_attract_score = Inputs.range([1, 5], { label: "最低性吸引力", step: 1, value: 1 });
viewof body_score = Inputs.range([1, 5], { label: "最低身材指数", step: 1, value: 1 });
viewof income = Inputs.select(
Object.keys(mappings.mappings.income),
{ label: "最低个人年收入", value: "<5万" }
);
viewof personal_assets = Inputs.select(
Object.keys(mappings.mappings.personal_assets),
{ label: "最低个人总资产", value: "<10万" }
);
viewof marital_status = Inputs.checkbox(Object.keys(mappings.mappings.marital_status), { label: "婚姻现状", value: Object.keys(mappings.mappings.marital_status) });
viewof hometown = Inputs.checkbox(Object.keys(mappings.mappings.current_location), { label: "目前所在地", value: Object.keys(mappings.mappings.current_location) });
viewof current_location = Inputs.checkbox(Object.keys(mappings.mappings.hometown), { label: "家庭所在地", value: Object.keys(mappings.mappings.hometown) });
viewof property_status = Inputs.checkbox(Object.keys(mappings.mappings.property_status), { label: "房产情况", value: Object.keys(mappings.mappings.property_status) });
viewof smoking_habit = Inputs.checkbox(Object.keys(mappings.mappings.smoking_habit), { label: "抽烟习惯", value: Object.keys(mappings.mappings.smoking_habit)});
viewof drinking_habit = Inputs.checkbox(Object.keys(mappings.mappings.drinking_habit), { label: "饮酒习惯", value: Object.keys(mappings.mappings.drinking_habit) });
viewof vision = Inputs.checkbox(Object.keys(mappings.mappings.vision), { label: "视力情况", value: Object.keys(mappings.mappings.vision) });
viewof health_status = Inputs.checkbox(Object.keys(mappings.mappings.health_status), { label: "健康状况", value: Object.keys(mappings.mappings.health_status) });
viewof religion = Inputs.checkbox(Object.keys(mappings.mappings.religion), { label: "宗教信仰", value: Object.keys(mappings.mappings.religion) });
filtered_data = data.filter(
d =>
// 连续变量筛选：年龄和身高
d.age >= age[0] && d.age <= age[1] &&
d.height >= height[0] && d.height <= height[1] &&
// 有序变量筛选
d.education >= mappings.mappings.education[education] &&
d.income >= mappings.mappings.income[income] &&
d.personal_assets >= mappings.mappings.personal_assets[personal_assets] &&
d.face_score >= face_score - 1 && // Face score 映射到 0-4
d.humor_score >= humor_score - 1 && // Humor score 映射到 0-4
d.sex_attract_score >= sex_attract_score - 1 && // Sex attractiveness 映射到 0-4
d.body_score >= body_score - 1 &&// Body score 映射到 0-4
// 分类变量筛选（将用户选择映射为数值后匹配）
marital_status.map(value => mappings.mappings.marital_status[value]).includes(d.marital_status) &&
hometown.map(value => mappings.mappings.hometown[value]).includes(d.hometown) &&
current_location.map(value => mappings.mappings.current_location[value]).includes(d.current_location) &&
property_status.map(value => mappings.mappings.property_status[value]).includes(d.property_status) &&
smoking_habit.map(value => mappings.mappings.smoking_habit[value]).includes(d.smoking_habit) &&
drinking_habit.map(value => mappings.mappings.drinking_habit[value]).includes(d.drinking_habit) &&
vision.map(value => mappings.mappings.vision[value]).includes(d.vision) &&
health_status.map(value => mappings.mappings.health_status[value]).includes(d.health_status) &&
religion.map(value => mappings.mappings.religion[value]).includes(d.religion)
);
data_numeric.csv
Type Table, then Shift-Enter. Ctrl-space for more options.
res = filtered_data.length
total_perc = filtered_data.length / data.length
aged_data = data.filter(
d =>
// 连续变量筛选：年龄和身高
d.age >= age[0] && d.age <= age[1]
)
aged_filtered_data = filtered_data.filter(
d =>
// 连续变量筛选：年龄和身高
d.age >= age[0] && d.age <= age[1]
)
age_range_perc = aged_filtered_data.length / aged_data.length
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.
