StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
primarykey
Id
19059856
data
AcceptedAnswerId
0
AnswerCount
0
ClosedDate
CommentCount
0
CommunityOwnedDate
CreationDate
2013-09-27T20:51:13.920
FavoriteCount
0
LastActivityDate
2013-09-27T20:51:13.920
LastEditDate
LastEditorUserId
0
OwnerUserId
1113023
ParentId
18980685
PostTypeId
2
Score
0
ViewCount
0
LastEditorDisplayName
text
Body
There are various ways to do this in d3, with their own pluses and minuses. Frankly, this question is too vague for this forum, but I found the challenge you present kind of interesting. So I mocked up one way to do the Y axis. <a href="http://jsfiddle.net/7Jpw2/2/" rel="nofollow">http://jsfiddle.net/7Jpw2/2/</a> It uses an ordinal scale for the states and another ordinal scale for the years overlaid on top of the first one This may not be a complete answer, but it should get you going pretty far. <pre><code>var categories = [ { year:3, state:'NY' }, { year:3, state:'CA' }, { year:3, state:'TX' }, { year:2, state:'NY' }, { year:2, state:'CA' }, { year:2, state:'TX' }, { year:1, state:'NY' }, { year:1, state:'CA' }, { year:1, state:'TX' } ]; // IMPORTANT! This is a way to make each state @ year unique, by returning a concatenation of state and year categories.forEach(function(cat) { cat.toString = function() { return this.state + '_' + this.year } }); // These year values should ideally be extracted from categories array above, not hardcoded as below var years = ['Year 1', 'Year 2', 'Year 3']; var svg = d3.select('body').append('svg'); // Create 2 axes: // First a state-name axis // Then a year axis, in which everything except the text is invisible (via css fill:none) var statesScale = d3.scale.ordinal() .domain(categories) .rangeBands([50,300]); var statesAxis = d3.svg.axis() .orient('left') .tickFormat(function(d) { return d.state; }) .scale(statesScale) var yearsScale = d3.scale.ordinal() .domain(years) .rangeBands([50,300]); var yearsAxis = d3.svg.axis() .orient('left') .tickSize(50) // Distances the year label from state labels .scale(yearsScale) svg.append('g') .attr('class', 'states-axis') .attr('transform', 'translate(150,0)') .call(statesAxis); svg.append('g') .attr('class', 'years-axis') .attr('transform', 'translate(150,0)') .call(yearsAxis); </code></pre>
Tags
Title
singulars
PostAcceptedAnswerId
1. This table or related slice is empty.
PostParentId
1. POcategorical scatter plot using d3.js javascript
 singulars
 PostTypePostTypeId
 PTQuestion
PostTypePostTypeId
1. PTAnswer
UserLastEditorUserId
1. This table or related slice is empty.
UserOwnerUserId
1. USmeetamit
plurals
PostLinksPostIdRelatedPostId
1. This table or related slice is empty.
PostLinksRelatedPostIdPostId
1. This table or related slice is empty.
PostsAcceptedAnswerId
1. This table or related slice is empty.
PostsParentIdCreationDate
1. This table or related slice is empty.
VotesPostIdCreationDate
1. This table or related slice is empty.
CommentsPostId
1. This table or related slice is empty.

Querying!

Guidance

A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.