chart = { var selected = {}; for (var i = 0; i < ts_data.length; i++) { selected[ts_data[i].zip] = {"map": false, "ts": false}; } var mode = "highlight" var groups = [-1] var cur_group = 0 var qid = 0 var cur_bound = "upper" var key_types = ["upper", "lower"]; var active = true; var times = ts_data[0].ts.map((d) => d.time); var queries = f.initialize_query(times, qid); const svg = d3.select(DOM.svg(width, f.height)); var proj = d3.geoAlbers() .scale(800) .translate([650, 250]); var zips = Object.keys(selected); var scales = f.scales var grid_vals = {"x": d3.range(0, 1, 0.05), "y": d3.range(-4, 4, 0.25)}; var grid_data = [] for (var i = 0; i < grid_vals.x.length; i++) { for (var j = 0; j < grid_vals.y.length; j++) { grid_data.push({"x": grid_vals.x[i], "y": grid_vals.y[j]}) } } var voronoi = d3.Delaunay.from( grid_data, d => scales.x(d.x), d => scales.y(d.y) ) .voronoi([0, 0, scales.x.range()[1], f.height]) var group_membership = {}; for (var i = 0; i < zips.length; i++) { group_membership[zips[i]] = groups[0] } svg.selectAll("g") .data(["series", "map", "inputs", "queries-upper", "queries-lower", "voronoi"]).enter() .append("g") .attr("id", (d) => d) svg.select("#background") .append("rect") .attrs({ "width": width, "height": 500, "fill": "transparent", }); for (var k in key_types) { svg.select("#queries-" + key_types[k]) .selectAll("path") .data([queries[0]]).enter() .append("path") .attrs({ "d": f.qline_fun(key_types[k]), "fill": "none", "stroke": (d) => "black" }); } var mesh = svg.select("#voronoi") .append("path") .attrs({ "fill": "none", "d": voronoi.render(), }); var cell = svg.append("g") .attr("fill", "none") .attr("pointer-events", "all") .selectAll("path") .data(grid_data) .join("path") .attr("d", (d, i) => voronoi.renderCell(i)) .on("mouseover", function(d) { if (!active) return update_query(d); env_filter(); redraw(); }) .on("dblclick", function() { if (cur_bound == "upper") { cur_bound = "lower" } else { cur_bound = "upper" } } ); svg.select("#map") .selectAll("path") .data(map_ft).enter() .append("path") .attrs({ "id": (d) => d.properties.ZIP3, "fill": (d) => "#33333a", "fill-opacity": 0, "stroke": "#33333a", "stroke-width": 0.7, "stroke-opacity": 0.1, "d": d3.geoPath().projection(proj) }) .on("dblclick", () => { active = !active }) .on("mouseover", function() { if (!active) return; if (mode == "highlight") { if (!selected[this.id].map) { selected[this.id].map = true; } group_membership[this.id] = cur_group } else if (selected[this.id].map && mode == "erase") { selected[this.id].map = false; } redraw(); }) svg.select("#series") .selectAll("path") .data(ts_data, (d) => d.zip).enter() .append("path") .attrs({ "d": (d) => d3.line().x((e) => scales.x(e.time)).y((e) => scales.y(e.value))(d.ts), "fill": "none", "stroke": "black", "stroke-width": 0 }); svg.select("#inputs") .attrs({ "transform": "translate(" + (0.6 * width) + "," + (f.height - 50) + ")" }); // text annotation svg.select("#inputs") .append("text") .attrs({"x": 5, "y": 20, "id": "mode"}) .text("highlight") svg.select("#inputs") .append("text") .attrs({"x": 115, "y": 20}) .text("new") // input selectors svg.select("#inputs") .append("rect") .attrs({ "x": 0, "id": "highlight_mode", "width": 100, "fill": "transparent", "stroke": "black", "height": 30, }) .on("click", function() { mode = (mode == "highlight") ? "erase" : "highlight" svg.select("#inputs") .select("#mode") .text(mode) }); initialize_selector(svg, cur_group); svg.select("#inputs") .append("rect") .attrs({ "id": "group_creator", "width": 70, "height": 30, "x": 110, "fill": "transparent", "stroke": "black" }) .on("click", function() { if (groups.length < 6) { groups.push(groups.length + 1); cur_group = groups.length - 1; initialize_selector(svg); } }) function initialize_selector(svg) { svg.select("#inputs") .append("rect") .attrs({ "id": "group_" + cur_group, "group_num": cur_group, "width": 20, "height": 20, "x": 190 + 22 * cur_group, "fill": scales.group_fill(cur_group) }) .on("click", function() { cur_group = parseInt(d3.select(this).attr("group_num")); }); } function redraw_query() { for (var k in key_types) { svg.select("#queries-" + key_types[k]) .selectAll("path") .data([queries[0]]) .transition() .duration(200) .attrs({ "d": f.qline_fun(key_types[k]), }); } } function update_query(d) { query_data([d.x, d.y], queries, qid, cur_bound); redraw_query(); } function query_data(pos) { if (pos[1] > scales.y.domain()[1] || pos[1] < scales.y.domain()[0]) return; var T = queries[0].length; var closest_ix = Math.round(pos[0] * T) / T; // will have to deal with margins later for (var t = 0; t < T; t++) { if (Math.abs(closest_ix - queries[qid][t].time) < 0.1) { queries[qid][t][cur_bound] = pos[1] if (queries[qid][t]["lower"] + .4 > queries[qid][t]["upper"]) { queries[qid][t]["upper"] += .4 } if (queries[qid][t]["upper"] - .4 < queries[qid][t]["lower"]) { queries[qid][t]["lower"] -= .4 } } } } function env_filter() { for (var i = 0; i < ts_data.length; i++) { var series = ts_data[i] selected[series.zip].ts = env_contain(series.ts, times, queries) } } function env_contain(series, times, queries) { for (var t = 0; t < times.length; t++) { if (series[t]["value"] > queries[qid][t]["upper"] || series[t]["value"] < queries[qid][t]["lower"]) { return false; } } return true; } function selected_series(ts_data) { var result = []; var times = ts_data[0]["ts"].map((d) => d.time); for (var i = 0; i < ts_data.length; i++) { var status = env_contain(ts_data[i]["ts"], times, queries); if (status) { result.push(ts_data.zip) } } return result; } function redraw() { svg.select("#map") .selectAll("path") .attrs({ "fill-opacity": (d) => scales.map_opacity(selected[d.properties.ZIP3]), "stroke-width": (d) => 0.7 + scales.map_width(selected[d.properties.ZIP3]), "fill": (d) => scales.group_fill(group_membership[d.properties.ZIP3]), }) svg.select("#series") .selectAll("path") .attrs({ "stroke-width": (d) => scales.width(selected[d.zip]), "stroke": (d) => scales.group_fill(group_membership[d.zip]), "stroke-opacity": (d) => scales.opacity(selected[d.zip]), }) } env_filter(); redraw(); return svg.node(); }