优秀案例-实验1可视化设计-王劲恒
一．实验方向与问题分析：
本次实验我想要实现的效果是：既能从全局效果展示出某一年的男女混合起来后各个年龄段人群所占的比例，又能展示出不同年份不同性别的人群中各个年龄段的人群的比例，同时也要展示出每一年的男女比例。我也希望我的可视化图像能够侧面反映出一些其它方面的特征（例如具体的数量）。
那么对于这些功能，我首先想到的就是老师第一节课讲的堆叠柱状图，因为我希望能够更好地对不同年龄段的人进行对比，那么单纯的柱状图或者折线图，只能保证展示出数据的大小关系，却无法客观地反映出不同人群所占的比例，而堆叠柱状图可以很好地展示出这种比例效果，同时对于同一组数据，比例之和应当是 100%。
二．作品分析：
（注，分析中的所说的第几行都是从画面中的上面数到下面，例如第一行指的是 1900 性别比例那一行，本部分第二段我将举例说明以便于理解）
由于我采用的是堆叠柱状图，因此对于 x 轴和 y 轴的处理就需要非常谨慎，由于需要显示的年龄段比较多，我这里考虑采用的是 x 轴和 y 轴进行了调换，我让x 轴显示比例值，而通过 y 轴来显示不同的年份以及性别等分块情况，这里我的y 轴一共有8 个数，首先我分成两部分，前四行表示的是 1900 年的数据，后四行表示的是2000 年的数据。对于每一年，y轴的第一行到第四行分别代表：男女性别比例，单独看女性的不同年龄段人数占当年女性总人数的比例，单独看男性的不同年龄段占当年男性总人数的比例，男女各自不同年龄段的人数所占当年男女合起来总人数的比例。
对于每一行，我的作品主要是通过堆叠柱状图的形式来展示比例，每一行总的比例一定是 100%，对于每一年的第一行，一共只有两种颜色，分别代表当年的男性以及当年的女性的比例，从我的表中的数据可以看出来，1900 年和2000年的男女比例都差不多，1900 年男性略微多一点，2000 年女性略微多一点（可以把光标放到对应的柱状图上面，从而查看具体的比例）。
对于每一年的第二行，代表的是女性各年龄段占其当年女性人数的百分比，女性我采用的图例的颜色主要是一些比较淡的颜色，可以从左到右依次产看随着年龄的增大，所占比例是增加还是见效的。第三行就是表示的男性各年龄段所占当年男性人数的百分比，它的颜色相对偏深（具体不同年龄段我也都用不同的颜色标识出来了，都在图例中标识出来了）。
第四行是男性和女性同时分析，分析男性和女性各自的不同年龄段的人数占当年男女总人数的比例，第二行和第三行主要是反应男性和女性内部的不同年龄段的关系，而第四行反映的是把男性和女性放在一起看，从而比较男性和女性的各自不同的年龄段占总人数的比例有什么具体的差异（第四行主要是从整体上反映男女性的不同年龄段的比例，既能反应某个性别的趋势，也能反映总体的趋势）。
三．代码设计思路：
这里我主要采用的是 vega-lite，但是有一小部分用了 d3（就是在数据集的导入的时候用了 d3，因为 vega-lite 不支持将数据集导入，只能将数据罗列到代码里，但是在提交的压缩包中，我也会把不用 d3，而是将数据进行罗列的代码版本也一并交上）。首先设计的时候写了一个整体的框架，就是堆叠柱形图，我最先考虑画出的是图中的第四行，这里就先用 javascrip 做了一个简单的数据处理，先把按照我划分的年龄段统计出各个年龄段的信息（包括性别，人数等），然后将输入导入到vega-lite 的视图函数中。考虑用 transform 属性将各个属性的名称改成比较好理解的名称，然后分别统计两个年份各自的人数，然后计算出不同性别不同年龄段所占的比例，最终呈现出来的是女性的年龄段在左侧，男性的年龄段在右侧。然后再规定好 x 轴是比例，y 轴是年份就可以了，最后规定比例尺计科。
然后我就考虑也应当将男性和女性给分开看看，所以在上面的数据处理的代码部分，我又将原来的数据进行了复制，并统计了不同年份不同性别的人数，这样就产生了第二行和第三行的整体思路，我就将这个比例又算了出来，并在图表中呈现了出来。最后又考虑到应当直观地对比以下性别的比例，因此又将性别的比例作为一个区分点，在代码中实现，并呈现了出来。
这里之所以我能画出好几个堆叠柱状图，总体思路其实就是数据的复用，就是把原始数据再复制一份，并且修改它们的主键，以及它们的比例的计算方法，从而使得year看起来不一样，以及得到的比例不一样，这样就能在一个表中画出多种表示不同意义的图了。