Jekyll2019-03-13T05:11:08+00:00https://chenjaipeng.github.io/atom.xml个人学习网站2018-01-21T13:14:24+00:002018-01-21T13:14:24+00:00https://chenjaipeng.github.io/posts/infovis/%E8%AF%BE%E5%A0%82%E7%AC%94%E8%AE%B0<p>#一. 眼球追踪 黄金三角区 f区域 航链接上，标题、标签和界面控件，如按钮和表单felds</p> <p>#二. 视觉设计 塑造视觉平面 动态性 复杂性 普遍性 响应性 视网膜的研究 型的柱宽大致与视网膜的“锐焦点”黄斑相匹配</p> <p>#三. 设计创造了视觉路径，突出和强化内容 设计元素必须有意义，而且绝不是随意为了吸引注意力的“风格” 页面上的每个元素都应该有一个清晰和可识别的目的，在逻辑语义关系中与其他页面元素形成内容</p> <p>#四.GESTALT 认知原则 相似 相似 相近 视觉互补</p> <p>#五.对比的强弱 色轮上180度相对 明度 饱和度 色相</p>

#一. 眼球追踪 黄金三角区 f区域 航链接上，标题、标签和界面控件，如按钮和表单felds

2018-01-21T13:14:24+00:002018-01-21T13:14:24+00:00https://chenjaipeng.github.io/posts/infovis/%E5%8F%AF%E8%A7%86%E5%8C%96%E5%9B%BE%E8%A1%A8%E7%9A%84%E4%BD%BF%E7%94%A8<p>试题知识点归纳</p> <blockquote> <p>条形图位居最常见数据可视化方式之列，可迅速做出比较，一目了然地揭示高低点。跨类别比较数据</p> </blockquote> <blockquote> <p>水平条形图</p> <h3 id="方向的使用规范">方向的使用规范</h3> <ul> <li>人口统计学图表有时会将男性人数绘制在一边，女性人数绘制在另一边。</li> <li>在水平条形图实际运用中，基准线的左边基本是用来绘制负数的。</li> <li>即使数据组中没有正数，也一定不能在零基线右边绘制有负值的水平直条</li> <li>难对位于对立面的两组直条进行比较。最好将两个数据系列绘制成多直条图表。</li> </ul> </blockquote> <h3 id="正负数的相关制图使用规范">正负数的相关制图使用规范</h3> <ul> <li>让负值直条更暗一些，以便他们进一步区别于正值直条——这是可以接受的</li> <li>可以增强零基线以强化负数区</li> <li>基准线的右边只留给正数使用</li> <li>即使整个数据组由负值组成，也应该总是将负数置于零基线的左边</li> </ul> <h3 id="使用规范">使用规范</h3> <ul> <li>直条的阴影应当由最明亮过渡到最暗，以便读者对数据进行对比和比较</li> <li>不要随意排序：不要随意绘制水平直条的顺序。水平条形图的主要性质就是，根据相同的属性排列条目</li> <li>和垂直条形图一样，不要在水平条形图中使用不同的阴影或三维图像</li> </ul> <h3 id="顺序的使用规范">顺序的使用规范</h3> <ul> <li>直条应当由最大值排到最小值，反之亦然。特定的直条可以用不同的明度予以强调</li> <li>当根据相同的特点排列条目时，比如根据某种产品的销售额对国家进行排名，水平条形图是最有用的</li> <li>当某种特定的顺序（比如字母顺序）能够使阅读更加容易时，可以不必遵守数值排列顺序的规则。例如绘制包括50个州的图表</li> <li>数字都较小时，可以将整数居中</li> <li>绝不能将所有整数左对齐排列</li> <li>绝不能随意排列条目</li> </ul> <blockquote> <p>垂直条形图</p> <h3 id="零基线的使用规范">零基线的使用规范</h3> <ul> <li>以零基线为起点——绝无例外！</li> <li>不以零基线为起始线的条形图具有误导性。截略掩盖了每个直条的离散总价值，并且使得数据比较难以实现</li> <li>如果直条的数值接近于零，那么一定要将其数值标注出来</li> </ul> </blockquote> <h3 id="使用规范-1">使用规范</h3> <ul> <li>由于所有的直条测量的是相同的变量，不同的阴影与数据也就没有关联。它们只会分散读者比较直条时的注意力</li> <li>直条不可太窄，否則视线就会集中在直条之间不附带数据信息的留白空间</li> </ul> <h3 id="多直条和图例使用规范">多直条和图例使用规范</h3> <ul> <li>在标注直条时，不要将X轴的字体设置为成某一角度倾斜，而应把数据绘制成水平直条。</li> <li>由最明亮的色彩过渡到最暗的色彩：为了便于比较，直条的色彩应当由最明亮过渡到最暗。</li> <li>要将多直条图表的直条种类保持在4种或4种以下。读者很难从视觉上对比和比较5种或5种以上的直条</li> </ul>

