Based on D3.JS and Dimple, ChartFactory provide the ability to build quickly D3.JS charts without coding any lines of javascript. Just define your dashboard in a JSON and voila !
charts: [
{id:'chart1',
width:800,height:250,
xAxis:{type:'Category',field: "Month",orderRule:'Date'},
yAxis:{type:'Measure',field:'Unit Sales'},
series:[{fields:null,'graphType': dimple.plot.bar}]
}
]
Create beautiful Javascript charts with one line of Ruby. No more fighting with charting libraries
<%= area_chart Visit.group_by_minute(:created_at).maximum(:load_time) %>
Clickme is an R package that lets you create interactive visualizations in the browser directly from your R session.
clickme(points, x = microarray$significance, y = microarray$logFC,
color_groups = ifelse(microarray$adj.P.Val < 1e-4, "Significant", "Noise"),
names = microarray$gene_name,
xlab = "Significance (-log10)", ylab = "Fold-change (log2)",
extra = list(Probe = microarray$probe_name))
Crosslet is a free small (22k without dependencies) JavaScript widget for interactive visualisation and analysis of geostatistical datasets. You can also use it for visualizing and comparing multivariate datasets.
Datawrapper is a tool that enables anyone to create enticing visualizations in seconds, without any programming skills. It draws inspiration from ManyEyes and GoogleCharts but remains entirely open-source and independent from a third-party server.
dc.js is a javascript charting library with native crossfilter support and allowing highly efficient exploration on large multi-dimensional dataset (inspired by crossfilter's demo). It leverages d3 engine to render charts in css friendly svg format. Charts rendered using dc.js are naturally data driven and reactive therefore providing instant feedback on user's interaction.
dc.pieChart("#gain-loss-chart", "chartGroup")
.width(200) // (optional) define chart width, :default = 200
.height(200) // (optional) define chart height, :default = 200
.transitionDuration(500) // (optional) define chart transition duration, :default = 350
// (optional) define color array for slices
.colors(['#3182bd', '#6baed6', '#9ecae1', '#c6dbef', '#dadaeb'])
// (optional) define color domain to match your data domain if you want to bind data or color
.colorDomain([-1750, 1644])
// (optional) define color value accessor
.colorAccessor(function(d, i){return d.value;})
.radius(90) // define pie radius
// (optional) if inner radius is used then a donut chart will
// be generated instead of pie chart
.innerRadius(40)
.dimension(gainOrLoss) // set dimension
.group(gainOrLossGroup) // set group
// (optional) by default pie chart will use group.key as it's label
// but you can overwrite it with a closure
.label(function(d) { return d.data.key + "(" + Math.floor(d.data.value / all.value() * 100) + "%)"; })
// (optional) whether chart should render labels, :default = true
.renderLabel(true)
// (optional) by default pie chart will use group.key and group.value as its title
// you can overwrite it with a closure
.title(function(d) { return d.data.key + "(" + Math.floor(d.data.value / all.value() * 100) + "%)"; })
// (optional) whether chart should render titles, :default = false
.renderTitle(true);
DexCharts is a library which provides reusable charts for D3. DexCharts aims to provide. A variety of reusable charts and charting components to choose from. A framework for interconnecting these charts via listeners.
var mychart = new BarChart(
{
'parent' : svg,
'csv' :
{
'header' : [ "SALESMAN", "AGE", "SALES"],
'data' : [["BOB", 23, 1000], ["SUE", 32, 2000], ["PAT", 44, 3000]]
}
} );
The aim of dimple is to open up the power and flexibility of d3 to analysts. It aims to give a gentle learning curve and minimal code to achieve something productive. It also exposes the d3 objects so you can pick them up and run to create some really cool stuff.
var chart = new dimple.chart(svg, data);
chart.addCategoryAxis("x", "Word");
chart.addMeasureAxis("y", "Awesomeness");
chart.addSeries(null, dimple.plot.bar);
chart.draw();
dpl.js a simple framework based on components and plugins that simplify chart generation using the excellent d3.js library. Unlike other d3 based frameworks, dpl.js does not delivere multiple specific chart templates, but provides instead interchangable plugins that all evolve around a base "frame" object. The frame object keeps track of all scales and the viewport area, allowing the user to focus on the specifics of the chart.
A way of embedding visual representations such as sparklines or conventional statistical charts into HTML document without using the hand-written scripts or graph drawing tools.
<pre>
<code>
Name, A, B
Apple, 1323, 1232
Orange, 3563, 2452
Banana, 1356, 3222
</code>
</pre>
<p><code>(@bar)</code></p>
/gigamonkey/gg/https://github.com/gigamonkey/gg/) and fork /sirrice/gg
Javascript DSL for Grammar of Graphics extended to support interactivity and backend data-processing support. Written in coffeescript
var linechart = gg({
layers: [
{ geometry: 'line', mapping: { x: 'd', y: 'r', group: 'subject', color: 'subject'} },
{ geometry: 'text', mapping: { x: 'd', y: 'r', text: '{d}, {r}' }, show: "hover" }
],
scales: [
{ aesthetic: 'color', type: 'color', range: ['#CFF09E', '#A8DBA8', '#79BD9A', '#3B8686'] }
]
});
The gpdk is a JavaScript/CoffeeScript library for creating computer games that are compatible with the www.gameprez.com gameserver.
Realtime dashboard & graphing toolkit based on D3 and Backbone.
"<just an informative label>": {
source: "<graphite graph url, add &format=json to querystring>",
"<widget type>": {
parent: "<which will be placed in this element>",
title: "<title>"
// ... many other view opts ...
}
}
A JavaScript port of the NetworkX graph library.
JSNetworkX allows you to build, process and analyze graphs in JavaScript. It can be used together with D3.js in the browser to create interactive graph visualizations.
A matplotlib/MATLAB (TM) -inspired library for creating interactive plots with d3.js
jsplotlib.bar_graph(chart)
.data([[1,2,3,4,5],[9,7,5,3,1]])
.xlabel("x-axis label")
.ylabel("y-axis label")
.draw()
LPChart is some JavaScript that makes it easier to draw line charts. It provides a simplified way of interacting with d3 and is designed to be particularly useful when making publications for Little Printer.
var chart = LPChart();
chart.xAxisType('year');
d3.select('#chart-intro')
.datum( [ my_data ] )
.call(chart);
A reusable chart library for d3.js.
chart = nv.models.lineChart()
.options({
margin: {left: 100, bottom: 100},
x: function(d,i) { return i},
showXAxis: true,
showYAxis: true,
transitionDuration: 250
})
;
// chart sub-models (ie. xAxis, yAxis, etc) when accessed directly, return themselves, not the parent chart, so need to chain separately
chart.xAxis
.axisLabel("Time (s)")
.tickFormat(d3.format(',.1f'));
chart.yAxis
.axisLabel('Voltage (v)')
.tickFormat(d3.format(',.2f'))
;
d3.select('#chart1 svg')
.datum(sinAndCos())
.call(chart);
R2D3 is a customized build of D3 powered by RaphaelJS. The combination of D3 and Raphael enable developers to easily build data visualizations that work in IE7+ and all modern browsers.
Radian is a JavaScript library for producing interactive SVG plots in HTML using Angular JS and D3.js. Using Angular directives leads to a clear and declarative API for representing plots that can respond to UI elements via Angular data binding.
<plot height=200 aspect=2 stroke-width=2
x="[[seq(0,4*PI,101)]]"
axis-x-label="Time" axis-y-label="sin(x) / cos(x)">
<lines y="[[sin(x)]]" stroke="red"></lines>
<lines y="[[cos(x)]]" stroke="blue"></lines>
</plot>
Primarily conceived as a tool for designers and vis geeks, Raw aims at providing a missing link between spreadsheet applications (e.g. Microsoft Excel, Apple Numbers, OpenRefine) and vector graphics editors (e.g. Adobe Illustrator, Inkscape, ...).
rCharts is an R package to create, customize and publish interactive javascript visualizations from R using a familiar lattice style plotting interface.
Integrates with NVD3, xCharts, HighCharts, Leaflet, Rickshaw
names(uspexp)[1:2] = c("category", "year")
x1 <- xPlot(value ~ year, group = "category", data = uspexp, type = "line-dotted")
x1$print("chart4")
uvCharts is a JavaScript charting library which uses d3 underneath to build most of the basic charts.
var graphDefinition = {
categories : ['uvCharts'],
dataset : {
'uvCharts' : [
{ name : '2009', value : 32 },
{ name : '2010', value : 60 },
{ name : '2011', value : 97 },
{ name : '2012', value : 560 },
{ name : '2013', value : 999 }
]
}
}
var chart = uv.chart ('Bar', graphDefinition, {
meta : {
caption : 'Usage over years',
subcaption : 'among Imaginea OS products',
hlabel : 'Years',
vlabel : 'Number of users',
vsublabel : 'in thousands'
}
})
Vega is a visualization grammar, a declarative format for creating, saving and sharing visualization designs.
{
"width": 500,
"height": 200,
"padding": {"top": 10, "left": 30, "bottom": 30, "right": 10},
"data": [
{
"name": "table",
"values": [
{"x": 1, "y": 28}, {"x": 2, "y": 55},
{"x": 3, "y": 43}, {"x": 4, "y": 91},
{"x": 5, "y": 81}, {"x": 6, "y": 53},
{"x": 7, "y": 19}, {"x": 8, "y": 87},
{"x": 9, "y": 52}, {"x": 10, "y": 48},
{"x": 11, "y": 24}, {"x": 12, "y": 49},
{"x": 13, "y": 87}, {"x": 14, "y": 66},
{"x": 15, "y": 17}, {"x": 16, "y": 27},
{"x": 17, "y": 68}, {"x": 18, "y": 16},
{"x": 19, "y": 49}, {"x": 20, "y": 15}
]
}
],
"scales": [
{
"name": "x",
"type": "linear",
"range": "width",
"zero": false,
"domain": {"data": "table", "field": "data.x"}
},
{
"name": "y",
"type": "linear",
"range": "height",
"nice": true,
"domain": {"data": "table", "field": "data.y"}
}
],
"axes": [
{"type": "x", "scale": "x", "ticks": 20},
{"type": "y", "scale": "y"}
],
"marks": [
{
"type": "area",
"from": {"data": "table"},
"properties": {
"enter": {
"interpolate": {"value": "monotone"},
"x": {"scale": "x", "field": "data.x"},
"y": {"scale": "y", "field": "data.y"},
"y2": {"scale": "y", "value": 0},
"fill": {"value": "steelblue"}
},
"update": {
"fillOpacity": {"value": 1}
},
"hover": {
"fillOpacity": {"value": 0.5}
}
}
}
]
}
An open project, which aims to bring the visual programming language VVVV to your web browser.
JavaScript library for building beautiful and custom data-driven chart visualizations for the web using D3.js. Using HTML, CSS, and SVG, xCharts are designed to be dynamic, fluid, and open to integrations and customization.
var data = {
"xScale": "ordinal",
"yScale": "linear",
"main": [
{
"className": ".pizza",
"data": [
{
"x": "Pepperoni",
"y": 4
},
{
"x": "Cheese",
"y": 8
}
]
}
]
};
var myChart = new xChart('bar', data, '#example1');
Thanks so much for assembling these. Not sure if it was intentional, but Rickshaw and datamaps were not included. Also, rCharts has added dimple support, uvCharts support, and datamaps support.
It seems every day there is a new one :)