月度归档:2018年10月

【最简单的图形与最复杂的信息】笔记

最简单的图形与最复杂的信息(The Wall Street Journal Guide to Information Graphics)

最简单的图形与最复杂的信息

折线图用于连续数据,条形图用于离散数据。但当两个数据列都是条形图时(双 Y 轴的场景),可考虑把其中一个变为折线。

折线图 Lines

  • 折线高度约占图标区域 2/3。
  • 折线应比网格线粗,但不能过粗而导致掩盖了折点变化;如果有零基线,零基线应比网格线稍粗。
  • Y 轴增量常用 1、2、5、10、15、20、25 等。
  • 线条应在四条以下;使用实线,通过粗细、颜色比形状区分更好(使用颜色时需要考虑色盲的情况);如果数据系列比较多,可考虑由一个个的单折线图组成图表组。
  • 空间紧凑且交叉点多时,可使用图例,且顺序尽量和重点顺序一致。否则可直接在折线上标注,标注应简短。
  • 双 Y 轴应用于表示两组数据有关联的场景。
    继续阅读

c君不在

2018/10/07

React 的行内条件渲染(inline conditional rendering)能够在无 else 分支的情况下简化条件渲染,这是由子元素定义及渲染决定的。

const ele = (
  <div>
    <p>{true}</p>
    <p>{true && 1}</p>

    <p>{false}</p>
    <p>{false && 2}</p>
  </div>
);

对应的 JavaScript 代码是

const ele = React.createElement(
  "div",
  null,
  React.createElement("p", null, true),
  React.createElement("p", null, true && 1),
  React.createElement("p", null, false),
  React.createElement("p", null, false && 2)
);

true && 1 等的表达式结果作为子元素去渲染时,使用  ChildReconciler#createChild ,其中仅当子元素类型(typeof)是 stringnumberobject 且不为 null 时才渲染,所以 true / false 则不会渲染。

继续阅读

【牛津通识读本:数学】读书笔记

牛津通识读本:数学

牛津通识读本:数学

序言

他的一个基本的观点:对于数学,不要问它是什么,而只要问它能做什么。

这一抽象化的思考方法,将重点放在数学内部体系的相容性,强调新的数学概念、方法与内容和已有的数学体系应自然地融为一体,强调要将有关的数学内容脱离其物理上的实在、变为符合一些特定规则的记号,就会更利于应用,更利于正确地理解高等的数学。

继续阅读