试题知识点归纳 条形图位居最常见数据可视化方式之列，可迅速做出比较，一目了然地揭示高低点。跨类别比较数据

2018-01-21T13:14:24+00:002018-01-21T13:14:24+00:00https://chenjaipeng.github.io/posts/infovis/TED<p>#一.老师上课讲了面包屑，还有老师画了一个关系图，“社群包含了能力和面包屑，能力包含了面包屑”。 面包屑像一个个标记，像一个寻路标记，可以寻找到我们的足迹。</p> <p>#二.面包屑这里老师还引申到平台经济，我个人的理解就是，平台经济只是提供了一个平台。 而我们需要的东西就像是面包屑，它掌握了两方的面包屑，知道我们需要什么，然后根据具体的需求，为我们提供我们需要的。 隐私也是我们的面包屑，现在都注重隐私的保护，隐私是自由社会的基础。</p> <p>#三.老师给我们看的TED演讲时讲述了区块链。 有可能在未来几十年里带来巨大影响的科技，它不是社交媒体，不是大数据，不是机器人科学，也不是AI，而是BLOCKCHAIN(区块链)，被誉为“下一代互联网”，解决“双重消费”问题。</p> <p>讲到区块链更快捷，更安全，更方面。以前的转账从10%的手续费，要4-7天的时间，收款人还不知道什么时候到账，到现在的只要2%的手续费，（虽然2%的手续费还是贵了点）只要几分钟就搞定，收款人只需要在手机上就可以查看了；更安全是区块链不是由一台机子组成，而是由全球数以万计的机子紧密连接在一起的，你要破解这台机，拿取里面的资料，你需要做的是同时破解这么多机子。</p>

#一.老师上课讲了面包屑，还有老师画了一个关系图，“社群包含了能力和面包屑，能力包含了面包屑”。 面包屑像一个个标记，像一个寻路标记，可以寻找到我们的足迹。

2018-01-21T00:00:00+00:002018-01-21T00:00:00+00:00https://chenjaipeng.github.io/posts/rwd/web%E9%A1%B5%E9%9D%A2%E7%BB%93%E6%9E%84<h3 id="--学习笔记">- 学习笔记</h3> <h4 id="--页面结构">- 页面结构</h4> <ul> <li> <p>结构展示三品质： 坚固，有用性和美丽</p> </li> <li>页面结构的发展：</li> <li>图书和印刷工艺是古老的、值得尊敬的设计学科…（有）悠久的创造性历史，这个历史与我们对“图书形式、页面布局、字体设计、版面设计，以及…视觉设计和内容的完笑融合。遗憾的是，我们仍处于Web发布、编辑和设计标准的这样一个尴尬不成熟的阶段，让人欣慰的是混乱中还浮现了明确的样式以及用户期望。</li> <li> <p>经历了十几年的发展后，Web已经逐步成熟…Web 页面结构已经变得相当规范。</p> </li> <li> <p>尽管不是所有的Web页面都采用了与此处描的完全相同的布局和功能， 但是大多数Web 网页都已经在Web用户熟悉的页面位置采用了此处列举的部分或者全部的基本元素。</p> </li> <li>弹性布局与响应式图片</li> <li> <p>响应式web设计运用了三种技术： 1.弹性网格布局（fluid grid） 2.弹性图片/媒体（flexible images) 3.媒体查询(media querires)</p> </li> <li>最基本页面布局——页面结构</li> <li>页眉 （Header)</li> <li>主要内容栏 (Main)</li> <li>右侧（浏览）栏 (Right scan column)</li> <li>左侧（浏览）栏 (Left scan column)</li> <li>页脚（Footer）</li> </ul>

