2c:null 2d:["$","title",null,{"children":"3D MDS when-map | Nilo Pedrazzini | Observable"}] 32:Ta88,scatter3D = { // https://plotly.com/python-api-reference/generated/plotly.graph_objects.Image.html // https://plotly.com/javascript/hover-text-and-formatting/ const hovertemplate = "Longitude" + ": %{x}
" + "Latitude" + ": %{z}
" + "State:Zip Code" + ": %{text}
" + "State Population" + ": %{y}
" + ""; const population = zipData.map(d => d.population); const distinctPopulations = d3.sort([...new Set(population)]); const populationRange = d3.extent(distinctPopulations); // https://observablehq.com/@d3/sequential-scales const interpolator = normalizedPopulation => [normalizedPopulation, d3.scaleSequential(colorScheme)(normalizedPopulation) ]; const getColorScale = d3.scaleSequential(interpolator).domain(populationRange); const colorscale = distinctPopulations.map(d => getColorScale(d) ); const zipScatter = [{ x: zipData.map(d => d.longitude), z: zipData.map(d => d.latitude), y: population, mode: 'markers', marker: { size: 1, color: population, colorscale // https://plotly.com/javascript/colorscales/ }, hovertemplate, text: zipData.map(d => `${lower48[d.state]}: ${d.zip_code}` ), type: 'scatter3d' } ]; // zipScatter const layout = { width: width, height: width / 1.5 , title: "U.S. 3D Scatter Plot", scene: { // https://plotly.com/python/3d-camera-controls/ camera: {eye: {x:0, y:1.8, z:0.1}}, aspectmode: "manual", // https://plotly.com/javascript/reference/layout/scene/#layout-scene-aspectmode aspectratio: { x: 1.5, y: 0.5, z: 0.8 }, xaxis: {title: {text: "Longitude"}, range: d3.extent(zipData, d => +d.longitude).reverse().map(d => Math.ceil(d)) }, yaxis: {title: {text: "Population" } }, zaxis: {title: {text: "Latitude"}, range: d3.extent(zipData, d=> +d.latitude).map(d => Math.ceil(d)) } }, }; // layout const div = DOM.element('div'); Plotly.react(div, zipScatter, layout); return div; } 33:[{"id":"911ed40a35fd01115ee5c262590173a8c738a1fe06d4eaf704750198567e6c72be0ce865b1b36e1270dbb1e6349acc8a431d16e812db798dd1ffcf9c12a4f7e3","href":"https://static.observableusercontent.com/files/911ed40a35fd01115ee5c262590173a8c738a1fe06d4eaf704750198567e6c72be0ce865b1b36e1270dbb1e6349acc8a431d16e812db798dd1ffcf9c12a4f7e3","name":"mds@1.df.csv","type":"text/csv","lastModified":1651959930753.873,"size":43952},{"id":"0dcd469508f1d168bbae58100d68c421e6b83c1757d44513a7e7a220e05d873780006add41e597a33e0ed41f3b55008b0800fa314e5a2636bd3a04d585cfc1f9","href":"https://static.observableusercontent.com/files/0dcd469508f1d168bbae58100d68c421e6b83c1757d44513a7e7a220e05d873780006add41e597a33e0ed41f3b55008b0800fa314e5a2636bd3a04d585cfc1f9","name":"when-while-nocontext.csv","type":"text/csv","lastModified":1651923302292.509,"size":7252538},{"id":"e59bead7f77a21568620743fda7b88cdf12599a3701c786918f5330410dcb7111493a129a2edeacfcafd606f0e2dc80ad3508c108144a6fc8424d50001024fc1","href":"https://static.observableusercontent.com/files/e59bead7f77a21568620743fda7b88cdf12599a3701c786918f5330410dcb7111493a129a2edeacfcafd606f0e2dc80ad3508c108144a6fc8424d50001024fc1","name":"when-while-matrix.txt","type":"text/plain","lastModified":1651924480751.947,"size":18796127},{"id":"fa5646e246b4262ae019ff2db555c98937a3a039f59accc26012e3a75df158874d946bab811dd4106f3cf209d04884e8797375a3336f7492ea2749a978e59461","href":"https://static.observableusercontent.com/files/fa5646e246b4262ae019ff2db555c98937a3a039f59accc26012e3a75df158874d946bab811dd4106f3cf209d04884e8797375a3336f7492ea2749a978e59461","name":"mds@2.df.csv","type":"text/csv","lastModified":1689668375330.435,"size":55257}] 30:{"id":"6285437c6e748a3e","slug":"3d-mds-when-map","title":"3D MDS when-map","thumbnail":"ce33271d893f9b35cc9ef71d20e9e80e47669d6fcf9f165d2a784d1a20d43771","access_level":"public","create_time":"$D2022-05-07T11:32:54.006Z","update_time":"$D2023-07-18T09:14:10.123Z","view_time":null,"first_public_time":"$D2023-07-18T07:38:21.520Z","has_unpublished_edits":null,"fork":{"id":"ee9e4fb45c009de1","slug":"search-table","title":"Search + Table","owner":{"id":"f35c755083683fe5","login":"observablehq","name":"Observable"}},"stars":0,"starred":false,"owner":{"type":"team","id":"af12d294aeed1479","login":"npedrazzini","name":"Nilo Pedrazzini","avatar_url":"https://avatars-next.observableusercontent.com/d81b4421d36d53e942376372d7acf399109dad58a06b34dc1df55428f76ab9f6","tier":"starter_2024","bio":""},"version":319,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"cf2c42d02b062a37","login":"npedrazzini","name":"Nilo Pedrazzini","avatar_url":"https://avatars-next.observableusercontent.com/d81b4421d36d53e942376372d7acf399109dad58a06b34dc1df55428f76ab9f6","tier":null,"bio":""}],"members":[{"type":"individual","id":"cf2c42d02b062a37","login":"npedrazzini","name":"Nilo Pedrazzini","avatar_url":"https://avatars-next.observableusercontent.com/d81b4421d36d53e942376372d7acf399109dad58a06b34dc1df55428f76ab9f6","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"titling":"auto","title":"3D MDS when-map","cells":[{"id":4,"value":"# 3D MDS when-map","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":17,"value":"data = FileAttachment(\"when-while-nocontext.csv\").csv()\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":264,"value":"mds2Df = await FileAttachment(\"mds@2.df.csv\").csv({typed: \"auto\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"mds2Df","database":"$undefined"},{"id":25,"value":"viewof search = Inputs.table(data)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":34,"value":"Inputs.table(search)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":40,"value":"matr = FileAttachment(\"when-while-matrix.txt\").tsv({array: true, typed: true})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":61,"value":"numeral = require('numeral')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":59,"value":"mdsclassic = function(distances, dimensions) {\n dimensions = dimensions || 2;\n\n // square distances\n var M = numeral.mul(-.5, numeral.pow(distances, 2));\n\n // double centre the rows/columns\n function mean(A) { return numeral.div(numeral.add.apply(null, A), A.length); }\n var rowMeans = mean(M),\n colMeans = mean(numeral.transpose(M)),\n totalMean = mean(rowMeans);\n\n for (var i = 0; i < M.length; ++i) {\n for (var j =0; j < M[0].length; ++j) {\n M[i][j] += totalMean - rowMeans[i] - colMeans[j];\n }\n }\n\n // take the SVD of the double centred matrix, and return the\n // points from it\n var ret = numeral.svd(M),\n eigenValues = numeral.sqrt(ret.S);\n return ret.U.map(function(row) {\n return numeral.mul(row, eigenValues).splice(0, dimensions);\n });\n};","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":97,"value":"mds = FileAttachment(\"mds@1.df.csv\").csv()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":243,"value":"mds","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":242,"value":"Plot.plot({\n marks: [\n Plot.auto(mds, {})\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":234,"value":"mds","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":229,"value":"viewof mdssearch = Inputs.search(mds)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":103,"value":"import {Scatterplot} from \"@d3/scatterplot\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":99,"value":"Scatterplot(data, {\n x: d => d.coord1,\n y: d => d.coord2,\n xLabel: \"Dim1\",\n yLabel: \"Dim2\",\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":266,"value":"d3.csv('https://raw.githubusercontent.com/plotly/datasets/master/api_docs/mt_bruno_elevation.csv', function(err, rows){\nfunction unpack(rows, key) {\n return rows.map(function(row) { return row[key]; });\n}\nvar z_data=[ ]\n\n// for(i=0;i<24;i++)\n// {\n// z_data.push(unpack(rows,i));\n// }\n\nvar data = [{\n z: z_data,\n type: 'surface',\n contours: {\n z: {\n show:true,\n usecolormap: true,\n highlightcolor:\"#42f462\",\n project:{z: true}\n }\n }\n}];\n\nvar layout = {\n title: 'Mt Bruno Elevation With Projected Contours',\n scene: {camera: {eye: {x: 1.87, y: 0.88, z: -0.64}}},\n autosize: false,\n width: 500,\n height: 500,\n margin: {\n l: 65,\n r: 50,\n b: 65,\n t: 90,\n }\n};\n\nPlotly.newPlot('myDiv', data, layout);\n});\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":270,"value":"Plot.plot({\n marks: [\n Plot.dot(mds2Df, {x: \"x\", y: \"y\", z:\"z\"})\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":273,"value":"data1 = mds2Df","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":280,"value":"Plot.plot({\n marks: [\n Plot.auto(mds2Df, {})\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":282,"value":"Plotly = require(\"https://cdn.plot.ly/plotly-latest.min.js\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":286,"value":"async function csv(url) {\n return Plotly.d3.csv.parse((await (await fetch(url)).text()));\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":288,"value":"function unpack(rows, key) {\n return rows.map(function(row) { \n return row[key]; \n });\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":284,"value":"{\n const z = mds2Df.map(d => d.z);\n\n const zipScatter = [{x: mds2Df.map(d => d.x), \n y: mds2Df.map(d => d.y), \n z: z,\n mode: 'markers',\n marker: { size: 10, \n color: z, \n },\n type: 'scatter3d'\n }\n ];\n \n var layout = {\n width: width,\n height: width * 0.7,\n margin: {\n \t l: 0,\n \t r: 0,\n \t b: 0,\n \t t: 0\n }\n };\n \n const div = DOM.element('div');\n\n Plotly.newPlot(div, zipScatter, layout);\n return div;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":292,"value":"mds2Df","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":304,"value":"$32","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1"}} 31:"$30:body"