kartograph svg map is empty when using "polygons" bounds mode - kartograph

I 'm trying to generate svg maps from the GEOFLA shapefiles.
Using 'bbox' bounds mode with manually setting the bbox values works well :
{
"layers": [{
"id": "depts",
"src": "data/DEPARTEMENTS/DEPARTEMENT.shp",
"filter": {"CODE_REG": "24"},
"simplify": {
"method": "distance",
"tolerance": 8
},
"attributes": "all"
}],
"bounds": {
"mode": "bbox",
"data": [-4.5, 42, 8, 48],
},
"export": {
"width": 600,
"ratio": 0.8
}
}
But when setting the bounds mode to 'polygons', then i get an empty svg map :
{
"layers": [{
"id": "depts",
"src": "data/DEPARTEMENTS/DEPARTEMENT.shp",
"filter": {"CODE_REG": "24"},
"simplify": {
"method": "distance",
"tolerance": 8
},
"attributes": "all"
}],
"bounds": {
"mode": "polygons",
"data": {
"layer": "depts"
},
"padding": 0.06
},
"export": {
"width": 600,
"ratio": 0.8
}
}
I had a look in kartograph files and i noticed that the "get_features" method in "map.py" return a Polygon which coordinates doesn't intersect with the features geometry previouly extracted from the shapefile.
Then, each feature are throw away in the "get_features" method of the "maplayer.py" file when checking if feature geometry intersects with the "layer.map.view_poly" property.

I had a similar problem using GEOFLA file projection.
The solution I've found is basically to change my shapefile projection using QGIS. My idea was to use the projection of the shapefile given in installation guide which worked for me.
Get example shape file from kartograph installation page
Load this vector layer in QGIS Add your GEOFLASH layer in QGIS
Right-click on GEOFLASH layer and "Save as..." menu
In the save window, give a new name for your layer (eg : DEPARTEMENT_WGS84.shp)
Click CSR button and select the test layer projection (WGS 84 / EPSG:4326)
Click OK
Check the new shape file has correct projection :
cat DEPARTEMENT_WGS84.prj
GEOGCS["GCS_WGS_1984",DATUM["D_WGS_1984",SPHEROID["WGS_1984",6378137,298.257223563]],PRIMEM["Greenwich",0],UNIT["Degree",0.017453292519943295]]
Now your script should work fine using new shape file.

Related

xpath: how can I get if the category is Type then get the Villa