- 学习笔记

2018-01-05T14:07:50+00:002018-01-05T14:07:50+00:00https://chenjaipeng.github.io/visualization/%E4%BF%A1%E6%81%AF%E5%8F%AF%E8%A7%86%E5%8C%96-%E6%9C%9F%E6%9C%AB<h2 id="个人tableau期末项目">个人tableau期末项目</h2> <h2 id="tableau作品">tableau作品</h2> <ul> <li><a href="https://chenjaipeng.github.io/infovis/keshihua/index.html" target="_blank">球场的主要分布</a></li> </ul>

个人tableau期末项目

2017-12-29T00:00:00+00:002017-12-29T00:00:00+00:00https://chenjaipeng.github.io/posts/infovis/%E4%B8%80%E4%BA%9B%E5%BB%BA%E8%AE%AE<h1 id="首先做这个最重要的一步用notepad打开_configyml文件">首先做这个，最重要的一步，用notepad++打开_config.yml文件</h1> <div class="highlighter-rouge"><div class="highlight"><pre class="highlight"><code>- 在文件里面把个人信息修改掉。 </code></pre></div></div> <h2 id="一你现在看到的就是我放文章的博文">一。你现在看到的就是我放文章的博文</h2> <ul> <li>你现在看到的就是我写的博文，存放在_post文件夹里面</li> <li>支持<a href="https://www.jianshu.com/p/q81RER">markdown格式</a></li> <li>文件后缀就是markdown的缩写md结尾。 <h4 id="1有道云">1.有道云</h4> </li> <li>可以看到markdown格式的效果，</li> <li>所以先写在有道云</li> <li>如果效果正确，就再copy过来 <h4 id="2博文的文件名字格式是固定的格式">2.博文的文件名字格式是固定的格式：</h4> <div class="highlighter-rouge"><div class="highlight"><pre class="highlight"><code>年-月-日-文件名.md </code></pre></div> </div> </li> </ul> <h2 id="二可视化的博文和网页设计的博文有区别">二。可视化的博文和网页设计的博文有区别</h2> <ol> <li>在_post文件夹里面找到我写的这个【2017-11-30-一些建议.md】</li> <li>用notepad+ 打开</li> <li>这个文件的最开始有几行被三个—围起来的代码</li> </ol> <blockquote> <hr /> <p>layout: default title: “博客文章介绍” categories:<br /> —</p> </blockquote> <ul> <li>每个博文都要这几行内容，要不然不显示</li> <li>【必填的】第一个意思是网页布局为_layout文件夹default.html文件，default.html文件是准备好的网页格式，你在这 里写layout: default，你写的markdown就会引向这个布局格式</li> <li> <ul> <li>老师在GitHub上在自己的网页的修改历史有把自己博文从default修改为article，意思也就是布局从default.html文件变为同一个位置另一个准备好的网页格式的article.html文件</li> </ul> </li> <li>【必填的】接着的title就是标题，就是这篇博文在网页显示的标题，</li> <li>【必填的】第三个就是categories：这里<strong>用英文</strong>填写几个关键词，记得用空格分开，这里就是按从左到右的顺序填写的词就会变成打开网页看自己的博文时候的网页地址出现</li> <li> <ul> <li>例如：</li> </ul> </li> <li> <ul> <li>老师的其中一篇博客文章 <a href="https://hanteng.github.io/notes_tech/jekyll/Ruby/">先自裝Ruby</a> ，看这个文件的时候，你会看到老师的 <a href="https://github.com/hanteng/hanteng.github.io/blob/master/_posts/2017-11-30-Ruby.md">博客文件</a>在categories 后面填写notes_tech和 Jekyll,注意<a href="https://hanteng.github.io/notes_tech/jekyll/Ruby/">先自裝Ruby</a>网址最后面出现了/notes_tech/jekyll//Ruby，其中最后的ruby是老师的博客文件名，而前两个notes_tech和 Jekyll就是老师在博客里写的</li> </ul> </li> <li>所以对应的博文categories按照下面的填</li> </ul> <table> <thead> <tr> <th>分类</th> <th>对应的内容</th> </tr> </thead> <tbody> <tr> <td>信息可视化笔记 分类(categories)</td> <td>posts infovis</td> </tr> <tr> <td>Web 分类(categories)</td> <td>p osts rwd</td> </tr> </tbody> </table> <ul> <li>记得空格，例如：</li> <li> <p>可视化的笔记要这样子要修改为：</p> <p>categories: posts infovis</p> </li> </ul> <h2 id="三作品放在">三。作品放在</h2> <ul> <li>这个模板的目录已经改好为两个个人作品集</li> <li>具体的文件是在_data文件的navigation.yml</li> <li>infovis 文件夹放信息可视化作品集，放在index.md</li> <li>portfolio 文件夹放网页设计作品集，放在index.md</li> </ul> <hr /> <h1 id="具体老师的要求看他的提交内容再对应文件上做修改">具体老师的要求看他的<a href="https://github.com/hanteng/hanteng.github.io/commits/master">提交内容</a>，再对应文件上做修改</h1>

