Jekyll2018-01-07T07:59:32+00:00https://benefactressjen.github.io/记录在网新学习的一点一滴2018-01-01T22:00:50+00:002018-01-01T22:00:50+00:00https://benefactressjen.github.io/rwd/%E7%BD%91%E9%A1%B5%E8%AE%BE%E8%AE%A1%E8%AF%BE%E5%A0%82%E9%9A%8F%E8%AE%B0<h3 id="推荐课本">推荐课本</h3> <p>-WSG4(英文)，RWD2（中文）</p> <h3 id="网页">网页</h3> <p>-在网页中右键打开检查（元素）紫色是标签和元素，黄色是标签的属性。<br /> -class=note 是最常见的属性。</p> <h3 id="推荐网站">推荐网站</h3> <p>在W3School上有很多解释标签及属性的资料。</p> <h3 id="弹性布局与响应式图片">弹性布局与响应式图片</h3> <p>响应式web设计运用了3种已有技术</p> <ol> <li>弹性网格布局（fluid grid）</li> <li>弹性图片、媒体（flexible grid）</li> <li>媒体查询（media queries）</li> </ol> <p>比例的简单公式 结果=目标/上下文<br /> 网页的基本框架 header left right middle footer</p> <h3 id="视觉原则">视觉原则</h3> <p>补齐原则 相似原则 连续原则 临近原则 一直连接性</p>

推荐课本 -WSG4(英文)，RWD2（中文） 网页 -在网页中右键打开检查（元素）紫色是标签和元素，黄色是标签的属性。 -class=note 是最常见的属性。 推荐网站 在W3School上有很多解释标签及属性的资料。 弹性布局与响应式图片 响应式web设计运用了3种已有技术 弹性网格布局（fluid grid） 弹性图片、媒体（flexible grid） 媒体查询（media queries）

2018-01-01T22:00:50+00:002018-01-01T22:00:50+00:00https://benefactressjen.github.io/rwd/%E7%BD%91%E9%A1%B5%E8%AE%BE%E8%AE%A1%E8%80%83%E8%AF%95%E7%AC%94%E8%AE%B0<h3 id="考试笔记">考试笔记</h3> <ol> <li>在媒体的开头追加not会颠倒查询的逻辑。</li> <li>矢量图形可以被扩展成多个分辨率的位图jpeg或 pngs，每个尺寸都有很好的质量。, 项目矢量图形也可以用于打印。</li> <li>虽然矢量图大多是图解式的，若配加以复杂的阴影和颜色，矢量图可以变得非常写实。 svg 图像是一种矢量图，以开放格式的 xml 文件类型保存，而不是像 Adobe Illustrator (.ai) 文件那样的產權专有的矢量图像格式。 由於其文档大小是紧凑的，因此在移动应用和响应网站创建图形方面， svg 越来越流行，至少对于相对简单的图像和形状来说。</li> <li>YouTube是一个庞大的、免费的、广告商支持的网站，这也是YouTube作为发行媒介的最大缺点。 默认情况下，YouTube不会在高质量的环境下显示你精心制作的视频。 在一个分销渠道的竞争中，每一分钟都有上百小时的视频被上传，而YouTube本身就是通过不断曝光观众的”相关内容”来蚕食你的观众的。 对于企业对企业(B2B)通信来说，YouTube的分销渠道也很复杂，许多公司和大型机构都将YouTube内容从其内部网络中屏蔽。</li> </ol>

考试笔记 在媒体的开头追加not会颠倒查询的逻辑。 矢量图形可以被扩展成多个分辨率的位图jpeg或 pngs，每个尺寸都有很好的质量。, 项目矢量图形也可以用于打印。 虽然矢量图大多是图解式的，若配加以复杂的阴影和颜色，矢量图可以变得非常写实。 svg 图像是一种矢量图，以开放格式的 xml 文件类型保存，而不是像 Adobe Illustrator (.ai) 文件那样的產權专有的矢量图像格式。 由於其文档大小是紧凑的，因此在移动应用和响应网站创建图形方面， svg 越来越流行，至少对于相对简单的图像和形状来说。 YouTube是一个庞大的、免费的、广告商支持的网站，这也是YouTube作为发行媒介的最大缺点。 默认情况下，YouTube不会在高质量的环境下显示你精心制作的视频。 在一个分销渠道的竞争中，每一分钟都有上百小时的视频被上传，而YouTube本身就是通过不断曝光观众的”相关内容”来蚕食你的观众的。 对于企业对企业(B2B)通信来说，YouTube的分销渠道也很复杂，许多公司和大型机构都将YouTube内容从其内部网络中屏蔽。

