Last modified: 2014-11-17 09:21:13 UTC

Wikimedia Bugzilla is closed!

Wikimedia migrated from Bugzilla to Phabricator. Bug reports are handled in Wikimedia Phabricator.
This static website is read-only and for historical purposes. It is not possible to log in and except for displaying bug reports and their history, links might be broken. See T56221, the corresponding Phabricator task for complete and up-to-date bug report information.
Bug 54221 - Support for text/syntax/markup driven or WYSIWYG editable charts, diagrams, graphs, flowcharts etc. (Identify, develop, review and deploy extension on Wikimedia wikis to add)
Support for text/syntax/markup driven or WYSIWYG editable charts, diagrams, g...
Status: NEW
Product: Wikimedia
Classification: Unclassified
Extension setup (Other open bugs)
unspecified
All All
: Normal enhancement with 2 votes (vote)
: ---
Assigned To: Nobody - You can work on this!
:
Depends on: 38271 54222
Blocks: commons 54213
  Show dependency treegraph
 
Reported: 2013-09-17 12:14 UTC by Nemo
Modified: 2014-11-17 09:21 UTC (History)
17 users (show)

See Also:
Web browser: ---
Mobile Platform: ---
Assignee Huggle Beta Tester: ---


Attachments

Description Nemo 2013-09-17 12:14:34 UTC
Moving here the following proposals:
<https://strategy.wikimedia.org/wiki/Proposal:Text_or_Syntax_driven_Charts,_Diagrams,_Graphs_and_more>
<https://strategy.wikimedia.org/wiki/Proposal:Editable_Graphics>
<https://strategy.wikimedia.org/wiki/Proposal:Markup_for_charts_and_graphs>
(with some of the participants in cc).

* «By now Wikipedia has markup/code for everything—math (TeX), parser functions, location maps, and even SVG is supported. However, what is notably missing from many articles (other than high-quality portraits) are graphs and charts.»
* «There are many types of diagrams. The need for collaborative graphics is wide ranging, from map making to biochemical pathways to flow charts to genealogy to general charting. Each type of graphic has or could have a little language, XML or other representation to define graphics of that type succinctly. Whilst all can be presented as .pngs or .SVGs, the more succinct description is necessary for editability.»

This is distinct from bug 43616 (Provide a way to create interactive 2D/3D timelines and infographics e.g. Java applets, AJAX, Flash) in that it's not about *interactive* stuff and that there are some existing extensions which someone should assess and develop for Wikimedia purposes. I'd also leave maps out of it because that's being addressed (at last) elsewhere.
Part of it will be solved by bug 38271, but only to a degree.

Mentioned extensions: [[mw:Extension:Graph]], [[mw:Extension:GnuplotBasic]], [[mw:Extension:Plotters]], [[mw:Extension:WikiPlot]].

Keywords from the proposals: http://bloodgate.com/perl/graph/, Java .jar, Flash .swf, Silverlight .scr, ActiveX .ocx, Vector (.svg) .svg (XML), AnyWikiDraw, AnyWikiDraw, WikiPathways, WikiTex, Graph Plugin, DPL Bundle, TeX, gluplot, pgfplots.
Comment 1 Rob Kam 2013-09-17 15:52:34 UTC
What about reviving [[Extension:WikiTeX]] (not to be confused with [[Extension:WikiTex]])? This would have done graphs, plots, and more. It would be handy for it to also support simple circuit diagrams.
Comment 2 Rob Kam 2013-09-17 16:09:58 UTC
Correction, the links are: [[mw:Extension:WikiTeX]] (and [[mw:Extension:WikiTex]]).
Comment 3 Quim Gil 2013-10-30 20:24:56 UTC
Is there an interest in proposing this project for Outreach Program for Women?
If so, and if there at least one mentor for it. please move it to the "Featured projects" section. This way it will be automatically transcluded in
https://www.mediawiki.org/wiki/Outreach_Program_for_Women/Round_7

Thank you!
Comment 4 vladjohn2013 2013-12-01 15:43:52 UTC
Hi, this project is still listed at  https://www.mediawiki.org/wiki/Mentorship_programs/Possible_projects#Support_for_text.2Fsyntax.2Fmarkup_driven_or_WYSIWYG_editable_charts.2C_diagrams.2C_graphs.2C_flowcharts_etc. 

