${title[0]}${labels[j] && ` (${labels[j]})`} ${title[1]}${labels[i] && ` (${labels[i]})`}

25:["$","title",null,{"children":"3D | Nazim | Observable"}] 49:T438,legend = () => { const k = 20; const arrow = DOM.uid(); return svg` ${d3.cross(d3.range(n), d3.range(n)).map(([i, j]) => svg` ${title[0]}${labels[j] && ` (${labels[j]})`} ${title[1]}${labels[i] && ` (${labels[i]})`} `)} ${title[0]} ${title[1]} `; }4a:T656,paths = { let paths = [] let color = new THREE.Color(0xf31212); let col = cols[0] const divSplits = 1 objectPoints.forEach(([obj,centroids]) => { let col = cols[centroids[0]['className']] if (centroids.length < 2) return const positions = [] const colors = [] const points = centroids.map( ({ new_centroidX,new_centroidZ, new_centroidY }) => new THREE.Vector3(new_centroidX,new_centroidZ,new_centroidY)).flat() const spline = new THREE.CatmullRomCurve3(points) const divisions = Math.round(divSplits * points.length) const point = new THREE.Vector3() const color = new THREE.Color() for (let i=0, l=divisions; i parseInt(d/255)) colors.push( r, g, b ) } const geometry = new THREE.LineGeometry(); geometry.setPositions( positions ); // geometry.setColors( colors ); const matLine = new THREE.LineMaterial( { color: getHexNumber(col), linewidth: lineThickness * 0.001, // in world units with size attenuation, pixels otherwise // vertexColors: true, //resolution: // to be set by renderer, eventually dashed: false, alphaToCoverage: true, } ); const line = new THREE.Line2( geometry, matLine ); line.computeLineDistances(); line.scale.set( 1, 1, 1 ); paths.push(line) }) // return paths }4b:[{"id":"fef4532d53a151cc20270acb9896f40831233b413d98d8470fd179665cc2e8ee88c8790a9506889f741c14da297dfa1b8cee70b9b615fa6c695011079ccb9e10","href":"https://static.observableusercontent.com/files/fef4532d53a151cc20270acb9896f40831233b413d98d8470fd179665cc2e8ee88c8790a9506889f741c14da297dfa1b8cee70b9b615fa6c695011079ccb9e10","name":"4.obj","type":"application/octet-stream","lastModified":1686329106968.842,"size":3827246},{"id":"55bf600f07da29543d60288d7f583c0408bfbaa38c384b6ca13e0bcb1fe431292d3fe2e926a6023b817ce31148322fcfb875e578879cfd7095aa1768b5f743f2","href":"https://static.observableusercontent.com/files/55bf600f07da29543d60288d7f583c0408bfbaa38c384b6ca13e0bcb1fe431292d3fe2e926a6023b817ce31148322fcfb875e578879cfd7095aa1768b5f743f2","name":"plan.obj","type":"application/octet-stream","lastModified":1686330104693.31,"size":3315352},{"id":"c825b5e4d1071e7cff018821cbea3f07b07d972349156c22edb49d1aca0d6865a486179348c60fd3815ade6e31b8247a2236e3a27c35116858c1ba0d30c2c0f7","href":"https://static.observableusercontent.com/files/c825b5e4d1071e7cff018821cbea3f07b07d972349156c22edb49d1aca0d6865a486179348c60fd3815ade6e31b8247a2236e3a27c35116858c1ba0d30c2c0f7","name":"Vector 1.svg","type":"image/svg+xml","lastModified":1686580789868.496,"size":291},{"id":"e9f7ff44be650c166b0329a63eaff22e10f3211ad2878c5ddd6344c7716e3fe7fa5eb9c75579bd6208e425a8611d223473808782f28909d24736a35421d62149","href":"https://static.observableusercontent.com/files/e9f7ff44be650c166b0329a63eaff22e10f3211ad2878c5ddd6344c7716e3fe7fa5eb9c75579bd6208e425a8611d223473808782f28909d24736a35421d62149","name":"plan.jpg","type":"image/jpeg","lastModified":1688407912467.668,"size":147088},{"id":"c29507698904bc400ae07937150957ba701755f96ddbfd1d1f11a0d14922b417d01fc22b73b5b776a1f1ebb6b950d75b0785e223eea070ce3fccd249f601404d","href":"https://static.observableusercontent.com/files/c29507698904bc400ae07937150957ba701755f96ddbfd1d1f11a0d14922b417d01fc22b73b5b776a1f1ebb6b950d75b0785e223eea070ce3fccd249f601404d","name":"camera_a_3Dhomography_220730_17_20@1.csv","type":"text/csv","lastModified":1688556015005.329,"size":45431407}] 29:{"id":"d75142b571eff96e","slug":null,"title":"3D","thumbnail":"d19046b41809f870bc2430f3566e4413c976b7833733f94afc504e9b65f14493","access_level":"public","create_time":"$D2023-06-08T15:05:56.019Z","update_time":"$D2023-10-27T10:27:33.597Z","view_time":null,"first_public_time":"$D2023-06-08T15:05:56.019Z","has_unpublished_edits":null,"fork":{"id":"e89e954121474fed","slug":"loading-obj-from-file-three-js","title":"Loading .OBJ from file Three.js","owner":{"id":"a311b2c901bccd79","login":"esrs","name":"Esteban Serrano"}},"stars":0,"starred":false,"owner":{"type":"team","id":"22a5c876af1d4b63","login":"gnalxom","name":"Nazim","avatar_url":"https://avatars-next.observableusercontent.com/d8bc7de03ad7dd2061e8ab60be066de794dead9423374d4fc188c7851fd0cff7","tier":"starter_2024","bio":"","following":false},"version":2970,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"1cd14df68d8d3341","login":"gnalxom","name":"Nazim","avatar_url":"https://avatars-next.observableusercontent.com/d8bc7de03ad7dd2061e8ab60be066de794dead9423374d4fc188c7851fd0cff7","tier":null,"bio":"","following":false}],"members":[{"type":"individual","id":"1cd14df68d8d3341","login":"gnalxom","name":"Nazim","avatar_url":"https://avatars-next.observableusercontent.com/d8bc7de03ad7dd2061e8ab60be066de794dead9423374d4fc188c7851fd0cff7","tier":null,"role":"editor"},{"type":"individual","id":"3a255ed56e8545e5","login":"shreyas-kumar","name":"Shreyas Kumar","avatar_url":"https://avatars-next.observableusercontent.com/34525b633aee35ea46766c833cc0e38e4f7528c58293c223030674ea8f7a83d9","tier":null,"role":"viewer"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"titling":"auto","title":"3D","cells":[{"id":1999,"value":"# 3D","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1648,"value":"viewof selectFreqChart = Inputs.select([\"area\", \"rect\"], {label: \"Select frequency chart type\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1654,"value":"viewof timeFocus = Plot.plot({\n width,\n height:100,\n color:{legend: true, type: \"categorical\"},\n marks:[\n Plot.rectY(data, Plot.binX({y:d => d3.group(d, e => e.uid).size, filter:null},{x: \"timeStamp\",thresholds:50, fill:\"className\"})),\n Plot.rectY(data, Plot.brushX(\n Plot.binX({y:d => d3.group(d, e => e.uid).size, filter:null},{x: \"timeStamp\",thresholds:50,fill:\"className\"}))\n ),\n \n // Plot.brushX(data, {x:\"timeStamp\"})\n ]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2695,"value":"viewof nColors = Inputs.select([3,5],{label:\"Bivariate colours\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2356,"value":"viewof hexRadius = Inputs.range([5,10],{step: 1, value: 8,label: \"Hexbin size\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2651,"value":"`Roughly ${Math.floor(realExtent.height * (hexRadius/hexHeight)*100)/100}m hexgrid`","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":2447,"value":"chart = {\n const svg = d3.create(\"svg\")\n .attr(\"viewBox\", [0, 0, width, 150]);\n\n svg.append(legend)\n .attr(\"transform\", `translate(75,75)`);\n\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1718,"value":"viewof spaceFocus = Plot.plot({\n width: hexWidth,\n // height: hexHeight,\n axis: null,\n fill: {legend: true},\n x:{domain:[0,realExtent.width]},\n y:{domain:[-realExtent.height,0]},\n marks: [\n Plot.image([planImage],{\n src:\"src\",\n x:realExtent.width/2,\n y:-realExtent.height/2,\n width:hexWidth,\n opacity:0.5\n }),\n // Plot.hexgrid({binWidth: 10}),\n Plot.dot(timeFocus.flat(), Plot.hexbin({fill:d=> color(getBiVariateValues(d))},{x:\"new_centroidX\", y:d => -d[\"new_centroidY\"], binWidth: hexRadius})),\n Plot.dot(timeFocus.flat(), Plot.brush(Plot.hexbin({\n // r: d => d3.sum(getBiVariateValues(d)), \n fill:d=> color(getBiVariateValues(d))},{x:\"new_centroidX\", y:d => -d[\"new_centroidY\"],binWidth: hexRadius,selectionMode: \"extent\"})))\n // ,Plot.brush(timeFocus,{x:\"new_centroidX\", y:d => -d[\"new_centroidY\"]}\n \n]})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1858,"value":"Plot.plot({\n // width,\n color:{\n legend:true, \n // tickFormat: d => objectclasses.filter(e => e.class === d)[0][\"label\"],\n // type:\"categorical\"\n },\n marks:[\n Plot.rectY(spaceFocusData,Plot.binX({y:d => {\n console.log(d3.group(d, e => e.className))\n return d3.group(d, e => e.uid).size\n }},{x:\"timeStamp\", fill:\"className\"}))\n ]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2012,"value":"color = {\n let x = d3.scaleQuantile(Array.from(spatialBins, d => d[1]), d3.range(n))\n let y = d3.scaleQuantile(Array.from(spatialBins, d => d[0]), d3.range(n))\n\n \n return value => {\n if (!value) return \"#ccc\";\n let [a, b] = value;\n return colors[y(b) + x(a) * n];\n };\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2438,"value":"colors= ({\n 3: [\n \"#e8e8e8\", \"#ace4e4\", \"#5ac8c8\",\n \"#dfb0d6\", \"#a5add3\", \"#5698b9\", \n \"#be64ac\", \"#8c62aa\", \"#3b4994\"\n ],\n \n // [\n // \"#e8e8e8\", \"#e4acac\", \"#c85a5a\",\n // \"#b0d5df\", \"#ad9ea5\", \"#985356\",\n // \"#64acbe\", \"#627f8c\", \"#574249\"\n // ],\n 5: [\"#e8e8e8\", \"#c8e1e1\", \"#a6d9d9\", \"#81d1d1\", \"#5ac8c8\", \"#dec8d9\", \"#c8c8d9\", \"#a6c8d9\", \"#81c8d1\", \"#5ac8c8\", \"#d3a7cb\", \"#c8a7cb\", \"#a6a7cb\", \"#81a7cb\", \"#5aa7c8\", \"#c986bc\", \"#c886bc\", \"#a686bc\", \"#8186bc\", \"#5a86bc\", \"#be64ac\", \"#be64ac\", \"#a664ac\", \"#8164ac\", \"#5a64ac\"]\n\n\n\n\n})[nColors]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2442,"value":"n = Math.floor(Math.sqrt(colors.length))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2458,"value":"title = [\"Pedestrian\", \"Rider\"]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2456,"value":"labels = [\"low\", \"\", \"high\"]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2434,"value":"$49","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2616,"value":"realExtent = ({width:120,height:40, prop:120/40})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2375,"value":"hexWidth = width","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2378,"value":"hexHeight = hexWidth/realExtent.prop","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2363,"value":"hexX = d3.scaleLinear()\n .domain(d3.extent(timeFocus.flat(), d => d.new_centroidX))\n .range([0, hexWidth])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2366,"value":"hexY = d3.scaleLog()\n .domain(d3.extent(timeFocus.flat(), d => -d.new_centroidY))\n .range([0, hexHeight])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2348,"value":"hexbin = d3.hexbin()\n.x(d => hexX(d.new_centroidX))\n.y(d => hexY(-d.new_centroidY))\n.radius(hexRadius)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2383,"value":"spatialBins = hexbin(timeFocus.flat())\n.map( d => getBiVariateValues(d))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2307,"value":"spaceFocusData = !spaceFocus ? timeFocus.flat() \n : timeFocus.flat()\n .filter(d => (d.new_centroidX > spaceFocus.x[0]) && (d.new_centroidX < spaceFocus.x[1])\n && (d.new_centroidY > spaceFocus.y[0]) && (d.new_centroidY > spaceFocus.y[1])\n )","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2030,"value":"getBiVariateValues = function(d){\n let uniqueCounts = d3.rollup(\n d,\n v => d3.group(v, u => u.uid).size, \n u => u.className\n )\n let classCounts = Object.assign({\"Pedestrian\":0, \"Rider\":0},Object.fromEntries(uniqueCounts))\n classCounts[\"Pedestrian\"] = classCounts[\"Pedestrian\"] - classCounts[\"Rider\"]\n \n return ([classCounts[\"Pedestrian\"],classCounts[\"Rider\"]])\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":242,"value":"# 3D","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":789,"value":"viewof time = Scrubber(dates, {autoplay: false, loop: false, alternate: true, delay: 200, \n format: d=> formatTime(interval, d)})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":886,"value":"viewof interval = Inputs.select([\"Hour\", \"Minute\", \"Second\"],{value: \"Minute\", label: \"Select time interval\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1838,"value":"viewof selectAggregated = Inputs.toggle({label: \"Aggregated\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1961,"value":"viewof selectObjects = Inputs.checkbox([\"Pedestrian\",\"Rider\"])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":266,"value":"renderer.domElement","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1489,"value":"## Render options","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1348,"value":"viewof lineThickness = Inputs.range([1,10],{label: \"Line Thickness\", value: 2, step: 0.5})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1878,"value":"viewof contextOpacity = Inputs.range([0,1],{step:0.05, value:0.75, label: \"Context Transparency\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":530,"value":"viewof selectMaterial = Inputs.select([\n \"Normal\", \"Lambert\"\n],{label: \"Select material\", value: \"Lambert\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":571,"value":"viewof selectSides = Inputs.select([\n \"Front\", \"Back\", \"Double\"\n],{label: \"Select side to render\", value: \"Double\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":606,"value":"viewof bgColor = Inputs.color({label: \"Background color\", value: \"#e3e3e3\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1491,"value":"## Camera options","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":841,"value":"camera = {\n // const fov = 45;\n const aspect = width / height;\n const near = 1;\n const far = 1000;\n const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);\n \n camera.position.set(camX,camZ,camY)\n camera.lookAt(lookAt);\n // camera.zoom = 20\n return camera;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1011,"value":"viewof camX = Inputs.range([0,120],{step:1, value:40, label: \"camX\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1017,"value":"viewof camY = Inputs.range([-120,1120],{step:1, value:40, label: \"camY\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1020,"value":"viewof camZ = Inputs.range([-120,120],{step:1, value:15, label: \"camZ\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1023,"value":"viewof fov = Inputs.range([0,120],{label: \"fov\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1054,"value":"lookAt = new THREE.Vector3(60, 5, 20)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1597,"value":"## Processing","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":768,"value":"dates = {\n let dates = timeFocus.flat().map(d => d.timeStamp)\n \n return d3[`time${interval}`].range(...d3.extent(dates))\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1527,"value":"### Filter data","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":2914,"value":"dates","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2932,"value":"z(199900)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2926,"value":"z = d3.scaleLinear()\n.domain(d3.extent(spaceFocusData.map(d => d.timeStamp - dates[0])))\n.range([0,10])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2919,"value":"spaceFocusData.map(d => d.timeStamp - dates[0])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":638,"value":"dataFiltered = {\n // let objs = data.filter(d => d.class === 0)\n // .filter(d => formatTime(interval,d.timeStamp) === formatTime(interval,time))\n // .map( d => d.uid)\n\n let filtered = spaceFocusData\n .filter(d => selectObjects.includes(d.className))\n .sort((a, b) => a.timeStamp - b.timestamp)\n .filter(d => d.timeStamp <= time)\n\n if(!selectAggregated){\n let currObjects = [...new Set(filtered\n .filter(d => formatTime(interval,d.timeStamp) === formatTime(interval,time))\n .map(d => d.uid)\n )]\n\n filtered = filtered.filter(d => currObjects.includes(d.uid))\n }\n filtered = filtered.map( d => Object.assign({new_centroidZ: z(d.timeStamp - dates[0])},d))\n \n return filtered\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1529,"value":"### Setup geometries","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":382,"value":"importedObj = {\n const url = await FileAttachment(\"4.obj\").url()\n let importedObj = await loadObject(url)\n importedObj.traverse(function (child) {\n if (child.isMesh) child.material = material;\n });\n \n return importedObj\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1305,"value":"objectPoints = d3.groups(dataFiltered, d => d.uid)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2881,"value":"cols = ({\n \"Pedestrian\": colors.slice(-nColors,-nColors+1)[0],\n \"Rider\": colors.slice(nColors-1,nColors)[0]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1106,"value":"$4a","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2867,"value":"getHexNumber = (hexString) => parseInt(hexString.replace(/^#/, ''), 16)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2818,"value":"import {swatches} from \"@d3/working-with-color\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2810,"value":"swatches([\n colors.slice(-nColors,-nColors+1),\n colors.slice(nColors-1,nColors)\n])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":634,"value":"points = {\n\n let unique = objectPoints.map(d => d[1].slice(-1)[0])\n \n let positions = unique.map( ({new_centroidX,new_centroidZ, new_centroidY}) => [new_centroidX,new_centroidZ,new_centroidY]).flat()\n let colors = unique.map( d => {\n let color = new THREE.Color(getHexNumber(cols[d.className]));\n return [color.r,color.g,color.b]}).flat()\n\n let geometry = new THREE.BufferGeometry()\n geometry.addAttribute('position', new THREE.Float32BufferAttribute( positions, 3 ))\n geometry.addAttribute( 'color', new THREE.Float32BufferAttribute( colors, 3 ));\n \n var material = new THREE.PointsMaterial( { size: 0.5, vertexColors: true } );\n const points = new THREE.Points( geometry, material );\n\n // points.position.set = (0, 0, 0);\n // const s = 0.01;\n // points.scale.set(s, s, s);\n\n return points\n \n \n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":728,"value":"plan = {\n const url = await FileAttachment(\"plan.obj\").url()\n const planObj = await loadObject(url)\n const lineMaterial = new THREE.LineBasicMaterial( { color: 0x0000ff } );\n const lines = new THREE.LineSegments(planObj.children[0].geometry, lineMaterial);\n\n return lines\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1541,"value":"plane = {\n let planeSize = {length: 120, width: 40}\n const geometry = new THREE.PlaneGeometry(planeSize.length, planeSize.width);\n const material2 = new THREE.MeshLambertMaterial( {color: 0xffff00} );\n let plane = new THREE.Mesh( geometry, material2 );\n plane = plane.rotateX( - Math.PI / 2);\n plane.position.set(planeSize.length/2,0,planeSize.width/2)\n return plane\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1531,"value":"### Setup materials","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":580,"value":"materialOptions = ({\n color: \"049ef4\",\n reflectivity: 1,\n wireframe: false,\n transparent: true,\n opacity: contextOpacity,\n // depthtest: true,\n // depthwrite: true,\n side: THREE[`${selectSides}Side`],\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":488,"value":" material = ({\n \"Lambert\": new THREE.MeshLambertMaterial(materialOptions),\n \"Normal\": new THREE.MeshNormalMaterial(materialOptions),\n })[selectMaterial]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1547,"value":"### Load objects to scene","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":623,"value":"objects = {\n return [\n importedObj, \n points,\n ...paths,\n // plane,\n // plan\n ]\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1595,"value":"### Render","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":304,"value":"// Continuously updates\n{\n while (true) {\n // importedObj.rotation.y += 0.001\n renderer.render(scene, camera);\n yield null;\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1496,"value":"### Load data","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":631,"value":"dataImport = await FileAttachment(\"camera_a_3Dhomography_220730_17_20@1.csv\").csv({typed: \"auto\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"dataImport","database":"$undefined"},{"id":1972,"value":"data = dataImport.filter(d => [0,1,3].includes(d.class))\n .map( d => {\n return Object.assign({className: d.class === 0 ? \"Pedestrian\" : \"Rider\"},d)\n })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2685,"value":"planImage = FileAttachment(\"plan.jpg\").image()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":451,"value":"#### Helper","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":389,"value":"loadObject = (url) => new Promise ((resolve,reject) => {\n const loader = new THREE.OBJLoader();\n // instantiate a loader\n loader.load(\n\t // resource URL\n url,\n \t// called when resource is loaded\n\t function ( object ) {\n resolve(object);\n \t},\n\t // called when loading is in progresses\n\t function ( xhr ) {\n\t\t return ( xhr.loaded / xhr.total * 100 ) + '% loaded' ;\n \t},\n\t // called when loading has errors\n\t function ( error ) {\n reject (\"Error in loading\")\n\t }\n );\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":820,"value":"formatTime = function(interval, data){\n let formats = {\n \"Hour\" : \"%Y-%m-%dT%H\",\n \"Minute\": \"%Y-%m-%dT%H:%M\",\n \"Second\": \"%Y-%m-%dT%H:%M:%S\"\n }\n return d3.timeFormat(formats[interval])(data)\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":336,"value":"### Other stuff","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":249,"value":"scene = {\n const scene = new THREE.Scene();\n scene.background = new THREE.Color(bgColor);\n const light = new THREE.DirectionalLight({\n color: \"000000\",\n // intensity: 0.025\n }); // soft white light\n\n \n scene.add( light );\n\n objects.forEach( object => scene.add(object))\n \n return scene;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"renderer = {\n const renderer = new THREE.WebGLRenderer({antialias: true});\n renderer.setSize(width, height);\n renderer.setPixelRatio(devicePixelRatio);\n const controls = new THREE.OrbitControls(camera, renderer.domElement);\n \n controls.target.copy(lookAt);\n controls.update();\n controls.addEventListener(\"change\", () => {\n renderer.render(scene, camera)\n })\n \n\n invalidation.then(() => (controls.dispose(), renderer.dispose()));\n // renderer.physicallyCorrectLights = true\n return renderer;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":52,"value":"height = 600","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1502,"value":"### Imports","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1885,"value":"import {objectclasses} from \"97eb1fa9f6dd1fc2\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1217,"value":"modulePaths = [\n 'controls/OrbitControls', \n 'utils/GeometryUtils',\n 'loaders/OBJLoader',\n 'lines/LineGeometry',\n 'lines/LineMaterial',\n 'lines/Line2',\n 'lines/LineSegments2',\n 'lines/LineSegmentsGeometry'\n // 'exporters/GLTFExporter.js'\n]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1211,"value":"import {THREE} with {modulePaths} from '@severo/three'","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":791,"value":"import {Scrubber} from \"@mbostock/scrubber\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1671,"value":"import {Plot} from \"@observablehq/plot-brush-interaction-1653\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2353,"value":"d3.hexbin()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2350,"value":"d3 = require(\"d3@6\", \"d3-hexbin@0.2\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4b","stdlib":"1"}} 24:null