帮酷LOGO
  • 显示原文与译文双语对照的内容
How data science is woven into the fabric of Stitch Fix

  • 源代码名称:algorithms-tour
  • 源代码网址:http://www.github.com/stitchfix/algorithms-tour
  • algorithms-tour源代码文档
  • algorithms-tour源代码下载
  • Git URL:
    git://www.github.com/stitchfix/algorithms-tour.git
  • Git Clone代码到本地:
    git clone http://www.github.com/stitchfix/algorithms-tour
  • Subversion代码到本地:
    $ svn co --depth empty http://www.github.com/stitchfix/algorithms-tour
    Checked out revision 1.
    $ cd repo
    $ svn up trunk
  • 基于的缝合修复算法

    看这里:algorithms-tour.stitchfix.com

    作者:Eric Colson,Brian,Tarek Rached和 Liz Cruz

    with: Bostock的Mike 和 vallandingham scrollytelling代码 Jim

    Inspired Inspired和 Tony Visual视觉介绍Machine在零售行业的数据挖掘问题 Visually Powell和刘易斯lehe的视觉介绍 Visually

    代码

    这个项目是一个迭代创造性的尝试;我们已经经清理了一些代码,但确认不是最漂亮的。 对于任何引起的疼痛,请提前致歉。 也就是说,我们希望你能找到一些有用或者有趣的东西。

    图 below 展示了整个结构。 这两个最重要的<div> 元素是 #sections#vis 元素,它们扮演了vallandingham描述中描述的角色: #sections div包含一组 <section class="step"> 元素,它的中的文本列可以以确定调用 #vis div中的可以视元素时调用的javascript函数。 对于这两个,我们在最左边添加了一个 #topics div,用于"事例"按钮。 这三个 <div> 包封装在 #graphic <div> ( 未显示 below 以避免混乱) 中,与vallandingham结构保持一致。

    structure-illustration-1

    如果你快速查看 index.html 文件,你将看到很多svg语法。 中有两个 <svg> 元素,第一次遇到的是不重要的introduction,只用于介绍动画( 它是 #intro-area div中的全屏幕 svg ) 第二个是主函数,位于 #vis div中。

    这些 <svg> 中的绘图元素几乎构成了动画中的所有 static 元素( 例如 。 它们只出现在特定节或者一组节中,然后再次消失,而且不是动画的起点。 ( 一些它的他DOM元素通过javascript添加,通常是简单。多倍和动态的动画。)

    它们在浏览器中的应用非常简单,但是在html文件中很难看,这确实使文件变得非常臃肿,但是它确实使迭代工作流程变得非常方便。

    <svg> 中的第一个层次级别完全由 <g> 元素组成,每个元素都带有一个与Illustrator对应的id,它由控制动画的javascript函数引用( ) 。 通过打开或者关闭动画的不同部分的display 属性) 。 在这些for中,有一些高级 <g> 元素,也有一些空的,作为js构造元素的阶段。

    structure-illustration-1

    对于 #sections ( 包含在 index.html 中) 中的每个 <section class="step"> 元素,conductor.js 中有两个对应的函数: 一个"激活"函数,该函数在该节突出显示时被调用( 例如 。 当第2 节到达窗口顶部,并将一个"进度"函数作为一个名为 progress的函数参数调用该节中的任何滚动动作时,调用该函数。

    这些"激活"和"进度"函数引用在 js/ 树中找到的其他函数,其中有些函数在几乎每个部分( 比如 ) 中使用。 在 js/scrolling-lib/scrollerAddOn.js 中有一个函数可以平滑地处理特定的元素并关闭其他所有元素,其中一些仅适用于特定的"stories"( 例如 ) 。 js/stories/ 文件夹中的) 。 在 js/anim-lib 中也有一组多使用函数,它们被各种"stories"的函数引用。

    js/stories/ 文件夹中,你会发现看起来像更典型的D3用法的大部分代码。 如果我们有时间,我们将返回到我们最喜欢的动画,并生成更清晰和更好的文档版本。

    ,最近更新了他的scrollytelling代码使用D3版本 4我们在构建这个教程时使用了他的早期版本,但是我们在这里使用了他的更新代码,。

    有乐趣 !

    我们希望你至少比我们所喜欢的多一半。




    Copyright © 2011 HelpLib All rights reserved.    知识分享协议 京ICP备05059198号-3  |  如果智培  |  酷兔英语