Extension talk:Graph/Interactive Graph Tutorial

Great tutorial. One issue, that is comments in Vega. On the page you included c style "// ..." comments. The Vega editor doesn't accept comments in the JSON specification. However, extension graph does accepts comments. Wiki style <!-- ... --> comments are accepted by mediawiki, including within graphs. However those wiki style comments are not accepted in the Vega editor. Somehow c style "// ..." comments are accepted within graphs by extension:graph in mediawiki, they are treated as comment, that is white space, that is ignored. Please note that outside graphs "// ..." is normally displayed and not treated as comment. Vega and JSON doesn't like comments, except for adding fields ("description": "vega acceptable comment style"). What I expect in a tutorial on graphs is source material that works both in the Wikimedia farm as in the Vega editor. Ideally your tutorial examples are added upstream. However that is sending users to another site for sandboxing. They could also experiment with examples in a sandbox space on this wiki. Ad Huikeshoven (talk) 10:17, 31 December 2015 (UTC)

Awesome geo examples

The world map is an awesome geo example. The boundaries are specified in a json source. How to create such a geojson or topojson file? For example, on commons is an SVG map of Dutch municipalities. Shown are only the boundaries. The sources contains the names (and numbers) of the individual municipalities. Where can I find a tool to convert such a SVG specification of the boundaries to a json specification that can be rendered with extension:graph? Ad Huikeshoven (talk) 13:50, 31 December 2015 (UTC)

Hi Yurik. On the site http://opendata.rug.nl/datasets/0667f758c7df48e1b2053593a67d1c30_0 I found the geojson specification of Dutch Municipality boundaries: http://opendata.rug.nl/datasets/0667f758c7df48e1b2053593a67d1c30_0.geojson. I have found node.js and npm and with the explanation on https://github.com/mbostock/topojson/wiki/Command-Line-Reference I could do topojson -o output.json -p -- input.json to get Sjabloon:Graph:Gemeentegrenzen/topojson as the map data for a template graph wikipedia:nl:Sjabloon:Graph:Gemeentegrenzen, which somehow fails to show something. I used http://www.mapshaper.org/ to check if the topojson can show something, and in fact it does. So something is wrong with the graph specification and/or topojson data, which I haven't figured out yet. Ad Huikeshoven (talk) 14:41, 2 January 2016 (UTC)

Ad Huikeshoven, there are online tools like this (better) or this, that convert geojson to topojson. The top element in topojson needs to be specified, e.g. "format": {"type": "topojson","feature": "Gemeentegrenzen_2014"}, - that feature element might be different, probably depending on the converter. --Yurik (talk) 15:15, 2 January 2016 (UTC)

As I wrote I used an offline converter. I have used the online tool mapshaper to view my topojson file, and it looks good. I copied the top element in topojson from https://www.mediawiki.org//w/index.php?title=Extension:Graph/data/us-10m-json&action=raw {"type":"Topology","objects":{"counties":. Ok, have a look at User:Ad_Huikeshoven/gemeenten - those are the Dutch municipalities. Yurik eventually it was a matter of scaling, which I don't understand yet. Ad Huikeshoven (talk) 17:40, 2 January 2016 (UTC)

Awesome! Sorry couldn't answer earlier - i was in the air. I am not sure myself how the centering and scaling in vega work, but i'm sure we can figure them out eventually :D I will post about it separately. --Yurik (talk) 21:19, 2 January 2016 (UTC)

Thanks for all the help. I've looked at your example and created a map with individually colored Dutch municipalities. The specification embeds the secondary data to color the individual municipalities. I discovered that the secondary dataset has to be defined in the "data": field prior to the primary dataset, otherwise it won't work. On mouseover (hover) the municipalities turn pink. This will only show in mode interactive, not in normal mode, or in normal mode while in preview. Nonetheless, I now have map of Dutch municipalities working in Graph which can be parametrized and templatized to become useful on a project. Ad Huikeshoven (talk) 22:30, 3 January 2016 (UTC)

Special defaults

D3 specification of geo projections are the basis of the geo projections used by Vega and extension:graph. These include some special defaults:

• width defaults to 960
• heigth defaults to 500
• scale defaults to 150
• translate defaults to [480, 250]
• center defaults to [0,0]

In an equirectangular projection the longitude (in degrees; East positive, West negative), latitude (in degrees, North positive, South negative) pair with the defaults is projected to pixel coordinates x (to the right positive, to the left negative), y (down positive, up negative) as follows:

x=480-24*lat/9

y=250+24*lon/9

Ad Huikeshoven (talk) 18:40, 5 January 2016 (UTC)

Bug?

Right now, if I scroll the timeline to another time, then place my mouseover on a country, it will jump back to year 2000 and show statistics of the year 2000 for the particular country. Not sure if this is a bug on the programming of the graph itself, or the extension overall. OhanaUnited^{Talk page} 22:32, 18 January 2016 (UTC)

OhanaUnited, thanks, yes, that was fixed a few hours ago - phab:T123846. --Yurik (talk) 18:30, 19 January 2016 (UTC)

JavaScript required?

Right?

example with Year change are not working on tablette Android

Move the slider to change the year, and hover the mouse over countries to read the rate. Try it !

Only the click makes triangle color change on tablette and cursor move is not possible but countries are well detected. Chrome or Galaxy internet browsers and default skin Vector used.

Works fine on laptop instead.

Christian 🇫🇷 FR (talk) 08:29, 13 April 2023 (UTC)