Get the type of the house that is Villa:
<div class="property__feature">
<h3 class="property__feature-title property__feature-title--b-spacing">Property Details</h3>
<ul class="property__details-list">
<li class="property__details-item">
Here is where I need to get the info:
<span class="property__details-item--cat">Type:</span>
Villa
// ***
They are using client-side template rendering, so there is no xpath selector you can use to extract that element using Scrapy because Scrapy only deals with HTML, not JavaScript
That said, the data you are looking for is sent down inside the page, and thus can be extracted with a little massaging:
def parse(self, response):
import json
model_json = ''.join(response.xpath(
'.//script[#type="text/javascript" and contains(text(), "var model")]/text()'
).re(r'var model = (\{.+\});'))
model_data = json.loads(model_json)
property_data = model_data['Property']
"""
{
"Property": {
"Id": 80765,
"Type": 32,
"Status": 1,
"Area": {
"Id": 32,
"Name": "Geri",
"District": {
"Id": 1,
"Name": "Nicosia"
}
},
"IsForRent": false,
"RentPrice": 0,
"IsForSale": true,
"SalePrice": 125000,
"PriceIsPublic": true,
"SaleVAT": 0,
"SaleVATType": 1,
"Description": "<p class=\"MsoNormal\" style=\"text-align: justify;\"><span style=\"mso-fareast-language: EN-GB;\">We are pleased to present the new project of under division residential plots in one of the most sought after areas of Geri. It is located in a quiet residential area, 3 km away from the General Hospital of Nicosia, 3.5 km from the Mall of Cyprus, 2.5 km from the University of Cyprus and with easy access to the motorway. The under division plot has an area of 565 sqm and it falls into residential planning zone Κα8 with 60% building density, 35% coverage, 2 floors and a maximum height of 10m.</span></p>\r\n<p class=\"MsoNormal\" style=\"text-align: justify;\">Subject to VAT.</p>",
"EnergyEfficiencyRating": {
"Type": 1,
"CurrentRating": 0,
"PotentialRating": 0,
"Key": null
},
"EnvironmentalImpactRating": {
"Type": 2,
"CurrentRating": 0,
"PotentialRating": 0,
"Key": null
},
"ShowOnMap": true,
"Coordinates": {
"Latitude": 35.119343,
"Longitude": 33.407802
},
If you want to convert those "Type": 32 into "Type": "Building Plot", you'll have to go the extra step of also extracting their .init data from the other script text
json.loads(''.join(response.xpath(
'.//script[#type="text/javascript" and contains(text(), ".init(")]/text()'
).re(r'\.init\((\{.+\})\)')))
"""{
"Resources": {
"PropertyTypes": {
"1": "Apartment",
"2": "House",
"8": "Commercial",
"32": "Building Plot",
"64": "Land",
"128": "Industrial",
"256": "Investments",
"512": "Villa",
"1024": "Mansion"
},
"PropertyStatuses": {
"1": "Resale",
"2": "Rented",
"3": "Sold",
In the future, if you don't see the information you are looking for when you use the "View Source" of your browser (or in the output of response.body_as_unicode() from inside Scrapy), then it is being loaded dynamically and thus needs some special handling. Most of the time, that information is loaded via XHR and you're actually in luck because reproducing that in Scrapy is usually painless and gets you out of the HTML scraping game entirely. This is one of those unfortunate situations where the data is being loaded dynamically, but from within the page, and thus the preceeding silliness is required.

Dynamically change title of a chart in amcharts 4

How can I change the title of a loaded chart using javascript? The following doesn't work with external data
https://codepen.io/abdfahim/pen/zYOPvPx
var chart = am4core.createFromConfig({
"titles": [
{
"text": "ABCD",
"fontSize": 25,
"marginBottom": 10
}
],
"dataSource": {
"url": "https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-160/sample_data_serial.json"
},
"xAxes": [
{
"type": "CategoryAxis",
"dataFields": {
"category": "year"
}
}
],
"yAxes": [
{
"type": "ValueAxis"
}
],
"series": [
{
"type": "ColumnSeries",
"name": "Cars",
"dataFields": {
"categoryX": "year",
"valueY": "cars"
}
}
]
}, "chartdiv", am4charts.XYChart);
function changeTitle()
{
chart.titles[0].text = "New Title";
}
AmCharts v4 uses lists for the majority of its array-like objects, so using subscripts will not work. It's recommended to use the accessor methods provided by the list to get at the object you want to change, such as getIndex:
chart.titles.getIndex(0).title = "New title"
Updated codepen
Just in case some one will hit my same issue, I found this solution working for me
chart.titles.getIndex(0).text = "new title";
this is particularly handy if you are going to refresh the chart each x seconds

Vega-lite bar chart space between bars

D3 newbie.
How I adjust the spacing between bars in vega-lite bar chart and override the default? binSpacing I think only works on histograms. See code below.
I'll want to adjust colour of text and font family too... But am having trouble finding it in the docs.
{
"$schema": "https://vega.github.io/schema/vega-lite/v2.json",
"width": 1200,
"height": 900,
"data": {
"url": "data/seattle-weather.csv"
},
"mark": "bar",
"encoding": {
"x": {
"aggregate": "count",
"type": "quantitative"
},
"size": {
"value": 40
},
"y": {
"field": "date",
"type": "temporal",
"timeUnit": "month",
"axis": {
"title": "Regions"
}
},
"color": {
"field": "weather",
"type": "nominal",
"scale": {
"domain": [
"0-20 days",
"21-27 days",
">28 days"
],
"range": [
"red",
"orange",
"green"
]
},
"legend": {
"title": "Case Ageing"
}
}
}
}
I can understand your confusion. It seems there are three questions:
How do I change bin width for histograms? This is documented here. If you have trouble with a reproducible example, I will be happy to help.
How do I adjust the spacing of the bars? This is controlled by padding, paddingInner and paddingOuter all documented at the encoding level and at the config level. You might be having trouble since you are setting size manually with "size": {"value": 40}, but I am guessing this is a remnant from experimenting. Here is a working spec from this gist. You can play with paddingOuter, paddingInner, or add padding to apply to both inner and outer.
How do I change font styling? See this gist.

Make Amcharts slice take the whole pie chart

I'm trying to trying to remove a small gap when I have a pie chart with a 100% slice.
I've tried to give it a outlineThickness of 0 but there is still a very small gap.
Here is an example.
var chart = AmCharts.makeChart( "chartdiv", {
"type": "pie",
"theme": "light",
"dataProvider": [ {
"country": "Lithuania",
"litres": 10
}],
"outlineThickness": 0,
"outlineAlpha": 1,
"valueField": "litres",
"titleField": "country",
"balloon":{
"fixedPosition":true
},
"export": {
"enabled": true
}
} );
The only way to work around this in current version is to apply the same color to outline as the slice itself. You can use outlineColor for that:
https://jsfiddle.net/s083cdpk/1/
Please note that this should be applies only if there's only one slice, as the same color will be applied to all slices if there are more.
This options should be used:
"outlineThickness": 1,
"outlineAlpha": 1,
"outlineColor": undefined
Example

Mapbox Rotating Marker by GeoJSON

I have just started using mapbox and i have some troubles with it.
I have added angle to my geojson data in order to rotate the image to a specified angle from geojson, but I'm having trouble with writing its rotate function :(
we are acquiring our data from AJAX so the function should be compatible with AJAX.
Any help would deeply appreciated.
This is my geojson data:
{ "type": "Feature", "geometry": { "type": "Point", "coordinates": [-79.00, 40] }, "properties": { "title": "Big astronaut","id":"100", "icon": { "iconUrl": "_vehicle.png", "iconSize": [32, 32], "iconAnchor": [50, 50], "popupAnchor": [0, -55], "className": "dot", "angle":"87" } } }
Thank you

Resources