财新网「星空彩绘诺贝尔奖」可视化作品复现

const bounds = d3  .select("#wrapper")  .append("svg")  .attr(    "viewBox",    `${-dimensions.width / 2} ${-dimensions.height / 2} ${dimensions.width} ${      dimensions.height    }`  )  .attr("width", dimensions.width)  .attr("height", dimensions.height)  .append("g");

function drawPieChart() {  const arc = d3    .arc()    .innerRadius(dimensions.pieInnerRadius)    .outerRadius(dimensions.pieOuterRadius);
  const pie = d3.pie().sort(null);
  const allPath = bounds    .selectAll("path")    // [201, 169, 210, 111, 75, 0, 0]    .data(pie(secondPieData[115]))    .enter()    .append("path")    .attr("d", arc)    .attr("fill", (d, i) => {      if (i == 5) return "#5c5c5c";      if (i == 6) return "#FFFFFF";      return nobelDotColor[i];    });}
drawPieChart();

const countryScale = d3  .scaleLinear()  .domain([0, countryList.length])  .range([0, Math.PI * 2]);  const getCoordinatesForAngle = (angle, radius) => [  Math.cos(angle - Math.PI / 2) * radius,  Math.sin(angle - Math.PI / 2) * radius,];

const axis = bounds.append("g").attr("class", "grid-line");
function drawAxis() {  d3.range(5).map((i) => {    const cr =      dimensions.ageInnerRadius +      (i * (dimensions.ageOuterRadius - dimensions.ageInnerRadius)) / 4;    axis.append("circle").attr("r", cr);
    axis      .append("text")      .attr("y", -cr)      .attr("dx", ".2em")      .attr("dy", "-.5em")      .text(i != 4 ? (i + 1) * 20 : "");  });
  countryList.map((country, i) => {    const [x1, y1] = getCoordinatesForAngle(      countryScale(i),      dimensions.ageInnerRadius    );    const [x2, y2] = getCoordinatesForAngle(      countryScale(i),      dimensions.ageOuterRadius    );
    axis      .append("line")      .attr("class", "grid-line")      .attr("x1", x1)      .attr("y1", y1)      .attr("x2", x2)      .attr("y2", y2);  });}drawAxis();

function drawCountry() {  countryList.map((country, i) => {    const [x, y] = getCoordinatesForAngle(      countryScale(i),      dimensions.countryBarRadius    );
    const countryGroup = bounds.append("g").attr(      "transform",      `rotate(${(countryScale(i) * 180) / Math.PI - 90}) translate(${        dimensions.countryBarRadius - 5      }, 0)`    );
    countryGroup      .append("text")      .text(country)      .attr("fill", "#a29bfe")      .style("text-anchor", (d) =>        countryScale(i) < Math.PI ? "start" : "end"      )      .attr("transform", (d) =>        countryScale(i) < Math.PI          ? "translate(0, 15)"          : "rotate(-180) translate(0,-7)"      );  });  }
drawCountry();

let countryPrize = personCountPerYP[114];let new_countryPrize = [];const keys = ["物理", "化学", "生理或医药", "文学", "经济"];
countryPrize.forEach((arr, i) => {  const new_item = {};  arr.forEach((item, j) => {    new_item[keys[j]] = item;  });  new_item["sum"] = d3.sum(arr);  new_countryPrize.push(new_item);});
const stackedData = d3.stack().keys(keys)(new_countryPrize);
function drawCountryPrizeBarChart() {  const stackBar = bounds    .append("g")    .selectAll("g")    .data(stackedData)    .join("g")    .attr("fill", (d, idx) => nobelDotColor[idx]);
  stackBar    .selectAll("rect")    .data((d) => d)    .join("rect")    .attr(      "transform",      (d, i) =>        `rotate(${(countryScale(i) * 180) / Math.PI - 90}) translate(${          dimensions.countryBarRadius - 4        }, 20)`    )    .attr("x", (d) => Math.sqrt(Math.sqrt(d[0])) * 10)    .attr("height", 10)    .attr("width", (d) => Math.sqrt(Math.sqrt(d[1] - d[0])) * 10);}drawCountryPrizeBarChart();

function drawEachPrizeCircle() {  // iAll 国家 / jAll 年龄段 / kAll 各奖项人数 / 审查可视化图表时根据 class 发现的  d3.range(countryList.length).map((iAll) => {    d3.range(5).map((jAll) => {      d3.range(5).map((kAll) => {        const angle =          countryScale(iAll) +          ((kAll + 1) * ((2 * Math.PI) / countryList.length)) / 6;        const age = 10 + jAll * 20;        const personAgeToPoint = 90 - ((age - 20) / 80) * 75;        const radius = dimensions.countryBarRadius - personAgeToPoint;        const [x, y] = getCoordinatesForAngle(angle, radius);
        bounds          .selectAll(`.AllPerson${iAll}`)          .data(nbAllPerson[iAll][jAll])          .join("circle")          .attr("class", `allPersonPoints_${iAll}_${jAll}_${kAll}`)          .attr("fill-opacity", 0.2)          .attr("fill", nobelDotColor[kAll])          .attr("cx", x)          .attr("cy", y)          .attr("r", 1.5 * Math.sqrt(nbAllPerson[iAll][jAll][kAll]));      });    });  });}
drawEachPrizeCircle();