Maps from Wikipedia loaded on Roassal's RTMetricMap
Hi, This Thursday and Saturday we will have a small workshop on data storytelling and I would like to present Pharo/Roassal to the people there as a tool for creating and sharing visualizations. My idea is to use Playgrounds to make agile visualization and then share them using cloud sharing at stfx and etherpads. The maps I would like to make are similar to the ones that have colored countries [1][2], but using internal country geopolitical divisions. For the case of Colombia I would like to use the ones of [3], specifically something like [4] and use the same syntax of RTMetricMap inside the country. [1] http://bit.ly/1yiedrE [2] http://bit.ly/1xTAQV0 [3] https://commons.wikimedia.org/wiki/User:Shadowxfox/Maps#Colombia [4] https://commons.wikimedia.org/wiki/File:Colombia_departamentos_otros.svg So my question is: - There is any way to upload this SGV maps and treat them as the maps already in RTMetricMap, telling the names of the internal geopolitical divisions inside a Country and how to color them according to a value and make them zoomable? - Where can I start to look to support this feature? Notice that this tries to be a leaner approach to the one I had already asked about importing maps from open street map. Thanks, Offray
2014-11-18 10:30 GMT-03:00 Offray Vladimir Luna Cárdenas <offray@riseup.net> :
Hi,
This Thursday and Saturday we will have a small workshop on data storytelling and I would like to present Pharo/Roassal to the people there as a tool for creating and sharing visualizations.
My idea is to use Playgrounds to make agile visualization and then share them using cloud sharing at stfx and etherpads. The maps I would like to make are similar to the ones that have colored countries [1][2], but using internal country geopolitical divisions. For the case of Colombia I would like to use the ones of [3], specifically something like [4] and use the same syntax of RTMetricMap inside the country.
[1] http://bit.ly/1yiedrE [2] http://bit.ly/1xTAQV0 [3] https://commons.wikimedia.org/wiki/User:Shadowxfox/Maps#Colombia [4] https://commons.wikimedia.org/wiki/File:Colombia_ departamentos_otros.svg
So my question is:
- There is any way to upload this SGV maps and treat them as the maps already in RTMetricMap, telling the names of the internal geopolitical divisions inside a Country and how to color them according to a value and make them zoomable?
- Where can I start to look to support this feature?
SVG is basically XML, so you can parse it like this: | xmlTree | xmlTree := (XMLDOMParser parseFileNamed: 'Argentina.svg') firstNode. xmlTree The coordinates of a map are in the SVG path description, and you can add them separately. For example if you download this file http://commons.wikimedia.org/wiki/File:USA_Counties_with_FIPS_and_names.svg and take the node with "Ulster, NY" you can render it this way: | view svg | view := RTView new. svg := (RTSVGPath new path: 'M 501.96598,97.8 L 502.15198,100.009 L 502.68298,101.739 L 502.88598,102.153 L 503.20498,104.028 L 502.29498,104.366 L 501.61098,104.502 L 501.02498,104.483 L 500.32998,104.231 L 499.33398,104.921 L 498.91498,104.299 L 497.86898,103.844 L 496.94598,103.415 L 497.13498,102.933 L 497.50398,102.086 L 497.69798,101.505 L 495.56698,100.824 L 494.24598,100.423 L 496.85998,97.791 L 498.36098,98.174 L 499.08798,98.084 L 500.56998,97.894 L 500.65098,96.89 L 501.06998,96.754 L 501.99798,97.146 L 501.96598,97.8'; fillColor: (Color r: 0.612 g: 0.488 b: 0.3 alpha: 1.0); scale: 5) element. view add: svg. view open There should be an easier way like using an SVG importer for Roassal, but that's all I have for now. Cheers, Hernán
Hi Hernan, Thanks for your answer. I got an error which says "Error: Reading a number failed: a digit between 0 and 9 expected" and "element" of your example is selected. I think that I'm not understanding well how to connect the downloaded file (in fact I have not downloaded anything) to the part where you render the svg and I don't see anything in your example which links them. Whats the thing I'm missing? Thanks for your help. Hopefully, tomorrow we can show maps for new territories in Roassal. Cheers, Offray El 21/11/14 a las #4, Hernán Morales Durand escribió:
2014-11-18 10:30 GMT-03:00 Offray Vladimir Luna Cárdenas <offray@riseup.net <mailto:offray@riseup.net>>:
Hi,
This Thursday and Saturday we will have a small workshop on data storytelling and I would like to present Pharo/Roassal to the people there as a tool for creating and sharing visualizations.
My idea is to use Playgrounds to make agile visualization and then share them using cloud sharing at stfx and etherpads. The maps I would like to make are similar to the ones that have colored countries [1][2], but using internal country geopolitical divisions. For the case of Colombia I would like to use the ones of [3], specifically something like [4] and use the same syntax of RTMetricMap inside the country.
[1] http://bit.ly/1yiedrE [2] http://bit.ly/1xTAQV0 [3] https://commons.wikimedia.org/__wiki/User:Shadowxfox/Maps#__Colombia <https://commons.wikimedia.org/wiki/User:Shadowxfox/Maps#Colombia> [4] https://commons.wikimedia.org/__wiki/File:Colombia___departamentos_otros.svg <https://commons.wikimedia.org/wiki/File:Colombia_departamentos_otros.svg>
So my question is:
- There is any way to upload this SGV maps and treat them as the maps already in RTMetricMap, telling the names of the internal geopolitical divisions inside a Country and how to color them according to a value and make them zoomable?
- Where can I start to look to support this feature?
SVG is basically XML, so you can parse it like this:
| xmlTree | xmlTree := (XMLDOMParser parseFileNamed: 'Argentina.svg') firstNode. xmlTree
The coordinates of a map are in the SVG path description, and you can add them separately. For example if you download this file http://commons.wikimedia.org/wiki/File:USA_Counties_with_FIPS_and_names.svg and take the node with "Ulster, NY" you can render it this way:
| view svg | view := RTView new. svg := (RTSVGPath new path: 'M 501.96598,97.8 L 502.15198,100.009 L 502.68298,101.739 L 502.88598,102.153 L 503.20498,104.028 L 502.29498,104.366 L 501.61098,104.502 L 501.02498,104.483 L 500.32998,104.231 L 499.33398,104.921 L 498.91498,104.299 L 497.86898,103.844 L 496.94598,103.415 L 497.13498,102.933 L 497.50398,102.086 L 497.69798,101.505 L 495.56698,100.824 L 494.24598,100.423 L 496.85998,97.791 L 498.36098,98.174 L 499.08798,98.084 L 500.56998,97.894 L 500.65098,96.89 L 501.06998,96.754 L 501.99798,97.146 L 501.96598,97.8'; fillColor: (Color r: 0.612 g: 0.488 b: 0.3 alpha: 1.0); scale: 5) element.http://commons.wikimedia.org/wiki/File:USA_Counties_with_FIPS_and_names.svg view add: svg. view open
There should be an easier way like using an SVG importer for Roassal, but that's all I have for now.
Cheers,
Hernán
Ok, download the wikimedia SVG and open it with a text editor. If you look for "Ulster, NY" you will see it enclosed in a path node. The contents of the "d" attribute is what you need to parse/extract to pass as parameter to RTSVGPath>>path: <path style="font-size:12px;fill:#d0d0d0;fill-opacity:1;fill-rule:nonzero;stroke:#000000;stroke-opacity:1;stroke-width:0.1;stroke-miterlimit:4;stroke-dasharray:none;stroke-linecap:butt;marker-start:none;stroke-linejoin:bevel" d="M 501.96598,97.8 L 502.15198,100.009 L 502.68298,101.739 L 502.88598,102.153 L 503.20498,104.028 L 502.29498,104.366 L 501.61098,104.502 L 501.02498,104.483 L 500.32998,104.231 L 499.33398,104.921 L 498.91498,104.299 L 497.86898,103.844 L 496.94598,103.415 L 497.13498,102.933 L 497.50398,102.086 L 497.69798,101.505 L 495.56698,100.824 L 494.24598,100.423 L 496.85998,97.791 L 498.36098,98.174 L 499.08798,98.084 L 500.56998,97.894 L 500.65098,96.89 L 501.06998,96.754 L 501.99798,97.146 L 501.96598,97.8" id="36111" inkscape:label="Ulster, NY" /> I have tried using the Roassal2 from the Configuration Browser in Pharo 3.0. Cheers, Hernán 2014-11-21 22:53 GMT-03:00 Offray Vladimir Luna Cárdenas <offray@riseup.net> :
Hi Hernan,
Thanks for your answer. I got an error which says "Error: Reading a number failed: a digit between 0 and 9 expected" and "element" of your example is selected. I think that I'm not understanding well how to connect the downloaded file (in fact I have not downloaded anything) to the part where you render the svg and I don't see anything in your example which links them. Whats the thing I'm missing?
Thanks for your help. Hopefully, tomorrow we can show maps for new territories in Roassal.
Cheers,
Offray
El 21/11/14 a las #4, Hernán Morales Durand escribió:
2014-11-18 10:30 GMT-03:00 Offray Vladimir Luna Cárdenas < offray@riseup.net <mailto:offray@riseup.net>>:
Hi,
This Thursday and Saturday we will have a small workshop on data storytelling and I would like to present Pharo/Roassal to the people there as a tool for creating and sharing visualizations.
My idea is to use Playgrounds to make agile visualization and then share them using cloud sharing at stfx and etherpads. The maps I would like to make are similar to the ones that have colored countries [1][2], but using internal country geopolitical divisions. For the case of Colombia I would like to use the ones of [3], specifically something like [4] and use the same syntax of RTMetricMap inside the country.
[1] http://bit.ly/1yiedrE [2] http://bit.ly/1xTAQV0 [3] https://commons.wikimedia.org/__wiki/User:Shadowxfox/Maps#__ Colombia <https://commons.wikimedia.org/wiki/User:Shadowxfox/Maps#Colombia> [4] https://commons.wikimedia.org/__wiki/File:Colombia___ departamentos_otros.svg
<https://commons.wikimedia.org/wiki/File:Colombia_ departamentos_otros.svg>
So my question is:
- There is any way to upload this SGV maps and treat them as the maps already in RTMetricMap, telling the names of the internal geopolitical divisions inside a Country and how to color them according to a value and make them zoomable?
- Where can I start to look to support this feature?
SVG is basically XML, so you can parse it like this:
| xmlTree | xmlTree := (XMLDOMParser parseFileNamed: 'Argentina.svg') firstNode. xmlTree
The coordinates of a map are in the SVG path description, and you can add them separately. For example if you download this file http://commons.wikimedia.org/wiki/File:USA_Counties_with_ FIPS_and_names.svg and take the node with "Ulster, NY" you can render it this way:
| view svg | view := RTView new. svg := (RTSVGPath new path: 'M 501.96598,97.8 L 502.15198,100.009 L 502.68298,101.739 L 502.88598,102.153 L 503.20498,104.028 L 502.29498,104.366 L 501.61098,104.502 L 501.02498,104.483 L 500.32998,104.231 L 499.33398,104.921 L 498.91498,104.299 L 497.86898,103.844 L 496.94598,103.415 L 497.13498,102.933 L 497.50398,102.086 L 497.69798,101.505 L 495.56698,100.824 L 494.24598,100.423 L 496.85998,97.791 L 498.36098,98.174 L 499.08798,98.084 L 500.56998,97.894 L 500.65098,96.89 L 501.06998,96.754 L 501.99798,97.146 L 501.96598,97.8'; fillColor: (Color r: 0.612 g: 0.488 b: 0.3 alpha: 1.0); scale: 5) element.http://commons.wikimedia.org/wiki/File:USA_ Counties_with_FIPS_and_names.svg view add: svg. view open
There should be an easier way like using an SVG importer for Roassal, but that's all I have for now.
Cheers,
Hernán
Hi Vladimir, 2014-11-18 14:30 GMT+01:00 Offray Vladimir Luna Cárdenas <offray@riseup.net> :
Notice that this tries to be a leaner approach to the one I had already asked about importing maps from open street map.
Another option which you could look to is: - use Cirela-OSM ( http://forum.world.st/ANN-NetGen-OSM-Roassal-Demo-tp4791158.html), which will give you the OpenStreetMap background for any place / any zoom level - and a combination of FreeBase, GeoJSON in a Roassal view (See the geometry properties of freebase at: http://www.freebase.com/location/location/geometry?schema=) In Cirela-OSM, you will find examples of queries to FreeBase to retrieve country / cities Lat/Lon coordinates and use them in Roassal. You also have an example of querying raw OpenStreetMap data as well. Good luck for your workshop. Thierry
Thanks,
Offray
Yesterday I've tried Cirela, impressive work! I have never thought Roassal could be pushed so far. Alexandre
Le 22-11-2014 à 6:04, Thierry Goubier <thierry.goubier@gmail.com> a écrit :
Hi Vladimir,
2014-11-18 14:30 GMT+01:00 Offray Vladimir Luna Cárdenas <offray@riseup.net>:
Notice that this tries to be a leaner approach to the one I had already asked about importing maps from open street map.
Another option which you could look to is:
- use Cirela-OSM (http://forum.world.st/ANN-NetGen-OSM-Roassal-Demo-tp4791158.html), which will give you the OpenStreetMap background for any place / any zoom level
- and a combination of FreeBase, GeoJSON in a Roassal view
(See the geometry properties of freebase at: http://www.freebase.com/location/location/geometry?schema=)
In Cirela-OSM, you will find examples of queries to FreeBase to retrieve country / cities Lat/Lon coordinates and use them in Roassal. You also have an example of querying raw OpenStreetMap data as well.
Good luck for your workshop.
Thierry
Thanks,
Offray
participants (4)
-
Alexandre Bergel -
Hernán Morales Durand -
Offray Vladimir Luna Cárdenas -
Thierry Goubier