2018-01-01T22:00:50+00:002018-01-01T22:00:50+00:00https://benefactressjen.github.io/rwd/%E7%95%8C%E9%9D%A2%E8%AE%BE%E8%AE%A1<h1 id="关于网页图像">关于网页图像</h1> <h2 id="了解图像类型">了解图像类型</h2> <h3 id="位图点阵图或-光栅图">位图／点阵图或 光栅图</h3> <p>-位图/点阵图 (bitmap) 或称光栅图 (raster) 图像是由像素 (pixels，也就是图片元素) 为基本单元所组成的细粒网格。每个像素都有其特定的颜色，因此由於像素很小丶又可以是数百万种颜色中的任何一色，所以光栅图像格式通常用于照片和复杂的图稿。</p> <h3 id="矢量图像">矢量图像</h3> <ul> <li>矢量图使用线条丶多边形丶点丶曲线和填充效果的数学描述来创建图像。矢量图像通常是简单和图解形式的，像图（graphs）丶数据图（charts）和图解（diagrams）；矢量图很少有光栅图（如照片）有深度或复杂度。但是矢量图，和光栅图相比具有一些重要的优势: <ol> <li>因为矢量图像文件只是形状的简略描述，所以文档小，下载快。</li> <li>因为矢量图像文件只是形状的简略描述，所以文档小，下载快。</li> <li>虽然矢量图大多是图解式的，若配加以复杂的阴影和颜色，矢量图可以变得非常写实。 <h3 id="可伸缩矢量图形-svg">可伸缩矢量图形 SVG</h3> <p>svg 图像是以矢量图，以开放格式的 xml 文件类型保存，而不是像 Adobe Illustrator (.ai) 文件那样的產權专有的矢量图像格式。大多数 .ai 图形可以保存在 svg 格式，进而直接用于网页上。作为矢量图， svg 图形可以缩放到任何大小，而没有质量损失；由於其文档大小是紧凑的，因此在移动应用和响应网站创建图形方面， svg 越来越流行，至少对于相对简单的图像和形状来说。</p> <h3 id="css-图形-css-based-graphics">CSS 图形 CSS-based graphics</h3> <p>-当你投资于插图时，矢量图作品是特别有吸引力的，因为你可以在众多不同的媒体上使用它：网络丶APP应用丶电子书丶和印刷。反讽刺的是，像这图展示的复杂的矢量插图有可能因其复杂程度，储存为 SVG 图形时，不会节省任何带宽。在此情境下，通常将复杂矢量图作品转换为 jpeg 文档，以适应 1倍和2倍 (1× and 2×) 及各种分辨率的显示屏幕，是更好的方法。<br /> -层叠样式表 (css) 的视觉样式功能长期以来拿来创建简单或复杂的图形效果，单靠 css 代码在网页上的使用。可能最常见的 css 图形是图形按钮，纯 css 的技术拿來把简单的 html spans, divs, 及链接 转换成任何颜色或形状的图形按钮，可加配有阴影丶边缘丶阴影丶悬停和点击状态等等效果。css 技术能在网页上创建复杂的图形效果，而实际上没有內嵌 jpeg, gif, or png 图形：单靠 html 元素使用 css样式。</p> <h3 id="图标字体">图标字体</h3> </li> </ol> </li> <li>图标字体 (icon fonts) 图标字体提供了一种简便方法，把数十甚至数百个矢量符号和图标，一次以非常紧凑的形式加载至网站中。不同於一般计算机字体提供的是文字字母和数字字符 (alphanumeric characters) ，图标字体存的是各式图标，这样只需一次 http 请求，网页就能有数以百计的矢量符号可用。图标字体允许您轻松地使用 css 来更改图标的大小丶颜色丶阴影效果或其他图标的图形特点。</li> </ul>

