Talk:D3.js/Archive 1

Archive 1

Archived portion of merged "Protovis" article

This page is an archive from the former Protovis article. This because : 1. Protovis notability is limited, 2. its development have been stopped, 3. D3.js, by the same author, is under active development and claims to solve several limitations of Protovis. For the merging:

• ALL its encyclopedic content have been moved into D3.js#Context. (that was quite poor)
• Example of code and links have been keep in this archive.

The following discussion is closed. Please do not modify it. Subsequent comments should be made on the appropriate discussion page. No further edits should be made to this discussion.

---

Use

Protovis is a single JavaScript file, containing all its declarations and functions. It can be included within a web page using the following mark-up:

<script type="text/javascript" src="protovis-r3.2.js"></script>

The Protovis code to build the visualization is added to the body of the page using a script tag.

<script type="text/javascript+protovis">
  // Protovis code goes here...
</script>

Due to its declarative style, Protovis code typically makes very extensive use of small anonymous functions; to allow for more concise code and increase readability Protovis provides the javascript+protovis script tag type which adds the shorthand function declaration:

function(x) 5*x

which is equivalent to writing:

function(x) { return 5*x; }

Network diagrams

The following example demonstrates the ability to create three different network visualizations using the same dataset. The visualizations show content co-creation trends in a fictitious organization.

Force-directed layout

var w = document.body.clientWidth,
    h = document.body.clientHeight,
    colors = pv.Colors.category20();

var vis = new pv.Panel()
    .width(w)
    .height(h)
    .fillStyle("white")
    .event("mousedown", pv.Behavior.pan())
    .event("mousewheel", pv.Behavior.zoom(3));

var force = vis.add(pv.Layout.Force)
    .nodes(departments.nodes)
    .links(departments.links);

force.link.add(pv.Line);

force.node.add(pv.Dot)
    .size(function(d) (d.linkDegree + 104) * Math.pow(this.scale, -1.5))
    .fillStyle(function(d) d.fix ? "red" : colors(d.group))
    .strokeStyle(function() this.fillStyle().darker())
    .lineWidth(0)
    .title(function(d) d.nodeName)
    .event("mousedown", pv.Behavior.drag())
    .event("drag", force);

force.label.add(pv.Label)

vis.render();

Arc Diagram

var vis = new pv.Panel()
    .width(880)
    .height(410)
    .bottom(90);

var colors = pv.Colors.category20();

var arc = vis.add(pv.Layout.Arc)
    .nodes(departments.nodes)
    .links(departments.links)
    .sort(function(a, b) a.group == b.group
        ? b.linkDegree - a.linkDegree
        : b.group - a.group);

arc.link.add(pv.Line);
   

arc.node.add(pv.Dot)
    .size(function(d) (d.linkDegree + 104) * Math.pow(this.scale, -1.5))
    .fillStyle(function(d) d.fix ? "brown" : colors(d.group))
    .strokeStyle(function() this.fillStyle().darker());

arc.label.add(pv.Label)

vis.render();

Matrix Diagram

var color = pv.Colors.category20().by(function(d) d.group);

var vis = new pv.Panel()
    .width(400)
    .height(400)
    .top(90)
    .left(90);

var layout = vis.add(pv.Layout.Matrix)
    .nodes(departments.nodes)
    .links(departments.links)
    .sort(function(a, b) b.group - a.group);
    

layout.link.add(pv.Bar)
    .fillStyle(function(l) l.linkValue
        ? ((l.targetNode.group == l.sourceNode.group)
        ? color(l.sourceNode) 
             : "rgb("+ (80-(l.linkValue)) + "%, " + (80-(l.linkValue)) + "%, "+ (80-(l.linkValue)) +"%)") 
                 : "#EEEEEE")
    .antialias(false)
    .lineWidth(1)
    .anchor("center").add(pv.Label).text(function(l) l.linkValue)
          .textStyle("#FFFFFF")
          .font(function(l) l.linkValue + "px sans-serif")

layout.label.add(pv.Label)
    .textStyle(color);

vis.render();

Dataset

var departments = {
  nodes:[
    {nodeName:"Marketing", group:0},
    {nodeName:"IT", group:1},
    {nodeName:"Engineering", group:2},
    {nodeName:"Quality", group:3},
  ],
  links:[
    {source:1, target:0, value:4},
    {source:1, target:2, value:3},
    {source:1, target:3, value:5},
  ]
};

