Skip to content

Latest commit

 

History

History
144 lines (110 loc) · 7.73 KB

README.md

File metadata and controls

144 lines (110 loc) · 7.73 KB

OK Lab Köln: 3D Daten zum Anfassen

Kölner Daten in 3D

Wie macht man offene Daten greifbar? Indem man sie ausdruckt. Hier gibt es das Projekt zum Nachmachen:
http://p3nny.github.io/geojson-3d/
Im OK Lab Köln haben wir die Idee entwickelt, aus offenen Daten der Stadt Köln "Daten zum Anfassen" zu drucken. Grundlage waren diese Daten zur Altersstruktur der Kölner Stadtteile:
2014 Einwohner Altersgruppen Stadtteile: http://offenedaten-koeln.de/dataset/0936b4df-8b3a-4e9a-9127-cf461f4b5a92/resource/0936b4df-8b3a-4e9a-9127-cf461f4b5a92
Und die Shapefiles der Stadtteile: http://offenedaten-koeln.de/dataset/stadtteile
Mit Hilfe eines bereits vorhandenen Projekts der Maptime Amsterdam (http://maptime-ams.github.io/geojson-3d/) haben wir die Daten in 3D dargestellt, als 3D .stl Datei heruntergeladen und im September 2015 auf dem 3D-Drucker der Stadtbibliothek Köln ausgedruckt: http://www.stadt-koeln.de/leben-in-koeln/stadtbibliothek/lesen-und-lernen/3-d-drucker-und-3-d-scanner
Nun kann jeder, der möchte, das Projekt nutzen, um mit den Daten herumzuspielen oder selbst offene Daten aus Köln oder von anderswo in 3D zu visualisieren.

Originale Amsterdam README

Maptime Amsterdam #6: GeoJSON 3D!

http://maptime-ams.github.io/geojson-3d/

Display GeoJSON in 3D in the browser, using Three.js. Made for Maptime Amsterdam #6.

Use git clone https://github.com/maptime-ams/geojson-3d.git to clone this tutorial, run a webserver in the project's directory (python -m SimpleHTTPServer, for example), and open http://localhost:8000. Edit index.html to tweak the lights, materials and camera used in this tutorial. Some basic Three.js materials are included in the source code. You can set a Feature's material in the addFeature function.

Usage

With http://maptime-ams.github.io/geojson-3d/, you can load a GeoJSON or TopoJSON file from a URL, and style the features using Javascript functions (just like D3).

Simple function, always return the same color:

function(d) {
  return '#0ef1f4';
}

Simple function, always return the same color:

function(d) {
  if (d.jaar <= 1200) {
    return '#67001f';
  } else if (d.jaar <= 1350) {
    return '#b2182b';
  } else if (d.jaar <= 1500) {
    return '#d6604d';
  } else if (d.jaar <= 1650) {
    return '#f4a582';
  } else if (d.jaar <= 1750) {
    return '#fddbc7';
  } else if (d.jaar <= 1850) {
    return '#d1e5f0';
  } else if (d.jaar <= 1900) {
    return '#92c5de';
  } else if (d.jaar <= 1950) {
    return '#4393c3';
  } else if (d.jaar <= 1980) {
    return '#2166ac';
  } else if (d.jaar <= 2010) {
    return '#053061';
  }
}
function(d) {
  var color = d3.scale.ordinal()
    .range([
      "#ffffe5",
      "#f7fcb9",
      "#d9f0a3",
      "#addd8e",
      "#78c679",
      "#41ab5d",
      "#238443",
      "#006837",
      "#004529"
    ])
    .domain(d3.range(0, 8000));
  return color(d.BEV_DICHTH);
}

If you don't remember your Feature's properties, you can use console.log(d) to output them to the developer console:

function(d) {
  console.log(d);
  return 'red';
}

Examples

Disable Three.js warnings

You can disable warnings in your browsers' developer console:

Useful links

Data

Example Overpass query:

[out:json];
way[natural=water](around:5000,52.36740138260664,4.8985666036605835);
(._;>;);
out;

Colors!

Use http://colorbrewer2.org/!

TopoJSON

You can convert large GeoJSON files to TopoJSON, this will make them much smaller and easier to handle for web browsers. (And you can convert Shapefiles to GeoJSON with shp2json.)

Usage:

topojson -p -s 1e-8 -o municipalities.topojson municipalities.geojson