中国近三年上市公司信息统计(主板、创业板、科创板)-web数据可视化(d3.brush-时间选择器)

1、先看效果。 

哔哩哔哩在线解读演示：

中国近三年上市公司信息统计(主板、创业板、科创板)-web数据可视化(时间选择器)-000009_哔哩哔哩_bilibili

中国近三年上市公司信息统计(主板、创业板、科创板)-web数据可视化(时间选择器)-000009

截图：

2、数据及可视化含义。

哈喽，大家好，今天要通过地图+日期选择器的数据可视化跟大家分享一下中国近三年上市公司的信息。

屏幕中央是中国地图，在地图上有红色、黄色、绿色的圆圈，红色圆圈代表主板上市公司，黄色圆圈代表创业板上市公司，绿色圆圈代表科创板上市公司，1个圆圈代表1家上市公司，圆圈大小代表公司市值，放大地图，可以看到圆圈所在地图上的位置，它代表这些上市公司所在的城市。

屏幕左侧是数据信息窗，可以看出从2018年9月3日到2021年8月30日统计的这145周时间中，总共有949家公司上市，其中主板上市公司总共338家，创业板上市公司总共287家，科创板上市公司总共324家，平均每周有6.5家公司上市。

屏幕下方是日期选择器，柱形图展示了按ipo日期以周划分的上市公司的数量。X轴是日期，Y周是公司数量；一个柱子表示一周，它们高低不同，柱形图越高说明这一周上市公司的数量就越多。通过鼠标拖动可以选择周的数量，换句话说就是可以选择起始和终止的时间，现在选择的时间是——到——，其中它包含了——周，地图上显示的就是在这段时间内ipo的所有公司，鼠标要是选择主板、创业板、或者科创板，在地图上显示的就只有相对应板块的上市公司。拖动——周所占的这个方框，可以固定选择的周数，时间轴上选择的时间范围发生了变化，相对应的左边图例中的数据也会发生变化。

点击开始动画，在地图上会显示我们选择的这一板块每一周的情况，可以随时暂停，向前或者向后调节，也可以继续动画开始加速或者减速。点击重置，动画又会从头开始。点击重置过滤，界面恢复初始状态。

3、代码分析及讲解。

如下为时间选择柱形图和动画的代码。

// setup the bar chart (used to filter weeks)
function barChart() {
    //TODO: remove this instance counter (in this viz, there is only one instance)
    if (!barChart.id) barChart.id = 0;

    var margin = {top: 10, right: 10, bottom: 20, left: 50},
      x,
      y = d3.scale.linear().range([59, 0]),
      id = barChart.id++,
      axis = d3.svg.axis().tickFormat(zh.timeFormat("%Y年%m月")).orient("bottom"),
      brush = d3.svg.brush(),
      brushDirty,
      dimension,
      group,
      round,
      svg,
      gBrush,
      enableBrush,
      theDiv;

    // main bar chart function; will be called repeatedly by renderAll
    function chart(div) {

        // determine dimensions of svg
        var width = x.range()[1],
          height = y.range()[0];

        // update y scale domain
        y.domain([0, group.top(1)[0].value]); // set y domain to max value in this group

        //TODO: inefficient code; div is an array of one
        div.each(function() {
            var div = theDiv = d3.select(this);
            var g = div.select("g");

            // if g is empty, reubild the svg
            if (g.empty()) {

                // create svg and group
                g = div.append("svg")
                  .attr("width", width + margin.left + margin.right)