A demo of the Chiasm visualization runtime engine.
Click on numbers and colors in the configuration editor for interactive widgets that let you configure the visualizations.
forked from curran's block: Chiasm Bar Chart and Line Chart
A demo of the Chiasm visualization runtime engine.
Click on numbers and colors in the configuration editor for interactive widgets that let you configure the visualizations.
forked from curran's block: Chiasm Bar Chart and Line Chart
var Model = require("model-js"); | |
var ChiasmComponent = require("chiasm-component"); | |
var mixins = require("./mixins"); | |
function BarChart(){ | |
var my = new ChiasmComponent({ | |
xColumn: Model.None, | |
yColumn: Model.None | |
}); | |
var svg = d3.select(my.initSVG()); | |
var g = mixins.marginConvention(my, svg); | |
var xAxisG = mixins.xAxis(my, g); | |
mixins.xScaleOrdinal(my); | |
mixins.xAxisLabel(my, xAxisG); | |
var yAxisG = mixins.yAxis(my, g); | |
mixins.yScaleLinear(my); | |
mixins.yAxisLabel(my, yAxisG); | |
my.when(["data", "xColumn"], function (data, xColumn){ | |
if(xColumn !== Model.None){ | |
my.xScaleDomain = data.map( function (d) { return d[xColumn]; }); | |
} | |
}); | |
my.when(["data", "yColumn"], function (data, yColumn){ | |
if(yColumn !== Model.None){ | |
my.yScaleDomain = [0, d3.max(data, function (d) { return d[yColumn]; })]; | |
} | |
}); | |
my.when(["data", "xScale", "xColumn", "yScale", "yColumn", "height"], | |
function (data, xScale, xColumn, yScale, yColumn, height) { | |
var bars = g.selectAll("rect").data(data); | |
bars.enter().append("rect"); | |
bars.exit().remove(); | |
bars | |
.attr("x", function (d){ return xScale(d[xColumn]); }) | |
.attr("width", xScale.rangeBand()) | |
.attr("y", function (d){ return yScale(d[yColumn]); }) | |
.attr("height", function (d){ return height - yScale(d[yColumn]); }); | |
}); | |
return my; | |
} | |
module.exports = BarChart; |
name | amount | |
---|---|---|
A | 18 | |
B | 20 | |
C | 15 | |
D | 35 | |
E | 12 |
{ | |
"columns": [ | |
{ | |
"name": "name", | |
"type": "string" | |
}, | |
{ | |
"name": "amount", | |
"type": "number" | |
} | |
] | |
} |
<!DOCTYPE html> | |
<html> | |
<head> | |
<meta charset="utf-8"> | |
<title>Example</title> | |
<script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script> | |
<style> | |
body { | |
background-color: gray; | |
} | |
#container { | |
background-color: white; | |
position: fixed; | |
left: 10px; | |
right: 10px; | |
top: 10px; | |
bottom: 10px; | |
} | |
/* Axis CSS from bar chart example http://bl.ocks.org/mbostock/3885304 */ | |
.axis { | |
font: 10px sans-serif; | |
} | |
.axis path, | |
.axis line { | |
fill: none; | |
stroke: #000; | |
shape-rendering: crispEdges; | |
} | |
/* Custom CSS for axis labels. */ | |
.axis-label { | |
text-anchor: middle; | |
font-size: 1.3em; | |
} | |
</style> | |
</head> | |
<body> | |
<div id="container"></div> | |
<script src="main-build.js"></script> | |
</body> | |
</html> |
var Model = require("model-js"); | |
var ChiasmComponent = require("chiasm-component"); | |
var mixins = require("./mixins"); | |
function LineChart(){ | |
var my = new ChiasmComponent({ | |
xColumn: Model.None, | |
yColumn: Model.None, | |
lineStroke: "black", | |
lineStrokeWidth: "1px" | |
}); | |
var svg = d3.select(my.initSVG()); | |
var g = mixins.marginConvention(my, svg); | |
var line = d3.svg.line().interpolate("basis"); | |
var path = g.append("path").attr("fill", "none"); | |
var xAxisG = mixins.xAxis(my, g); | |
mixins.xScaleTime(my); | |
mixins.xAxisLabel(my, xAxisG); | |
var yAxisG = mixins.yAxis(my, g); | |
mixins.yScaleLinear(my); | |
mixins.yAxisLabel(my, yAxisG); | |
my.when(["data", "xColumn"], function (data, xColumn){ | |
if(xColumn !== Model.None){ | |
my.xScaleDomain = d3.extent(data, function (d) { return d[xColumn]; }); | |
} | |
}); | |
my.when(["data", "yColumn"], function (data, yColumn){ | |
if(yColumn !== Model.None){ | |
my.yScaleDomain = d3.extent(data, function (d) { return d[yColumn]; }); | |
} | |
}); | |
my.when(["data", "xScale", "xColumn", "yScale", "yColumn"], | |
function (data, xScale, xColumn, yScale, yColumn) { | |
line | |
.x(function(d) { return xScale(d[xColumn]); }) | |
.y(function(d) { return yScale(d[yColumn]); }); | |
path.attr("d", line(data)); | |
}); | |
my.when("lineStroke", function (lineStroke){ | |
path.attr("stroke", lineStroke); | |
}); | |
my.when("lineStrokeWidth", function (lineStrokeWidth){ | |
path.attr("stroke-width", lineStrokeWidth); | |
}); | |
return my; | |
} | |
module.exports = LineChart; |
timestamp | temperature | |
---|---|---|
2015-03-20T21:00:00.000Z | 23.9516625615764 | |
2015-03-20T22:00:00.000Z | 23.0728888291688 | |
2015-03-20T23:00:00.000Z | 22.2708190476318 | |
2015-03-21T00:00:00.000Z | 21.3394373423804 | |
2015-03-21T01:00:00.000Z | 20.1010743049325 | |
2015-03-21T02:00:00.000Z | 18.4150717551479 | |
2015-03-21T03:00:00.000Z | 17.7483817583905 | |
2015-03-21T04:00:00.000Z | 17.6589726749868 | |
2015-03-21T05:00:00.000Z | 17.0922334804965 | |
2015-03-21T06:00:00.000Z | 17.9022626474071 | |
2015-03-21T07:00:00.000Z | 17.9134315019288 | |
2015-03-21T08:00:00.000Z | 17.9623415917395 | |
2015-03-21T09:00:00.000Z | 18.6299049947767 | |
2015-03-21T10:00:00.000Z | 18.7246461115231 | |
2015-03-21T11:00:00.000Z | 18.3452032121395 | |
2015-03-21T12:00:00.000Z | 17.9509405148159 | |
2015-03-21T13:00:00.000Z | 17.6459367384257 | |
2015-03-21T14:00:00.000Z | 18.0026108196051 | |
2015-03-21T15:00:00.000Z | 18.6413944821435 | |
2015-03-21T16:00:00.000Z | 19.3671431509997 | |
2015-03-21T17:00:00.000Z | 20.8082012083461 | |
2015-03-21T18:00:00.000Z | 22.5238576663828 | |
2015-03-21T19:00:00.000Z | 24.4214051463704 | |
2015-03-21T20:00:00.000Z | 26.2049693716955 | |
2015-03-21T21:00:00.000Z | 26.579802484894 | |
2015-03-21T22:00:00.000Z | 26.5525094442272 | |
2015-03-21T23:00:00.000Z | 23.9758724990251 | |
2015-03-22T00:00:00.000Z | 20.7705334007582 | |
2015-03-22T01:00:00.000Z | 19.5826361563267 | |
2015-03-22T02:00:00.000Z | 18.7265399946616 | |
2015-03-22T03:00:00.000Z | 18.2886029132647 | |
2015-03-22T04:00:00.000Z | 17.4904771411586 | |
2015-03-22T05:00:00.000Z | 17.1831430954037 | |
2015-03-22T06:00:00.000Z | 17.2898856656444 | |
2015-03-22T07:00:00.000Z | 17.8578100360021 | |
2015-03-22T08:00:00.000Z | 18.1992192220978 | |
2015-03-22T09:00:00.000Z | 18.13420905954 | |
2015-03-22T10:00:00.000Z | 18.5888149684944 | |
2015-03-22T11:00:00.000Z | 18.6733003026984 | |
2015-03-22T12:00:00.000Z | 19.1600833190036 | |
2015-03-22T13:00:00.000Z | 19.207095797011 | |
2015-03-22T14:00:00.000Z | 18.9847082241235 | |
2015-03-22T15:00:00.000Z | 19.4293802064908 | |
2015-03-22T16:00:00.000Z | 20.8493124700409 | |
2015-03-22T17:00:00.000Z | 21.5898145184046 | |
2015-03-22T18:00:00.000Z | 22.3397182467298 | |
2015-03-22T19:00:00.000Z | 22.7891858876349 | |
2015-03-22T20:00:00.000Z | 23.3412628564144 | |
2015-03-22T21:00:00.000Z | 23.4926420057589 | |
2015-03-22T22:00:00.000Z | 23.0962283240861 | |
2015-03-22T23:00:00.000Z | 22.2667502918227 | |
2015-03-23T00:00:00.000Z | 21.0266142557277 | |
2015-03-23T01:00:00.000Z | 20.0093349857605 | |
2015-03-23T02:00:00.000Z | 18.9851414732381 | |
2015-03-23T03:00:00.000Z | 18.5245615004214 | |
2015-03-23T04:00:00.000Z | 18.290694254732 | |
2015-03-23T05:00:00.000Z | 18.0595508666643 | |
2015-03-23T06:00:00.000Z | 18.4732789951039 | |
2015-03-23T07:00:00.000Z | 18.7258481532495 | |
2015-03-23T08:00:00.000Z | 18.5595128641976 | |
2015-03-23T09:00:00.000Z | 18.179674037842 | |
2015-03-23T10:00:00.000Z | 17.7681299392415 | |
2015-03-23T11:00:00.000Z | 17.443021321053 | |
2015-03-23T12:00:00.000Z | 17.3451205175492 | |
2015-03-23T13:00:00.000Z | 17.4374701133724 | |
2015-03-23T14:00:00.000Z | 17.8929191631296 | |
2015-03-23T15:00:00.000Z | 18.9122039984753 | |
2015-03-23T16:00:00.000Z | 19.6161969984469 | |
2015-03-23T17:00:00.000Z | 20.7299868156002 | |
2015-03-23T18:00:00.000Z | 21.7689130719553 | |
2015-03-23T19:00:00.000Z | 22.5533898355016 | |
2015-03-23T20:00:00.000Z | 22.8372668296634 | |
2015-03-23T21:00:00.000Z | 23.2014773800322 | |
2015-03-23T22:00:00.000Z | 22.5682062882985 | |
2015-03-23T23:00:00.000Z | 22.3205675513796 | |
2015-03-24T00:00:00.000Z | 20.8661118605035 | |
2015-03-24T01:00:00.000Z | 18.5360183512352 | |
2015-03-24T02:00:00.000Z | 17.5156724451801 | |
2015-03-24T03:00:00.000Z | 17.2066897483676 | |
2015-03-24T04:00:00.000Z | 17.1974604599623 | |
2015-03-24T05:00:00.000Z | 17.3377835934013 | |
2015-03-24T06:00:00.000Z | 17.28662295757 | |
2015-03-24T07:00:00.000Z | 17.4291104924263 | |
2015-03-24T08:00:00.000Z | 17.4228793012653 | |
2015-03-24T09:00:00.000Z | 17.4209561166271 | |
2015-03-24T10:00:00.000Z | 17.141757829703 | |
2015-03-24T11:00:00.000Z | 17.3048584589793 | |
2015-03-24T12:00:00.000Z | 17.337482794781 | |
2015-03-24T13:00:00.000Z | 17.7016509341158 | |
2015-03-24T14:00:00.000Z | 17.5637528905341 | |
2015-03-24T15:00:00.000Z | 18.8276163388499 | |
2015-03-24T16:00:00.000Z | 19.4404648699534 | |
2015-03-24T17:00:00.000Z | 20.5646049670802 | |
2015-03-24T18:00:00.000Z | 21.9525507884113 | |
2015-03-24T19:00:00.000Z | 21.9040221846194 | |
2015-03-24T20:00:00.000Z | 22.8197541616282 | |
2015-03-24T21:00:00.000Z | 22.2390831913042 | |
2015-03-24T22:00:00.000Z | 22.4688244906963 | |
2015-03-24T23:00:00.000Z | 21.9461828791739 | |
2015-03-25T00:00:00.000Z | 21.3218883084538 | |
2015-03-25T01:00:00.000Z | 19.9688738415096 | |
2015-03-25T02:00:00.000Z | 18.9409031033049 | |
2015-03-25T03:00:00.000Z | 18.1829931467353 | |
2015-03-25T04:00:00.000Z | 17.6071132686007 | |
2015-03-25T05:00:00.000Z | 17.4155712472229 | |
2015-03-25T06:00:00.000Z | 17.8112238813252 | |
2015-03-25T07:00:00.000Z | 18.0118371454174 | |
2015-03-25T08:00:00.000Z | 17.9925110740977 | |
2015-03-25T09:00:00.000Z | 17.9146107460869 | |
2015-03-25T10:00:00.000Z | 17.6354297651737 | |
2015-03-25T11:00:00.000Z | 17.2990959392658 | |
2015-03-25T12:00:00.000Z | 16.8942534144482 | |
2015-03-25T13:00:00.000Z | 17.0215911252788 | |
2015-03-25T14:00:00.000Z | 17.5370547200027 | |
2015-03-25T15:00:00.000Z | 19.6239569219906 | |
2015-03-25T16:00:00.000Z | 21.4284862546897 | |
2015-03-25T17:00:00.000Z | 22.5971622932944 | |
2015-03-25T18:00:00.000Z | 24.4516364021043 | |
2015-03-25T19:00:00.000Z | 26.314179825294 | |
2015-03-25T20:00:00.000Z | 27.2966725797272 | |
2015-03-25T21:00:00.000Z | 27.8594008881709 | |
2015-03-25T22:00:00.000Z | 26.98771523591 | |
2015-03-25T23:00:00.000Z | 26.1419652896808 | |
2015-03-26T00:00:00.000Z | 24.2967135065912 | |
2015-03-26T01:00:00.000Z | 21.2627783997077 | |
2015-03-26T02:00:00.000Z | 19.6223366524463 | |
2015-03-26T03:00:00.000Z | 18.9702936572059 | |
2015-03-26T04:00:00.000Z | 18.64173108115 | |
2015-03-26T05:00:00.000Z | 18.5430028446263 | |
2015-03-26T06:00:00.000Z | 18.2597209484404 | |
2015-03-26T07:00:00.000Z | 17.8251835175158 | |
2015-03-26T08:00:00.000Z | 17.4726877440558 | |
2015-03-26T09:00:00.000Z | 17.651946077925 | |
2015-03-26T10:00:00.000Z | 17.7491791888976 | |
2015-03-26T11:00:00.000Z | 17.5917881825657 | |
2015-03-26T12:00:00.000Z | 17.5239416379086 | |
2015-03-26T13:00:00.000Z | 17.5307201091079 | |
2015-03-26T14:00:00.000Z | 18.2489964460844 | |
2015-03-26T15:00:00.000Z | 20.2797517883074 | |
2015-03-26T16:00:00.000Z | 21.888709612845 | |
2015-03-26T17:00:00.000Z | 23.8693783046019 | |
2015-03-26T18:00:00.000Z | 25.6434924437705 | |
2015-03-26T19:00:00.000Z | 27.3338701714523 | |
2015-03-26T20:00:00.000Z | 30.235307632747 | |
2015-03-26T21:00:00.000Z | 31.6784014189275 | |
2015-03-26T22:00:00.000Z | 32.4243323492878 | |
2015-03-26T23:00:00.000Z | 33.1688980688728 | |
2015-03-27T00:00:00.000Z | 30.8713221141196 | |
2015-03-27T01:00:00.000Z | 26.8944097638179 | |
2015-03-27T02:00:00.000Z | 24.6128150483182 | |
2015-03-27T03:00:00.000Z | 22.889746429207 | |
2015-03-27T04:00:00.000Z | 21.7148736202902 | |
2015-03-27T05:00:00.000Z | 20.8438711038614 | |
2015-03-27T06:00:00.000Z | 19.2559699722154 | |
2015-03-27T07:00:00.000Z | 18.337368653838 | |
2015-03-27T08:00:00.000Z | 17.6177708093268 | |
2015-03-27T09:00:00.000Z | 17.1977444392481 | |
2015-03-27T10:00:00.000Z | 16.7043132969425 | |
2015-03-27T11:00:00.000Z | 16.2471811295094 | |
2015-03-27T12:00:00.000Z | 16.087861898997 | |
2015-03-27T13:00:00.000Z | 15.6362635324538 | |
2015-03-27T14:00:00.000Z | 15.692528763157 | |
2015-03-27T15:00:00.000Z | 16.1186855064984 | |
2015-03-27T16:00:00.000Z | 17.3886258325874 | |
2015-03-27T17:00:00.000Z | 18.2540910121364 | |
2015-03-27T18:00:00.000Z | 19.5148327389508 | |
2015-03-27T19:00:00.000Z | 20.6023266315466 | |
2015-03-27T20:00:00.000Z | 21.3854066767194 | |
2015-03-27T21:00:00.000Z | 21.9084983994613 |
{ | |
"columns": [ | |
{ | |
"name": "timestamp", | |
"type": "date" | |
}, | |
{ | |
"name": "temperature", | |
"type": "number" | |
} | |
] | |
} |
var Chiasm = require("chiasm"); | |
function myApp(){ | |
var chiasm = new Chiasm(); | |
chiasm.plugins.layout = require("chiasm-layout"); | |
chiasm.plugins.links = require("chiasm-links"); | |
chiasm.plugins.dsvDataset = require("chiasm-dsv-dataset"); | |
chiasm.plugins.scatterPlot = require("./scatterPlot"); | |
chiasm.plugins.lineChart = require("./lineChart"); | |
chiasm.plugins.barChart = require("./barChart"); | |
chiasm.setConfig({ | |
"layout": { | |
"plugin": "layout", | |
"state": { | |
"containerSelector": "#container", | |
"layout": { | |
"orientation": "vertical", | |
"children": [ | |
{ | |
"orientation": "horizontal", | |
"size": 2, | |
"children": [ "myBarChart", "myScatterPlot" ] | |
}, | |
"myLineChart" | |
] | |
} | |
} | |
}, | |
"lineChartDataLoader": { | |
"plugin": "dsvDataset", | |
"state": { | |
"path": "lineChartData" | |
} | |
}, | |
"myLineChart": { | |
"plugin": "lineChart", | |
"state": { | |
"xAxisLabelText": "Time", | |
"xColumn": "timestamp", | |
"yAxisLabelText": "Temperature", | |
"yColumn": "temperature", | |
"xAxisLabelTextOffset": 32, | |
"yAxisLabelTextOffset": 30, | |
"margin": { top: 0, right: 20, bottom: 35, left: 50} | |
} | |
}, | |
"scatterPlotDataLoader": { | |
"plugin": "dsvDataset", | |
"state": { | |
"path": "scatterPlotData" | |
} | |
}, | |
"myScatterPlot": { | |
"plugin": "scatterPlot", | |
"state": { | |
"xAxisLabelText": "Sepal Length", | |
"xColumn": "sepal_length", | |
"yAxisLabelText": "Petal Length", | |
"yColumn": "petal_length", | |
"xAxisLabelTextOffset": 32, | |
"yAxisLabelTextOffset": 30, | |
"margin": { top: 5, right: 20, bottom: 35, left: 50} | |
} | |
}, | |
"barChartDataLoader": { | |
"plugin": "dsvDataset", | |
"state": { | |
"path": "barChartData" | |
} | |
}, | |
"myBarChart": { | |
"plugin": "barChart", | |
"state": { | |
"xAxisLabelText": "Name", | |
"xColumn": "name", | |
"yAxisLabelText": "Amount", | |
"yColumn": "amount", | |
"xAxisLabelTextOffset": 32, | |
"yAxisLabelTextOffset": 30, | |
"margin": { top: 5, right: 20, bottom: 35, left: 50} | |
} | |
}, | |
"myLinks": { | |
"plugin": "links", | |
"state": { | |
"bindings": [ | |
"lineChartDataLoader.data -> myLineChart.data", | |
"scatterPlotDataLoader.data -> myScatterPlot.data", | |
"barChartDataLoader.data -> myBarChart.data" | |
] | |
} | |
} | |
}); | |
} | |
myApp(); |
var d3 = require("d3"); | |
function marginConvention(my, svg){ | |
var g = svg.append("g"); | |
my.addPublicProperty("margin", {top: 20, right: 20, bottom: 50, left: 60}); | |
my.when(["box", "margin"], function (box, margin){ | |
my.width = box.width - margin.left - margin.right; | |
my.height = box.height - margin.top - margin.bottom; | |
g.attr("transform", "translate(" + margin.left + "," + margin.top + ")"); | |
}); | |
return g; | |
} | |
function xScaleLinear(my){ | |
var scale = d3.scale.linear(); | |
my.addPublicProperty("xScaleDomain", [0, 1000]); | |
my.when(["xScaleDomain", "width"], function (xScaleDomain, width){ | |
my.xScale = scale.domain(xScaleDomain).range([0, width]); | |
}); | |
} | |
function xScaleOrdinal(my){ | |
var scale = d3.scale.ordinal(); | |
my.addPublicProperty("xScaleDomain", [0, 1000]); | |
my.addPublicProperty("xScaleRangePadding", 0.1); | |
my.when(["xScaleDomain", "width", "xScaleRangePadding"], function (xScaleDomain, width, xScaleRangePadding){ | |
my.xScale = scale | |
.domain(xScaleDomain) | |
.rangeBands([0, width], xScaleRangePadding); | |
}); | |
} | |
function xScaleTime(my){ | |
var scale = d3.time.scale(); | |
my.addPublicProperty("xScaleDomain", [0, 1000]); | |
my.when(["xScaleDomain", "width"], function (xScaleDomain, width){ | |
my.xScale = scale.domain(xScaleDomain).range([0, width]); | |
}); | |
} | |
function yScaleLinear(my){ | |
var scale = d3.scale.linear(); | |
my.addPublicProperty("yScaleDomain", [0, 1000]); | |
my.when(["yScaleDomain", "height"], function (yScaleDomain, height){ | |
my.yScale = scale.domain(yScaleDomain).range([height, 0]); | |
}); | |
} | |
function xAxis(my, g){ | |
var axisG = g.append("g").attr("class", "x axis"); | |
var axis = d3.svg.axis(); | |
my.addPublicProperty("xAxisTickDensity", 70); | |
my.when(["xScale", "xAxisTickDensity", "width"], function (xScale, xAxisTickDensity, width){ | |
axis.scale(xScale).ticks(width / xAxisTickDensity) | |
axisG.call(axis); | |
}); | |
my.when("height", function (height){ | |
axisG.attr("transform", "translate(0," + height + ")"); | |
}); | |
return axisG; | |
} | |
function yAxis(my, g){ | |
var axisG = g.append("g").attr("class", "y axis"); | |
var axis = d3.svg.axis().orient("left"); | |
my.addPublicProperty("yAxisTickDensity", 30); | |
my.when(["yScale", "yAxisTickDensity", "height"], function (yScale, yAxisTickDensity, height){ | |
axis.scale(yScale).ticks(height / yAxisTickDensity) | |
axisG.call(axis); | |
}); | |
return axisG; | |
} | |
function xAxisLabel(my, xAxisG){ | |
var label = xAxisG.append("text").attr("class", "x axis-label"); | |
my.addPublicProperty("xAxisLabelText", "X Axis Label"); | |
my.addPublicProperty("xAxisLabelTextOffset", 43); | |
my.when("xAxisLabelText", function (xAxisLabelText){ | |
label.text(xAxisLabelText); | |
}); | |
my.when("xAxisLabelTextOffset", function (xAxisLabelTextOffset){ | |
label.attr("y", xAxisLabelTextOffset); | |
}); | |
my.when("width", function (width){ | |
label.attr("x", width / 2); | |
}); | |
} | |
function yAxisLabel(my, yAxisG){ | |
var label = yAxisG.append("text").attr("class", "y axis-label"); | |
my.addPublicProperty("yAxisLabelText", "Y Axis Label"); | |
my.addPublicProperty("yAxisLabelTextOffset", 35); | |
my.when("yAxisLabelText", function (yAxisLabelText){ | |
label.text(yAxisLabelText); | |
}); | |
my.when(["yAxisLabelTextOffset", "height"], function (offset, height){ | |
label.attr("transform", "translate(-" + offset + "," + (height / 2) + ") rotate(-90)") | |
}); | |
} | |
module.exports = { | |
marginConvention: marginConvention, | |
xScaleLinear: xScaleLinear, | |
xScaleOrdinal: xScaleOrdinal, | |
xScaleTime: xScaleTime, | |
yScaleLinear: yScaleLinear, | |
xAxis: xAxis, | |
xAxisLabel: xAxisLabel, | |
yAxis: yAxis, | |
yAxisLabel: yAxisLabel | |
}; |
{ | |
"name": "example", | |
"version": "1.0.0", | |
"description": "A code example. Feel free to copy and use however you like.", | |
"main": "main.js", | |
"scripts": { | |
"build": "browserify main.js -t browserify-shim > main-build.js" | |
}, | |
"author": "Curran Kelleher", | |
"license": "MIT", | |
"dependencies": { | |
"chiasm": "^0.2.3", | |
"chiasm-component": "^0.2.3", | |
"chiasm-dsv-dataset": "^0.2.2", | |
"chiasm-layout": "^0.2.4", | |
"chiasm-links": "^0.2.3", | |
"d3": "^3.5.6", | |
"model-js": "^0.2.4" | |
}, | |
"devDependencies": { | |
"browserify": "^11.2.0", | |
"browserify-shim": "^3.8.10" | |
}, | |
"browserify-shim": { | |
"d3": "global:d3" | |
} | |
} |
var Model = require("model-js"); | |
var ChiasmComponent = require("chiasm-component"); | |
var mixins = require("./mixins"); | |
function ScatterPlot(){ | |
var my = new ChiasmComponent({ | |
xColumn: Model.None, | |
yColumn: Model.None, | |
circleRadius: 5 | |
}); | |
var svg = d3.select(my.initSVG()); | |
var g = mixins.marginConvention(my, svg); | |
var xAxisG = mixins.xAxis(my, g); | |
mixins.xScaleLinear(my); | |
mixins.xAxisLabel(my, xAxisG); | |
var yAxisG = mixins.yAxis(my, g); | |
mixins.yScaleLinear(my); | |
mixins.yAxisLabel(my, yAxisG); | |
my.when(["data", "xColumn"], function (data, xColumn){ | |
if(xColumn !== Model.None){ | |
my.xScaleDomain = d3.extent(data, function (d) { return d[xColumn]; }); | |
} | |
}); | |
my.when(["data", "yColumn"], function (data, yColumn){ | |
if(yColumn !== Model.None){ | |
my.yScaleDomain = d3.extent(data, function (d) { return d[yColumn]; }); | |
} | |
}); | |
my.when(["data", "xScale", "xColumn", "yScale", "yColumn", "circleRadius"], | |
function (data, xScale, xColumn, yScale, yColumn, circleRadius) { | |
var circles = g.selectAll("circle").data(data); | |
circles.enter().append("circle"); | |
circles.exit().remove(); | |
circles | |
.attr("cx", function (d){ return xScale(d[xColumn]); }) | |
.attr("cy", function (d){ return yScale(d[yColumn]); }) | |
.attr("r", circleRadius); | |
}); | |
return my; | |
} | |
module.exports = ScatterPlot; |
sepal_length | sepal_width | petal_length | petal_width | class | |
---|---|---|---|---|---|
5.0 | 3.4 | 1.5 | 0.2 | setosa | |
4.8 | 3.4 | 1.6 | 0.2 | setosa | |
5.1 | 3.5 | 1.4 | 0.3 | setosa | |
5.4 | 3.4 | 1.7 | 0.2 | setosa | |
5.0 | 3.4 | 1.6 | 0.4 | setosa | |
4.4 | 3.0 | 1.3 | 0.2 | setosa | |
5.0 | 3.5 | 1.3 | 0.3 | setosa | |
4.6 | 3.2 | 1.4 | 0.2 | setosa | |
6.9 | 3.1 | 4.9 | 1.5 | versicolor | |
5.9 | 3.0 | 4.2 | 1.5 | versicolor | |
5.8 | 2.7 | 4.1 | 1.0 | versicolor | |
6.1 | 2.8 | 4.0 | 1.3 | versicolor | |
5.7 | 2.6 | 3.5 | 1.0 | versicolor | |
5.5 | 2.4 | 3.8 | 1.1 | versicolor | |
5.6 | 3.0 | 4.1 | 1.3 | versicolor | |
5.8 | 2.6 | 4.0 | 1.2 | versicolor | |
5.1 | 2.5 | 3.0 | 1.1 | versicolor | |
5.8 | 2.7 | 5.1 | 1.9 | virginica | |
7.3 | 2.9 | 6.3 | 1.8 | virginica | |
6.8 | 3.0 | 5.5 | 2.1 | virginica | |
6.0 | 2.2 | 5.0 | 1.5 | virginica | |
5.6 | 2.8 | 4.9 | 2.0 | virginica | |
6.3 | 2.8 | 5.1 | 1.5 | virginica | |
6.9 | 3.1 | 5.4 | 2.1 | virginica | |
6.2 | 3.4 | 5.4 | 2.3 | virginica |
{ | |
"columns": [ | |
{ | |
"name": "sepal_length", | |
"type": "number" | |
}, | |
{ | |
"name": "sepal_width", | |
"type": "number" | |
}, | |
{ | |
"name": "petal_length", | |
"type": "number" | |
}, | |
{ | |
"name": "petal_width", | |
"type": "number" | |
}, | |
{ | |
"name": "class", | |
"type": "string" | |
} | |
] | |
} |