深大可视化实验二——Web可视化工具的使用_html-js-css

代码链接：深大可视化实验二——Web可视化工具的使用-Javascript文档类资源-CSDN下载

首先，详见Global Sales字样修改为白色，并且加上padding。观察代码可发现控制Global Sales字样的是“h1”，于是在上方的“h1”中将字体颜色改为白色，并且加上padding即可。

图1. 修改字体代码

图2. 效果1

随后，将下方的svg元素设置一个灰色实线边框。代码如下：

图3. 添加边框代码

由于svg已经是一个正方形，只需要添加边框就行了，边框的宽度是2个像素点，颜色为深灰色。效果如下。

最后，将排版转换成横排，直接在mainview的class上修改即可。代码如下：

可以看到效果如下。

首先添加SVG容器，根据实验二(b)教程设置SVG容器。

接着使用javascript，并且使用d3组件，d3文件必须在该文件目录下的文件夹内，将svg容器设置大小，并设置周围间距的距离参数。

效果如下：

接下来将文档中的数据传入输入流当中，并存到barData变量当中，我们可以用console.log(); *** 作输出所传入的数据用于检查是否传入成功。

我们可以看到在Console当中出现了这些数据，说明传入数据成功。

最后面写drawBarChart函数，用于生成图表。与之前一样先设置一个图表，并且绑定barData的值。

接着设置x轴比例尺、y轴比例尺和颜色比例尺。

接下来是将数据进行更新和设置，此时要注意各个数据，因为在x轴方向是要用sales数据，所以在匿名函数当中用d.sales来进行调用数据。颜色比例尺的使用与x轴比例尺相似，用d.profit进行数据调用。

接下来设置坐标轴。

整体效果如下：

首先将上次实验所写的关于导入数据删除，对新的数据读入进行编写。将教程中统计数据的代码复制进来并运行，我们可以看到在控制台有个报错。

经过查阅网上资料，知道了因为bardata没有被定义成一个数组，所以不能将数据调用push传进去。

我们将bardata改成bardata=[]就可以正常运行了。

接下来完成地图的内容。

先设置Area区域svg的大小。

同样的要从csv数据中获取每个州的利润，并进行统计。

在最后将Alaska和Hawaii的Profit设置成“$”是因为在数据中没有Alaska和Hawaii的数据，如果不将数据放进去在后续的 *** 作会报错。因为在地图当中有Alaska和Hawaii的数据，当调用后续的rateMap.get(“Alaska”).profit则会找不到数据。

将数据处理好以后，则按照课堂作业一样处理地图。

在第317的if语句是用与判断数据是否是$也就是代表填涂的时Alaska和Hawaii这两个没有数据的地方，将他们填涂成灰色。

在第325行是对地图的个缩放处理，先用scale进行缩放再用translate进行移动，便可得到最终的效果。

首先，先将点击矩形框变红的效果。

//增加点击后边框变红

   var bars = d3.select("#rects").selectAll("rect");

     bars.on("click", function(event, d) {

       //注意click事件需要添加event参数

       bars.style("stroke", "none");

   d3.select(this).style("stroke", "red");

       //updateMap(d.subCategory);

    })

点击矩形后，矩形的边框即可变红，效果如下：

接下来是做点击旁边空白区域时，原本红色的边框恢复，并且地图恢复。

//添加空白矩形块
var referenceRect = d3.select("#CatergoryChart").insert("g", "#rects").append("rect")
.attr("width", xScale.range()[1] - xScale.range()[0])
.attr("height", yScale.range()[1] - yScale.range()[0])
.attr("x", xScale.range()[0])
.attr("y", yScale.range()[0])
.attr("fill", "white")
.attr("stroke", "none")
.attr("opacity", "0.2");
 //点击时，之前选中的条形边缘不再高亮
referenceRect.on("click", function() {
bars.style("stroke", "none");
       console.log(d.subCategory);
       updateMap("all")
});

使用updateMap函数将地图更新，会根据对应洲的情况进行更新地图。


function updateMap(subCategory) {
if (subCategory == "all") {
d3.select("#MapTitle").text("Area: profits of all categories");
updateMapByNewProfit(sumProfitMap);
// 这里假定var sumProfitMap为外部变量，记录每个州所有产品总利润。
} else {
d3.select("#MapTitle").text("Area: profits of " + subCategory);
// 得到该产品在每个州的销售信息
console.log(nestBySubCategory)
var curprofitInfo = nestBySubCategory.get(subCategory);
var curprofitInfoMap = d3.index(curprofitInfo, function(d) {
return d.state;
}); // 转换映射表形式，以根据州名检索销售情况
updateMapByNewProfit(curprofitInfoMap);
    }
}

此时会有两种情况，一个是恢复原有的地图，一个是显示部分洲的地图。

会先获取所对应的数据，然后给updateMapByNewProfit函数进行实现地图的改变。

