tag:blogger.com,1999:blog-19392970019099815142024-03-19T08:56:16.767+01:00MAPressoAdihttp://www.blogger.com/profile/14454103117576517144noreply@blogger.comBlogger76125tag:blogger.com,1999:blog-1939297001909981514.post-23343705155452580022014-08-14T22:11:00.000+02:002014-08-14T22:59:13.284+02:00MAPresso classification with d3.jsThis test for the <a href="http://mapresso.com/">MAPresso</a> classification scheme in a <a href="http://d3js.org/">d3.js</a> context is based on a blogpost by <a href="http://gabrielflor.it/" target="_blank">Gabriel Florit</a> (Dec. 14, 2011, "Choropleth classification systems"). He compared different classification schemes, I extended it by the unclassed scheme typical for MAPresso. The MAPresso specific code is just to show the feasibility of the concept. There is one additional URL parameter: <b>zfact</b>: the two class boundaries were calculated as<br />
<br />
<ul>
<li>zbot = (mean - (<b>zfact</b> * standard deviation) </li>
<li>ztop = (mean + (<b>zfact</b> * standard deviation) </li>
</ul>
<br />
The legend is a first attempt, there is no solution for cases with zbot < zmin or ztop > zmax. In a more elaborated version there will be a bipolar color scheme (using a parameter zmed).<br />
<br />
Here the test:<br />
<br />
<div style="text-align: center;">
<a href="http://mapresso.com/test/gabrielflor/examples/poverty.html?class=4&zfact=1.5&hue=230" target="_blank">http://mapresso.com/test/gabrielflor/examples/poverty.html?class=4&zfact=1.5&hue=230</a></div>
<div style="text-align: center;">
<a href="https://www.blogger.com/goog_1112417714"><span style="color: #0000ee;"><u><br /></u></span>
</a><br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://mapresso.com/test/gabrielflor/examples/poverty.html?class=4&zfact=1.5&hue=230"><img alt="http://mapresso.com/test/gabrielflor/examples/poverty.html?class=4&zfact=1.5&hue=0" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgt9RcoAlGwZbs6zGe4kL9F4gI3GW9SH9fGSUgYNRi0prJLq7j7CRHnSEfOEMaqPZH4W2lFXScT8gtFpizq2j2qQLhdOSe-ETfy5Tytu5p1vzRC5yD64qxG_fKe9ABdjEQYAyz8_6gfKRTm/s1600/d3mapresso.png" /></a></div>
</div>
Adihttp://www.blogger.com/profile/14454103117576517144noreply@blogger.com0tag:blogger.com,1999:blog-1939297001909981514.post-24842968349091747282012-06-10T12:59:00.001+02:002014-10-20T22:54:29.753+02:00Processing.js and Sencha Touch<br />
<div>
(just for documentation purpose, here an older experiment, result at <a href="http://mapresso.com/test/pjs_touch/AH1">http://mapresso.com/test/pjs_touch/AH1</a>))</div>
<div>
<br /></div>
<div>
I made the following hacks:</div>
<div>
<br /></div>
<div>
1. In the app.js I added a function, which loads the processing-1.3.6.js only at the end of the launch function:</div>
<div>
<br /></div>
<div>
<div>
<div>
<b> loadProcessingJs: function (filename) {</b></div>
<div>
<b> <span class="Apple-tab-span" style="white-space: pre;"> </span>var fileref=document.createElement('script')</b></div>
<div>
<b> <span class="Apple-tab-span" style="white-space: pre;"> </span>fileref.setAttribute("type","text/javascript")</b></div>
<div>
<b> <span class="Apple-tab-span" style="white-space: pre;"> </span>fileref.setAttribute("src", filename)</b></div>
<div>
<b> <span class="Apple-tab-span" style="white-space: pre;"> </span>document.getElementsByTagName("head")[0].appendChild(fileref)</b></div>
<div>
<b><span class="Apple-tab-span" style="white-space: pre;"> </span>},</b></div>
<div>
<br /></div>
<div>
launch: function() {</div>
<div>
// Destroy the #appLoadingIndicator element</div>
<div>
Ext.fly('appLoadingIndicator').destroy();</div>
<div>
<br /></div>
<div>
// Initialize the main view</div>
<div>
Ext.Viewport.add(Ext.create('AH1.view.Main'));</div>
<div>
<b> this.loadProcessingJs("processing-1.3.6.js");</b></div>
<div>
<br /></div>
<div>
},</div>
</div>
</div>
<div>
<br /></div>
<div>
2. In the app/view/Main.js I added the canvas inside the html item:</div>
<div>
<br /></div>
<div>
<div>
<div>
html: [</div>
<div>
"You've just generated a new Sencha Touch 2 project. What you're looking at right now is the ",</div>
<div>
"contents of <a target='_blank' href=\"app/view/Main.js\">app/view/Main.js</a> - edit that file ",</div>
<div>
"and refresh to change what's rendered here.<br /><br />",</div>
<div>
<b> '<h3>HelloWorld of Processing.js:</h3>',</b></div>
<div>
<b> '<canvas data-processing-sources="circle.pde"></canvas>'</b></div>
<div>
].join("")</div>
</div>
</div>
<div>
<br /></div>
<div>
<br /></div>
<div>
3. <b>circle.pde</b> contains the ProcessingJS code;</div>
<div>
<br /></div>
<div>
4. And the worst change: I added one line ("init();") totally at the bottom of (non minified version) processing-1.3.6.js (because otherwise the init()-function never executes in my hack):</div>
<div>
<br /></div>
<div>
...</div>
<div>
<div>
Processing.loadSketchFromSources = loadSketchFromSources;</div>
<div>
Processing.disableInit = function() {</div>
<div>
if (isDOMPresent) document.removeEventListener("DOMContentLoaded", init, false)</div>
<div>
};</div>
<div>
if (isDOMPresent) {</div>
<div>
window["Processing"] = Processing;</div>
<div>
document.addEventListener("DOMContentLoaded", init, false)</div>
<div>
} else this.Processing = Processing;</div>
<div>
<b> init();</b></div>
<div>
})(window, window.document, Math);</div>
<div>
<br />
For the minimized version (e.g. in processing-1.4.1.min.js the very end must be<br />
<br />
<br />
...else{this.Processing=F;}<b>I()</b>})(window,window.document,Math);<br />
<div>
instead of </div>
<div>
...else{this.Processing=F;}})(window,window.document,Math);</div>
<div>
<br /></div>
</div>
<div>
___</div>
<div>
<br /></div>
<div>
I don't know what I want to do with this experience. I like Processing and perhaps I'll someday make something with Sencha Touch and Processing.js ...</div>
<div>
<br /></div>
</div>
Adihttp://www.blogger.com/profile/14454103117576517144noreply@blogger.comtag:blogger.com,1999:blog-1939297001909981514.post-84484032985385877492011-11-22T23:31:00.001+01:002011-11-22T23:39:54.036+01:00http://bestiario.org/Reichhaltige Sammlung von Visualisierungen, interessantes Interface:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://bestiario.org/"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjl0L7692lGC-iGCaO3V_a4CJIrjjevKGzqS5ZoHOr3DDnbk36_l0wKdEfrIbgfy8sKJhXxxj7D0PJfdPWuekoRjpiW1ezWgN5su3LV3FgE4LEfV50yzM7MiXo326s6cAMxE7PVCxsK78ro/s320/bestario.png" width="306" /></a></div>
<br />
<div>
<br /></div>Adihttp://www.blogger.com/profile/14454103117576517144noreply@blogger.com0tag:blogger.com,1999:blog-1939297001909981514.post-25183260670425252592011-10-19T23:59:00.000+02:002011-10-19T23:59:21.024+02:00Adobe-Ausstellung: Turning Data into MeaningNach einem längeren Intro kann man in der Ausstellung "<a href="http://www.adobemuseum.com/#/exhibit/inform">InForm :: Turning Data into Meaning</a>" im virtuellen <a href="http://www.adobemuseum.com/">Adobe-Museum</a> verschiedene Beispiele für die visuelle Umsetzung von Daten (SMS, Twitter, Wikipedia u.a.). Hier ein Beispiel aus einem Film über den SMS-Versand an einem Jahreswechsel:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdGD5aPjRlcF-KYPBdnszkxCYMRxhypt0m9CpHiIYRkBE_wILGDW50wWyXBswrxCKmvTMCC4W-cS1V3UsSkEWojkMfQLMSlkaQzbFpRkr1xn_OmdzgcJzsPY48CxNKL0bQMSBUGrj93QuD/s1600/sms_amsterdam.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="165" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdGD5aPjRlcF-KYPBdnszkxCYMRxhypt0m9CpHiIYRkBE_wILGDW50wWyXBswrxCKmvTMCC4W-cS1V3UsSkEWojkMfQLMSlkaQzbFpRkr1xn_OmdzgcJzsPY48CxNKL0bQMSBUGrj93QuD/s320/sms_amsterdam.png" width="320" /></a></div>
<br />
<span id="goog_580127521"></span><span id="goog_580127522"></span>Adihttp://www.blogger.com/profile/14454103117576517144noreply@blogger.com0tag:blogger.com,1999:blog-1939297001909981514.post-2607039163366486512011-10-08T23:50:00.003+02:002011-10-08T23:50:15.393+02:00Kartogramme etc.<a href="http://www.eidolon.ch/eidolon/MiniMax_Upshot.html">Symposium Latsis EPFL 2011: MiniMax Mapping Contest.</a><br />
Die kleinen Videos anschauen!<br />
<b><br /></b><br />
<b>Rankin</b>: Punktkarten Ethnien in Chicago - <b>Girarding</b>: Touristenwege in Paris und Barcelona aufgrund von Flickr
- <b>Beauchesne</b>: Globale Karten mit Verbindungslinien aufgrund wissenschaftlicher Zusammenarbeit - <b>Cruz</b>: Verkehsaufkommen in Lissabon als Adern - <b>Guillemot</b>: Kartogramme der langfristigen Bevölkerungsentwicklung in der Schweiz - <b>Lehmann: </b>Stimmung aufgrund von Twitternachrichten auf Kartogrammbasis (USA).<br />
<br />
<img src="webkit-fake-url://E8039DE2-94FE-4678-8634-48C428E8BB16/image.tiff" />Adihttp://www.blogger.com/profile/14454103117576517144noreply@blogger.com0tag:blogger.com,1999:blog-1939297001909981514.post-86638870075483143022011-07-11T23:23:00.002+02:002011-07-11T23:34:07.643+02:00Animations of London cycle hireWatch a map-based transit animations of London cycle hire journeys over the course of 4 October 2010, a day when there was a tube strike. Bikes are represented as tadpoles. Fixed circles represent hire stands, which flash when a bike leaves or arrives.<br />
<br />
<iframe src="http://player.vimeo.com/video/19486470?title=0&byline=0&portrait=0" width="506" height="285" frameborder="0"></iframe><p><a href="http://vimeo.com/19486470">London Hire Bikes animation</a> from <a href="http://vimeo.com/sociablephysics">Sociable Physics</a> on <a href="http://vimeo.com">Vimeo</a>.</p><br />
Der ganze Artikel ("<a href="http://www.guardian.co.uk/uk/bike-blog/2011/jul/10/boris-bikes-hire-scheme-london">Has London's cycle hire scheme been a capital idea?</a>") diskutiert das neue Velovermietsystem in London.Adihttp://www.blogger.com/profile/14454103117576517144noreply@blogger.com0tag:blogger.com,1999:blog-1939297001909981514.post-33869628271814372882011-06-30T23:20:00.000+02:002011-06-30T23:20:48.057+02:00DataMaps.eu<div style="border-collapse: collapse; font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; font-size: 13px; line-height: 16px; margin-bottom: 12px; margin-left: 0px; margin-right: 0px; margin-top: 12px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">Von der Idee her mit MAPresso verwandt:</div><div style="border-collapse: collapse; font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; font-size: 13px; line-height: 16px; margin-bottom: 12px; margin-left: 0px; margin-right: 0px; margin-top: 12px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">"DataMaps.eu bietet Ihnen ein kostenloses Visualisierungswerkzeug, mit dem Sie ortsbezogene Daten z.B. aus schwer verständlichen Tabellen ohne Programmieraufwand in ansprechende, leicht verständliche Visualisierungen umwandeln können:</div><div style="border-collapse: collapse; font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; font-size: 13px; line-height: 16px; margin-bottom: 12px; margin-left: 0px; margin-right: 0px; margin-top: 12px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"><br />
</div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiABvPB4qCLlOAU5TBtAUiBUpYMteiIK0FdOPGT8bfnrIo-Uu6aVpPDkhdMSagdgjSWl3Z93s3eqyfjquJ06VLisQtyVZA5W23mHXI6dfivSWqAwkPwboo5p07GIcEAWhjph26qENdlQ_Dv/s1600/startseite1-735x166.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="72" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiABvPB4qCLlOAU5TBtAUiBUpYMteiIK0FdOPGT8bfnrIo-Uu6aVpPDkhdMSagdgjSWl3Z93s3eqyfjquJ06VLisQtyVZA5W23mHXI6dfivSWqAwkPwboo5p07GIcEAWhjph26qENdlQ_Dv/s320/startseite1-735x166.jpg" width="320" /></a></div><div style="border-collapse: collapse; font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; font-size: 13px; line-height: 16px; margin-bottom: 12px; margin-left: 0px; margin-right: 0px; margin-top: 12px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"><a class="liinternal" href="http://www.datamaps.eu/erstellen" style="color: #525f60; font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-decoration: underline;" title="Datenlandkarte erstellen"></a>(...)</div><div style="border-collapse: collapse; font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; font-size: 13px; line-height: 16px; margin-bottom: 12px; margin-left: 0px; margin-right: 0px; margin-top: 12px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">Die Stadt München hat im Rahmen ihres <a class="liexternal" href="http://www.muenchen.de/mogdy" style="color: #525f60; font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-decoration: underline;">MOGDy-Prozesses (»Munich Open Government Day«)</a> Ende Jänner 2011 begonnen, statistische Daten der Verwaltung maschinenlesbar zur Verfügung zu stellen. Darunter sind z.B. Daten zu den Einwohnerzahlen der 25 Stadtbezirke oder wieviele KFZ mit welchem Hubraum pro Stadtbezirk angemeldet sind.<a class="liexternal" href="http://twitter.com/codeispoetry" style="color: #525f60; font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-decoration: underline;" title="Twitter-Profil @codeispoetry anzeigen">Thomas Pfeiffer</a> von <a class="liexternal" href="http://www.webevangelisten.de/" style="color: #525f60; font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-decoration: underline;" target="_blank">Webevangelisten.de</a> hat in diesem Zusammenhang eine<a class="liexternal" href="http://labor.webevangelisten.de/mogdy/" style="color: #525f60; font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-decoration: underline;" target="_blank">Applikation</a> programmiert, welche die einfache Erstellung von Datenlandkarten von München ermöglicht. Den Quellcode dafür hat er dankenswerterweise als OpenSource-Software zum <a class="liexternal" href="http://opendata-network.org/2011/01/datenlandkarte-selber-erstellen-eine-anleitung/" style="color: #525f60; font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-decoration: underline;" target="_blank">Download</a> zur Verfügung gestellt."</div>Adihttp://www.blogger.com/profile/14454103117576517144noreply@blogger.com0tag:blogger.com,1999:blog-1939297001909981514.post-63072301714153246402011-06-13T00:08:00.000+02:002011-06-13T00:08:21.207+02:00Kernel Density EstimationKDE interaktiv und sehr effizient:<br />
<br />
Ove Daae Lampe, Helwig Hauser: "Interactive Visualization of Streaming Data with Kernel Density Estimation", <i>Proceedings of the IEEE Pacific Visualization Symposium (PacificVis 2011)</i>, 2011<br />
(als <a href="http://www.ii.uib.no/vis/publications/publication/2011/pdfs/lampe11kde.pdf">PDF</a> und ergänzendes <a href="http://www.ii.uib.no/vis/publications/publication/2011/vids/lampe11kde.html">Video</a>)<br />
<div><br />
"In this paper, we discuss the extension and integration of the statistical concept of Kernel Density Estimation (KDE) in a scatterplot-like visualization for dynamic data at interactive rates. We present a line kernel for representing streaming data, we discuss how the concept of KDE can be adapted to enable a continuous representation of the distribution of a dependent variable of a 2D domain. We propose to automatically adapt the kernel bandwith of KDE to the viewport settings, in an interactive visualization environment that allows zooming and panning. We also present a GPU-based realization of KDE that leads to interactive frame rates, even for comparably large datasets. Finally, we demonstrate the usefulness of our approach in the context of three application scenarios -- one studying streaming ship traffic data, another one from the oil and gas domain, where process data from the operation of an oil rig is streaming in to an on-shore operational center, and a third one studying commercial air traffic in the US spanning 1987 to 2008."<br />
<br />
Speziell interessant auch die Visualisierung der Schiffsbewegungen (im <a href="http://www.ii.uib.no/vis/publications/publication/2011/vids/lampe11kde.html">Video</a> ca. ab 02:12):<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-Ji8UeM-hFzOURH6NBp3kCARstc1uOBXSotALzVEUHQKL_yiZECeszOT-UPIRrSKmZD7GWku67v6dN1fea7UmUa9CTGZZodCSFB1-KCXW7VS5VEibKGhlpkX1_H2GJhCnXhRmc5AU1AzD/s1600/ships.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-Ji8UeM-hFzOURH6NBp3kCARstc1uOBXSotALzVEUHQKL_yiZECeszOT-UPIRrSKmZD7GWku67v6dN1fea7UmUa9CTGZZodCSFB1-KCXW7VS5VEibKGhlpkX1_H2GJhCnXhRmc5AU1AzD/s320/ships.png" width="265" /></a></div><br />
</div>Adihttp://www.blogger.com/profile/14454103117576517144noreply@blogger.com0tag:blogger.com,1999:blog-1939297001909981514.post-15411699246364329032011-06-12T18:04:00.000+02:002011-06-12T18:04:49.060+02:00Flugzeug über Döttingen AGZufällig entdeckt:<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHNiBYi-Y4e-Cy1li4U_E8LEIql3YuvOaY19QDFkbnY7_qKf0kCllmqG1li2nOzW1G5zf_iQbAcwQH7jMY85GyXpfCStgNfjtf7Xg9Ujph8M0UcXcAB8uF7QK4TtaJ1gmEoZoSxO3KzJQ5/s1600/Foto-1.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHNiBYi-Y4e-Cy1li4U_E8LEIql3YuvOaY19QDFkbnY7_qKf0kCllmqG1li2nOzW1G5zf_iQbAcwQH7jMY85GyXpfCStgNfjtf7Xg9Ujph8M0UcXcAB8uF7QK4TtaJ1gmEoZoSxO3KzJQ5/s320/Foto-1.PNG" width="213" /></a></div>Adihttp://www.blogger.com/profile/14454103117576517144noreply@blogger.com0tag:blogger.com,1999:blog-1939297001909981514.post-46908649134582091322011-06-11T13:56:00.002+02:002011-06-11T13:57:40.782+02:00Eric Fischer: The Geotagger'sWorld Atlas u.a.<a href="http://www.flickr.com/photos/walkingsf/">Eric Fischer</a> kombiniert die Fotos mit Geotag mit OpenStreetMap. In einem Projekt unterscheidet auch gleich noch die Fotos von Touristen (rot) und Einheimischen (blau) - gelbe können beides sein. Unter den <a href="http://www.flickr.com/photos/walkingsf/sets/72157624209158632/with/4810771171/">135 Städten</a> ist auch <a href="http://www.flickr.com/photos/walkingsf/4810771171/lightbox/">Zürich</a>:<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="http://www.flickr.com/photos/walkingsf/4810771171/lightbox/"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhldyozJScWskWaUAO4qbgBc8ezYmV0OABuhIcRLtqh470fA715C8VJ_8843bY1Gf3GWyN-Icxg3DlsT0HOaQ6ak95QRf9cHqE_UdLMm-Sz9k_9i79gdCEQFm_tTF41Ev8q-3eHWVX4Jom8/s320/fisher_zh.png" width="235" /></a><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKRQDPcCGj24OOox_p0gt_mdb8CFgw231Lhv9pw141ZfissvJMtG7ba5FIEAlA7G9snnraFfKGs73hy7mlGUbBjwN81gGsGfXkGHCzaXaZSAh3LhzTCF3V0kSQphNn76jO_Z4AZ125J8le/s1600/fisher_zh_city.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKRQDPcCGj24OOox_p0gt_mdb8CFgw231Lhv9pw141ZfissvJMtG7ba5FIEAlA7G9snnraFfKGs73hy7mlGUbBjwN81gGsGfXkGHCzaXaZSAh3LhzTCF3V0kSQphNn76jO_Z4AZ125J8le/s320/fisher_zh_city.png" width="255" /></a></div><div class="separator" style="clear: both; text-align: center;"><br />
</div><div class="separator" style="clear: both; text-align: left;">Census-Daten (<a href="http://www.flickr.com/photos/walkingsf/sets/72157626354149574/">Race and ethnicity</a>) zeigt z.B. diese Karte von New York:</div><div class="separator" style="clear: both; text-align: left;"><br />
</div><div class="separator" style="clear: both; text-align: left;"><br />
</div><div class="separator" style="clear: both; text-align: center;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjThKWyLazXYo_4etB8P7RDyagx8BtKV-5X_WNREMaIqOG7vXcrN6_jhkSYunDPE-4Tjk19Py2ZL10O3jj9NZKgCk34N6jpVjBvzVsfOZjKdkrhuCeoqQiP9T3DsURLvZMI1O0wuOKhb69w/s1600/nyc_race.png" /></div><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjThKWyLazXYo_4etB8P7RDyagx8BtKV-5X_WNREMaIqOG7vXcrN6_jhkSYunDPE-4Tjk19Py2ZL10O3jj9NZKgCk34N6jpVjBvzVsfOZjKdkrhuCeoqQiP9T3DsURLvZMI1O0wuOKhb69w/s1600/nyc_race.png" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em; text-align: center;"><br />
</a><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjThKWyLazXYo_4etB8P7RDyagx8BtKV-5X_WNREMaIqOG7vXcrN6_jhkSYunDPE-4Tjk19Py2ZL10O3jj9NZKgCk34N6jpVjBvzVsfOZjKdkrhuCeoqQiP9T3DsURLvZMI1O0wuOKhb69w/s1600/nyc_race.png" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em; text-align: center;"><br />
</a>Adihttp://www.blogger.com/profile/14454103117576517144noreply@blogger.com0tag:blogger.com,1999:blog-1939297001909981514.post-76536509795134987602011-06-09T22:52:00.000+02:002011-06-09T22:52:30.996+02:00ZüriplanDie "Konkurrenz" schläft nicht: die Stadt Zürich bringt ihren Stadtplan (samt historischer Karten und Fussgänger-/Veloroutenplaner u.v.a.m.) auf <a href="http://itunes.apple.com/ch/app/zuriplan/id435064279?mt=8">iPhone und iPad</a>:<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimfFJXdELr5CVWt1oArozYdrcKvRaN6lxIWND4hNcO-hyM-mER96XF3cF4Ih0xMQ7oxw38T5D6k44BK5KDBJkgb8K5Tv06O3ZKmBGTRDI7YBdus0w1YLeYokF6bUzjYuYyELvlscGm6TAb/s1600/IMG_1847.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimfFJXdELr5CVWt1oArozYdrcKvRaN6lxIWND4hNcO-hyM-mER96XF3cF4Ih0xMQ7oxw38T5D6k44BK5KDBJkgb8K5Tv06O3ZKmBGTRDI7YBdus0w1YLeYokF6bUzjYuYyELvlscGm6TAb/s320/IMG_1847.jpg" width="213" /></a><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqvKxhm6hP0eOTuMDy8IC0iFpYqIbjLjW3rpGe5tHQGg2QbWtDKYPk99RpKuZWVtZ3icC8jsDanUkD_mPmoL1L7JKXYPCEuepevN5GMv_seZKZrblDYsC2jQJ7sTGlhmfe2mRxQfyvEC-i/s1600/IMG_1845.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqvKxhm6hP0eOTuMDy8IC0iFpYqIbjLjW3rpGe5tHQGg2QbWtDKYPk99RpKuZWVtZ3icC8jsDanUkD_mPmoL1L7JKXYPCEuepevN5GMv_seZKZrblDYsC2jQJ7sTGlhmfe2mRxQfyvEC-i/s320/IMG_1845.jpg" width="213" /></a></div>Adihttp://www.blogger.com/profile/14454103117576517144noreply@blogger.com0tag:blogger.com,1999:blog-1939297001909981514.post-78411399406390196822011-06-08T08:28:00.000+02:002011-06-08T08:28:10.077+02:00Eyeo Data Visualization Challenge: Ghost Counties <span style="font-size: small;"><a href="http://www.janwillemtulp.com/eyeo">Jan Willem Tulp</a> wins Eyeo Data Visualization Challenge</span><br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYCSyY8A9F6cx0_XjhphvfPAb-eCTNsOnd1172I4tTyPWhdeC6JxK_zF0iHg_JGuSpfq5S_fvPb0y2a3XrHw0z_4bkCFa4Vqb-tiGDSPDngflRWBKszhmhA4UVyJeW_-0bMVIH_4jNAKM/s1600/ghostcounties2-1024x682.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="213" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYCSyY8A9F6cx0_XjhphvfPAb-eCTNsOnd1172I4tTyPWhdeC6JxK_zF0iHg_JGuSpfq5S_fvPb0y2a3XrHw0z_4bkCFa4Vqb-tiGDSPDngflRWBKszhmhA4UVyJeW_-0bMVIH_4jNAKM/s320/ghostcounties2-1024x682.png" width="320" /></a></div><br />
The visualization depicts the number of homes and vacant homes for all the counties for each state. The size of the outer bubble represents the total number of homes, the size of the inner bubble represents the number of vacant homes. The y-axis shows the population size (on a logarithmic scale) and the x-axis of the bubbels shows the number of vacant homes per population. Each bubble is also connected with a line to another axis: the population / home ratio. On the top right you can see some exact numbers for this data.<br />
<br />
Built with <a href="http://processing.org/">Processing</a>Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-1939297001909981514.post-20252430534209550172011-06-07T15:29:00.011+02:002011-06-07T16:09:06.307+02:00OneBayArea: Reisezeiten und Hauspreise<span style="font-size:85%;"><span style="font-family:arial;">Wohnungs/Haus-Suche abhängig von gewünschter maximal R</span></span><span style="font-size:85%;"><span style="font-family:arial;">eisezeit, Verkehrsmittel, Tageszeit und maximalem Hauspreis.<br />Vielleicht auch für Bürosuche geeignet - allerdings noch nicht für Zürich...<br /><br /></span></span><a href="http://maps.onebayarea.org/travel_housing/#mode=s3&time=EA&origin=37.907066,-122.256445&max_time=51&max_price=490000&min_price=90000"><img style="cursor: pointer; width: 193px; height: 200px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitfuWJxO2J06KyRb2STnogyedG90-mQQhDNsJI0cMmDrssEjFsiEXvnjtEsCNG8Jz3V1wDmCYdehwMKMkBuwBeFxhBaITaBzwrcUy8KRNcc_sips8ZxY2UU2K54QmNkk0UZzMmSb8IpZI_/s200/sanfrancisco.PNG" alt="" id="BLOGGER_PHOTO_ID_5615474466965713490" border="0" /></a><a href="http://maps.onebayarea.org/travel_housing/#mode=s3&time=EA&origin=37.907066,-122.256445&max_time=51&max_price=490000&min_price=90000"><img style="cursor: pointer; width: 198px; height: 200px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhU2Qh0-TlTSzbWmkQnriBqpEhjiGPcTDl9Bxr9Dh3NDsYhFroWY7gw93F6HXtu7W7IFjav4LxycaiLNe3nU39EkzJ0_JMgVlPxQzqQ7DHXkyq9sUG53G5WTWaXs1e44LSLzJXljwcpR8wx/s200/bild.PNG" alt="" id="BLOGGER_PHOTO_ID_5615474715525280962" border="0" /></a><br /><span style="font-size:85%;"><br /><span style="font-family:arial;">mehr Beispiele auf </span><a style="font-family: arial;" target="_blank" href="http://content.stamen.com/mtv_travel_time_maps_are_live">Stamen blog</a><span style="font-family:arial;">. </span></span>Claudia Hofstetterhttp://www.blogger.com/profile/10601596989999597979noreply@blogger.com0tag:blogger.com,1999:blog-1939297001909981514.post-16833713938558713192011-06-01T14:07:00.000+02:002011-06-01T14:07:29.767+02:00MapnificentIrgend einen Punkt in einer der verfügbaren Städte markieren und sehen, wohin man in der gewünschten Zeit kommt.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkcO1OqA-zKGKx9nr6onZz-3UENAlvA0yCSjK_tPeTl0Qwjw12NJJei8cO1JdRbco2YokSM4nqUMswyoDoH71X90Tk8rnMxe3dT6-51AuMVSrYAJIdGt1WqMOZgrkfVay3L0s2_3uYYOA/s1600/mapnificent.JPG" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="148" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkcO1OqA-zKGKx9nr6onZz-3UENAlvA0yCSjK_tPeTl0Qwjw12NJJei8cO1JdRbco2YokSM4nqUMswyoDoH71X90Tk8rnMxe3dT6-51AuMVSrYAJIdGt1WqMOZgrkfVay3L0s2_3uYYOA/s320/mapnificent.JPG" width="320" /></a></div><br />
<br />
<br />
Richtig gut wird das ganze, wenn man mehrere Punkte auf die Karte zieht und schaut, wo sich die einzelnen Gebiete überschneiden:<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_r1L-7HoKquHF_7KSlHnkJcF_UytI3mcCQhed8iZU7kN-uGB0ADRNaa4QzmjJcpyFhRN6bw2iq41IitP16z-BtM-i3UxtmNeKmTFkDFcDiA6q7kWiltMLPtfo6dd2MPsYOIhrq_3jaa0/s1600/intersect.JPG" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="211" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_r1L-7HoKquHF_7KSlHnkJcF_UytI3mcCQhed8iZU7kN-uGB0ADRNaa4QzmjJcpyFhRN6bw2iq41IitP16z-BtM-i3UxtmNeKmTFkDFcDiA6q7kWiltMLPtfo6dd2MPsYOIhrq_3jaa0/s320/intersect.JPG" width="320" /></a></div>Beispiel: alle hellen Gebiete sind von beiden Punkten aus in 15 Minuten mit öffentlichen Verkehrsmitteln erreichbar.<br />
<br />
mit <a href="http://www.mapnificent.net/docs/">API-Dokumentation </a><br />
<br />
Mapnificent shows you the area you can reach with public transport from any point in a given time. It is available for major cities in the US and world wide.<br />
Mapnificent was originally inspired by MySociety's <a href="http://mapumental.channel4.com/">Mapumental</a> which is sadly still in private beta.<br />
Mapnificent was created by <a class="url" href="http://stefanwehrmeyer.com/" title="Stefan Wehrmeyer"><span class="given-name">Stefan</span><span class="family-name">Wehrmeyer</span></a>.Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-1939297001909981514.post-84865056778364675592011-05-24T21:46:00.002+02:002011-05-24T22:30:53.862+02:00maps.google.com auf mobilen Geräten<span class="Apple-style-span" style="font-family: inherit;">Auch </span><b><span class="Apple-style-span" style="font-family: inherit;">Google</span></b><span class="Apple-style-span" style="font-family: inherit;"> arbeitet an den </span><a href="http://google-latlong.blogspot.com/2011/05/google-maps-on-your-mobile-browser.html"><span class="Apple-style-span" style="font-family: inherit;">Kartenangeboten auf mobilen Browsern</span></a><span class="Apple-style-span" style="font-family: inherit;">:</span><br />
<span class="Apple-style-span" style="font-family: inherit;"><br />
</span> <br />
<span class="Apple-style-span" style="color: #333333; font-size: 10px;"><span class="Apple-style-span" style="font-family: inherit;">«With 40% of Google Maps usage on mobile devices, we want you to have a consistent Google Maps experience wherever you use it. So, today we’re announcing our updated Google Maps experience for mobile browsers on Android and iOS.</span></span><span class="Apple-style-span" style="color: #333333; font-size: 10px;"><span class="Apple-style-span" style="font-family: inherit;"><br />
</span> </span><span class="Apple-style-span" style="color: #333333; font-size: 10px;"><span class="Apple-style-span" style="font-family: inherit;"><br />
</span> </span><span class="Apple-style-span" style="color: #333333; font-size: 10px;"><span class="Apple-style-span" style="font-family: inherit;">Now, when you visit</span></span><span class="Apple-style-span" style="color: #333333; font-size: 10px;"><span class="Apple-style-span" style="font-family: inherit;"> </span></span><span class="Apple-style-span" style="color: #333333; font-size: 10px;"><a href="http://maps.google.com/"><span class="Apple-style-span" style="font-family: inherit;">maps.google.com</span></a></span><span class="Apple-style-span" style="color: #333333; font-size: 10px;"><span class="Apple-style-span" style="font-family: inherit;"> </span></span><span class="Apple-style-span" style="color: #333333; font-size: 10px;"><span class="Apple-style-span" style="font-family: inherit;">on your phone or tablet’s browser and opt-in to share your location, you can use many of the same Google Maps features you’re used to from the desktop. This will allow you to:</span></span><br />
<ul style="color: #333333; font-size: 10px;"><li><span class="Apple-style-span" style="font-family: inherit;">See your current location</span></li>
<li><span class="Apple-style-span" style="font-family: inherit;">Search for what’s nearby with suggest and auto complete</span></li>
<li><span class="Apple-style-span" style="font-family: inherit;">Have clickable icons of popular businesses and transit stations</span></li>
<li><span class="Apple-style-span" style="font-family: inherit;">Get driving, transit, biking, and walking directions</span></li>
<li><span class="Apple-style-span" style="font-family: inherit;">Turn on satellite, transit, traffic, biking, and other layers</span></li>
<li><span class="Apple-style-span" style="font-family: inherit;">View Place pages with photos, ratings, hours, and more</span></li>
<li><span class="Apple-style-span" style="font-family: inherit;">When signed into your Google account, access your starred locations and My Maps </span></li>
</ul><span class="Apple-style-span" style="color: #333333; font-size: x-small;"><span class="Apple-style-span" style="font-size: 10px;"><span class="Apple-style-span" style="font-family: inherit;">(...)»</span></span></span><br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLCqcsQ9SPQkcKTmrw2D6p3QvZTRq-ew5t53bAurgvk6-CFwSDw1tiVbk0KLDkBDfi5mPhxr-phGTvq2rCdCi-6KZJ4W2C6bwxk6Z84HhEOaFREJKGrGOXCt6lg-VYXQZaiH6edzNQ_e8m/s1600/screengoogle.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLCqcsQ9SPQkcKTmrw2D6p3QvZTRq-ew5t53bAurgvk6-CFwSDw1tiVbk0KLDkBDfi5mPhxr-phGTvq2rCdCi-6KZJ4W2C6bwxk6Z84HhEOaFREJKGrGOXCt6lg-VYXQZaiH6edzNQ_e8m/s320/screengoogle.png" width="245" /></a></div>Adihttp://www.blogger.com/profile/14454103117576517144noreply@blogger.com0tag:blogger.com,1999:blog-1939297001909981514.post-74250914141631803002011-05-24T20:54:00.002+02:002011-05-24T21:49:00.291+02:00mobile.map.geo.admin.ch<div style="font-family: Arial, sans-serif; text-align: left;"><b><span class="Apple-style-span" style="font-family: inherit;">swisstopo:</span></b></div><div style="font-size: small; text-align: left;"><span class="Apple-style-span" style="font-family: inherit;"><br />
</span></div><div style="font-size: small; text-align: left;"><span class="Apple-style-span" style="font-family: inherit;">«</span><span style="color: blue;"><u><b><a href="http://mobile.map.geo.admin.ch/"><span class="Apple-style-span" style="font-family: inherit;">mobile.map.geo.admin.ch</span></a></b></u></span><b><span class="Apple-style-span" style="font-family: inherit;">, die BETA Version des Kartenviewer für Mobilgeräte des Geoportal des Bundes ist jetzt online.</span></b></div><div style="font-size: small; text-align: left;"></div><div style="font-size: small; text-align: left;"><span class="Apple-style-span" style="font-family: inherit;">Unter dem Begriff «Mobile» wird im Umfeld von </span><a href="http://geo.admin.ch/"><span class="Apple-style-span" style="font-family: inherit;">geo.admin.ch</span></a><span class="Apple-style-span" style="font-family: inherit;"> RE2 eine für Webbrowser von mobilen Endgeräten (Smartphones) Version von </span><a href="http://geo.admin.ch/"><span class="Apple-style-span" style="font-family: inherit;">geo.admin.ch</span></a><span class="Apple-style-span" style="font-family: inherit;"> verstanden. Nach der Durchführung des Codesprints im Februar 2011 steht nun eine BETA Version für den Kartenviewer mit limitiertem Funktionsumanfang zur Verfügung.</span></div><div style="font-size: small; text-align: left;"></div><div style="font-size: small; text-align: left;"><span class="Apple-style-span" style="font-family: inherit;">Über die BETA </span><a href="http://mobile.map.geo.admin.ch/"><span style="color: blue;"><u><span class="Apple-style-span" style="font-family: inherit;">mobile.map.geo.admin.ch</span></u></span></a><span class="Apple-style-span" style="font-family: inherit;"> können über Mobilegeräte mit Android oder iOS (Apple) Betriebssystemen und Standard Webbrowser folgende Funktion genutzt werden:</span></div><div style="font-size: small; text-align: left;"></div><div style="font-size: small; padding-left: 18pt; text-align: left; text-indent: -18pt;"><span class="Apple-style-span" style="font-family: inherit;">- Darstellung der Landeskarte unter verschiedenen Massstäben (Zoom-in / Zoom-out),</span></div><div style="font-size: small; padding-left: 18pt; text-align: left; text-indent: -18pt;"><span class="Apple-style-span" style="font-family: inherit;">- Verschieben (Pan) der Karte über Interaktion mit Touchscreen</span></div><div style="font-size: small; padding-left: 18pt; text-align: left; text-indent: -18pt;"><span class="Apple-style-span" style="font-family: inherit;">- Zentrieren der Landeskarten auf die momentane Position (Geolocation) und Anzeigen des Gemeinde, in der sich der Nutzer befindet</span></div><div style="font-size: small; padding-left: 18pt; text-align: left; text-indent: -18pt;"><span class="Apple-style-span" style="font-family: inherit;">- Informationspanel mit</span></div><div style="font-size: small; padding-left: 36pt; text-align: left; text-indent: 0pt;"><span class="Apple-style-span" style="font-family: inherit;">- Feedbackmöglichkeit, um Fehlfunktionen oder Korrekturmeldungen zu übermitteln</span></div><div style="font-size: small; text-align: left; text-indent: 35pt;"><span class="Apple-style-span" style="font-family: inherit;">- Link zu Vorschau / Wireframe über Funktionsumfang der ersten Vollversion</span></div><div style="font-size: small; text-align: left;"><span class="Apple-style-span" style="font-family: inherit;">- Link zu </span><a href="http://www.geo.admin.ch/"><span style="color: blue;"><u><span class="Apple-style-span" style="font-family: inherit;">www.geo.admin.ch</span></u></span></a><span class="Apple-style-span" style="font-family: inherit;">, dem Geoportal Bund</span></div><div style="font-size: small; text-align: left;"></div><div style="font-size: small; text-align: left;"><span class="Apple-style-span" style="font-family: inherit;">Diese BETA Version soll erlauben, die wichtigsten Funktionen einem von </span><a href="http://geo.admin.ch/"><span class="Apple-style-span" style="font-family: inherit;">geo.admin.ch</span></a><span class="Apple-style-span" style="font-family: inherit;"> schon zur Verfügung zu stellen und Feedback zu erhalten. Die mobile Version des Portals ist ebenfalls in Bearbeitung und wir sind zuversichtlich, dass RE2 im September 2011 aufgeschaltet werden kann.»</span></div><div style="font-size: small;"><span class="Apple-style-span" style="font-family: inherit;"><br />
</span></div><div style="font-family: Arial, sans-serif; font-size: small;"><span style="font-family: Arial, sans-serif;"><br />
</span></div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXa7KzRGgj46nkofIrzMsWbZj-NFuU8jCmil3W0AuD0KS3MnagwcIK9HbS2d87UJ7OzCgD9a9_91QjZRl_H0ornNvdhApBk_8GjczSaj9eE_-EBTJD6GXAxJNkTaRM-FLwPKzw7H_NpjFt/s1600/screenipad.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXa7KzRGgj46nkofIrzMsWbZj-NFuU8jCmil3W0AuD0KS3MnagwcIK9HbS2d87UJ7OzCgD9a9_91QjZRl_H0ornNvdhApBk_8GjczSaj9eE_-EBTJD6GXAxJNkTaRM-FLwPKzw7H_NpjFt/s320/screenipad.png" width="244" /></a></div><div style="font-family: Arial, sans-serif; font-size: small;"><br />
</div>Adihttp://www.blogger.com/profile/14454103117576517144noreply@blogger.com0tag:blogger.com,1999:blog-1939297001909981514.post-19556355900550628542011-05-21T23:28:00.001+02:002011-05-21T23:30:15.162+02:00Dave Bollinger<div class="separator" style="clear: both; text-align: center;"></div><br />
Dave Bollinger: "<span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif; font-size: 12px;">I enjoy tinkering with various procedural, generative and algorithmic designs". Faszinierend und extrem vielseitig,</span><br />
<div><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif; font-size: 12px;"><br />
</span></div><div class="separator" style="clear: both; text-align: center;"><a href="http://www.flickr.com/photos/davebollinger"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4zZgPKNJ1fMJ_9QUglWGtcjnsai6CtJG9_B8KB0TPvVs6umBL2er_uIlRNKyIYik3MnL0E4BOrJ3yA7jtkoOJnBkllcBiquEsRdQ6ANBAKNuYvVnfv0H9Sh5qxI1GONZVN1undRuUIZWt/s320/bollingersets.png" width="271" /></a></div><div class="separator" style="clear: both; text-align: center;"><br />
</div><div class="separator" style="clear: both; text-align: center;"><br />
</div>Adihttp://www.blogger.com/profile/14454103117576517144noreply@blogger.com0tag:blogger.com,1999:blog-1939297001909981514.post-32931022796027227462011-05-11T19:39:00.000+02:002011-05-13T22:28:43.849+02:00Buch-Tipp<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjoTJILNsOtGOkJUaiMqhF-ejTb6zHUEMZUukeleeWI2nrof8l9pzJOc3PeJmh6iKcy7MCEnBx1NiHj6PldPKZkE6km-IWPt73NzHk1EWt3bOd6DP33VLIqD1w_Jb-J7vROHDsdmAo9LEE/s1600/Foto%25282%2529.JPG"><img style="display: block; margin: 0px auto 10px; text-align: center; cursor: pointer; width: 150px; height: 200px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjoTJILNsOtGOkJUaiMqhF-ejTb6zHUEMZUukeleeWI2nrof8l9pzJOc3PeJmh6iKcy7MCEnBx1NiHj6PldPKZkE6km-IWPt73NzHk1EWt3bOd6DP33VLIqD1w_Jb-J7vROHDsdmAo9LEE/s200/Foto%25282%2529.JPG" alt="" id="BLOGGER_PHOTO_ID_5605515914007210674" border="0" /></a><br />Und noch ein Buch-Tipp:<br />Ecological Urbanism, herausgegeben von <a href="http://www.lars-mueller-publishers.com/">Lars Müller Publishers</a><br /><br />Nicht nur wunderschön (und wie alle bücher wohlriechend) sondern auch noch interessant, vielseiteig und spannend zu lesen.Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-1939297001909981514.post-68875183528353050752011-05-11T09:16:00.000+02:002011-05-11T09:18:13.272+02:00Buch-TippGeologics by Vincent Guallart<br /><br />Look inside:<br />http://issuu.com/actar/docs/geologicsUnknownnoreply@blogger.com0tag:blogger.com,1999:blog-1939297001909981514.post-11029538828027953642011-04-07T23:53:00.010+02:002011-04-08T14:12:45.601+02:00And then there was Cartagr.am (bloom blog)<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJG4h1YrPgAHkvmirCDnLLihyExuj7WBylmdQ3yK3nIGT4XrYbVm8iT7-8Q0OnJR0vEPdpOUsNBdBpMbxexxX7f3O-VVUeLNc9hW7bbTzP6rfbat2kJsUXDP4wLuNT3yN22bQ8L3W0XOuH/s1600/cartagram.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="272" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJG4h1YrPgAHkvmirCDnLLihyExuj7WBylmdQ3yK3nIGT4XrYbVm8iT7-8Q0OnJR0vEPdpOUsNBdBpMbxexxX7f3O-VVUeLNc9hW7bbTzP6rfbat2kJsUXDP4wLuNT3yN22bQ8L3W0XOuH/s320/cartagram.png" width="320" /></a></td></tr>
</tbody></table>Geht leider nicht um Kartogramme aber doch um Karten, konkret um die Visualisierung von <a href="http://instagr.am/">Instagram</a>-Fotos. Interessant, dass da eine weitere JavaScript-Kartographie-Bibliothek auftaucht:<br />
<br />
"<span class="Apple-style-span" style="font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 13px; line-height: 22px;"><strong>Technology: </strong></span><span class="Apple-style-span" style="font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 13px; line-height: 22px;"><span class="Apple-style-span" style="font-family: 'Lucida Grande'; font-size: small; line-height: normal;"><a href="http://cartagr.am/#8.00/46.900/8.300">Cartagr.am</a></span> was written using <a href="https://github.com/stamen/modestmaps-js" style="border-bottom-color: rgb(0, 0, 0); border-bottom-style: dotted; border-bottom-width: 1px; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: black; font-size: 13px; font-weight: 600; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-decoration: none;" target="_blank" title="ModestMaps.js">ModestMap.js</a> for the tile mapping and <a href="http://simplegeo.com/" style="border-bottom-color: rgb(0, 0, 0); border-bottom-style: dotted; border-bottom-width: 1px; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: black; font-size: 13px; font-weight: 600; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-decoration: none;" target="_blank" title="SimpleGeo">SimpleGeo</a> for the location services and the labels are the <a href="http://blog.fortiusone.com/2011/01/19/announcing-acetate-better-thematic-mapping/" style="border-bottom-color: rgb(0, 0, 0); border-bottom-style: dotted; border-bottom-width: 1px; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: black; font-size: 13px; font-weight: 600; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-decoration: none;" title="Acetate Blog Post">Acetate</a> labels from <a href="http://www.fortiusone.com/" style="border-bottom-color: rgb(0, 0, 0); border-bottom-style: dotted; border-bottom-width: 1px; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: black; font-size: 13px; font-weight: 600; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-decoration: none;" title="FortiusOne">FortiusOne</a> and <a href="http://stamen.com/" style="border-bottom-color: rgb(0, 0, 0); border-bottom-style: dotted; border-bottom-width: 1px; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: black; font-size: 13px; font-weight: 600; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-decoration: none;" title="Stamen">Stamen</a>."</span><br />
<span class="Apple-style-span" style="font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 13px; line-height: 22px;"><br />
</span><br />
<span class="Apple-style-span" style="line-height: 22px;"><span class="Apple-style-span" style="font-family: inherit;">Leider ist die Doku noch nicht allzu ausgebaut. Es hat aber einige Beispiele:</span></span><br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2I3lIYtwxY0DSgZhXqmR9yPjfaUHV-bT_gI2PBKgFXba6B6INZtuzGaWPoZoNn04Dh4Nto7Du24uankEPA0-Uy-dDHIzPJ9F031VbRbdAZIMihnaN9U61RbzSTEn9Zq9uac9cZArcpGOb/s1600/modestmaps.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2I3lIYtwxY0DSgZhXqmR9yPjfaUHV-bT_gI2PBKgFXba6B6INZtuzGaWPoZoNn04Dh4Nto7Du24uankEPA0-Uy-dDHIzPJ9F031VbRbdAZIMihnaN9U61RbzSTEn9Zq9uac9cZArcpGOb/s400/modestmaps.png" width="132" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Beispiele</td></tr>
</tbody></table><span class="Apple-style-span" style="line-height: 22px;"><span class="Apple-style-span" style="font-family: inherit;"><br />
</span></span><br />
<span class="Apple-style-span" style="line-height: 22px;"><br />
</span><br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFDs_7gRrY-FlqY9wgWeQdDCLtleZ2wj-eSG7LZsUqNl_9859cgL6UiShdhmLqsCFwsfzOXr1wpYg6Yyr1YazIt1VYtRbEjYf5ep6AvWlnWQMpI6i6iKsQZ3IfLCgzgqw1Ya1lVCOLXNTJ/s1600/greatcircle.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="197" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFDs_7gRrY-FlqY9wgWeQdDCLtleZ2wj-eSG7LZsUqNl_9859cgL6UiShdhmLqsCFwsfzOXr1wpYg6Yyr1YazIt1VYtRbEjYf5ep6AvWlnWQMpI6i6iKsQZ3IfLCgzgqw1Ya1lVCOLXNTJ/s320/greatcircle.png" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><span class="Apple-style-span" style="font-size: small; line-height: 22px;">greatcircle</span></td></tr>
</tbody></table><div class="separator" style="clear: both; text-align: left;"><br />
</div><div class="separator" style="clear: both; text-align: left;"><br />
</div><table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8u6AIxFgkb7UACAInMCZ1ey_3SVp1M8ppPa1HS-PtjHX7eFJPshIkPKyGyEthgsefV95nUz46qYyHmDKGVBzXUZheATlZ0sRjR8_UbcGFCYWoahvQ9VM4CUylGpRulz3Jg3iuQZaPCtS2/s1600/hurricane.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8u6AIxFgkb7UACAInMCZ1ey_3SVp1M8ppPa1HS-PtjHX7eFJPshIkPKyGyEthgsefV95nUz46qYyHmDKGVBzXUZheATlZ0sRjR8_UbcGFCYWoahvQ9VM4CUylGpRulz3Jg3iuQZaPCtS2/s320/hurricane.png" width="262" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><span class="Apple-style-span" style="font-size: small;">hurricane</span></td></tr>
</tbody></table><div class="separator" style="clear: both; text-align: left;"><span class="Apple-style-span" style="line-height: 22px;"><span class="Apple-style-span" style="line-height: normal;"><br />
</span></span></div>Adihttp://www.blogger.com/profile/14454103117576517144noreply@blogger.com0tag:blogger.com,1999:blog-1939297001909981514.post-32234414319922600972011-04-05T10:14:00.000+02:002011-04-05T10:14:45.427+02:00US-Census-Daten aufgrund von Länge/Breite oder ZIP-CodeWenn wir noch eine Volkszählung hätten, wäre eine solche API eine Möglichkeit, sie für die Verwendung von Mashups anzubieten (<a href="http://infochimps.com/">infochimps.com</a> hat übrigens noch eine ganze Reihe weiterer <a href="http://www.infochimps.com/awesomeapis">APIs</a>).<br />
<br />
<span style="font-size: small;"><span style="font-family: Georgia,"Times New Roman",serif;">Geographic</span></span><span style="font-family: Georgia,"Times New Roman",serif;">: latitude, longitude, city, area code, zip code, metro code, region code, country code</span><br />
<span style="font-size: small;"><br style="font-family: Georgia,"Times New Roman",serif;" /><span style="font-family: Georgia,"Times New Roman",serif;">Ethnic</span><span style="font-family: Georgia,"Times New Roman",serif;">: percent hispanic, percent asian, percent pacific, percent white, percent black, percent native</span><br style="font-family: Georgia,"Times New Roman",serif;" /><br style="font-family: Georgia,"Times New Roman",serif;" /><span style="font-family: Georgia,"Times New Roman",serif;">Age</span><span style="font-family: Georgia,"Times New Roman",serif;">: percent under 5, percent under 18, percent over 65</span><br style="font-family: Georgia,"Times New Roman",serif;" /><br style="font-family: Georgia,"Times New Roman",serif;" /><span style="font-family: Georgia,"Times New Roman",serif;">Population: </span><span style="font-family: Georgia,"Times New Roman",serif;"> total, people per household, households, housing units</span><br style="font-family: Georgia,"Times New Roman",serif;" /><br style="font-family: Georgia,"Times New Roman",serif;" /><span style="font-family: Georgia,"Times New Roman",serif;">Demographic</span><span style="font-family: Georgia,"Times New Roman",serif;">: percent female, percent semi permanent, percent bs graduate, percent below poverty, work travel time – in minutes, percent hs graduate, percent non english, percent foreign</span><br style="font-family: Georgia,"Times New Roman",serif;" /><br style="font-family: Georgia,"Times New Roman",serif;" /><span style="font-family: Georgia,"Times New Roman",serif;">Economic</span><span style="font-family: Georgia,"Times New Roman",serif;">: household income – median, per capita income, housing unit value, percent homeownership</span></span><br />
<br />
<b>Beispiel</b><br />
Mit dem Input (in diesem Beispiel mit der ZIP-Code) <br />
<div style="font-family: "Courier New",Courier,monospace;"><span style="font-size: small;">http://api.infochimps.com/web/an/census/combined?zip=78701&apikey=api_test-W1cipwpcdu9Cbd9pmm8D4Cjc469</span></div><br />
ergibt sich folgender Ouput:<br />
<span style="font-size: x-small;">{"household_income":35757.0,"percent_hispanic":0.15,"percent_semi_permanent":0.27,"percent_asian":0.04,"percent_under_18":0.04,"zip":78701,"percent_bs_graduate":0.14,"per_capita_income":37485,"percent_below_poverty":0.3,"work_travel_time":6.67,"housing_unit_value":212900,"percent_homeownership":0.38,"housing_units":2002,"people_per_household":1.54,"percent_dual_race":0.05,"percent_pacific":0.01,"percent_white":0.73,"population":3780,"percent_hs_graduate":0.14,"percent_non_english":0.26,"percent_foreign":0.12,"percent_black":0.1,"percent_over_65":0.12,"households":1707,"percent_under_5":0.02,"percent_native":0.02,"percent_female":0.37}</span> <a href="http://infochimps.com/"><br />
</a>Adihttp://www.blogger.com/profile/14454103117576517144noreply@blogger.com0tag:blogger.com,1999:blog-1939297001909981514.post-20433234580798664722011-03-22T08:00:00.002+01:002011-03-22T08:05:22.781+01:00Ist die Schweiz zu klein, ein Atom-Land zu sein?Gebiete, die nicht weiter als 30/50Km von einem AKW entfernt sind, wurden auf dieser Karte der Bevölkerungsdichte eingefärbt.<br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3b_pHCUYFoYu05OFTqOXWKtTrfjHpyMg_FP9xVyCM-YyOT6bqqbOiwQRw-XkAFh7FtaTNQrkQQ6_2eqDmIdh1VCMAUFJuZ-6aBooNMbyScd9XIToOV5tHOx2us1NPBkG775GpqkbzwYI/s1600/akw.png"><img style="display: block; margin: 0px auto 10px; text-align: center; cursor: pointer; width: 462px; height: 313px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3b_pHCUYFoYu05OFTqOXWKtTrfjHpyMg_FP9xVyCM-YyOT6bqqbOiwQRw-XkAFh7FtaTNQrkQQ6_2eqDmIdh1VCMAUFJuZ-6aBooNMbyScd9XIToOV5tHOx2us1NPBkG775GpqkbzwYI/s400/akw.png" alt="" id="BLOGGER_PHOTO_ID_5586796004353603506" border="0" /></a>Aber für Notfälle haben wir ja noch das Reduit....<br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxNzLtCxoeq_9hfxwOtx3CEN8SnCd6sICUCwUYaHK_Dc28-Ga91qsO4Zyb2X9P7wD18Jv_EXicfXVTsaHUY1MHadHGOJElr4kdRZnw7Uo8_35a3AhY1KtWvrQ6hu8v_JGX4t7bagUqtZQ/s1600/akw.png"><br /></a>Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-1939297001909981514.post-48548941915305067522011-03-17T23:33:00.001+01:002011-03-17T23:35:05.232+01:00KartogrammeEine Vielzahl von Kartogrammen bringt der Blog "<a href="http://www.viewsoftheworld.net/">Views of the World</a>" von Benjamin D. Hennig (University of Sheffield). Ein aktuelles Beispiel: Die Visualisierung der von Erdbeben bedrohten Personen; Blog: <a href="http://feedproxy.google.com/%7Er/worldmapping/%7E3/JdKPOJ-u43U/">People at Risk: Visualising Global Earthquake Intensity</a>. Hier ein gleich ein Auszug:<br />
<br />
<span style="font-family: Georgia, 'Times New Roman', serif;">The following map shows a more general approach of mapping the risk of earthquakes. It is a visualisation of all major earthquakes that have been complied in the </span><a href="http://www.ngdc.noaa.gov/nndc/struts/form?t=101650&s=1&d=1" style="font-family: Georgia,"Times New Roman",serif;">Global Significant Earthquake Database</a><span style="font-family: Georgia, 'Times New Roman', serif;">. The database created by </span><a href="http://ngdc.noaa.gov/ngdc.html" style="font-family: Georgia,"Times New Roman",serif;">NOAA’s National Geophysical Data Center</a><span style="font-family: Georgia, 'Times New Roman', serif;"> “</span><i style="font-family: Georgia,"Times New Roman",serif;">contains information on destructive earthquakes from 2150 B.C. to the present that meet at least one of the following criteria: Moderate damage (approximately $1 million or more), 10 or more deaths, Magnitude 7.5 or greater, Modified Mercalli Intensity X or greater, or the earthquake generated a tsunami</i><span style="font-family: Georgia, 'Times New Roman', serif;">“.</span><br />
<br />
<span style="font-family: Georgia, 'Times New Roman', serif;"> Following an approach of </span><a href="http://spatial-analyst.net/" style="font-family: Georgia,"Times New Roman",serif;">spatial-analyst.net</a><span style="font-family: Georgia, 'Times New Roman', serif;">, a kernel density has been calculated from these records to visualise the areas most at risk of earthquakes during that time period. In a last step, I have transformed the world earthquake intensity map (see map inset) using a </span><a href="http://www.pnas.org/content/101/20/7499.full" style="font-family: Georgia,"Times New Roman",serif;">density equalising cartogram algorithm</a><span style="font-family: Georgia, 'Times New Roman', serif;"> applied to a population grid. Simply said, the resulting map gives each person living on earth the same amount of space while also preserving the geographical reference. This map allows to understand the earthquake intensity in relation to today’s population distribution, and thus gives an idea of where most people are of risk related to seismic activity:</span><br />
<div style="font-family: Georgia,"Times New Roman",serif;"><br />
</div><div style="font-family: Georgia,"Times New Roman",serif; text-align: center;"><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9_JnS7H2NBbGzDJx421PnMhsooaR5ox30nx39t81glqwPW1wNs2Ps-oa8pfVkcv1VNIB_kQ2ghyj3Ylk7Mphx2THoM6ckCVktvm2vPB17ha5oNcClzsWufzgY1SGuivZGOReurzbVW1dn/s1600/EarthquakeDensityMap.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9_JnS7H2NBbGzDJx421PnMhsooaR5ox30nx39t81glqwPW1wNs2Ps-oa8pfVkcv1VNIB_kQ2ghyj3Ylk7Mphx2THoM6ckCVktvm2vPB17ha5oNcClzsWufzgY1SGuivZGOReurzbVW1dn/s400/EarthquakeDensityMap.png" width="400" /></a></div></div><div style="font-family: Georgia,"Times New Roman",serif;"><br />
</div><div style="font-family: Georgia,"Times New Roman",serif;">Paying some tribute to the most recent events in Japan, here is a new population cartogram of the country which is created from a more detailed population grid than <a href="http://www.worldpopulationatlas.org/carto_jpn.htm">the original map from our World Population Atlas</a>. The cartogram shows the shape a very densely populated country and helps to understand, where the majority of Japan’s population is concentrated: “80 million of the urban population is heavily concentrated on the Pacific shore of Honshū. Metropolitan Tokyo-Yokohama, with 35,000,000 people, is the world’s most populous city” (<a href="http://en.wikipedia.org/wiki/Demographics_of_Japan">see Wikipedia</a>). The map also includes Japan’s topography (see map inset for a conventional reference map and the surrounding bathymetry, which apparently played a crucial role in the development of the tsunami which followed the earthquake and <a href="http://www.nytimes.com/interactive/2011/03/11/world/asia/20110311EARTHQUAKE_zoomer.html?ref=world">caused much of the destruction</a> on that densely populated Pacific shore.</div><div style="font-family: Georgia,"Times New Roman",serif; text-align: center;"><br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVkwENBuETn6FS__8_1UfLiic3JvO-tglHm0OSf72yf9UsIQ_YrRxWSgOT7Fh5hVvZzjarpZXlqR2-VLHoIrqkOtdNOAl1rbup38XhiwkjGsZr30eNxJGbksBkzEMseUzRUeScWWk81AmY/s1600/Japan_PopulationCartogram.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="269" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVkwENBuETn6FS__8_1UfLiic3JvO-tglHm0OSf72yf9UsIQ_YrRxWSgOT7Fh5hVvZzjarpZXlqR2-VLHoIrqkOtdNOAl1rbup38XhiwkjGsZr30eNxJGbksBkzEMseUzRUeScWWk81AmY/s320/Japan_PopulationCartogram.png" width="320" /></a></div><br />
<div style="text-align: left;"><span class="Apple-style-span" style="font-family: inherit;">(via Newsletter von </span><a href="http://statoo.ch/"><span class="Apple-style-span" style="font-family: inherit;">statoo.ch</span></a><span class="Apple-style-span" style="font-family: inherit;">)</span></div></div>Adihttp://www.blogger.com/profile/14454103117576517144noreply@blogger.com0tag:blogger.com,1999:blog-1939297001909981514.post-70122854428186509302011-03-17T09:06:00.004+01:002011-03-17T09:10:42.675+01:00Visualisierung des Erdbebens in Japan<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://geofon.gfz-potsdam.de/geofon/alerts/gfz2011ewla/animation_h600.gif"><img style="display: block; margin: 0px auto 10px; text-align: center; cursor: pointer; width: 487px; height: 409px;" src="http://geofon.gfz-potsdam.de/geofon/alerts/gfz2011ewla/animation_h600.gif" alt="" border="0" /></a><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbg9X5TW3sz37KTo61L_pKjQocEmWzBZkdZYpsGYWNQH2x8e9_S0v8XbY6LY5pOEip-ovUyeRAb5Y1l6evvuLJw7P0R3SXY93MRZZR5mGplQSoG3n5EUzkB6wo4Z1cNNe1LfovDi42TEg/s1600/animation_h600.gif"><br /></a>Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-1939297001909981514.post-77025576368566854172011-03-14T23:26:00.000+01:002011-03-14T23:26:12.244+01:00Data-Driven Documents<span class="Apple-style-span" style="font-family: Georgia, 'Times New Roman', serif; font-size: 14px;"><a href="http://www.blogger.com/"><span id="goog_2041140820"></span>Mike Bostock<span id="goog_2041140821"></span></a>'s JavaScript library <b>D3.js</b> for manipulating documents based on data. </span><br />
<span class="Apple-style-span" style="font-family: Georgia, 'Times New Roman', serif; font-size: 14px;"><br />
</span><br />
<span class="Apple-style-span" style="font-family: Georgia, 'Times New Roman', serif; font-size: 14px;">"D3 allows you to bind arbitrary data to a Document Object Model (DOM), and then apply data-driven transformations to the document. As a trivial example, you can use D3 to generate a basic HTML table from an array of numbers. Or, use the same data to create an interactive SVG bar chart with smooth transitions and interaction.</span><br />
<div style="font-size: 14px;"><span class="Apple-style-span" style="font-family: Georgia, 'Times New Roman', serif;">D3 is not a traditional visualization framework. Rather than provide a monolithic system with all the features anyone may ever need, D3 solves only the crux of the problem: efficient manipulation of documents based on data. This gives D3 extraordinary flexibility, exposing the full capabilities of underlying technologies such as </span><a href="http://www.w3.org/Style/CSS/current-work" style="color: steelblue; text-decoration: none;"><span class="Apple-style-span" style="font-family: Georgia, 'Times New Roman', serif;">CSS3</span></a><span class="Apple-style-span" style="font-family: Georgia, 'Times New Roman', serif;">,</span><a href="http://www.w3.org/TR/html5/" style="color: steelblue; text-decoration: none;"><span class="Apple-style-span" style="font-family: Georgia, 'Times New Roman', serif;">HTML5</span></a><span class="Apple-style-span" style="font-family: Georgia, 'Times New Roman', serif;"> and </span><a href="http://www.w3.org/TR/SVG/" style="color: steelblue; text-decoration: none;"><span class="Apple-style-span" style="font-family: Georgia, 'Times New Roman', serif;">SVG</span></a><span class="Apple-style-span" style="font-family: Georgia, 'Times New Roman', serif;">. It avoids learning a new intermediate proprietary representation. With minimal overhead, D3 is extremely fast, supporting large datasets and dynamic behaviors for interaction and animation. And, for those common needs, D3’s functional style allows code reuse through a diverse collection of optional modules."</span></div><div style="font-family: 'Helvetica Neue'; font-size: 14px;"><br />
</div><div style="font-size: 14px;"><span class="Apple-style-span" style="font-family: inherit;">Hier noch ein paar <a href="http://mbostock.github.com/d3/ex/">Beispiele</a></span></div><div style="font-size: 14px;"><span class="Apple-style-span" style="font-family: inherit;"><br />
</span></div><div><a href="http://mbostock.github.com/d3/ex/voronoi.html"><span class="Apple-style-span" style="font-family: inherit;"><img src="http://mbostock.github.com/d3/voronoi.png" /></span></a><span class="Apple-style-span" style="font-family: inherit;"> <a href="http://mbostock.github.com/d3/ex/"><img src="http://mbostock.github.com/d3/choropleth.png" /></a></span></div><div><span class="Apple-style-span" style="font-family: inherit;"><br />
</span></div><div><span class="Apple-style-span" style="font-family: inherit;">Beim <a href="http://mbostock.github.com/d3/ex/voronoi.html">Voronoi-Diagramm</a> ist vor allem beeindruckend, mit welcher Geschwindigkeit die Polygone beim Darüberfahren mit der Maus neu berechnet werden.</span></div><div><span class="Apple-style-span" style="font-family: inherit;"><br />
</span></div><div><span class="Apple-style-span" style="font-family: inherit;">Und noch eine <a href="http://www.koalastothemax.com/?aHR0cDovL3VwbG9hZC53aWtpbWVkaWEub3JnL3dpa2lwZWRpYS9jb21tb25zL3RodW1iLzcvN2QvS2FydGVfR2VtZWluZGVuX2Rlc19LYW50b25zX1olQzMlQkNyaWNoX2ZhcmJpZ18yMDExLnBuZy80ODNweC1LYXJ0ZV9HZW1laW5kZW5fZGVzX0thbnRvbnNfWiVDMyVCQ3JpY2hfZmFyYmlnXzIwMTEucG5n">spielerische Anwendung</a> (man kann irgendein Bild als Paramter übergeben, http://koalastothemax.com?<your image url>)</span></div><div><span class="Apple-style-span" style="font-family: inherit;"><br />
</span></div><div><span class="Apple-style-span" style="font-family: inherit;"><img src="webkit-fake-url://6EE3E66F-A8F9-4807-8297-86CC76618526/image.tiff" /></span></div><div><br />
</div><div><br />
</div>Adihttp://www.blogger.com/profile/14454103117576517144noreply@blogger.com0