Python & D3.js 仪表板交叉过滤器热图

Question

我已在此处成功复制此交互式仪表板地图 example。

我现在想输入我自己的数据。我的 python 比示例的更简单，因为我所有的数据都已经按照我想要的方式进行了结构化。这是我的 python:

    # -*- coding: utf-8 -*-

import pandas as pd
from shapely.geometry import Point, shape

from flask import Flask
from flask import render_template
import json


data_path = './input/'

def get_location(longitude, latitude, ny_json):

    point = Point(longitude, latitude)

    for record in ny_json['features']:
        polygon = shape(record['geometry'])
        if polygon.contains(point):
            return record['properties']['Name']
    return 'other'

with open(data_path + '/geojson/ny_HA.json') as data_file:
    ny_json = json.load(data_file)

app = Flask(__name__)
    #route to html index
@app.route("/")
def index():
    return render_template("index.html")

    #route data
@app.route("/data")
def get_data():
    df = pd.read_csv(data_path + 'Mikes_NY_geocoded_tickets.csv', sep=';')

    df['location'] = df.apply(lambda row: get_location(row['longitude'], row['latitude'], ny_json), axis=1)

    cols_to_keep = ['timestamp', 'longitude', 'latitude', 'Violation', 'Type', 'DayOfWeek', 'location']

    #remove NaN values 
    df_clean = df[cols_to_keep].dropna()
    #return a json
    return df_clean.to_json(orient='records')


if __name__ == "__main__":
    app.run(host='0.0.0.0',port=5000,debug=True)

这是我的数据geocoded_data.csv：

当我运行我的应用程序 python app.py 时，没有错误，当我在浏览器中输入本地主机时，我的仪表板出现了，但一切都是空的，我的交叉过滤器和地图。

这是浏览器显示的内容：

这是我在浏览器控制台中的错误任何想法将不胜感激。

Answer 1

现在您已经显示了您的 JS 代码（在上面的调试器屏幕截图中），很容易猜出哪里出了问题。

你有

d["timestamp"] = dateFormat.parse(d["timestamp"]);
d["timestamp"].setMinutes(0); // Error: d["timestamp"] is null

这是 documentation for d3.time.format.parse():

Parses the specified string, returning the corresponding date object. If the parsing fails, returns null. Unlike "natural language" date parsers (including JavaScript's built-in parse), this method is strict: if the specified string does not exactly match the associated format specifier, this method returns null. For example, if the associated format is the full ISO 8601 string "%Y-%m-%dT%H:%M:%SZ", then the string "2011-07-01T19:15:28Z" will be parsed correctly, but "2011-07-01T19:15:28", "2011-07-01 19:15:28" and "2011-07-01" will return null, despite being valid 8601 dates.

您没有显示 d["timestamp"] 的值在转换之前是什么，但可能在预期格式和实际格式之间存在细微差别。

特别是，如果您的数据截图是正确的，那么您的日期格式中没有秒，但您的 d3.time.format 说明符需要它们？

Python & D3.js 仪表板交叉过滤器热图

Python & D3.js Dashboard Crossfilter Heat Map

javascript

python

heatmap

d3.js

crossfilter