function updateMapByNewProfit(curData) {
console.log(curData)
        // 重新定义颜色比例尺
var extent = d3.extent(curData.values(), d => d.profit);
  var color = d3.scaleDiverging()
       .domain([-extent[1], 0, extent[1]])
       .interpolator(d3.interpolateRdBu);

       d3.select("#Map").select("#region").selectAll("path")
         .transition()
         .duration(400)
         .ease(d3.easeLinear)
        .attr("fill", function(d) { // 更新每个州的区域颜色
         var info = curData.get(d.properties.name);
     if (info == undefined) return "gray"
            else {
             return color(info.profit);
        }
        })
        .select("title")
        .text(function(d) { // 更新每个州的title信息。
            var info = curData.get(d.properties.name);
           if (info != undefined)
             return d.properties.name + "\n" + d3.format(".2f")(info.profit);
         else {
                 return d.properties.name;
        }
      });
}

完成后效果如下：

此时点击Categories区域的交互就完成了，现在要实现点击map中的区域更新左侧柱形图表。

仿照点击柱状图更新地图的代码进行实现。


var regions = d3.select("#Map").select("#region").selectAll("path");
    regions.on("click", function(event, d) {
        regions.style("stroke", "none");
       d3.select(this).style("stroke", "orangered")
        .style("stroke-width", "4");
         //根据州名更新柱状图
       console.log(d.properties.name);
      updateBar(d.properties.name);
    });
//添加空白矩形块
   var referenceRect = d3.select("#Map").insert("g", "#region").append("rect")
        .attr("width", 480)
        .attr("height", 480)
       .attr("opacity", "0");
                    //点击时，之前选中的区域边缘不再高亮
        referenceRect.on("click", function() {
       regions.style("stroke", "none");
     updateBar("all")
});

在仿照updateMap函数，写updateBar函数。用于更新柱状图。

function updateBar(subState) {
   if (subState == "all") {
        d3.select("#categoriesTitle").text("Categories: sales and profits in US");
       updateBarByNewProfit(barData);
   } else {
       d3.select("#categoriesTitle").text("Categories: sales and profits in " + subState);
       //得到州名到销售信息的映射
       console.log(subState)
       console.log(nestBySubState)
      console.log(nestBySubState.get(subState))
      var curstateInfo = nestBySubState.get(subState)
             //得到当前州的销售信息
       console.log(curstateInfo)
      updateBarByNewProfit(curstateInfo);
   }
}

                function updateBarByNewProfit(curData) {
    //得到最大销量
   var maxSales = d3.max(curData, function(d) {
       return d.sales;
   });
    //定义水平方向比例尺
   var xScale = d3.scaleLinear()
       .domain([0, maxSales]) // set the input domain
        .range([barChartPadding.left, barChartWidth - barChartPadding.right]);
   // 绘制X坐标轴
   var xAxis = d3.axisBottom(xScale) //数字上显示
          .ticks(4); //改变比例尺单位长度
   d3.select("#xAxis").call(xAxis)
    .attr("transform", "translate(0," + barChartHeight * 0.94 + ")")
       //得到最大利润
      var maxProfit = d3.max(curData, function(d) {
         return d.profit;
      });
       //定义颜色比例尺 将利润映射为颜色
     var color = d3.scaleDiverging()
      .domain([-maxProfit, 0, maxProfit])
       .interpolator(d3.interpolateRdBu);
    //重新绑定数据
     d3.select("#CatergoryChart").select("#rects").selectAll("rect")
        .data(curData, function(d) {
          return d.subCategory; //键函数
       })
         .transition()
      .duration(400)
      .ease(d3.easeLinear)
      .attr("width", function(d) {
         return xScale(d.sales) - xScale(0);
      })
    .style("fill", function(d) { // 更新颜色
         return color(d.profit);
    })
    .select("title")
     .text(function(d, i) {
       return d3.format(".6")(d.profit);
     });
}

效果图如下：

接下来是添加第三块区域的数据。我选择使用了Global-Superstore的数据。因为该文档原本为xls文件，与之前的csv文件有些区别，所以我首先将该文件转换成了csv文件。

接下来的 *** 作与实验二（b）大致相同，但是要将所有重复的变量名进行变更，为了方便，我将所有的变量名在后面加了个3。并且对应的数据要进行更名。

下面是other视图的内容。

为了将三个视图会随着窗口大小而改变，在顶端的mainview中要加上下面的语句。

这样内容就会随着窗口大小而改变。

数据分析：

实验结果：

如图所示，web可视化效果如上图，我们可以点击Categories里的内容并且更改Areas里面的内容，因为这两个视图有做交互。

通过交互，可以更加方便的让用户了解其数据内容，可以更加直观的观察到数据并发现异常数据。

实验结论：

本次实验工作量大，而且是第一次接触到JavaScript，还是有很大难度的。不仅要做出实验要求效果，而且还要学习JavaScript语句。通过不断地输出变量来寻找问题。