关于网页图像 了解图像类型 位图／点阵图或 光栅图 -位图/点阵图 (bitmap) 或称光栅图 (raster) 图像是由像素 (pixels，也就是图片元素) 为基本单元所组成的细粒网格。每个像素都有其特定的颜色，因此由於像素很小丶又可以是数百万种颜色中的任何一色，所以光栅图像格式通常用于照片和复杂的图稿。 矢量图像 矢量图使用线条丶多边形丶点丶曲线和填充效果的数学描述来创建图像。矢量图像通常是简单和图解形式的，像图（graphs）丶数据图（charts）和图解（diagrams）；矢量图很少有光栅图（如照片）有深度或复杂度。但是矢量图，和光栅图相比具有一些重要的优势: 因为矢量图像文件只是形状的简略描述，所以文档小，下载快。 因为矢量图像文件只是形状的简略描述，所以文档小，下载快。 虽然矢量图大多是图解式的，若配加以复杂的阴影和颜色，矢量图可以变得非常写实。 可伸缩矢量图形 SVG svg 图像是以矢量图，以开放格式的 xml 文件类型保存，而不是像 Adobe Illustrator (.ai) 文件那样的產權专有的矢量图像格式。大多数 .ai 图形可以保存在 svg 格式，进而直接用于网页上。作为矢量图， svg 图形可以缩放到任何大小，而没有质量损失；由於其文档大小是紧凑的，因此在移动应用和响应网站创建图形方面， svg 越来越流行，至少对于相对简单的图像和形状来说。 CSS 图形 CSS-based graphics -当你投资于插图时，矢量图作品是特别有吸引力的，因为你可以在众多不同的媒体上使用它：网络丶APP应用丶电子书丶和印刷。反讽刺的是，像这图展示的复杂的矢量插图有可能因其复杂程度，储存为 SVG 图形时，不会节省任何带宽。在此情境下，通常将复杂矢量图作品转换为 jpeg 文档，以适应 1倍和2倍 (1× and 2×) 及各种分辨率的显示屏幕，是更好的方法。 -层叠样式表 (css) 的视觉样式功能长期以来拿来创建简单或复杂的图形效果，单靠 css 代码在网页上的使用。可能最常见的 css 图形是图形按钮，纯 css 的技术拿來把简单的 html spans, divs, 及链接 转换成任何颜色或形状的图形按钮，可加配有阴影丶边缘丶阴影丶悬停和点击状态等等效果。css 技术能在网页上创建复杂的图形效果，而实际上没有內嵌 jpeg, gif, or png 图形：单靠 html 元素使用 css样式。 图标字体 图标字体 (icon fonts) 图标字体提供了一种简便方法，把数十甚至数百个矢量符号和图标，一次以非常紧凑的形式加载至网站中。不同於一般计算机字体提供的是文字字母和数字字符 (alphanumeric characters) ，图标字体存的是各式图标，这样只需一次 http 请求，网页就能有数以百计的矢量符号可用。图标字体允许您轻松地使用 css 来更改图标的大小丶颜色丶阴影效果或其他图标的图形特点。

2018-01-01T22:00:50+00:002018-01-01T22:00:50+00:00https://benefactressjen.github.io/pinfovis/%E5%9C%86%E9%A5%BC%E5%9B%BE%E7%9A%84%E7%BB%98%E5%9B%BE%E6%8C%87%E5%8D%97<h2 id="圆饼图">圆饼图</h2> <h3 id="切割">切割</h3> <h4 id="效率较低的顺序">效率较低的顺序</h4> <p>人们会自然而然的按照由上到下及顺时针顺序阅读。所以决不能按照顺时针方向由小到大挥着图表的各个部分，如果按顺时针的顺序或你是真的顺序由小到大排列切片，那么最不重要的部分就会占据最显眼的位置。</p> <h4 id="太多的切片">太多的切片</h4> <p>对许多部分对比和比较是件困难的事情。一个援兵不应该超过五个切片。<br /> 如果超过五个切片，那么就把比较小的并且不怎么重要的部分组合在一起生成第五个切片，将其标注为“其他”。如果所有部分都需要单独标注，那么久换用堆叠横条图或者分段条形图。</p> <h4 id="较大的部分设置在顶端">较大的部分设置在顶端</h4> <p>将最大的部分设置在十二点指针的右边以强调其重要性，这种做法是非常有效的。对其他部分进行排序的最好方法是，将第二大部分设置正在十二点的左边；其余的则按照逆时针方向跟进。最小的切片就会落最不重要的位置：靠近图表底部。</p> <h3 id="装饰切片">装饰切片</h3> <h4 id="分三年注意力的阴影和颜色">分三年注意力的阴影和颜色</h4> <p>有多种阴影或颜色的圆饼图会分散读者对各部分进行直接比较的注意力。</p> <h4 id="特殊效果过犹不及">特殊效果过犹不及</h4> <p>不要使用两种或两种以上的技巧来强调某一部分，不如不要对想要强调的切片即做着色处理，又将其分离出来。</p> <h4 id="错误的数据表述">错误的数据表述</h4> <p>面积是用来表述各个部分相对值的，而又三维图形的圆饼图会错误的标书每一部分与整体之间的比例关系</p> <h4 id="保持阴影简单">保持阴影简单</h4> <p>一般来说，比较不同的长度要比比较不同尺寸更容易。因此在给切片描绘阴影时，要保持其简单明了，这样做的目的是，让读者能够高效地将任何一部分的大小与整个圆饼图有效的进行比较</p>