Bar chart

Here is an example of code needed to draw a bar chart in Protovis:

A simple bar chart in Protovis

// Create the root panel and set the visualization's size to 150x150
var vis = new pv.Panel()
    .width(150)
    .height(150);

// Add the horizontal rules (grid lines), we add them first so they go in the back.
vis.add(pv.Rule)
    .data(pv.range(0, 2, .5))
    .bottom(function(d) d * 80 + 1)
  .add(pv.Label);

// Add the bars with the height corresponding to the values in the data property
vis.add(pv.Bar)
    .data([1, 1.2, 1.7, 1.5, .7])
    .width(20)
    .height(function(d) 80 * d)
    .bottom(0)
    .left(function() this.index * 25 + 25) // this.index is the position of the datum in the array
  .anchor("bottom").add(pv.Label); // Add a label to the bottom of each bar

// Render everything.
vis.render();

Protovis makes extensive use of property chaining allowing the example above to be written in four statements.

External links

• Protovis homepage at Stanford.edu
• A Tour through the Visualization Zoo - An ACM Queue article with Protovis examples
• An article about Protovis on MIT's Technology Review

Category:JavaScript visualization toolkits Category:Visualization API Category:Web 2.0 Category:Article Feedback 5

ru:Protovis

The discussion above is closed. Please do not modify it. Subsequent comments should be made on the appropriate discussion page. No further edits should be made to this discussion.

Datameer blog RS?

Christophe Viau, author of the cited Datameer's blog, appears to have status as a domain expert, the blog is that of a notable company, so the blog entry about the subject of the article seems RS for this article. --Lexein (talk) 19:51, 22 August 2012 (UTC)

I believe you are stretching the meaning of the word "expert" here. — Dmitrij D. Czarkoff (talk) 22:31, 26 August 2012 (UTC)

Assertions about me, an editor, notwithstanding, please feel free to specifically refute the argument with evidence, perhaps per [1]. --Lexein (talk) 23:17, 26 August 2012 (UTC)

You want me to prove that he is not expert? Well, the proof: nothing suggests that he is recognized expert. — Dmitrij D. Czarkoff (talk) 23:36, 26 August 2012 (UTC)

Evidence, please. I could simply cross my arms and say "no" as well, but that would be a failure to substantively discuss. Prefer some other term than "domain expert"? Suggest one. Is it just another primary source? Say that. We're both ostensibly here trying to improve the article, using arguably reliable sources, but you've said nothing to improve it. Here's a softball: what makes you think he has no domain expertise, given these [2] and [3]? Further, he has long hair and distinctive facial hair (lower left)! --Lexein (talk) 06:40, 27 August 2012 (UTC)

The lack of reliable sources demonstrating that he is widely recognized as expert doesn't allow me to consider him the one. Anyone can claim expertise on anyone's account, but Wikipedia is about Verifiability. — Dmitrij D. Czarkoff (talk) 08:33, 27 August 2012 (UTC)

Christophe Viau clearly have expertise, he is THE ´Visual Engineer´of Datameer, clearly a worldwide pioneer and leading data visualization company. And have a blog, which as a D3js learner I love, confirming his use of D3. But he isn´t cited (by other sources) as an expert for D3.js. That what Czarkoff look for. Some external citation stating that Viau is a D3 expert / reference in the field. Acceptable evidences would be a D3-related bood written by Viau, presenting conferences, contribution to D3´s code or user manuals, etc. (and no, just one is not enough).

Nathan Yau have a source validating his expertise, but his book (Visualize this!) talk about Visualization, it doesn´t explicitly say out he use D3.js. That´s only clear when you follow his blog, that I love too. So he is a Data Visualization confirmed author who also use D3, not a D3 author.

Too soon: In short, it´s simply not the time yet for such statement. D3 is just 1 year old after all, more is coming ! : ] Yug (talk) 17:37, 27 August 2012 (UTC)

I contacted Viau via Twitter, he told me he is an ´active user contributing as much as [he] can´, but was unable to provide me any link confirming his D3 expertisehood. Yug (talk) 19:39, 27 August 2012 (UTC)

Sources? Whatever they do, we need sources unambiguously claiming their expertise before applying WP:SPS's exception. — Dmitrij D. Czarkoff (talk) 19:47, 27 August 2012 (UTC)