首先做这个，最重要的一步，用notepad++打开_config.yml文件 - 在文件里面把个人信息修改掉。 一。你现在看到的就是我放文章的博文 你现在看到的就是我写的博文，存放在_post文件夹里面 支持markdown格式 文件后缀就是markdown的缩写md结尾。 1.有道云 可以看到markdown格式的效果， 所以先写在有道云 如果效果正确，就再copy过来 2.博文的文件名字格式是固定的格式： 年-月-日-文件名.md

2017-12-29T00:00:00+00:002017-12-29T00:00:00+00:00https://chenjaipeng.github.io/posts/rwd/%E5%9F%BA%E6%9C%AC%E7%94%A8%E6%B3%95-jekyll%E6%95%99%E7%A8%8B<h3 id="--目录结构">- 目录结构</h3> <p>Jekyll 的核心其实是一个文本转换引擎。它的概念其实就是：你用你最喜欢的标记语言来写文章，可以是 Markdown，也可以是 Textile,或者就是简单的 HTML,然后Jekyll 就会帮你套入一个或一系列的布局中。在整个过程中你可以设置URL路径,你的文本在布局中的显示样式等等。这些都可以通过纯文本编辑来实现，最终生成的静态页面就是你的成品了。</p> <div class="row img-rounded" style="padding:30px; box-shadow: 10px 10px 5px #888888; border: 1px solid #D19F2A;"> <div class="col-md-12"> <div style="background: #D19F2A; color:white; border-radius:6px; padding:6px;"></div> </div> <div class="col-md-3"><!-- left --> - 一个基本的Jekyll网站的目录结构一般是像这样的： * config.yml * drafts * includes * ayouts * posts * date * site * index.html </div> <div class="col-md-9"> <!-- right --> <ul> <li>看看这些目录有什么用</li> </ul> <p><img src="/images/jekyll_oo.png" alt="jekyll目录的基本用法" style="width: 50%" /></p> </div> </div>

- 目录结构

