Date: ${photo.date}, mission: ${photo.mission}

31:T6b3,viewof picker = svg``32:T511,viewof style = html``33:[] 2f:{"title":"Panorama Picker","cells":[{"id":0,"value":"md`# Panorama Picker\nPrototype for a new user interface component to select street view panorama photos, to be used in [the data portal of the city of Amsterdam](https://data.amsterdam.nl/#?mpb=topografie&mpz=11&mpo=pano::T&mpv=52.3734173:4.8935939&pgn=home&sbf=CI&sbh=-Lc&sbi=TMX7316010203-000719_pano_0000_000950&sbl=ZRXBN:3JKTL).\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":292,"value":"md`_This prototype is made with [Observable](https://observablehq.com/), the perfect combination between [Jupyter Notebook](http://jupyter.org/), reactive coding with [hot reloading](https://github.com/gaearon/react-hot-loader), [JSFiddle](https://jsfiddle.net/), a Markdown version of Google Docs, and your browser’s developer console._`","pinned":false,"hidden":false,"mode":"ojs"},{"id":230,"value":"viewof mission = radio({\n title: 'Mission type',\n description: 'Please select the mission type of the panorama photos you want to view',\n options: [\n { label: 'All', value: 'all' },\n { label: 'BI', value: 'bi' },\n { label: 'WOZ', value: 'woz' },\n ],\n value: 'all'\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":17,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"photos = [\n {\n date: '2020-02-04',\n mission: 'woz',\n distance: 30\n },\n {\n date: '2019-06-04',\n mission: 'woz',\n distance: 30\n },\n {\n date: '2018-05-04',\n mission: 'woz',\n distance: 30\n },\n {\n date: '2018-02-01',\n mission: 'bi',\n distance: 40\n },\n {\n date: '2017-05-09',\n mission: 'bi',\n distance: 40\n },\n {\n date: '2017-06-09',\n mission: 'bi',\n distance: 40\n },\n {\n date: '2017-10-09',\n mission: 'bi',\n distance: 50\n },\n {\n date: '2015-11-11',\n mission: 'bi',\n distance: 1300\n },\n {\n date: '2014-06-08',\n mission: 'bi',\n distance: 14\n }\n]","pinned":true,"hidden":false,"mode":"ojs"},{"id":387,"value":"selectedYears = []","pinned":false,"hidden":false,"mode":"ojs"},{"id":244,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":236,"value":"filteredPhotos = photos.filter((photo) => mission === 'all' ? true : photo.mission === mission)","pinned":false,"hidden":false,"mode":"ojs"},{"id":43,"value":"years = Array.from(new Array(yearMinMax[1] - yearMinMax[0] + 1), (d, i) => i + yearMinMax[0])","pinned":false,"hidden":false,"mode":"ojs"},{"id":27,"value":"yearMinMax = {\n const sorted = R.sort((a, b) => a - b, R.map(year, R.pluck('date', photos)))\n return [sorted[0], sorted[sorted.length - 1]] \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":22,"value":"xBand = d3.scaleBand()\n .domain(years)\n .range([0, width])\n .padding(0)","pinned":false,"hidden":false,"mode":"ojs"},{"id":133,"value":"xLinear = d3.scaleTime()\n .domain([\n new Date(yearMinMax[0], 0, 1),\n new Date(yearMinMax[1], 12, 0)\n ])\n .range([0, width])\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":29,"value":"year = (date) => new Date(date).getFullYear()","pinned":false,"hidden":false,"mode":"ojs"},{"id":173,"value":"height = 80","pinned":false,"hidden":false,"mode":"ojs"},{"id":196,"value":"maxDistance = 50","pinned":false,"hidden":false,"mode":"ojs"},{"id":283,"value":"farPaddingY = 25","pinned":false,"hidden":false,"mode":"ojs"},{"id":89,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":13,"value":"R = require('//cdnjs.cloudflare.com/ajax/libs/ramda/0.25.0/ramda.min.js')","pinned":false,"hidden":false,"mode":"ojs"},{"id":231,"value":"import {radio} from '@jashkenas/inputs'","pinned":false,"hidden":false,"mode":"ojs"},{"id":15,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}