Should this project be still listed in that page? If not, please remove it. If it still makes sense, then it could be moved to the "Featured projects" section if it has community support and mentors.
Comment 5 Nemo 2013-12-01 15:49:04 UTC
(In reply to comment #4)
> Should this project be still listed in that page? 

Yes.

> If not, please remove it.
> If
> it still makes sense, then it could be moved to the "Featured projects"
> section
> if it has community support and mentors.

It lacks a mentor, plus (probably) someone to set a direction/the requirements (who may or not be the same person).
Comment 6 Dan Andreescu 2014-02-04 16:18:53 UTC
tl;dr; I would be interested in being a mentor here, and probably collaborating until a solution is reached.

We've done some thinking about this while we developed Limn [1] last year.  I believe Limn was headed in the wrong direction, but we (team analytics) are interested in solving this problem and it would be nice to combine efforts with anyone that is also interested.  Currently, I believe that Vega JS [2] is a very promising library.  It has a great mixture of simplicity and power.

My personal opinion is that creating and editing infographics would work much like Visual Editor does.  There would be a simple JSON editor on the front end, which could evolve over time.  When saved, this would use a server to generate static infographics for consumption by the cache layer.  The dynamic infographic could be accessed through a link on the static image.  The cache could be repopulated with up-to-date infographics periodically if they depend on external data.  For this vision, Vega JS is quite suitable as it can generate PNGs server side for example.


[1] https://github.com/wikimedia/limn
[2] http://trifacta.github.io/vega/
Comment 7 Pavel (pastakhov) 2014-02-05 11:12:47 UTC
I'd suggest using a scripting language as markup for the editable charts, diagrams, graphs, flowcharts etc.

For end users this may be like the example:

== Extension:Graph ==

 G { "Bonn" --> "Berlin" [ style: bold; ] }    
As
Graph( [ "Bonn" => [ "Berlin", "style"=>"bold" ] ] );
or 
$bonn = node("Bonn");
$bonn->linkTo( node("Berlin", "bold") );
Graph( $bonn );

== Extension:WikiPlot ==

<wikiplot height="200" width="200" caption="Simple plot" xspan="-100;100" yspan="-100;100">
        <graph label="Graph 1." color="255,0,0">x+4</graph>
        <graph label="Graph 2.">3*x-3</graph>
</wikiplot>

as 

$plot = new Plot( ['height'=>200, 'width'=>200, 'caption'=>'Simple plot', 'xspan'=>[-100, 100], 'yspan'=>[-100, 100] ] );

or 

$plot = new Plot();
$plot->height = 200;
$plot->width = 200;
$plot->caption = "Simple plot";
$plot->xspan = [-100, 100];
$plot->yspan = [-100, 100];

and

$plot.addGraph( ['x+4', 'label'=> 'Graph 1.', 'color'=>[255,0,0] ]);

$graph = new Graph( "3*x-3" );
$graph->label = 'Graph 2.'
$plot.add( $graph );

echo $plot;

It looks like directly code execution, but it is not.
I did mw:Extension:Foxway for testing possibility of this. I ascertained that this may work and may work quickly.
Now I do new mw:Extension:PhpTags. There any extension can register a hook as a constant, function or object.
So far I have only worked on the functions and constants, and did not start work on objects.
I am sure that the PhpTags will cover all the needs and will be convenient and powerful tool.
I would like to find someone interested in discussing this.
Comment 8 Dan Andreescu 2014-02-05 15:49:21 UTC
Thanks Pavel.  I like the syntax you mention.  The advantage to using Vega JS syntax would be that it's a healthy active project and we get the parser, etc. for free.  Check it out if you haven't had a chance, I linked to it above.
Comment 9 Quim Gil 2014-02-05 18:07:29 UTC
Dan, thank you for pushing this proposal. If you want to jump to the GSoC 2014 train you need to:

* Take https://www.mediawiki.org/wiki/Mentorship_programs/Possible_projects#Support_for_text.2Fsyntax.2Fmarkup_driven_or_WYSIWYG_editable_charts.2C_diagrams.2C_graphs.2C_flowcharts_etc. , shorten the title, expand the description (one paragraph is enough), and move it under https://www.mediawiki.org/wiki/Mentorship_programs/Possible_projects#Featured_project_ideas

* Find a second mentor.

The sooner the better, since Wikimedia will be evaluated by the GSoC organizers in the next 1-2 weeks. You will know you are ready when your project looks great at https://www.mediawiki.org/wiki/Google_Summer_of_Code_2014

More: http://lists.wikimedia.org/pipermail/wikitech-l/2014-February/074277.html
Comment 10 Pavel (pastakhov) 2014-02-06 05:04:48 UTC
Thanks, Dan. Vaga is excellent.

But, for example, I need a template to draw a bar of population.
The template takes a comma-separated list of cities.
The population is taken from the wikidata.

{{MyTemplate
| cities=London,Berlin,Paris
}}

Source of wikipage Template:MyTemplate:

... Some wiki markup ...
<phptag>
if ( isset($args[cities]) ) {
  $cities = explode( $delimiter, $args[cities] );
  $population = AskWikidata( 'Give me population of cities', $cities );
  $data = array_combine($cities, $population);
  echo new Vega( 
      $data,
      [ 'size'=>[400,200], 'scales'=>['x'=>'cities', y=>'population'] ] 
    );
}
</phptag>
... Some wiki markup ...

There are:
* functions 'explode', 'array_combine' is hooks of the extension PphTags Functions. (already done)
* function 'AskWikidata' is fictional, but can be implemented as hook of some extension
* objects 'Vega' is fictional, but can be implemented as hook of some extension
* 'if', 'isset', 'echo' and '[...] (array definition)' is functions of extension PhpTags (already done)

Suppose I'm developer of the extension Vega.
I should just take the javascript source code from Vega and register hook in the extension PhpTags.

source of Vega.php:

$wgHooks['PhpTagsRuntimeFirstInit'][] = 'VegaExtension::initializeRuntime';

class VegaExtension {
  public static function initializeRuntime() {
    \PhpTags\Runtime::setObjectsHook( 'VegaObject', array('Vega') );
  }
}

class VegaObject extends PhpTags\BaseHooks {
  public static function onObjectHook( ... ) {
    // some code
  }
}

The Class VegaObject will receive the arrays of data and parameters from the PhpTags,
and when the function 'echo' is called returns all the necessary data for drowing the bar on the wikipage.
a large part of the code (such as processing of various parameters) have to be implemented in the class PhpTags\BaseHooks.
The class VegaObject will just have to inform PhpTags that it needs 'vega.min.js' and convey to one ready parameters.
Since it is very simple, similar extensions can be done in one day.

Maybe I'm writing all this is off topic, forgive me please.
But I can not find anyone interested in this.
I guess I'm looking for not out there, or can not speak understandable.
Maybe I just doing nonsense and distract people from her work, I do not know.
Comment 11 Dan Andreescu 2014-02-10 19:37:12 UTC
I think what you're saying makes sense Pavel.  And no worries, to participate in this community you have to be really good at dealing with distractions.  I'm still waiting for someone else to help with mentoring on this important project.  I think someone with mediawiki extension development experience would be great.  Part of the reason I can't comment more, Pavel, is that I don't know anything about mediawiki extensions :)
Comment 12 Yuri Astrakhan 2014-09-23 06:47:21 UTC
Graph extension might be applicable, even though it is not dynamic (yet), or even in production wikis, it does support various timelines, e.g. "Napoleon" at http://trifacta.github.io/vega/editor/ :)

See https://www.mediawiki.org/wiki/Extension:Graph and samples at https://www.mediawiki.org/wiki/Extension:Graph/Demo 

Discussion at https://meta.wikimedia.org/wiki/Wikimedia_Forum#Graphs.2C_Maps.2C_..._.28experimental.29
Comment 13 Yuri Astrakhan 2014-09-23 06:50:23 UTC
Sorry, meant to post last comment for bug 43616.  Yet, for this request, graph ext is still applicable, except that it is not wysiwyg unless some brave soul starts hacking a proper vega editor.

Note You need to log in before you can comment on or make changes to this bug.


Navigation
Links