2017-12-07T15:45:15+00:002017-12-07T15:45:15+00:00https://chenjaipeng.github.io/portfolio/logo%E5%88%B6%E4%BD%9C<h1 id="在网页打开时候浏览器出现你的logo">在网页打开时候，浏览器出现你的logo</h1> <h1 id="这个模板的logo是我的你要换掉">这个模板的logo是我的，你要换掉！！！</h1> <h1 id="这个模板的logo是我的你要换掉-1">这个模板的logo是我的，你要换掉！！！</h1> <h1 id="这个模板的logo是我的你要换掉-2">这个模板的logo是我的，你要换掉！！！</h1> <h3 id="老师的网页的中出现的是">老师的网页的中出现的是<img src="https://raw.githubusercontent.com/hanteng/hanteng.github.io/cf9691a940e8d9527d64553501a90991e9c5f1ab/apple-touch-icon.png" alt="Keble College Icon" /></h3> <h3 id="我们需要给自己的网页定制一个logo">我们需要给自己的网页定制一个logo</h3> <ul> <li>具体我们看老师的模板第一次提交内容https://github.com/hanteng/hanteng.github.io/commit/cf9691a940e8d9527d64553501a90991e9c5f1ab</li> <li>看老师对图标的修改内容。</li> <li>logo可以由ai做，导出png档</li> <li>老师提供了一个logo制作网页Favicon Generator. For real(“https://realfavicongenerator.net/favicon_result?file_id=p1c0fpm1o81ht6kse1cl5187h1bi06”)</li> <li>把自己的logo的png档提交上去</li> <li>看不到文件就去<a href="https://github.com/treeice/PhotoForUrl">我的仓库</a></li> <li><img src="&quot;https://github.com/treeice/PhotoForUrl/步骤一.png&quot;" alt="提交步骤一,看到这句话说明，图片加载不出来" /></li> <li><img src="&quot;https://github.com/treeice/PhotoForUrl/步骤二.png&quot;" alt="提交步骤二，看到这句话说明，图片加载不出来" /></li> <li><img src="&quot;https://github.com/treeice/PhotoForUrl/步骤三.png&quot;" alt="提交步骤三，看到这句话说明，图片加载不出来" /></li> <li> <ul> <li>以下步骤，该模板以完成</li> </ul> </li> <li> <ul> <li>生成后，把文件压缩包下载下来，其中黑框的代码，是引用logo的代码，在jekyll里面，网页的各种信息是存放在不同位置，然后通过统一的引用就能加入所有的网页中去</li> </ul> </li> <li> <ul> <li>这里，我们在_includes文件夹中创建一个名为favicon.html的文件。在里面把那几行代码填入：</li> </ul> </li> <li> <ul> <li><img src="&quot;https://github.com/treeice/PhotoForUrl/步骤四.png&quot;" alt="提交步骤四，看到这句话说明，图片加载不出来" /></li> </ul> </li> <li> <ul> <li>然后打开_layout文件夹下的_default.html文件夹，把刚刚创建的favicon.html的文件加入网页之中，格式是大括号{\% \%}，里面填写引用代码的文件位置，这里是 include favicon.html 两个位置。</li> </ul> </li> <li> <ul> <li><img src="&quot;https://github.com/treeice/PhotoForUrl/步骤五.png&quot;" alt="提交步骤五，看到这句话说明，图片加载不出来" /></li> </ul> </li> <li> <h2 id="以上步骤该模板以完成">以上步骤，该模板以完成</h2> <h1 id="接下来">接下来</h1> </li> <li>引用代码填写完后，把刚刚压缩包的文件打开，直接把六个文件放入你的网页文件夹之中，位置观看老师提交内容，不需要单独放入一个文件夹</li> <li> <ul> <li>apple-touch-icon-precomposed.png</li> </ul> </li> <li> <ul> <li>apple-touch-icon.png</li> </ul> </li> <li> <ul> <li>favicon-16x16.png</li> </ul> </li> <li> <ul> <li>favicon-32x32.png</li> </ul> </li> <li> <ul> <li>favicon.ico</li> </ul> </li> <li> <ul> <li>manifest.json</li> </ul> </li> <li><img src="&quot;https://github.com/treeice/PhotoForUrl/步骤六.png&quot;" alt="提交步骤六" /></li> <li>然后logo就生成换好了。</li> </ul>

在网页打开时候，浏览器出现你的logo

