2d:null 2e:["$","title",null,{"children":"Geo + Time Selection | Kris Sankaran | Observable"}] 33:T1d52,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(); }34:T529,f = { var height = 500, scales = generate_scales(); function generate_scales() { return { "x": d3.scaleLinear().domain([0, 1]).range([0, width/3]), "y": d3.scaleLinear().domain([-3, 3]).range([height, 0]), "group_fill": d3.scaleOrdinal().domain([-1, 0, 1, 2, 3]).range(["#33333a", "#5C8F7A", "#B36B76", "#1C76B7", "#ffa812", "#d6cadd", "#93ccea"]), "opacity": (d) => sum_helper(d, 0.1, 1), "width": (d) => sum_helper(d, 1, 3), "map_opacity": (d) => sum_helper(d, .2, 1), "map_width": (d) => sum_helper(d, 0.5, 2), } } function sum_helper(d, a, b) { var sum = d.ts + d.map; if (sum == 0) { return 0; } else if (sum == 1) { return a; } else if (sum == 2) { return b; } } function initialize_query(times, id) { var result = {0: []} for (var i = 0; i < times.length; i++) { result[0].push({ "time": times[i], "upper": 0.5, "lower": -0.5 }); } return result; } function qline_fun(type) { return d3.line() .x((d) => scales.x(d.time)) .y((d) => scales.y(d[type])) } return { "height": height, "scales": scales, "generate_scales": generate_scales, "initialize_query": initialize_query, "qline_fun": qline_fun, } }35:[{"id":"bd2efa0d57f997d2c53fe2d70208d8bd95236f6aa1e8cb211c114f7c617460430365c12d921814de354feaafbf822798607f9af7fd8b75e18a179386b868b185","href":"https://static.observableusercontent.com/files/bd2efa0d57f997d2c53fe2d70208d8bd95236f6aa1e8cb211c114f7c617460430365c12d921814de354feaafbf822798607f9af7fd8b75e18a179386b868b185","name":"zip3-2.json","type":"application/json","lastModified":1575498934653.702,"size":1313495},{"id":"585a9c4967bf79cb0401945f68b1c3df8da52e633e4bf977a09f8a838499b18dfb639a6c27f4a88ffd991b2d4857b8409cfe7d033dcfc43a740bcdb285f50ae6","href":"https://static.observableusercontent.com/files/585a9c4967bf79cb0401945f68b1c3df8da52e633e4bf977a09f8a838499b18dfb639a6c27f4a88ffd991b2d4857b8409cfe7d033dcfc43a740bcdb285f50ae6","name":"ts.json","type":"application/json","lastModified":1575498800842.174,"size":303650}] 31:{"id":"66b27a923c047aab","slug":"geo-time-selection","title":"Geo + Time Selection","thumbnail":"284ffbc5e20365cd5d938e2fd0eb4ed925b82d4c402f97101ba37d5d6b400c13","access_level":"public","create_time":"$D2019-12-04T22:32:55.280Z","update_time":"$D2022-10-29T03:10:41.548Z","view_time":null,"first_public_time":"$D2019-12-05T18:38:29.494Z","fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"58c635fe0c6a930c","login":"krisrs1128","name":"Kris Sankaran","avatar_url":"https://avatars-next.observableusercontent.com/384a4d4ac6e6ad0ce3c5b1bc69c03d2c693a0b2859424bd8395dfef0e462967e","tier":"starter_2024"},"version":299,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"544fdf34bf62b87c","login":"krisrs1128","name":"Kris Sankaran","avatar_url":"https://avatars-next.observableusercontent.com/384a4d4ac6e6ad0ce3c5b1bc69c03d2c693a0b2859424bd8395dfef0e462967e","tier":null}],"members":[{"type":"individual","id":"544fdf34bf62b87c","login":"krisrs1128","name":"Kris Sankaran","avatar_url":"https://avatars-next.observableusercontent.com/384a4d4ac6e6ad0ce3c5b1bc69c03d2c693a0b2859424bd8395dfef0e462967e","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":3,"collection":null,"type":"notebook","body":{"title":"Geo + Time Selection","cells":[{"id":52,"value":"md`# Geo + Time Selection`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":269,"value":"md`Hover over the left panel to make selections by time series. Hover over the map to make selections by zip codes. Double click the left panel to switch the bound, and double click the map to freeze the view. Click on \"new\" to create a new highlighting color, and \"highlight\" to toggle highlight vs. erase mode. Click on the colored squares to select one of the previous groups.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":0,"value":"ts_data = FileAttachment(\"ts.json\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"geo_data = FileAttachment(\"zip3-2.json\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"map_ft = topojson.feature(geo_data, geo_data.objects.zip3).features","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"topojson = require(\"topojson-client@3\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"d3 = require(\"d3-selection@1\", \"d3-selection-multi\", \"d3-scale\", \"d3-array\", \"d3-axis\", \"d3-drag\", \"d3-brush\", \"d3-shape\", \"d3-fetch\", \"d3-scale-chromatic\", \"d3-geo\", \"d3-delaunay@6\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W35","stdlib":"1","titling":"auto"}} 32:"$31:body"