As of now, my position is we don´t have sources to support a specific status for these contributors. Issue closed (for now). Yug (talk) 20:02, 27 August 2012 (UTC)

Help / contribution request to the D3 community

The following discussion is closed and will soon be archived.

Closed. they made one tiny edit... poor ! Yug (talk) 20:34, 1 September 2012 (UTC)

I just asked on the official D3 google group some helps, which I will watch. They are likely to add full sections of complexe sample code which are not much welcome. I will be there to keep the content in the line with wikipedia usages, yet, I will keep open minded and looking forward to have some few enlightening minimum-code samples.

Merger proposal

 --  Done ! Yug (talk) 20:33, 1 September 2012 (UTC)

I propose that Protovis be merged into D3.js per the discussion at Wikipedia:Articles for deletion/D3.js. —JmaJeremy✆✎ 22:54, 29 August 2012 (UTC)

• Opposed. Support. It´s simply not the same language. Like JQuery isn´t Javascript, like HTML isn´t XHTML. D3.js in not an expansion of Protovis, it´s a new way to do the same and more. See Bostock, Ogievetsky & Heer 2011 Fig.7. It´s different things. Yug (talk) 23:09, 29 August 2012 (UTC)
  • From what I saw online, Protovis is still largely in use. I think its too soon for a such merging. Meanwhile I agree that, on the long run, Protovis will fade out in favor to D3, and deletion of protovis / merging will be welcome. Yug (talk) 16:11, 30 August 2012 (UTC)
  • (oppose becoming support, voted upper, rational there:) Let's be frank: the Protovis article just sucks ! there is almost no encyclopedic information apart from the creator names, and what it does. It's pointless to keep an almost-empty article. Let's merge them swiftly ! :) Yug (talk) 19:16, 1 September 2012 (UTC)
• Support. With the undertanding that the Protovis article is likely to be deleted, if it is not merged here; Because: insufficient RSs to write a full article about it, plus development has ceased so new information is unlikely, plus (mainly) it's core to the development of this language - hence it would fit well within a "History" or "Background" type subsection of this article. It's mergism vs deletion (unless someone can find a slew of new sources for Protovis). -- Quiddity (talk) 23:21, 29 August 2012 (UTC)
• Support, due to its status as precursor of D3.js. I also support discussion of trimming the number of examples, substituting with citations which link' to examples and/or archives of those examples. I recommend inclusion of any documented discussion about the transition from Protovis to D3.js, even if it is on the author's blog, as a reliable primary source. The book on D3.js may have some discussion of this. --Lexein (talk) 23:37, 29 August 2012 (UTC)

Ongoing merge: To do list

 --  Done !

• Protovis#Lead: Integrate into D3.js#Context --  Done !
• Specifications box of Protovis : in D3.js#Context ? sound good ! --  Done !
• Code: Move Protovis' code to somewhere, wikiversity ? Archive. Be bold. --  Done !
• Sources: move with code ? --  Done !

Anyone to validate this approach and give me a green light ? Yug (talk) 19:26, 1 September 2012 (UTC)

Definitely. 1&2 are perfect, 3&4 can be linked/cited to wherever it came from (only start a Wikiversity page if you think it will be built on/appreciated). [Context: Broadly speaking, I'm a moderate mergist; partially due to the influence of Mini, which in 2006 was an exemplary Featured Article. That content could have been split into dozens of small articles, but was instead collated into a single non-repetitive location.) Do what's best for the readers, keep things clear, and all will be well :) ] -- Quiddity (talk) 20:09, 1 September 2012 (UTC)

Merging into D3.js --  Done Done

Archiving into Talk:D3.js/Protovis --  Done Done

PS: I'm reading or will (busy in real life) "Getting started with D3". Someone interested to read in parallel of me ? Email me. Yug (talk) 20:30, 1 September 2012 (UTC)

Minimum code sample

To illustrate this article with some basic yet meaningful code, I propose to get the minimum possible code for the following objectives:

0. page set up

1. select>create a shape ;

2. select>styling a shape ;

3. select>transition upon a shape and

4. select>joining data

which seems 5 key points deserving a concise illustrative example (see Bostock, Ogievetsky & Heer 2011, chap. 3). Yug (talk) 19:39, 27 August 2012 (UTC)
Based on Dewar 2012, p. 2-3, I created the following minimal code:

0. Page set up <!DOCTYPE html> <html> <head><meta chartset="utf-8"> <script src="d3.js"></script> </head> <body> </body> </html>

1. & 2. Create a circle shape , style it in red , manipulate it rightward (function arbitrarily named draw) <script> function draw(data) { // svg objects creation, manipulation, styling, transitions. Not yet written. } </script>

4. Join in .json database file, launch upon it the previously created draw function <script> d3.json("data_folder/my_data.json", draw); </script>

PS: feel free to edit and complete this draft. Yug (talk) 00:32, 28 August 2012 (UTC)

D3 examples

D3 is designed to make it easy to work with numerical data and present it in a visual form. Neither of the examples on this page show any inteaction with data; they could just as easily appear on a page about jQuery. — Preceding unsigned comment added by 87.115.114.176 (talk) 23:42, 5 March 2013 (UTC)

what do you mean 'graphical forms'?

Intro says uses digital data to drive the creation and control of dynamic and interactive graphical forms which run in web browsers.

This definition applies to Google Maps, Google Images, and probably 3% of all web pages on the whole entire internet, including a huge number of games. It is way too general and vague. Do you mean bar charts, line charts, pie charts? Do you mean 3d visualization of kitchen designs made by architects? 3D visualizations of stellar nucleosynthesis? Seismographs? Cut-away models of a crashed car and how the humans inside behaved during the crash in slow motion? There's no such information in the entire article to say that it does, or doesn't do any of those. Don't tell me that it 'can do all of them' - so can raw SVG or raw Canvas 2D. Unless you can replicate Google Maps, complete with pulsating freeways that color code traffic volume, and upload a working example, then it can't do Google Maps. Be specific. Give links to examples so we can see what you're talking about. OsamaBinLogin (talk) 23:07, 25 September 2013 (UTC)

All of them. And we are litterally having some kind of D3js - google maps project coming. The SVG is modified depending of data and calculation, so 3D like stuffs are possible as well. Yug (talk) 23:33, 25 September 2013 (UTC)

Examples of sites using d3.js

I've removed the following links, that are claimed to be "notable examples" but for which there are no references indicating their notability, because Wikipedia is not a mirror or a repository of links, images, or media files. I put them here to comply with WP:PRESERVE, in case some of them can be integrated back into the article's text. Diego (talk) 12:43, 26 December 2013 (UTC)

• The Evolution of the Web
• Tokyo Wind Speed
• A sea of Tweets
• Film Strips
• Twisters
• Nutrient Contents
• The Business of Bond
• Hollywood Data Explorer
• Front Row to Fashion Week
• The Facebook Offering: How It Compares
• Tracing the History of N.C.A.A. Conferences
• Four Ways to Slice Obama’s 2013 Budget Proposal

Data-driven programming?

Would it be correct to say that D3 is an example of Data-driven programming? MadsSkjern (talk) 16:44, 23 May 2015 (UTC)

Maintenance and rating of JavaScript articles

Concerning editing and maintaining JavaScript-related articles...

Collaboration...

If you are interested in collaborating on JavaScript articles or would like to see where you could help, stop by Wikipedia:WikiProject JavaScript and feel free to add your name to the participants list. Both editors and programmers are welcome.

Where to list JavaScript articles

We've found over 300 JavaScript-related articles so far. If you come across any others, please add them to that list.

User scripts

The WikiProject is also taking on the organization of the Wikipedia community's user script support pages. If you are interested in helping to organize information on the user scripts (or are curious about what we are up to), let us know!

If you have need for a user script that does not yet exist, or you have a cool idea for a user script or gadget, you can post it at Wikipedia:User scripts/Requests. And if you are a JavaScript programmer, that's a great place to find tasks if you are bored.

How to report JavaScript articles in need of attention

If you come across a JavaScript article desperately in need of editor attention, and it's beyond your ability to handle, you can add it to our list of JavaScript-related articles that need attention.

Rating JavaScript articles

At the top of the talk page of most every JavaScript-related article is a WikiProject JavaScript template where you can record the quality class and importance of the article. Doing so will help the community track the stage of completion and watch the highest priority articles more closely.

Thank you. The Transhumanist 01:07, 12 April 2017 (UTC)