我是这样用Django和D3开发911数据看板的
ygzw6969
8年前
<p>最近我和几个警局部门合作创建了一个显示 911（也被称作 Call for Service）数据的智能看板，该看板允许用户对这些数据进行进一步挖掘。当我开始这个项目的时候，已经有一个用 dc.js 写的原型，dc.js 是用于构建动态看板的 JavaScript 框架，所有的数据都在前端（data on the frontend），原型的数据记录来源于佛罗里达州的 Tampa 市。我需要基于此原型，增强其处理数据的能力 —— 上百万条数据记录。</p> <p><img alt="我是这样用Django和D3开发911数据看板的" src="https://simg.open-open.com/show/1d623c6f8e0d77ade1d2071ef052871c.png" width="1164" height="928"> Tampa/dc.js 智能看板原型</p> <p>我们面临的问题是要让这个智能看板适用于其他城市。Tampa市警局的看板是纯前端实现，没有后台服务器。所有的数据在一个 CSV 文件中，运行时所有数据会读进浏览器的内存当中。这种方式显然不适用于大型数据，也很难进行设置和升级。</p> <p>我决定用 Django 和 D3 来创建新的看板。同时，我选取了一些用起来顺手工具。它们包括：</p> <ul> <li> <p>Django REST Framework</p> </li> <li> <p>django-url-filter</p> </li> <li> <p>NVD3 & D3</p> </li> <li> <p>Ractive.js</p> </li> <li> <p>Leaflet</p> </li> </ul> <h2><strong>架构设计</strong></h2> <p>和其他项目一样，最终的架构和开始时的很不一样。通常对我来说更简单的做法是先探索性地写程序，同时搞清楚我需要什么，然后再从头开始写，或者将之前的代码整合到最终的架构中。一开始时，有几点需求是明确的：</p> <ul> <li> <p>所有数据都应该在后台处理，最好是数据库中处理。</p> </li> <li> <p>智能看板的所有视图都可以收藏。</p> </li> <li> <p>我需要一个能实时响应的前台界面（reactive frontend）。</p> </li> </ul> <p>我要多说两句，解释下最后一点。什么是响应式编程（reactive programming）？简单来说，就是当后台数据更新的时，UI 也同时更新。我希望由数据驱动应用。下文我还会就此进行说明。</p> <p><img alt="我是这样用Django和D3开发911数据看板的" src="https://simg.open-open.com/show/62923ba3e69de23afd458f5d51f64c14.png" width="1517" height="2341"> 最终成果</p> <h2><strong>Django</strong></h2> <p>针对 Django，我对看板的每个页面设置了一个 JSON 端点（endpoint）。其中一个页面显示拨打 911的总量，另外一个显示电话接通时间，第三个以地图的方式显示所有电话的来源地，我们给每个页面都设置了一个端点：</p> <pre> <code class="language-javascript">url(r'^api/call_volume/$', views.APICallVolumeView.as_view()), url(r'^api/response_time/$', views.APICallResponseTimeView.as_view()), url(r'^api/call_map/$', views.APICallMapView.as_view()),</code></pre> <p>为了生成这些端点的内容，我给每一组图表创建了一个“摘要模型”（summary model）。这些摘要模型访问数据库，并为 API 的输出建立数据结构。这些模型均继承自一个基类，这样就能轻松创建新的模型。</p> <pre> <code class="language-javascript">class CallOverview: def __init__(self, filters): self.filter = CallFilterSet(data=filters, queryset=Call.objects.all(), strict_mode=StrictMode.fail) self.qs = self.filter.filter() self.bounds = self.qs.aggregate(min_time=Min('time_received'), max_time=Max('time_received')) def by_dow(self): results = self.qs \ .annotate(id=F('dow_received'), name=F('dow_received')) \ .values("id", "name") \ .annotate(**self.annotations) return self.merge_data(results, range(0, 7)) class CallVolumeOverview(CallOverview): annotations = dict(volume=Count("id")) class CallResponseTimeOverview(CallOverview): annotations = dict(mean=Avg(Secs("officer_response_time")))</code></pre> <p>我在每一类中使用 <em>annotatations</em> 决定看板的页面上需要展示什么数据。</p> <p>另外，我在摘要模型中自定义了对象关系映射（ORM）函数和集群（aggregations）。看下面这个例子：</p> <pre> <code class="language-javascript">def precision(self): if self.span >= timedelta(days=365): return 'month' elif self.span >= timedelta(days=7): return 'day' else: return 'hour' def volume_by_date(self): results = self.qs.annotate(date=DateTrunc('time_received', precision=self.precision())) \ .values("date") \ .annotate(volume=Count("date")) \ .order_by("date") return results</code></pre> <p>你会发现我在这里使用了 <em>DateTrunc</em> 。它使用了 PostgresSQL 中的一个同名函数，将根据你处理的数据量将时间数据截成月、天或者小时。</p> <pre> <code class="language-javascript">class DateTrunc(Func): """ Accepts a single timestamp field or expression and returns that timestamp truncated to the specified *precision*. This is useful for investigating time series. The *precision* named parameter can take: * microseconds * milliseconds * second * minute * hour * day * week * month * quarter * year * decade * century * millennium Usage example:: checkin = Checkin.objects. annotate(day=DateTrunc('logged_at', 'day'), hour=DateTrunc('logged_at', 'hour')). get(pk=1) assert checkin.logged_at == datetime(2015, 11, 1, 10, 45, 0) assert checkin.day == datetime(2015, 11, 1, 0, 0, 0) assert checkin.hour == datetime(2015, 11, 1, 10, 0, 0) """ function = "DATE_TRUNC" template = "%(function)s('%(precision)s', %(expressions)s)" def __init__(self, expression, precision, **extra): super().__init__(expression, precision=precision, **extra)</code></pre> <p>对这么一小段代码而言，注释好像有点太多了。不过很高兴能看到拓展 Django 的对象关系映射是这么简单。</p> <p>我还自定义了集群， <em>Percentile</em> ：</p> <pre> <code class="language-javascript">class CallResponseTimeOverview(CallOverview): annotations = dict(mean=Avg(Secs("officer_response_time"))) default = dict(mean=0) def officer_response_time(self): results = self.qs.filter( officer_response_time__gt=timedelta(0)).aggregate( avg=Avg(Secs('officer_response_time')), quartiles=Percentile(Secs('officer_response_time'), [0.25, 0.5, 0.75], output_field=ArrayField(DurationField)), max=Max(Secs('officer_response_time')))</code></pre> <p>每一个摘要模型都用方法 <em>to_dic</em> 生成输出：</p> <pre> <code class="language-javascript">def to_dict(self): return { 'filter': self.filter.data, 'bounds': self.bounds, 'precision': self.precision(), 'count': self.count(), 'volume_by_date': self.volume_by_date(), 'volume_by_source': self.volume_by_source(), 'volume_by_district': self.by_field('district'), 'volume_by_beat': self.by_field('beat'), 'volume_by_nature': self.by_field('nature'), 'volume_by_nature_group': self.by_nature_group(), 'volume_by_dow': self.by_dow(), 'volume_by_shift': self.by_shift(), 'heatmap': self.day_hour_heatmap(), 'beat_ids': self.beat_ids(), 'district_ids': self.district_ids(), }</code></pre> <p>这些摘要模型由一系列过滤器驱动。这里，这些过滤器被指定为调用 API 时的 GET 实参。Django 主要有两个包协助完成过滤工作， django-filter 和 django-url-filter 。 django-url-filter 不常见也很难用。我之所以用它，是因为它更容易被修改，这正是我需要的。对于类似的项目，无论哪一个应该都很好用。</p> <p>我第一个要修改的就是让查询方法被能用于过滤器。 django-url-filter 可以将GET实参，如 district=7&nature=10 ，作为形参传递给模型类 .filter 方法。修改后，任何指向查询集（queryset）的 GET 实参将调用那个方法，于是 shift=1&district=7 （ .shift 是用于查询的方法）将最终调用 Call.objects.filter(district_id=7).shift(1) 。</p> <p>下面一段代码能更简单，也能实现同样的功能：</p> <pre> <code class="language-javascript">def filter(self): include = {self.prepare_spec(i): self.prepare_value(i) for i in self.includes} qs = self.queryset for k, v in include.items(): try: qs = getattr(qs, k)(v) except AttributeError: qs = qs.filter(**{k: v})</code></pre> <p>另一个我需要的修改是从数据结构创建过滤器，而不是按类创建。为了防止代码重复，我以 JSON 数据结构的方式将过滤器提供给前台，这样我就能用它控制智能看板。请看如下所示数据结构。就像大多数其他按需变化的事物一样，代码显得很杂乱，但应该是不言自明的。</p> <pre> <code class="language-javascript">[ {"name": "time_received", "type": "daterange"}, {"name": "shift", "type": "select", "method": True, "lookups": ["exact"], "options": [[0, "Shift 1"], [1, "Shift 2"]]}, {"name": "dow_received", "label": "Day of Week", "type": "select", "options": [ [0, "Monday"], [1, "Tuesday"], [2, "Wednesday"], [3, "Thursday"], [4, "Friday"], [5, "Saturday"], [6, "Sunday"] ]}, {"name": "district", "rel": "District"}, {"name": "beat", "rel": "Beat"}, {"name": "squad", "rel": "Squad", "method": True, "rel": "Squad", "lookups": ["exact"]}, {"name": "priority", "rel": "Priority"}, {"name": "nature", "rel": "Nature"}, {"name": "nature__nature_group", "label": "Nature Group", "rel": "NatureGroup"}, {"name": "initiated_by", "type": "select", "method": True, "lookups": ["exact"], "options": [[0, "Officer"], [1, "Citizen"]]}, {"name": "call_source", "rel": "CallSource"}, {"name": "cancelled", "type": "boolean"}, ]</code></pre> <p>注意： 将这些转变成Python对象的代码很拙劣 。</p> <p>最后，我利用 Django REST 框架生成真正的结点。回想一下，这些都能用 Django 独立实现。Django REST 框架是个很强大的平台，因此，我在其他地方也使用了它的序列化器（Serializer）。</p> <pre> <code class="language-javascript">class APICallResponseTimeView(APIView): """Powers response time dashboard.""" def get(self, request, format=None): overview = CallResponseTimeOverview(request.GET) return Response(overview.to_dict())</code></pre> <h2><strong>前台</strong></h2> <h3><strong>由数据驱动</strong></h3> <p>前文中，我提到过要让数据驱动应用。实操中，那意味着前台应用工作流如下：</p> <ol> <li>用户通过点击图表上的过滤器选项栏选择不同的过滤器。</li> <li>URL会被更新以反映现有的过滤器。</li> <li>应用监视 URL 的变化。只要 URL 一变，它就向后台请求新数据。</li> <li>当请求返回后，我们更新数据。</li> <li>当数据更新，页面也就更新了。</li> </ol> <p>我们将这种架构称为“响应式的”，但到底是什么意思？前台订阅事件（包括数据变更），然后响应事件后进行自我更新。最后两点就是响应式的由来。</p> <p>前三项很有意思，而且，颠覆了你之前的期待。过滤器改变时，我便更新内部状态，而当状态更新后，URL 的哈希值也更新了。我订阅了「哈希值变化」事件，然后发出 Ajax 请求。根据下述应用流步骤，回想一下就看到了事件和响应。他们看起来同步，实际是异步的。</p> <ul> <li>当用户点击图表，过滤器改变。</li> <li>当用户使用过滤器栏，过滤器改变。</li> <li>当过滤器改变： <ul> <li>URL 哈希值更新</li> <li>过滤器选项栏更新</li> </ul> </li> <li>当 URL 哈希值改变，发出调用新数据的 Ajax 请求。</li> <li>当请求返回， 调用的数据被更新。</li> <li>当被调用的数据被更新，图表就更新了。</li> </ul> <p>这种响应式范式，和你在著名的 React.js 中看到的是一样的。我们用的是 Ractive.js ，这个库没那么有名，但是简单易懂。对于本项目中的智能看板，Ractive 的复杂程度刚好合适。在两个库中，你都需要创建组件。这些组件当中有数据，当数据变化触发的事件，并可以通过 UI 互动触发事件。</p> <p>下面是一个简单的 Ractive 组件和相关的模板：</p> <pre> <code class="language-javascript">var ChartHeader = Ractive.extend({ template: require("../templates/chart_header.html"), data: { hidden: true }, oninit: function() { this.on("toggleExplanation", function() { this.set("hidden", !this.get("hidden")); }); } });</code></pre> <pre> <code class="language-javascript"><div> <h3 class="chart-title"> {{ title }} <i class="fa fa-info-circle clickable" on-click="toggleExplanation"></i> </h3> {{ #unless hidden }} <div class="explanation well"> {{ >content }} </div> {{ /unless }} </div></code></pre> <p>注意，这个模板并不止渲染一次。每当 Ractive 组件中的数据发生变化，就会重新计算该模板。</p> <h3><strong>图表</strong></h3> <p>D3 是目前为止最好的、功能最齐全的可视化库，但是说它是画图表的库并不准确。它是一个可用于生成图表和其他可视化形式的底层工具。如果你只需要一些图表，选择更高层级（high-level）工具会使你的工作变得轻松得多。你应该选择一些基于 D3 的工具——有 D3 作为基础，可以更容易地从生成可视化图形，如我们用到的热图（heatmap）。一些推荐工具如下：</p> <ul> <li><a href="/misc/goto?guid=4958837491231333647" rel="nofollow,noindex">NVD3</a></li> <li><a href="/misc/goto?guid=4958848055440753120" rel="nofollow,noindex">C3</a></li> <li><a href="/misc/goto?guid=4958975599732152034" rel="nofollow,noindex">Plotly.js</a></li> <li><a href="/misc/goto?guid=4959722050751934685" rel="nofollow,noindex">Vega</a></li> </ul> <p>我们用的是 NVD3。 这是个不错的选择：因为 NVD3 的默认样式很棒，图表种类也不少。</p> <p>我们来看一个 NVD3 图表，以及如何更新。首先创建一个高级对象开始， <em>HorizontalBarChart</em> 。</p> <pre> <code class="language-javascript">var volumeByDOWChart = new HorizontalBarChart({ dashboard: dashboard, filter: "dow_received", el: "#volume-by-dow", ratio: 1.5, fmt: d3.format(",d"), x: function (d) { return d.name; }, y: function (d) { return d.volume; } }); monitorChart(dashboard, "data.volume_by_dow", volumeByDOWChart.update);</code></pre> <p><em>HorizontalBarChart</em> 可接受多种选项，其中有的设计表现形式，有的更加底层。 <em>dashboard</em> 是真正的 Ractive 智能看板插件，我们需要从中获取数据，然后触发一个在看板加载完后绘制图表的事件。 <em>filter</em> 是过滤器对象的关键，前端监控的鼠标点击时将更新图表。其他都是表现形式选项，指定图表渲染位置及如何格式化数据</p> <p>和所有高级组件一样， <em>HorizontalBarChart</em> 有一个 <em>.create</em> 方法，在实例化（instantiation）时被调用, 还有一个被 <em>monitorChart</em> 调用的 <em>.update</em> 方法。 <em>monitorChart</em> 这个函数是用于监视看板中关键路径（“keypath”，是指一个树状目录型的数据）上的数据，当该数据的子集改变时调用一个函数。</p> <pre> <code class="language-javascript">function monitorChart (ractive, keypath, fn) { ractive.observe(keypath, function (newData) { if (!ractive.get("loading")) { fn(newData); } }); }</code></pre> <p>制作一个新图表，只需要定义一个新图表对象，然后给它配置一个 <em>monitorChart</em> 即可。（回过头来看， <em>monitorChart</em> 这个名字起得很糟糕：它应该叫 <em>monitorRactive</em> 。）</p> <h3><strong>热图</strong></h3> <p>高级库不是什么事都能干。在本项目中，我们想要一个基于天/小时的热图，用于查看拨打 911 的通讯量。我们需要用 D3 来实现这个。我们从 bl.ocks.org 的一个例子 开始。</p> <p>如果要一行一行代码地介绍，可能得领写一篇 D3 教程，但是我们有两个贡献反映了怎么将同样的形式复制到其他可视化图形中：</p> <pre> <code class="language-javascript">this.create = function () { var bounds = this.getBounds(), container = d3.select(this.el), width = bounds.width, height = bounds.height, gridSize = Math.floor(width / this.ratio / 10); container .append("svg") .attr("width", width) .attr("height", height) .attr("viewBox", "0 0 " + width + " " + height) .append("g") .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); this.drawLabels(); d3.select(window).on("resize", function () { self.resize(); }); this.drawn = true; }; this.update = function (data) { self.ensureDrawn().then(function () { self._update(data); }); };</code></pre> <p>我们用一个方法去建立可视化，然后当 Ractive 组件中正确的子集数据变化时调用一个 <em>.update</em> 方法。我们必须确保这个组件被完全绘制，因为Ractive组件中的数据会随着页面加载立即变化。</p> <h2><strong>经验总结</strong></h2> <p>正如其他软件工程，回看之前的过程我会以不同的方式去做很多事情。在写这篇文章的时候，我发现了很多可以重写的代码。我还想尝试其他不同的库。总之，尽管如此，我还是对该项目很满意，特别是它的架构。</p> <p><img alt="我是这样用Django和D3开发911数据看板的" src="https://simg.open-open.com/show/55b8113035887db168ad001dc3ae8180.png" width="1311" height="403"></p> <p>这个架构的优势在于它的具有单向流动性以及可标记状态。数据处理都交由 PostgreSQL 完成，而 Django 则负责协调看板和数据库的通讯。</p> <p> </p> <p> </p> <p>来自：http://www.codingpy.com/article/build-dashboards-with-django-and-d3/</p> <p> </p>