hey guys having trouble with vincent, im not sure exactly how to use it
So ive parsed some data from the UK house of commons petition site, and now have a list of countries and their corresponding number of votes into a certain petition and ive got the data from JSON to ('Austria', 40) format
Im using vincent to plot them onto a map with colour scaled to represent number of votes but dont really know how to use vincent
for example
to render a basic map of the world the code is
world_topo = r'world-countries.topo.json'
geo_data = [{'name': 'countries',
'url': world_topo,
'feature': 'world-countries'}]
vis = Map(geo_data=geo_data, scale=200)
vis.to_json('vega.json')
but that just outputs a JSON, not a picture of a map, even though that is what two tutorial examples are saying should happen (for example here: http://wrobstory.github.io/2013/10/mapping-data-python.html and another place I forgot to save the link)
could someone help me out? thanks in advance guys
First you should change the last line of your code. Try this simplified example:
import vincent
list_data = [10, 20, 30, 20, 15, 30, 45]
vega = vincent.Bar(list_data)
vega.to_json('vega.json',html_out=True,html_path='vega.html')
Then using the terminal CD to the location of your project, i.e. where vega.html is saved.
After that run a local server using Python -m SimpleHTTPServer 8000. After that you can open any browser and type http://localhost:8000/vega.html .
Note that the depending on the version of vincent the notation inside the .tojson may be different.
Hope that helps:)
P.S. I think you should add the Python tag as well so people can find it easier.
If you want to see a picture of a map you will have to create a html file that will read the json file and map it.
<html>
<head>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="http://d3js.org/topojson.v1.min.js"></script>
<script src="http://d3js.org/d3.geo.projection.v0.min.js" charset="utf-8"></script>
<script src="http://trifacta.github.com/vega/vega.js"></script>
</head>
<body>
<div id="vis"></div>
//This script will read your json file and print it to the map
<script type="text/javascript">
function parse(spec)
{
vg.parse.spec(spec, function(chart) { chart({el:"#vis"}).update(); });
}
//Put the name of your json file where vega.json is
parse("vega.json");
</script>
</body>
</html>
Then open your command line and type in:
Python -m SimpleHTTPServer 8000 # Python 2
Next open your browser at http://localhost:8000/path/to/json/file.
You should now see a map on the page. Note this will be a basic map depending on what data you passed from the json file.
I hope this helps and good luck!
Related
I'm trying to embed code cells from a jupyter notebook running an ielixir kernel by using Thebe Lab so that I can create a series of interactive Elixir exercises on a website. To achieve this goal I took the minimal starter from the documentation and changed the binderOptions in the first <script> tag as well as the default code section in the <pre> tag at the end.
Here's the example code:
<body>
<script type="text/x-thebe-config">
{
requestKernel: true,
binderOptions: {
name: "Elixir",
repo: "J0/binder-el",
kernelName: "ielixir",
path: "./.local/share/jupyter/kernels/ielixir",
},
}
</script>
<script src="https://unpkg.com/thebelab#latest/lib/index.js"></script>
<button id="activateButton" style="width: 150px; height: 75px; font-size: 1.5em;">Activate</button>
<script>
var bootstrapThebe = function() {
thebelab.bootstrap();
}
document.querySelector("#activateButton").addEventListener('click', bootstrapThebe)
</script>
<pre data-executable="true" >IO.puts("Hello world")</pre>
</body>
The repository J0/binder-el is a repository with a single Dockerfile containing the setup required to run an Elixir kernel as per the ielixir repository. I have tested it before hand when using binder.org and I am able to successfully execute IO.puts("Hello world") in the notebook that I created.
Unfortunately, I'm left slightly puzzled because the run button seems to execute an ipython kernel even though I've specified kernelName: ielixir. Here's a screenshot:
I'm just wondering if I'm missing something or if anyone has suggestions as to how I might modify the existing setup to support the ielixir kernel.
I have also create a discussion thread on the thebelabs repository but I figured it would be worthwhile to post the question here as the forum seems relatively inactive.
Thank you!
So as it turns out, you need to configure two options.
You need to leave the data-language tag on.
<pre data-executable="true" data-language="ielixir">IO.puts("Hello world")</pre>
Kernel options and Binder options need to be specified seperately
<script type="text/x-thebe-config">
{
requestKernel: true,
binderOptions: {
repo: "J0/binder-el",
},
kernelOptions: {
name: "Elixir",
kernelName: "ielixir",
}
}
</script>
<script src="https://unpkg.com/thebelab#latest/lib/index.js"></script>
Take great note that kernelName and not name should be ielixir. After that it should work! Will write a blog post summarizing the procedure and update this thread shortly.
I am following this guide to install "navit" on my raspberry pi. after changing the 'navit.xml' file, I run the navit but I could not see any map. Some screen shots are below.
My navit.xml file after change the path of map. I made it
<mapset enabled="yes">
<map type="binfile" enabled="yes" data="/home/pi/Downloads/osm_bbox_tr.bin"/>
</mapset>
Here is how I run the navit:
After it starts, I see that. No map:
What is the reason of this? How can I see the map?
Did you disable the sample map (entry just above the one you edited to point to your .bin file)? It should look like this;
<!-- If you dont want to use the sample map, either set enable="no" in the next line or remove the xml file from the maps directory -->
<mapset enabled="no">
<xi:include href="$NAVIT_SHAREDIR/maps/*.xml"/>
<mapset>
Make sure your GPSD is working(use cgps -s or gpsmon) and poiting the Center to a point belong to the map.
<navit center="4808 N 1134 E" zoom="256" tracking="1" orientation="-1" recent_dest="10">
<!DOCTYPE html>
<html>
<head>
<title>Hello World</title>
<style type="text/css">
body {background: #fff;}
</style>
</head>
<body>
<h1>Hello World</h1>
<script type="text/python" src="test.py"/>
<script type="text/javascript">
window.onload=function(){
alert("python: " + hello());
}
</script>
</body>
</html>
test.py
#!/usr/bin/env python
def hello():
return "hello"
In TideSDK develop says:
[Error] An error occured while paring Python on the page:invalid syntax ,('',2,1,'\r\n')
but this worked!! Why?
<script type="text/python">
def hello():
return "hello"
</script>
<script type="text/javascript">
window.onload=function(){
alert("python: " + hello());
}
</script>
I am new to TideSDK, my pc is WIN7 x86 with python2.7.3, TideSDK 1.3.1-beta installed,
I have no idea of this problem,Please help.
And I tried change test.py encoding,that's not help
We are working on this problem. The newer php we are planning to release with 1.3.2-beta should fix this problem.
I have the same issue. Unfortunately, I have yet to find the best fix. However implementing the source code in every html file is completely out of the question for me.
The error is complaining about the line endings. I presume are working in windows like I am, so the line endings are as follows: \r\n. TideSDK wrote a some sort of parser for external python files, but completely neglected windows line ending for whichever reason (and maintained unix style line endings). The \r\n is coming up as strange unparsable grammer and stops reading the rest of the file. Until they fix this glitch, I can only see one option. Change your line endings for all external python files from \r\n to \n.
You can do this either with your favorite IDE if it supports new line replacement. Or if it doesn't support changing your newlines, then you can use a python file to replace all of them like so:
fn = 'main.py'
with file(fn, 'rb') as f:
data = f.read()
with file(fn, 'wb') as f:
f.write(data.replace('\r\n', '\n'))
However, if you choose the second route you will be forced to run this script every time you save the file.
If I find a better answer I will let you know.
Try removing the #! line from the python file, it's not really useful for TideSDK anyway.
The issue for me was having empty lines before the def action():
I had an import that came first but it didn't seem to like the empty line before the def
I ran into this problem while using eclipse on Windows. It appears TideSDK python interpreter requires Unix style line delimiters (i.e. the non-printable character(s) that tell the computer to put text on a new line)
Windows uses two characters "\r\n" (carriage-return and line-feed) where as unix uses just the line feed character. So, if you are using a text editor on Widows, most likely it will insert "\r\n" every time you hit "enter" or "return".
If you are using Eclipse as your text editor, the fix is
File -> Convert Line Delimiters To
and select Unix.
To make the text editor do this for all new files, select "Other" and "Unix" in
Window -> Preferences -> General -> Workspace -> New text file line delimiter.
Hope this helps
I'm starting with paper.js. I like the fact that it introduces the possibility to have a script with a text/paperscript mime type, which runs in its on scope. However, scripts can become large pretty soon, so I want to be able to divide it in multiple scripts for readability. I thought I could just add more than one script tag and have them all run in the same scope, but apparently this isn't the case.
Both scripts are loaded and do run, but the second script doesn't seem to be in the paper scope.
I've set up an example here: http://barbata.nl/SO/Maps/ This example has some code, but I'll point out the important bits.
It contains two paperscripts:
Maps.js is the main script, which rasterizes the image and allows moving it around. You can ignore the code in this script, for it works fine so far.
Zoom.js is the script in which I wanted to isolate zooming functionality. It uses jq.mobi to capture the scroll wheel of the mouse, since Paper.js doesn't seem to have that event. It then translates that to a call to onMouseScroll, in a similar way Paper does it.
So far so good. The actual problem arises with the zoomIn and zoomOut functions in zoom.js.
It works if I explicity use the paper object to reference the view I want to zoom:
function zoomIn()
{
if (paper.view.zoom < 2)
{
paper.view.zoom = paper.view.zoom * 2;
}
}
But it fails when I remove paper and just reference the view:
function zoomIn()
{
if (view.zoom < 2)
{
view.zoom = view.zoom * 2;
}
}
This surprises me, as I expected the script to be a Paperscript, running in the Paperscope. It works fine if I put this code in Maps.js, so it seems that although zoom.js is loaded by Paper.js (the developer tools in the browser confirm this), it isn't run in the Paperscope.
My question is: are my findings correct? Am I doing something wrong? What is the right way to divide a Paper.js application into multiple units for readability?
Of course I can get it running, but I want to make sure I do it right.
This is indeed how it works. I've opened an issue on GitHub
I found that the "cleanest" way is to do it with this.install(window). It also makes error finding with Chrome developer tools easier since it is more adapted to reporting on the line errors in java-script than "paperscript".
in index.html (for example):
<script type="text/javascript" src='js/other_lib.js'></script>
<script type="text/paperscript" canvas="canvas">
this.install(window);
/*no code 'required' here */
</script>
<body>
<canvas id="canvas" width="1500" height="500"></canvas>
</body>
Then in the js/other_lib.js i just add code as normal:
var r = new Path.Rectangle([100,100],[200,200]);
r.fillColor = 'black';
/*more code here*/
This should generate a rectangle.
What DOES'T NOT WORK for me (as of Paper.js v0.10.2 Release Date: 9. July 2016) is the object operators. Such as adding vecrots pointc = pointa + pointb; for me this is giving a lot of NaN values.
I have had to edit a few libs to get this working, but the change is simple:
var pointc = new Point(pointa.x+pointb.x,pointa.y + pointb.y);
Has anyone had an issue with the points returned by the Google Directions API? The overview_polyline doesn't seem to match the directions I've asked for.
The Directions API gives the example:
http://maps.googleapis.com/maps/api/directions/json?origin=Toronto&destination=Montreal&sensor=false
In the JSON response I see includes:
"overview_polyline" : {
"points" : "e`miGhmocNaN~DiBiNe#gEkEek#kNez#cJqq#sk#pGos#v]_}#aF_y#qm#qDe~#w]g~#gZ_Jo_#m_#yNsFgUpMov#~QebBrJq`BjTsx#w#kOqbEq_#qkCcf#}}Dej#yzCuf#o{Ba]m~EtVewAnBa`#sNmm#}dDufGqwA_|D_z#g~CmtBkuOrBmtCyG_yCam#{`Ee]qkB}d#ucDmDe|Aha#e}At]{v#xD}e#yf#aeIm^{rEgp#ahBiZu`BkVueH}gDwuXu`Fi__#yZecHgoAgyIl[ybCo^sgD_n#akBaJmeBog#yyAe`#ayB~FifCjNkmAzTwpAgf#cpFy~#{lJsg#ojHyi#e_Fq}#o`Dog#}tBoYmz#y`#sf#qf#ohCkLugBuv#seAg[ul#mMowBqc#iiC}eAcwCqm#_fBmuAypFyIiqA}BwyBy`#ogAwt#ypBezC{dIahBwxJgb#ytCw~AwvJkQwu#{t#yrCg{#s{Fgb#ehDzKsdAxO}vAiRmpCwcAorNuwAgdS_r#imJq[orAk]wrA_TyzAnFefAa\\guB_OmwAwF{tCwMcbDcr#m}_#}Qo_RgMo|A|d#kpAne#u{Brb#wnDzNkuB_D{v#eSgf#w\\ieAyb#guCii#ifCga#i_Amc#m]urAyoD}o#kiIsr#opQuLkhAc_#q`Bq\\}bEeEyi#iE}t#pHi|#tBmlBebB{qHq_BinFoWgpBoDuqEob#k{ConAedC}L}h#yd#yfAgz#}gAaZi_#m}#mcBwyAaj#_bBg|#csBm_Bo|BkaC{iBqsB_YqyBxEmtBks#aoB{RgLa~#bCcr#cLyoAemBeg#gt#_}#e`#on#uu#etA}vCqp#ubAklDgeGmxFiqHaqFoeHa[wbBu]}gAuoDeeG{uAooB_uAsy#om#ugAu_L{xSshEe_KieDm|KcfIcuWeUcOwy#aP{QuUg`BipF{P_l#klAgaEmjEs}NsvAiyFs}#izFjwAqrGtHkbCeB{cEql#g~CgSk|#mB}oAqNekEgw#cmDo_BgjFqqC}gH}`CwvG}cA{cB}nFowQ_t#an#efBmpE_oAsvCka#mwBk_CqbGuu#qfB{uAmrDivDw|E{nAqbDmpCyaJgdCejHk~#owAsw#adAm_#abA}Ven#qCou#cKeiBca#_cBmlAyjAsn#_kCk}#smDkVg{Bk}#gcHox#_sEaPwdC~KazF{EcpCrEmeGl]auBeEi~#yiAovCwwAgsC{i#oSsbAu~Ay_AmaBk_#iKak#mh#_BmBk#wHvG#dBvA"
},
Decoding this using the Interactive Polyline Encoder Utility shows a path starting in Toronto as expected but going a different direction with an end point nowhere near Montreal.
Any ideas?
For background, I'm trying to use the polyline to generate a static map. The static map API allows passing encoded polylines.
I have had success using Mark McClure's tools:
http://facstaff.unca.edu/mcmcclur/GoogleMaps/EncodePolyline/
on archive.org
Your polyline works for me when I use this tool to decode it:
http://facstaff.unca.edu/mcmcclur/GoogleMaps/EncodePolyline/decode.html
on archive.org
and this to display the results:
http://facstaff.unca.edu/mcmcclur/GoogleMaps/EncodePolyline/encodeForm.html
on archive.org
Encoded polylines often have issues with "\" escaping the next character.
See this example [1] (can't seem to get it to display as a link)
with each '\' changed to a single '\'
From this issue where it does display as a link.
[1] http://maps.googleapis.com/maps/api/staticmap?size=400x400&path=weight:3|color:blue|enc:cyrdIzsee#dOiBpG~j#bA%60t#mGxu#y#xl#pDdTtOnrAtRg#~J|AdHcI~Dpn#dIbwAhY%60Yde#rxBld#d%60B~LpkAzXvtB%60]rt#n_#bqAlo#vw#|NxrApYv{#%60R%60o#hHvqA|i#blE|iArhDdaAvwFz[vkCfsAl{Ei#f_#gYb}#aNtq#rAfv#nRx_Ajg#xbBnQtXnh#%60d#jz#xe#p\pt#pVrY|e#pO%60vAjwAxhAj%60Bj_AzcEvG~c#[ht#yMfz#tIhlDnv#nwIvDfmCiPlrCj#%60sCf]%60vEtVnvCfYzcAfYt_#zUlNtbArWbb#nm#fR~pAsBhqClGjlBj]zxCjo#lbD~a#%60gAzc#ft#lf#faBt]jhAluAjfCntAjlBjk#jWbZvEn^nRxTdWldArsAxWjz#zHhoBuEryCkWrbAwIn_A%60SbhBx\tbBbZpz#hy#pdBzNfm#|Cdq#fKtjAbM~Xf_#dXh}#tArv#h[|pAbb#%60_#nKf_#pYxb#bx#bh#hbAlkAr_BrNjJ|d#dE~|#jJ%60iBfWjhBgs#jr#rEbvAbhAdUfQdU%60Ete#iCrk#aWlXiN%60%60#wFl\dIzVdUz\ls#hw#|fAh|#|pAfiAbnAp|#v{A~[rhAzUhQpf#pG~r#lSdo#te#~T|\bv#jwApf#tsAvj#l~Bfh#fyA|v#nhBdmA~dBdy#vdBz%60#hlB~[~oBbo#znAxsCzbC%60%60#bs#pm#zo#nq#ly#dm#peApi#rr#lo#pXzl#jm#vh#~_A|}AboBle#lh#|_#rOzh#yQfb#oR%60k#%60#lf#nV~p#~u#nl#xpAvnAdgBpq#~\~n#bD%60%60A_A||#fKlzCre#x|BcHbo#hPff#ze#hYbsAps#pgA~p#pgAvYlt#b~#|kDzThe#%60b#%60^zeAntBv%60#%60dAxSvrBhm#hyFfTriA~DjkA~\%60fClo#jeDnS~b#zZfcA|k#j_Cv%60AznCrv#fnAjl#vt#fcAl|#pl#%60dApb#~o#~Mb\zUbUxf#zJtXHf_#g[j\sa#hg#cP%60nAsM%60_BmBpk#_Kz_#sOft#{G~a#%60C~f#cGjj#mTlc#sKl^hGdn#bv#na#pRni#vNzf#re#~qAngAr}Al{#l~#hIt_AfLpyBzvArcAvjAdkBndAtt#faA~x#jv#dkAhy#%60h#hr#jZjWpv#t\bd#xIr\rGrZc%60#d[ad#rIa%60#dT{KhQdLnKfTnOvUdUBje#qQdYrPlRnU%60HbANrGaNbu#jR|jDvAzhChEnUjJtbA}Af[l#|\lKvQMtLtFhh#fHlh#_DZ_BmO&sensor=false
Here is your line on a static map (after changing \\ to \):
http://maps.googleapis.com/maps/api/staticmap?size=400x400&path=weight:3|color:blue|enc:e%60miGhmocNaN~DiBiNe#gEkEek#kNez#cJqq#sk#pGos#v]_}#aF_y#qm#qDe~#w]g~#gZ_Jo_#m_#yNsFgUpMov#~QebBrJq%60BjTsx#w#kOqbEq_#qkCcf#}}Dej#yzCuf#o{Ba]m~EtVewAnBa%60#sNmm#}dDufGqwA_|D_z#g~CmtBkuOrBmtCyG_yCam#{%60Ee]qkB}d#ucDmDe|Aha#e}At]{v#xD}e#yf#aeIm^{rEgp#ahBiZu%60BkVueH}gDwuXu%60Fi__#yZecHgoAgyIl[ybCo^sgD_n#akBaJmeBog#yyAe%60#ayB~FifCjNkmAzTwpAgf#cpFy~#{lJsg#ojHyi#e_Fq}#o%60Dog#}tBoYmz#y%60#sf#qf#ohCkLugBuv#seAg[ul#mMowBqc#iiC}eAcwCqm#_fBmuAypFyIiqA}BwyBy%60#ogAwt#ypBezC{dIahBwxJgb#ytCw~AwvJkQwu#{t#yrCg{#s{Fgb#ehDzKsdAxO}vAiRmpCwcAorNuwAgdS_r#imJq[orAk]wrA_TyzAnFefAa\guB_OmwAwF{tCwMcbDcr#m}_#}Qo_RgMo|A|d#kpAne#u{Brb#wnDzNkuB_D{v#eSgf#w\ieAyb#guCii#ifCga#i_Amc#m]urAyoD}o#kiIsr#opQuLkhAc_#q%60Bq\}bEeEyi#iE}t#pHi|#tBmlBebB{qHq_BinFoWgpBoDuqEob#k{ConAedC}L}h#yd#yfAgz#}gAaZi_#m}#mcBwyAaj#_bBg|#csBm_Bo|BkaC{iBqsB_YqyBxEmtBks#aoB{RgLa~#bCcr#cLyoAemBeg#gt#_}#e%60#on#uu#etA}vCqp#ubAklDgeGmxFiqHaqFoeHa[wbBu]}gAuoDeeG{uAooB_uAsy#om#ugAu_L{xSshEe_KieDm|KcfIcuWeUcOwy#aP{QuUg%60BipF{P_l#klAgaEmjEs}NsvAiyFs}#izFjwAqrGtHkbCeB{cEql#g~CgSk|#mB}oAqNekEgw#cmDo_BgjFqqC}gH}%60CwvG}cA{cB}nFowQ_t#an#efBmpE_oAsvCka#mwBk_CqbGuu#qfB{uAmrDivDw|E{nAqbDmpCyaJgdCejHk~#owAsw#adAm_#abA}Ven#qCou#cKeiBca#_cBmlAyjAsn#_kCk}#smDkVg{Bk}#gcHox#_sEaPwdC~KazF{EcpCrEmeGl]auBeEi~#yiAovCwwAgsC{i#oSsbAu~Ay_AmaBk_#iKak#mh#_BmBk#wHvG#dBvA&sensor=false
The Google APi have a parameter now: path=enc:
"https://maps.googleapis.com/maps/api/staticmap?
size=300x300&key=YOUR_KEY&path=enc:" + direction.routes[0].overview_polyline
Focus on offical guides