时间戳

首页 > 解决方案 > 使用整数列表的密度图

javascript - 使用整数列表的密度图

问题描述

我正在建立这个例子：https ://www.d3-graph-gallery.com/graph/density_basic.html

但是，我不想从 CSV 文件中加载数据，而是想使用整数列表构建密度图。像这样：

const list = [0, 0, 4, 19, 42, 75, 117, 165, 209, 238, 255, 255, 241, 220, 199, 181, 168, 162, 160, 159, 158, 156, 155, 151, 147, 142, 139, 135, 129, 123, 117, 111, 103, 96, 92, 86, 81, 78, 74, 70, 65, 61, 56, 50, 46, 42, 39, 36, 34, 32, 30, 28, 27, 25, 23, 21, 20, 19, 18, 17, 16, 15, 14, 14, 13, 12, 11, 11, 10, 9, 9, 8, 8, 8, 7, 7, 7, 6, 6, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 3, 3, 3, 3, 3, 2, 3, 3, 3, 3, 3, 3, 3, 3, 4, 5, 5, 6, 7, 8];

我怎样才能做到这一点？

标签： javascriptd3.jskernel-densitydensity-plot

解决方案

<!-- Code from d3-graph-gallery.com -->
<!DOCTYPE html>
<meta charset="utf-8">

<!-- Load d3.js -->
<script src="https://d3js.org/d3.v4.js"></script>

<!-- Create a div where the graph will take place -->
<div id="my_dataviz"></div>


<script>

  // set the dimensions and margins of the graph
  var margin = { top: 30, right: 30, bottom: 30, left: 50 },
    width = 460 - margin.left - margin.right,
    height = 400 - margin.top - margin.bottom;

  // append the svg object to the body of the page
  var svg = d3.select("#my_dataviz")
    .append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
    .append("g")
    .attr("transform",
      "translate(" + margin.left + "," + margin.top + ")");

 /* YOUR LIST */
  const list = [94.0, 145.0, 251.0, 218.0, 265.0, 98.0, 66.0, 80.0, 52.0, 63.0, 92.0, 80.0, 228.0, 91.0, 58.0, 91.0, 101.0,]

  // add the x Axis
  var x = d3.scaleLinear()
    .domain([0, 1000])
    .range([0, width]);
  svg.append("g")
    .attr("transform", "translate(0," + height + ")")
    .call(d3.axisBottom(x));

  // add the y Axis
  var y = d3.scaleLinear()
    .range([height, 0])
    .domain([0, 0.02]);
  svg.append("g")
    .call(d3.axisLeft(y));

  // Compute kernel density estimation
  var kde = kernelDensityEstimator(kernelEpanechnikov(7), x.ticks(40))
  var density = kde(list)

  // Plot the area
  svg.append("path")
    .attr("class", "mypath")
    .datum(density)
    .attr("fill", "#69b3a2")
    .attr("opacity", ".8")
    .attr("stroke", "#000")
    .attr("stroke-width", 1)
    .attr("stroke-linejoin", "round")
    .attr("d", d3.line()
      .curve(d3.curveBasis)
      .x(function (d) { return x(d[0]); })
      .y(function (d) { return y(d[1]); })
    );



  // Function to compute density
  function kernelDensityEstimator(kernel, X) {
    return function (V) {
      return X.map(function (x) {
        return [x, d3.mean(V, function (v) { return kernel(x - v); })];
      });
    };
  }
  function kernelEpanechnikov(k) {
    return function (v) {
      return Math.abs(v /= k) <= 1 ? 0.75 * (1 - v * v) / k : 0;
    };
  }

</script>

删除从 csv 导入数据的行，但保留其余代码不变。

d3.csv("https://raw.githubusercontent.com/holtzy/data_to_viz/master/Example_dataset/1_OneNum.csv", function(data) { // remove

/* leave this code */

} // remove

将密度更新为var density = kde(list)

推荐阅读