2017-12-07T15:45:15+00:002017-12-07T15:45:15+00:00https://chenjaipeng.github.io/posts/rwd/Learning%20notes<h2 id="网站评价">网站评价</h2> <p><a href="https://chenjaipeng.github.io/">chenjaipeng.GITHUB.IO 开展个人学习网络</a></p> <p>#大概下载了模板，一些大致的都改了，排版，背景，图片，logo等等方面。文章方面也有了改进，在个人作品集里面也加了自己的作品。</p> <h2 id="20180104">2018/01/04</h2> <p>大致完A, B, C</p> <h1 id="同行评审">同行评审</h1> <h2 id="何丽华">何丽华</h2> <ul> <li>网页设计方面：过于单调</li> <li>内容方面：内容有点少无法评判。</li> <li>网站文件结构方面：目录名与档名设计不合理。因为用的都是老师的模板，用的都是老师的文档名，只是对内容进行了替换，但没有修改文档名，所以不知道怎么举例了。</li> </ul> <h2 id="廖贵真">廖贵真</h2> <ul> <li>网页设计方面：没有做更多的改变，文件档名也没有改变，直接将老师档名复制，例如：”https://chenjaipeng.github.io/i18nl10n”</li> <li>文档名尽量使用英文，例如：”https://chenjaipeng.github.io/”</li> <li>网页很多地方都没有进行更改，图片没有放到相对应的images文件，<img src="img src=&quot;https://chenjaipeng.github.io/images/&quot; alt=&quot;teaser&quot; itemprop=&quot;image&quot;" alt="" /></li> </ul> <h2 id="梁剑舜">梁剑舜</h2> <ul> <li>视觉设计-颜色和对比度: <ul> <li>前景颜色：#595959 偏灰色</li> <li>background-image: linear-gradient(rgba(255,255,255,0), rgba(255,255,255,0)),url(“../images/bei_jingtu.jpg”);</li> <li>对比度较高</li> </ul> </li> </ul> <h2 id="林树斌">林树斌</h2> <ul> <li>图形加载效率：</li> <li> <ul> <li>最大的图片为images/timg.jpg,大小为1m，加载时间为719ms，超过500ms，图像体积大，是侧边导航栏的动态图，重要性不高，应该更换其余体积小的图片</li> </ul> </li> <li> <ul> <li>余下的博文搭配照片，加载速度均为150ms以下，体积不大200kb-300kb，加载效率高。</li> </ul> </li> <li> <ul> <li>总的网站加载时长1.38秒 <h2 id="蔡泽纯">蔡泽纯</h2> <p>-字形：字体设置过小如： font-size: 16px; font-size: 1rem; line-height: 1.75; margin-bottom: 28px; margin-bottom: 1.75rem; margin-top: 1rem; }<br /> -标题：楷体，难以阅读，为衬体如： font-family: Kai,Kaiti SC,KaiTi,DFKai-SB,BiauKai,\6977\4F53,\6977\4F53_GB2312,Songti SC,Georgia,Times,”Times New Roman”,serif;<br /> -非标题：字体与标题一样是楷体，如：font-family: Kai,Kaiti SC,KaiTi,DFKai-SB,BiauKai,\6977\4F53,\6977\4F53_GB2312,Songti SC,Georgia,Times,”Times New Roman”,serif;让人产生视觉疲劳，建议换成微软雅黑<br /></p> <h2 id="陈丽媛">陈丽媛</h2> </li> </ul> </li> <li>网页的背景与字体比较比较没有突出，建议改变背景。有些图片加载不出。 <h2 id="林家慧">林家慧</h2> </li> <li>前景色和背景色对比不明显</li> <li>学习笔记分类不明确</li> </ul> <h2 id="吴心丹">吴心丹</h2> <ul> <li>文章链接不到，需要改进</li> <li>字体颜色可以做进一步修整，</li> </ul> <h3 id="-div-classtilesarticle-classtile-itemscope-itemtypehttpschemaorgarticle">### &lt;div class="tiles"&gt;&lt;article class="tile" itemscope itemtype="http://schema.org/Article"&gt;</h3> <p><a href="https://chenjaipeng.github.io/posts/rwd/web%E9%A1%B5%E9%9D%A2%E7%BB%93%E6%9E%84/" title="study网页制作" class="post-teaser"><img src="https://chenjaipeng.github.io/images/Bowtie.jpeg" alt="teaser" itemprop="image" /> </a></p> <p class="entry-date date published"><time datetime="2018-01-21" itemprop="datePublished">January 21, 2018</time></p> <h2 class="post-title" itemprop="name"><a href="https://chenjaipeng.github.io/posts/rwd/web%E9%A1%B5%E9%9D%A2%E7%BB%93%E6%9E%84/">study网页制作</a></h2> <p class="post-excerpt" itemprop="description">- 学习笔记 </p> <p>&lt;/article&gt;<!-- /.tile --></p> <article class="tile" itemscope="" itemtype="http://schema.org/Article"> <a href="https://chenjaipeng.github.io/posts/rwd/%E5%9F%BA%E6%9C%AC%E7%94%A8%E6%B3%95-jekyll%E6%95%99%E7%A8%8B/" title="基本用法-jekyll教程" class="post-teaser"><img src="https://chenjaipeng.github.io/images/je_kyll.png" alt="teaser" itemprop="image" /> </a> <p class="entry-date date published"><time datetime="2017-12-29" itemprop="datePublished">December 29, 2017</time></p> <h2 class="post-title" itemprop="name"><a href="https://chenjaipeng.github.io/posts/rwd/%E5%9F%BA%E6%9C%AC%E7%94%A8%E6%B3%95-jekyll%E6%95%99%E7%A8%8B/">基本用法-jekyll教程</a></h2> <p class="post-excerpt" itemprop="description">- 目录结构 </p> </article> <!-- /.tile --> <article class="tile" itemscope="" itemtype="http://schema.org/Article"> <a href="https://chenjaipeng.github.io/posts/rwd/Learning-notes/" title="网页制作学习笔记" class="post-teaser"><img src="https://chenjaipeng.github.io/images/Desktop.jpg" alt="teaser" itemprop="image" /> </a> <p class="entry-date date published"><time datetime="2017-12-07" itemprop="datePublished">December 07, 2017</time></p> <h2 class="post-title" itemprop="name"><a href="https://chenjaipeng.github.io/posts/rwd/Learning-notes/">网页制作学习笔记</a></h2> <p class="post-excerpt" itemprop="description">网站评价 </p> </article> <!-- /.tile --> <p>&lt;/div&gt;</p>

