metricsgraphics / metrics-graphics Goto Github PK
View Code? Open in Web Editor NEWA library optimized for concise and principled data graphics and layouts.
Home Page: http://metricsgraphicsjs.org
A library optimized for concise and principled data graphics and layouts.
Home Page: http://metricsgraphicsjs.org
@hamilton Is that by design?
We want to show two different sections: the torso view (three graphs or so above the fold) and the section views (containing finer-grained data, with a briefing section).
I figured it would look better this way, though see what you think.
We're currently assuming that dates are not timestamps and hence convert them in init(). Moving to main.js.
The x-axis labels and markers could stand to be slightly smaller for smaller-width graphs, for the sake of feeling the clutter.
Currently I'm finding width=150 to be a good candidate for the threshold.
We may also play with the number of ticks as well on the y-axis.
Implement as either args.baseline or args.horizontal_markers
We should be allowed to say what the x and y scales should have as their min or max, and of course automatically calculate those if no value is provided
With some graphics, when one rolls over a date, we may want similar triggers to fire for other graphs for the same date. Currently id / class naming conventions to achieve this are not being met.
This is especially useful for the crafting of numerous small multiples, where rolling over one point might also cause rollover effects on a number of others.
Furthermore, there is no way to say that one WANTS a set of graphs to be linked in their rollover behavior.
We need to have a few different canned presentation types. For instance, we will often be in the position of having a handful of small multiples to present in a section, or a full-screen report-style graph. Having some design ideas in mind for this would be very useful.
this will add a div that shows that a chart is missing or coming soon
(A future feature request as someone looking forward to using this)
It would be great if we could make this a Bower package for easy installation and updating in external projects.
given that styling is often done in a css file, it might pay to allow users to add an id to a chart so they can individually reference the chart in the css file. This will allow custom styling via css.
We need to have time series bar charts for the situations that call for them.
This should primarily be making a new mainPlot, and figuring out how the rolloverOn/Off changes for this graphic type.
{true, false} links across all charts
string links across all charts with same link literal
This should be handled in the moz.defaults.all object. By default let's leave the blue area available on single line charts, and off for multiple line charts.
This is a time series visualization designed to track quantiles over time. I have the code for this separately in another project, and need to port it over to metrics-graphics.
This is for providing further explanation of something in a chart.
This should include how to make basic charts, how things are organized, and how to extend the library such that we'll actually accept pull requests.
A few people have asked whether we could make the repo public. I think that it's a good idea, though see what you think.
For the first release we focused primarily on date ranges, since most of what we're doing is visualizing time series. We should have additional functionality for non date ranges.
Github contains this functionality and we haven't done anything with it. We probably should for the next milestone.
Currenty moz_chart has a bunch of different somewhat-procedural chunks of code. When we add more chart types, it would make sense to abstract these just one level up so we can more easily reuse code & have things be readable. For instance, we will likely use the same axes for lots of different charts, but the rollover logic & data mapping will be fundamentally different. We'll have these:
var charts = {};
charts.line = {
init: function(){}, \\ makes scales
x_axis:function(){}, \\ draws x
y_axis:function(){}, \\ draws y
main_plot:function(){}, \\ draws the actual graphed elements
rollover:function(){}, \\ draws whatever invisible rollover elements
on:function(){}, \\ handles on rollover
off:function(){}, \\ handles off rollover
defaults:function(){} \\ has various defaults from whatever those are
At least for a lot of Firefox-related charts, we want version markers. Other projects may need different marker. Currently these are all hard-coded to just be ff versions. Needs to be separate.
args.markers should probably look like [{'date': date obj, 'label':'this is a lable'},...] and so on. If the argument exists, then show the markers. If not, don't.
Given that this is a public repo now, would make sense to probably think about making any reference to Mozilla more generic, explicitly.
It would be nice to be able to infer units, but otherwise, perhaps add a new argument to moz_chart.
I'm thinking of a callback function that takes the data point being rollover'd, and does something with it according to the user's wishes:
function(d){
$('div#some_div').html(d);
}
This could be useful in many contexts where someone wants additional rollover effects outside of the default behavior, especially if it is outside of the svg element of interest.
We should have it so that if two charts are linked, then the rollover in one triggers the rollover in the other.
Currently the function only supports a single time series.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.