31:T4e6,chart = { const svg = d3.select(DOM.svg(mapWidth, mapHeight)).style("background","#ffffff") svg.append("path") .datum(us_outline) .attr("fill", "#dfe6e9") .attr("d", geopath); svg.append("path") .datum(us_states_mesh) .attr("fill", "none") .attr("stroke", "white") .attr("stroke-linejoin", "round") .attr("d", geopath); var myline = d3.line() .x(d => projection([d.LON, d.LAT])[0]) .y(d => projection([d.LON, d.LAT])[1]); svg.append("g") .attr("stroke", "#b2bec3") .attr("stroke-width", 3) .attr("fill","none") .selectAll(".route") .data([sorted_stations]) .join("path") .attr("stroke-linejoin","round") .attr("d",myline); svg.append("g") .attr("fill", "#636e72") .attr("fill-opacity", 1) .attr("stroke", "none") .selectAll("circle") .data(sorted_stations) .join("circle") .attr("cx", d => projection([d.LON, d.LAT])[0]) .attr("cy", d => projection([d.LON, d.LAT])[1]) .attr("fill", (d,i) => ((i==0)|(i==stations.length-1)) ? "#e84393" : "#636e72") .attr("r", (d,i) => ((i==0)|(i==stations.length-1)) ? 4 : 2) .append("title") .text(d => d.NAME); return svg.node(); }32:T198a,html` ` 33:T7fc,solveTSP = function(cities) { // algo slightly modified version of its implementation here: https://observablehq.com/@oscarlvp/tsp-art // edited here for haversine distance const ESPILON = -0.001; var toRad = 1; let distances = (() => { const dist = (a, b) => haversine([cities[a].LON*toRad, cities[a].LAT*toRad], [cities[b].LON*toRad, cities[b].LAT*toRad]) let result = []; for (let i = 0; i < cities.length; i++) { let row = new Float32Array(cities.length); for (let j = 0; j < cities.length; j++) { row[j] = dist(i, j); } result.push(row); } return result; })(); function firstTwoOptImprovement(tour) { const next = current => (current + 1) % tour.length; const pick = d3.randomInt(tour.length - 2); function delta(i, j) { let ni = tour[next(i)]; let nj = tour[next(j)]; let ci = tour[i]; let cj = tour[j]; return ( distances[ci][cj] + distances[ni][nj] - distances[ci][ni] - distances[cj][nj] ); } function move(from, to) { let result = [...tour]; let count = to - from; for (let i = 0; i < count; i++) { result[from + 1 + i] = tour[to - i]; } return result; } for ( let times = 0, start = pick(); times < tour.length; times++, start = next(start) ) { for (let end = start + 2; end < tour.length; end++) { let variation = delta(start, end); if (variation < ESPILON) { return { tour: move(start, end), delta: variation }; } } } return { tour: tour, delta: 0 }; } const random = () => d3.shuffle(d3.range(cities.length)); let current = { tour: random(), delta: Number.MIN_SAFE_INTEGER }; //yield current.tour; console.log("delta " + current.delta); while (current.delta < 0) { //yield current.tour; current = firstTwoOptImprovement(current.tour); } //yield current.tour; return(current.tour); }34:[{"id":"6670bf7c796c1ce7b3562727227a88cc4658685a9a19423c99263badc7459d50eedd462eda5fe8d8f9287be99494cbd61e0d995613dede102b1b5cf6ebf2c839","href":"https://static.observableusercontent.com/files/6670bf7c796c1ce7b3562727227a88cc4658685a9a19423c99263badc7459d50eedd462eda5fe8d8f9287be99494cbd61e0d995613dede102b1b5cf6ebf2c839","name":"observations_09.csv","type":"text/csv","lastModified":1610520122642.68,"size":12317588},{"id":"8261a3fb468358c2928c6e2bfab0943e8cbdc31878095d5caa56f1475f67e8126c6ced72c206a11ec3fb41f30b6b1eb48e73198f1406bd4a045c2127ad8dee22","href":"https://static.observableusercontent.com/files/8261a3fb468358c2928c6e2bfab0943e8cbdc31878095d5caa56f1475f67e8126c6ced72c206a11ec3fb41f30b6b1eb48e73198f1406bd4a045c2127ad8dee22","name":"stations_09.csv","type":"text/csv","lastModified":1610519901816.531,"size":33103},{"id":"f98f4a7546a9f99a2626decb3f57cfeaf0d3c2781b0349a4d18bc87c5b24f40ad1e73b8791374e7d604c492eb571c33686bf7f90bb14d3593e54c65f6ab470be","href":"https://static.observableusercontent.com/files/f98f4a7546a9f99a2626decb3f57cfeaf0d3c2781b0349a4d18bc87c5b24f40ad1e73b8791374e7d604c492eb571c33686bf7f90bb14d3593e54c65f6ab470be","name":"observations_01.csv","type":"text/csv","lastModified":1610520130302.169,"size":13855208},{"id":"8261a3fb468358c2928c6e2bfab0943e8cbdc31878095d5caa56f1475f67e8126c6ced72c206a11ec3fb41f30b6b1eb48e73198f1406bd4a045c2127ad8dee22","href":"https://static.observableusercontent.com/files/8261a3fb468358c2928c6e2bfab0943e8cbdc31878095d5caa56f1475f67e8126c6ced72c206a11ec3fb41f30b6b1eb48e73198f1406bd4a045c2127ad8dee22","name":"stations_01.csv","type":"text/csv","lastModified":1610519901187.752,"size":33103}] 2f:{"title":"The Same, but Different 🌡 Combining Timeseries Data with the Traveling Salesman Problem for an Art Piece","cells":[{"id":0,"value":"md`\n# The Same, but Different 🌡 Combining Timeseries Data with the Traveling Salesman Problem for an Art Piece\n### Genuary 2021: Day 12 -- Use an API\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2,"value":"md`I used this notebook to create my entry for [Day 12](https://genuary2021.github.io/prompts) of [Genuary](https://genuary2021.github.io/). _(See my [collection of entries here](https://observablehq.com/collection/@mattdzugan/genuary-2021))_\n\nThe prompt is: Use an API\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":13,"value":"md`\nThe concept to this generative piece is fairly straight forward:\n\nLet's just plot a bunch of temperature data as timeseries graphs.\n\nBut let's do it in a clever way... Let's take data for hundreds of locations across the US and plot them one after another. What order should we do them in though? How about we try and travel a path across the US that connects the points in an order such that total trip distance is minimized!\n\nThe result (of ordering the locations into a single tour that will become our order) looks like this:\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":79,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":476,"value":"md`## Finished Art Piece`","pinned":false,"hidden":false,"mode":"ojs"},{"id":355,"value":"viewof perStationWidth = slider({\n min: 1, \n max: 100, \n step: 1, \n value: 40, \n title: \"Max Possible Width of Any Station's Line\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":421,"value":"md`_to edit the month of data being plotted, look for the code block below with (near the 🚀 )_`","pinned":false,"hidden":false,"mode":"ojs"},{"id":264,"value":"a={\n await visibility();\n \n\n const context = DOM.context2d(w, h);\n context.fillStyle = \"#1c2541\";\n context.fillRect(0,0,w,h);\n \n var myline = d3.line()\n .x(d => xscale(new Date(d.DATE)))\n .y(d => yscale_micro(d.TEMP))\n .context(context);\n \n \n for (var ii=0; ii new Date(x.DATE))))\n .range([margin.left, w-margin.right])","pinned":false,"hidden":false,"mode":"ojs"},{"id":286,"value":"yscale_macro = d3.scaleLinear().domain([0, sorted_stations.length-1])\n .range([margin.top, h-margin.bottom])","pinned":false,"hidden":false,"mode":"ojs"},{"id":314,"value":"yscale_micro = d3.scaleLinear().domain(d3.extent(observations_flat.map(x => x.TEMP)))\n .range([perStationWidth/2, -1*perStationWidth/2])","pinned":false,"hidden":false,"mode":"ojs"},{"id":272,"value":"w = width","pinned":false,"hidden":false,"mode":"ojs"},{"id":275,"value":"h = width/16*9","pinned":false,"hidden":false,"mode":"ojs"},{"id":280,"value":"margin = {\n return({top: 50, bottom: 50, left: 50, right: 50}) \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":161,"value":"geopath = d3.geoPath().projection(projection)","pinned":true,"hidden":false,"mode":"ojs"},{"id":134,"value":"projection = d3.geoAlbersUsa().fitSize([mapWidth, mapHeight], us_outline)","pinned":false,"hidden":false,"mode":"ojs"},{"id":164,"value":"mapWidth = width/3;","pinned":false,"hidden":false,"mode":"ojs"},{"id":167,"value":"mapHeight = mapWidth*0.66","pinned":false,"hidden":false,"mode":"ojs"},{"id":87,"value":"md`### data files\n🚀 if you'd like to explore analyzing different months, edit these two file names\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":250,"value":"observations_flat = {\n var raw = await FileAttachment(\"observations_01.csv\").csv(); \n var d1 = raw.map(d => {return {STATION: d.STATION, \n DATE: d.DATE,\n TEMP: Number(d.TMP_val),\n CALL: d.CALL.trim()}});\n return(d1)\n}\n ","pinned":true,"hidden":false,"mode":"ojs"},{"id":90,"value":"rawStations = FileAttachment(\"stations_01.csv\").csv()","pinned":true,"hidden":false,"mode":"ojs"},{"id":102,"value":"md`### processed data:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":300,"value":"observations_grouped = d3.group(observations_flat, x=> x.CALL);","pinned":false,"hidden":false,"mode":"ojs"},{"id":106,"value":"stations = rawStations.map(d => {return {LAT: Number(d.LAT), \n LON: Number(d.LON),\n NAME: d[\"STATION.NAME\"].trim(),\n CALL: d.CALL.trim()}})","pinned":false,"hidden":false,"mode":"ojs"},{"id":187,"value":"sorted_stations = {\n var stationOrder = await solveTSP(stations);\n var s = stationOrder.map(x => stations[x])\n return(s);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":64,"value":"md`### Data Pulling Code\nI ended up doing the major data requests from R. It ended up being a pretty sizable pull and I want this notebook to be more about the viz than the data pull.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":57,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":148,"value":"md`### geographies:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":157,"value":"us_states_mesh = topojson.mesh(us_topojson, us_topojson.objects.states, (a, b) => a !== b)","pinned":false,"hidden":false,"mode":"ojs"},{"id":153,"value":"us_outline = topojson.feature(us_topojson, us_topojson.objects.nation)","pinned":false,"hidden":false,"mode":"ojs"},{"id":151,"value":"us_topojson = await d3.json(\"https://gist.githubusercontent.com/palewire/6e346850e48208a03c2fd09ba103d97a/raw/ba3e7ebefe2f50c411496abb273a8e65bd70ad60/us-10m-unprojected.json\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":71,"value":"md`## imports:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":21,"value":"d3 = require(\"d3\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":124,"value":"topojson = require(\"topojson-client@3\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":127,"value":"import {us} from \"@d3/zoom-to-bounding-box\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":114,"value":"import {haversine} from \"@pamacha/nearest-neighbor-particles-on-a-sphere\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":111,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":351,"value":"import {slider, select} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W34","stdlib":"1","titling":"auto"}