Home

Daniel I. Scully

dGraph

dGraph is intended to be an easy to use JavaScript library for drawing data graphics on HTML canvas. It is still a work in progress, but the live examples below give an idea of where it's currently at.

Plot

// Create a new plot, with somewhere to draw it var plot = new dg.Plot( new djs.Canvas2D("c_plot") ); // Create a graph on that plot, using existing data set plot.add( new dg.Graph( data_scatter, "x", "y" ) ); // Define the function y = x^2 var f_x2 = new dg.Function1D(function(x){return x*x;}); f_x2.options["line_colour"].set("green"); plot.add( f_x2 ); // Draw it plot.draw();

Pie Chart

// Create a new pie chart, and set where to draw it var pie = new dg.PieChart(); pie.setArea(new djs.Canvas2D("c_pie")); // Give the pie chart an existing data set pie.setData(data_premier, "Football Club", "Number of Titles" ); // Draw it pie.draw();

Bar Chart

// Create a new bar chart, and set where to draw it var bar = new dg.BarChart(); bar.setArea(new djs.Canvas2D("c_bar")); // Give the bar chart an existing data set bar.setData(data_premier, "Football Club", "Number of Titles" ); // Draw it bar.draw();

Inputs to Examples

In case you're wondering, here's how the existing data sets mentioned above are made:

var raw_data_premier = { "Football Club": ["Manchester United", "Blackburn Rovers", "Arsenal", "Chelsea", "Manchester City"], "Number of Titles": [12, 1, 3, 3, 1] }; var raw_data_scatter = { "x": [6.263425440813189, 5.103950311446399, 0.6852443857993273, 7.4290808715403625, 6.327702168936238, 3.6608570872164394, 4.224216001826279, 2.730766224293486, 1.9486749115117064, 2.90628395035194, 5.588799897418162, 6.2219300306103795, 6.21559334414147, 6.169415848949904, 4.438164201573096, 8.71979797288209, 3.52198402092458, 3.993047974975309, 6.419876626327663, 4.102818653888624, 0.6550733982012469, 9.380461043941619, 0.2071082613634545, 0.23502613578163079, 0.08126488170541624, 0.29010884810394266, 3.5701898646704002, 1.5788283807675407, 6.547422334541492, 1.998887383257275, 1.2849222538475158, 0.449403374997126, 8.079612862306059, 7.073190401534811, 0.5340593756433598, 7.415903163301859, 9.836544710098265, 1.5013696202666083, 9.726894472138154, 2.773049473315934], "y": [37.45533660203361, 23.890944934510202, -0.08533699675091733, 52.532324868691205, 40.673746847661555, 14.812199808914375, 16.512849694374584, 4.337544255951726, 1.640326590993018, 12.718765312780157, 28.914471363778443, 39.21662558477033, 38.42137556382974, 35.52785929395441, 17.847173881930203, 74.27754256572351, 11.391618895879231, 14.893970822155447, 38.982160631193594, 12.281831339165656, -0.8120974685614152, 86.65037733875732, -0.9021730196866531, -2.808337699215344, -0.03334491968764306, -2.145541642290296, 7.452726206633243, -0.4715167976692274, 42.77617618651256, 3.013719824319022, 1.0070732807354652, -0.15716224472752136, 66.07574886474764, 48.45445241910923, -0.830362224812939, 53.45515910043766, 93.64040424467747, -0.3890484075109715, 90.80907906015426, 7.041772939878857] }; var data_premier = new dg.Data("Premier League Titles", raw_data_premier ); var data_scatter = new dg.Data("Scattered Quadratic Data", raw_data_scatter );