31:[] 2f:{"title":"Gebouwen in Amsterdam","cells":[{"id":0,"value":"md`# Gebouwen in Amsterdam`","pinned":false,"hidden":false,"mode":"ojs"},{"id":423,"value":"md`\n\nIn dit Observable-notebook gaan we aan de slag met [D3.js](https://d3js.org/) en Amsterdamse gebouwendata. Observable is een nieuwe tool, gemaakt door [Mike Bostock](https://twitter.com/mbostock) (de maker van D3.js), waarmee je snel interactieve webdocumenten kan maken.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":217,"value":"md`### Opdrachten\n\n1. Begin met het bekijken van de volgende links (lees in elk geval de Five-Minute Introduction):\n - [Why Observable?](https://beta.observablehq.com/@mbostock/why-observable)\n - [Five-Minute Introduction](https://beta.observablehq.com/@mbostock/five-minute-introduction)\n - [Datavisualisatie met Observable](https://beta.observablehq.com/collection/@observablehq/visualization)\n - [Observable & cartografie](https://beta.observablehq.com/collection/@observablehq/maps)\n\n2. We gaan aan de slag met JavaScript en geografische data, opgeslagen in het [GeoJSON-formaat](https://en.wikipedia.org/wiki/GeoJSON). Op [geojson.io](https://geojson.io) kun je proberen hoe GeoJSON werkt.\n3. Maak een Observable-account!\n3. Als je dit gedaan hebt kun je dit notebook [_forken_](https://beta.observablehq.com/@mbostock/how-saving-works), zodat wijzigingen die je maakt opgeslagen worden.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":22,"value":"md`## Data\n\nAan de slag!\n\nWe beginnen met het downloaden van gebouwen-data:\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":232,"value":"buildings = d3.json('https://raw.githubusercontent.com/bertspaan/cmda-tt/master/buildings-amsterdam-2-buurten.geojson')","pinned":true,"hidden":false,"mode":"ojs"},{"id":442,"value":"md`Met D3 kunnen we eenvoudig JSON-data binnenhalen. Voor meer informatie, zie [_Introduction to Data_](https://beta.observablehq.com/@mbostock/introduction-to-data). De data komt uit een [repository op GitHub](https://github.com/bertspaan/cmda-tt).\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":448,"value":"md`We kunnen de data nu heel eenvoudig bekijken, filteren en sorteren. Zo kunnen we bijvoorbeeld zien in welke wijken in Amsterdam de gebouwen in de dataset staan:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":238,"value":"[...new Set(buildings.features.map((feature) => feature.properties.buurt.naam))]","pinned":true,"hidden":false,"mode":"ojs"},{"id":452,"value":"md`Of welke straten:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":249,"value":"[...new Set(buildings.features.map((feature) => feature.properties.straat))]","pinned":true,"hidden":false,"mode":"ojs"},{"id":456,"value":"md`Ook kunnen we functies maken die de data transformeren:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":372,"value":"huisnummer = (feature) => parseInt(feature.properties.nummer)","pinned":true,"hidden":false,"mode":"ojs"},{"id":472,"value":"md`Huisnummers van de eerste 20 gebouwen:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":467,"value":"buildings.features.slice(0, 20).map(huisnummer)\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":459,"value":"adres = (feature) => `${feature.properties.straat} ${feature.properties.nummer}${feature.properties.toevoeging}`","pinned":true,"hidden":false,"mode":"ojs"},{"id":474,"value":"md`Adressen van de eerste 5 gebouwen:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":374,"value":"buildings.features.slice(0, 5).map(adres)\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":219,"value":"md`### Opdrachten\n\n1. Bekijk de data en de velden per gebouw.\n2. Zoek de wijken op de kaart van Amsterdam.\n3. Converteer een enkel gebouw naar JSON met \\`JSON.stringify()\\` en visualiseer dit gebouw op [geojson.io](https://geojson.io).\n4. In de [GitHub-repository](https://github.com/bertspaan/cmda-tt) waar de dataset vandaan komt staan nog 2 GeoJSON-bestanden. Pas de [URL](#buildings) aan en download een andere, grotere dataset.\n5. Reken het hoogste huisnummer uit van alle gebouwen in de dataset.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":33,"value":"md`## Bouwjaar`","pinned":false,"hidden":false,"mode":"ojs"},{"id":489,"value":"md`Met D3 kun je geografische data projecteren naar pixel-coördinaten, en tekenen als SVG. Dit is een ingewikkeld proces, wat goed uitgelegd wordt in [de documentatie van D3.js](https://github.com/d3/d3-geo).\n\nIn de [_Maps_-collectie](https://beta.observablehq.com/collection/@observablehq/maps) van Observable staan veel voorbeelden over het werken met GeoJSON en projecties.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":512,"value":"md`Projecteer GeoJSON met \\`d3.geoMercator()\\`:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":509,"value":"projection = (geojson, size) => d3.geoMercator()\n .center(turf.centroid(geojson).geometry.coordinates)\n .fitExtent([[size * .1, size * .1], [size * .9, size * .9]], turf.envelope(geojson))","pinned":true,"hidden":false,"mode":"ojs"},{"id":505,"value":"md`Converteer GeoJSON naar een SVG-pad:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":502,"value":"path = (geojson, projection) => d3.geoPath().projection(projection)(geojson)","pinned":true,"hidden":false,"mode":"ojs"},{"id":517,"value":"md`Functie die een lijst van gebouwen tekent als SVG:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":486,"value":"drawBuildings = (features, size) => svg``","pinned":true,"hidden":false,"mode":"ojs"},{"id":496,"value":"singleNeighbourhood = buildings.features\n .filter((feature) => feature.properties.buurt.naam === 'Dorp Sloten')","pinned":true,"hidden":false,"mode":"ojs"},{"id":526,"value":"md`Visualisatie van alle gebouwen in een buurt:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":252,"value":"drawBuildings(singleNeighbourhood, 2000)","pinned":false,"hidden":false,"mode":"ojs"},{"id":528,"value":"md`De tekening hierboven is saai en grijs! We willen kleur!\n\nEen nieuwe functie om de gebouwen met kleur te tekenen:\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":530,"value":"drawColoredBuildings = (features, size, getColor) => svg``","pinned":false,"hidden":false,"mode":"ojs"},{"id":535,"value":"md`Simpele functie die gebouwen een kleur geeft afhankelijk van hun bouwjaar:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":537,"value":"getYearColor = (feature) => {\n const year = feature.properties.bouwjaar\n \n if (year < 1900) {\n return 'red'\n } else {\n return 'blue'\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":533,"value":"drawColoredBuildings(singleNeighbourhood, 1900, getYearColor)","pinned":false,"hidden":false,"mode":"ojs"},{"id":211,"value":"md`### Opdrachten\n\n1. Teken een andere wijk\n2. Kies andere kleuren, gebruik bijvoorbeeld [ColorBrewer](http://colorbrewer2.org/) (deze kleurpaletten zitten standaard in [D3.js](https://github.com/d3/d3-scale-chromatic))\n3. Gebruik de kleuren van de [originele gebouwenkaart](http://code.waag.org/buildings/) (de kleurwaarden staan in een [Observable-notebook](https://beta.observablehq.com/@bertspaan/all-buildings-in-the-netherlands)).\n4. Geef de kaart een zwarte achtergrond, door de CSS aan te passen.\n5. In welke wijk staat het oudste gebouw? En in welke het nieuwste?\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":222,"value":"md`## Oppervlakte\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":559,"value":"md`We kunnen de gebouwendata natuurlijk ook op een andere manier visualiseren, we hoeven geen kaart te gebruiken.\nMet D3.js kunnen we een [histogram](https://beta.observablehq.com/@mbostock/d3-histogram) maken van de afmetingen van de gebouwen in de dataset.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":566,"value":"md`Met [Turf.js](http://turfjs.org/) kunnen we de oppervlakte van een gebouw uitrekenen:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":562,"value":"area = (geojson) => turf.area(geojson)","pinned":true,"hidden":false,"mode":"ojs"},{"id":583,"value":"md`De functies hieronder bepalen de assen en de afmetingen van het histogram:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":349,"value":"areas = buildings.features.map((feature) => area(feature))","pinned":true,"hidden":false,"mode":"ojs"},{"id":329,"value":"bins = d3.histogram()\n .domain(x.domain())\n .thresholds(x.ticks(40)) \n (areas)","pinned":true,"hidden":false,"mode":"ojs"},{"id":599,"value":"maxSquareMeters = 500","pinned":false,"hidden":false,"mode":"ojs"},{"id":643,"value":"margin = ({top: 20, right: 20, bottom: 30, left: 40})","pinned":false,"hidden":false,"mode":"ojs"},{"id":574,"value":"x = d3.scaleLinear()\n .domain([0, maxSquareMeters]).nice()\n .range([margin.left, width - margin.right])","pinned":false,"hidden":false,"mode":"ojs"},{"id":636,"value":"histogramHeight = 400","pinned":false,"hidden":false,"mode":"ojs"},{"id":577,"value":"y = d3.scaleLinear()\n .domain([0, d3.max(bins, (d) => d.length)]).nice()\n .range([histogramHeight - margin.bottom, margin.top])","pinned":false,"hidden":false,"mode":"ojs"},{"id":580,"value":"xAxis = (g) => g\n .attr('transform', `translate(0,${histogramHeight - margin.bottom})`)\n .call(d3.axisBottom(x).tickSizeOuter(0))\n .call((g) => g.append('text')\n .attr('x', width - margin.right)\n .attr('y', -20)\n .attr('fill', '#000')\n .attr('text-anchor', 'end')\n .text('Oppervlakte in vierkante meter'))","pinned":false,"hidden":false,"mode":"ojs"},{"id":571,"value":"yAxis = (g) => g\n .attr('transform', `translate(${margin.left},0)`)\n .call(d3.axisLeft(y))\n .call(g => g.select('.domain').remove())\n .call(g => g.select('.tick:last-of-type text').clone()\n .attr('x', 4)\n .attr('text-anchor', 'start')\n .text('Aantal'))","pinned":false,"hidden":false,"mode":"ojs"},{"id":327,"value":"chart = {\n const svg = d3.select(DOM.svg(width, histogramHeight))\n \n const bar = svg.append('g')\n .attr('fill', 'steelblue')\n .selectAll('rect')\n .data(bins)\n .enter().append('rect')\n .attr('x', (d) => x(d.x0) + 1)\n .attr('width', (d) => Math.max(0, x(d.x1) - x(d.x0) - 1))\n .attr('y', (d) => y(d.length))\n .attr('height', (d) => y(0) - y(d.length))\n\n svg.append('g')\n .call(xAxis)\n \n svg.append('g')\n .call(yAxis)\n \n return svg.node()\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":300,"value":"md`### Opdrachten\n\n1. Bekijk [Turf.js](http://turfjs.org/). Welke functies zou je nog meer kunnen gebruiken voor een interessante datavisualisatie?\n2. In het histogram staan alleen de meest voorkomende oppervlaktes (kleiner dan [\\`maxSquareMeters\\`](#maxSquareMeters)). Pas dit aan! Of probeer een logaritmische schaal.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":27,"value":"md`## Hoekpunten`","pinned":false,"hidden":false,"mode":"ojs"},{"id":609,"value":"md`We kunnen de gebouwen ook sorteren op het aantal hoekpunten. Op deze manier kunnen we de gebouwen die worden getoond op de website van [Maptime Amsterdam](https://maptime-ams.github.io/) vinden, en deze visualisatie namaken.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":618,"value":"md`Met Turf.js kunnen we het aantal hoekpunten van een gebouw tellen:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":615,"value":"countVertices = (geojson) => turf.coordAll(geojson).length","pinned":true,"hidden":false,"mode":"ojs"},{"id":621,"value":"md`Nu kunnen we een functie maken die een lijst van gebouwen sorteert op het aantal hoekpunten:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":607,"value":"sortByMostVertices = (features) => {\n return [...features]\n .sort((a, b) => {\n return countVertices(b) - countVertices(a)\n })\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":625,"value":"md`Dit zijn de gebouwen met het meest aantal hoekpunten:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":35,"value":"mostVertices = sortByMostVertices(buildings.features).slice(0, 15)","pinned":true,"hidden":false,"mode":"ojs"},{"id":107,"value":"html`

\n ${drawBuildings([feature], 300)}\n

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":188,"value":"md`### Opdrachten\n\n1. Voeg het adres van het gebouw toe aan de gebouwen in de tabel hierboven.\n2. Maak van dit adres een link naar het gebouw in [OpenStreetMap](https://www.openstreetmap.org/#map=17/52.37532/4.90677) (met \\`turf.centroid()\\` kun je het middelpunt van een gebouw berekenen).\n3. Vind de gebouwen met de _minste_ hoekpunten (pas hiervoor de functie [\\`sortByMostVertices\\`](#sortByMostVertices) aan, of maak een nieuwe).\n4. Welke wijk heeft gemiddeld gebouwen met meeste hoekpunten?\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":362,"value":"md`## Extra opdrachten\n\n1. Zoek een bijzonder gebouw, visualiseer dit gebouw (en de omgeving), en bedenk waarom je juist dit gebouw zo bijzonder vindt.\n2. Welke buurten in Amsterdam zou je nog meer willen onderzoeken en visualiseren?\n3. In de [GitHub-repository](https://github.com/bertspaan/cmda-tt) staat nog meer data. Door de data en de scripts in aan te passen kun je zelf nieuwe datasets maken.\n4. __Sla je eigen versie van dit Observable-notebook op en deel het!__\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":215,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs"},{"id":25,"value":"md`## Imports`","pinned":false,"hidden":false,"mode":"ojs"},{"id":651,"value":"md`De CSS die in dit notebook gebruikt wordt staat hier:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":647,"value":"viewof style = html`