网站评价

2017-12-02T13:14:24+00:002017-12-02T13:14:24+00:00https://chenjaipeng.github.io/posts/infovis/tableau%E7%AC%94%E8%AE%B0<h2 id="两种方法">两种方法</h2> <h2 id="第一种运用pivot-table">第一种：运用pivot table</h2> <ul> <li>采用老师的代码<a href="https://share.weiyun.com/9676fc8c8df52b5bcd30783de135dbb3" target="_blank">data_inspection_using_pivot_table.ipynb</a></li> <li>用pivot_table检视结果</li> <li> <pre class="highlight"><code>import pandas as pd</code></pre> </li> <li>收取数据</li> <li> <pre class="highlight"><code> import pandas as pd df = pd.read_csv("children.tsv", encoding='utf8', sep='\t')</code></pre> </li> <li>检查结果</li> <li> <pre class="highlight"><code>df</code></pre> </li> <li>使用pivot_table（省份）</li> <li> <pre class="highlight"><code>df.pivot_table(values='type', index='pname', columns='keywords', aggfunc=lambda x: len(x.unique()))</code></pre> </li> <li> <p><img src="https://i.loli.net/2018/01/04/5a4e33422720c.png" alt="pname.PNG" /></p> </li> <li>使用pivot_table（城市）</li> <li> <pre class="highlight"><code>df.pivot_table(values='type', index='pname',columns='keywords', aggfunc=lambda x: len(x.unique())) </code></pre> </li> </ul> <h2 id="第二种用excel">第二种：用excel</h2> <ul> <li><a href="https://share.weiyun.com/650ede12d2d1766d3a9c3deaee741d95" target="_blank">数据：children.tsv</a></li> <li>在选项栏选择 “插入”，选中所有数据，点击“数据透视表”，接着按确认</li> <li><img src="https://i.loli.net/2018/01/04/5a4e2a95e117b.jpg" alt="first.JPG" /></li> <li>可在右侧栏拖动字段到相应的的区域。为了做出分省指标的数据统计，我选择将 pname放入行标签，keyword放入列标签，location放入数值（可用其他数据代替，除了部分标签，其余结果都一样）</li> <li><img src="https://i.loli.net/2018/01/04/5a4e308d0a318.jpg" alt="second.JPG" /></li> <li>完成 &lt;/code&gt;&lt;/pre&gt;</li> </ul>

两种方法