圆饼图 切割 效率较低的顺序 人们会自然而然的按照由上到下及顺时针顺序阅读。所以决不能按照顺时针方向由小到大挥着图表的各个部分，如果按顺时针的顺序或你是真的顺序由小到大排列切片，那么最不重要的部分就会占据最显眼的位置。 太多的切片 对许多部分对比和比较是件困难的事情。一个援兵不应该超过五个切片。 如果超过五个切片，那么就把比较小的并且不怎么重要的部分组合在一起生成第五个切片，将其标注为“其他”。如果所有部分都需要单独标注，那么久换用堆叠横条图或者分段条形图。 较大的部分设置在顶端 将最大的部分设置在十二点指针的右边以强调其重要性，这种做法是非常有效的。对其他部分进行排序的最好方法是，将第二大部分设置正在十二点的左边；其余的则按照逆时针方向跟进。最小的切片就会落最不重要的位置：靠近图表底部。 装饰切片 分三年注意力的阴影和颜色 有多种阴影或颜色的圆饼图会分散读者对各部分进行直接比较的注意力。 特殊效果过犹不及 不要使用两种或两种以上的技巧来强调某一部分，不如不要对想要强调的切片即做着色处理，又将其分离出来。 错误的数据表述 面积是用来表述各个部分相对值的，而又三维图形的圆饼图会错误的标书每一部分与整体之间的比例关系 保持阴影简单 一般来说，比较不同的长度要比比较不同尺寸更容易。因此在给切片描绘阴影时，要保持其简单明了，这样做的目的是，让读者能够高效地将任何一部分的大小与整个圆饼图有效的进行比较

2018-01-01T22:00:50+00:002018-01-01T22:00:50+00:00https://benefactressjen.github.io/pinfovis/%E5%8F%AF%E8%A7%86%E5%8C%96%E8%AF%BE%E5%A0%82%E9%9A%8F%E8%AE%B0<h3 id="推荐软件">推荐软件</h3> <p>tableau desktop</p> <p>Python 中有三种档TSV,CSV,json<br /> 其中CSV TSV 都是表</p> <h4 id="推荐网站">推荐网站</h4> <p>国家数据网 data.stats.gov.cn</p>

推荐软件 tableau desktop

2018-01-01T22:00:50+00:002018-01-01T22:00:50+00:00https://benefactressjen.github.io/pinfovis/%E5%8F%AF%E8%A7%86%E5%8C%96%E8%80%83%E8%AF%95%E7%AC%94%E8%AE%B02<ol> <li> <p>在显示整体的各个部分时， - 选择条形图，而不是另外一个圆饼图 - 分段条形图比圆饼图更加有效。 - 另外，分段条形图可以包括更多的部分而不会看起来混乱。 - 记住，既要标注百分比，也要标注实际数值。因为这有助于各部分按实值计算。 - 将一个分段直条置在另一个直条中也是一个不错的选择。 - 因此，在圆饼图一个切片内部进行切割会使第二部分很难理解。 对大多数读者来说，将最后的切片和原切片进行比较是一件非常繁杂的工作。</p> </li> <li> <p>不能使用意大利面条式折线 制图者很容易将图表软件工具箱中所有的虚线和图形标记都一一试用，可这样只会使那些附带信息的折线显得模糊。 其实，通过将图表折线限制在四条或四条以下，只使用实线就可以了。 在区别线条方面，改变折线的粗细和颜色比使用那些让人分心的图案和标记效果更佳。 即使有多种颜色可供使用，也不要在同一幅图上绘制四条以上的折线，否则不会达到理想的效果。</p> </li> </ol>

在显示整体的各个部分时， - 选择条形图，而不是另外一个圆饼图 - 分段条形图比圆饼图更加有效。 - 另外，分段条形图可以包括更多的部分而不会看起来混乱。 - 记住，既要标注百分比，也要标注实际数值。因为这有助于各部分按实值计算。 - 将一个分段直条置在另一个直条中也是一个不错的选择。 - 因此，在圆饼图一个切片内部进行切割会使第二部分很难理解。 对大多数读者来说，将最后的切片和原切片进行比较是一件非常繁杂的工作。

2018-01-01T22:00:50+00:002018-01-01T22:00:50+00:00https://benefactressjen.github.io/pinfovis/%E5%8F%AF%E8%A7%86%E5%8C%96%E8%80%83%E8%AF%95%E7%AC%94%E8%AE%B01<h1 id="考试笔记">考试笔记</h1> <ol> <li> <p>尽管圆饼图在商业界得到普遍应用，但它并不总是从视觉上对不同部分进行对比和比较的理想方式。 因此，在一个切片内部进行切割会使第二部分很难理解。 对大多数读者来说，将最后的切片和原切片进行比较是一件非常繁杂的工作。 图表的功能是，将信息视觉化。如果要求读者在头脑中进行数学计算，那就完全失去绘制图表的意义了。一定要为读者做这些工作。</p> </li> <li> <p>最佳的视觉向导 每三到五个条目使用一条细线，以帮助读者横向阅读表格中的数字。 如果表格较宽，那需要每三行使用一条细线。<br /> 只有两列数字的窄表格则无需任何向导。 阴影可以用来强调某列数据或某个条目。</p> </li> </ol>

考试笔记 尽管圆饼图在商业界得到普遍应用，但它并不总是从视觉上对不同部分进行对比和比较的理想方式。 因此，在一个切片内部进行切割会使第二部分很难理解。 对大多数读者来说，将最后的切片和原切片进行比较是一件非常繁杂的工作。 图表的功能是，将信息视觉化。如果要求读者在头脑中进行数学计算，那就完全失去绘制图表的意义了。一定要为读者做这些工作。

2018-01-01T22:00:50+00:002018-01-01T22:00:50+00:00https://benefactressjen.github.io/infovis/%E5%8F%AF%E8%A7%86%E5%8C%96%E6%9C%9F%E6%9C%AB%E4%BD%9C%E5%93%81<p><a href="https://public.tableau.com/views/_18213/1_1?:embed=y&amp;:display_count=yes">快时尚品牌在全国的市场分布</a><br /> Zara，H&amp;M,UR，优衣库可以说是现如今国内做的最好，知名度最高的四家快时尚品牌。很好奇这四家品牌在全国范围内的影响力。通过可视化，我们发现这四家品牌中，门店数目最多的是优衣库，它的分布也是最广的。相比较而言，UR的门店数量较少，分布也不及另外三家广。Zara和H&amp;M可以说在门店数量和分布上势均力敌。我想门店数量和分布的差异显示的是不同品牌的定位与发展战略，由此可以看出优衣库是最走销量的一个品牌。</p>

快时尚品牌在全国的市场分布 Zara，H&amp;M,UR，优衣库可以说是现如今国内做的最好，知名度最高的四家快时尚品牌。很好奇这四家品牌在全国范围内的影响力。通过可视化，我们发现这四家品牌中，门店数目最多的是优衣库，它的分布也是最广的。相比较而言，UR的门店数量较少，分布也不及另外三家广。Zara和H&amp;M可以说在门店数量和分布上势均力敌。我想门店数量和分布的差异显示的是不同品牌的定位与发展战略，由此可以看出优衣库是最走销量的一个品牌。

2018-01-01T22:00:50+00:002018-01-01T22:00:50+00:00https://benefactressjen.github.io/infovis/%E5%8F%AF%E8%A7%86%E5%8C%96%E6%9C%9F%E4%B8%AD%E4%BD%9C%E4%B8%9A<p><a href="https://public.tableau.com/views/2_2009/1_1?:embed=y&amp;:display_count=yes">可视化期中作业</a></p>

可视化期中作业

2018-01-01T22:00:50+00:002018-01-01T22:00:50+00:00https://benefactressjen.github.io/infovis/%E4%BA%BA%E5%8F%A3%E4%B8%8E%E5%8D%AB%E7%94%9F%E9%99%A2%E6%95%B0%E9%87%8F<p><a href="https://public.tableau.com/views/3_912/1_1?:embed=y&amp;:display_count=yes&amp;publish=yes">乡镇卫生院与人口数量</a> 通过图表我们发现，乡镇人口数量和卫生院数量大多数都是成正比例关系，随着人口的增多，卫生院的数量也越来越多，这说明，我国的基础设施建设是法阵的较好的，能紧跟人民的需求，人们不用为无医可治而担心。</p>

乡镇卫生院与人口数量 通过图表我们发现，乡镇人口数量和卫生院数量大多数都是成正比例关系，随着人口的增多，卫生院的数量也越来越多，这说明，我国的基础设施建设是法阵的较好的，能紧跟人民的需求，人们不用为无医可治而担心。