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.
Last active
August 29, 2015 14:17
-
-
Save curran/4ce2ee825811f1c32125 to your computer and use it in GitHub Desktop.
Chiasm Bar Chart and Line Chart
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* Style the axes and labels for visualizations. | |
| Curran Kelleher March 2015 */ | |
| /* Tick mark labels */ | |
| .axis .tick text { | |
| font: 8pt sans-serif; | |
| } | |
| /* Axis labels */ | |
| .axis text { | |
| font: 14pt sans-serif; | |
| } | |
| /* Lines within axes. */ | |
| .axis path, | |
| .axis line { | |
| fill: none; | |
| stroke: #000; | |
| shape-rendering: crispEdges; | |
| } | |
| .line { | |
| fill: none; | |
| stroke: black; | |
| stroke-width: 1.5px; | |
| } | |
| /* Style the title text at the top of the visualization. */ | |
| .title-text { | |
| text-anchor: middle; | |
| font: 20pt sans-serif; | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <!-- | |
| A data visualization editor. | |
| Curran Kelleher March 2015 | |
| --> | |
| <title>Visualization Editor</title> | |
| <link rel="stylesheet" href="//curran.github.io/cdn/inlet/inlet.css"> | |
| <link rel="stylesheet" href="//curran.github.io/cdn/codemirror-v5.0.0/lib/codemirror.css"> | |
| <link rel="stylesheet" href="axes.css"> | |
| <style> | |
| /* Make the container fill the page. */ | |
| #container { | |
| position: fixed; | |
| left: 0px; | |
| right: 0px; | |
| top: 0px; | |
| bottom: 0px; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- The container for the runtime environment. --> | |
| <div id="container"></div> | |
| <!-- Use RequireJS for module loading. --> | |
| <script src="//curran.github.io/cdn/requirejs-v2.1.16/require.js"></script> | |
| <!-- Configure AMD modules. --> | |
| <script src="requireJSConfig.js"></script> | |
| <!-- Run the main program. --> | |
| <script src="main.js"></script> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // This program loads the configuration file called "visConfig.json". | |
| require(["d3", "chiasm/runtime"], function (d3, Runtime) { | |
| var runtime = Runtime(document.getElementById("container")); | |
| d3.json("visConfig.json", function (err, config) { | |
| runtime.config = config; | |
| }); | |
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // This is the RequireJS configuration that sets up module paths. | |
| // | |
| // This file is documented here: | |
| // http://requirejs.org/docs/api.html#config | |
| // | |
| // Curran Kelleher March 2015 | |
| (function(){ | |
| // Use a fixed version of Chiasm, which provides the visualization runtime. | |
| var chiasmPath = "//curran.github.io/cdn/chiasm-v0.1.2/client/src"; | |
| // Here's how to can use a local development version | |
| // if this Gist is cloned into a sibling directory to the chiasm repo. | |
| //var chiasmPath = "../chiasm/client/src/core"; | |
| requirejs.config({ | |
| // Set up the Chiasm package. | |
| // https://github.com/curran/chiasm | |
| packages: [{ | |
| name: "chiasm", | |
| location: chiasmPath + "/core" | |
| }], | |
| // Set up paths for Bower dependencies. | |
| // Uses github.com/curran/cdn | |
| paths: { | |
| // Visualization library. | |
| // http://d3js.org/ | |
| d3: "//curran.github.io/cdn/d3-v3.5.5/d3.min", | |
| // Reactive model library. | |
| // https://github.com/curran/model | |
| model: "//curran.github.io/cdn/model-v0.2.0/dist/model", | |
| // Functional programming utilities. | |
| // http://benmccormick.org/2014/11/12/underscore-vs-lodash/ | |
| lodash: "//curran.github.io/cdn/lodash-v3.5.0/lodash.min", | |
| // Asynchronous control flow. | |
| // https://github.com/caolan/async | |
| async: "//curran.github.io/cdn/async-v0.9.2/lib/async", | |
| // Syntax-highlighted text editor for code. | |
| // http://codemirror.net/ | |
| codemirror: "//curran.github.io/cdn/codemirror-v5.0.0", | |
| // Provides interactive color picker and slider for CodeMirror. | |
| // https://github.com/enjalot/Inlet.git | |
| inlet: "//curran.github.io/cdn/inlet/inlet", | |
| // Configure paths for plugins loaded at runtime. | |
| plugins: chiasmPath + "/plugins" | |
| } | |
| }); | |
| })(); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| letter | frequency | |
|---|---|---|
| A | 30 | |
| B | 20 | |
| C | 10 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| timestamp | temperature | |
|---|---|---|
| 2015-03-10T22:00:00.000Z | 19.09 | |
| 2015-03-10T23:00:00.000Z | 18.87 | |
| 2015-03-11T00:00:00.000Z | 18.90 | |
| 2015-03-11T01:00:00.000Z | 18.16 | |
| 2015-03-11T02:00:00.000Z | 17.80 | |
| 2015-03-11T03:00:00.000Z | 17.27 | |
| 2015-03-11T04:00:00.000Z | 17.19 | |
| 2015-03-11T05:00:00.000Z | 17.36 | |
| 2015-03-11T06:00:00.000Z | 17.45 | |
| 2015-03-11T07:00:00.000Z | 17.22 | |
| 2015-03-11T08:00:00.000Z | 17.28 | |
| 2015-03-11T09:00:00.000Z | 17.37 | |
| 2015-03-11T10:00:00.000Z | 17.44 | |
| 2015-03-11T11:00:00.000Z | 17.60 | |
| 2015-03-11T12:00:00.000Z | 17.81 | |
| 2015-03-11T13:00:00.000Z | 17.96 | |
| 2015-03-11T14:00:00.000Z | 18.08 | |
| 2015-03-11T15:00:00.000Z | 18.55 | |
| 2015-03-11T16:00:00.000Z | 19.46 | |
| 2015-03-11T17:00:00.000Z | 20.78 | |
| 2015-03-11T18:00:00.000Z | 22.19 | |
| 2015-03-11T19:00:00.000Z | 22.64 | |
| 2015-03-11T20:00:00.000Z | 23.07 | |
| 2015-03-11T21:00:00.000Z | 23.62 | |
| 2015-03-11T22:00:00.000Z | 23.89 | |
| 2015-03-11T23:00:00.000Z | 22.65 | |
| 2015-03-12T00:00:00.000Z | 22.29 | |
| 2015-03-12T01:00:00.000Z | 20.23 | |
| 2015-03-12T02:00:00.000Z | 19.24 | |
| 2015-03-12T03:00:00.000Z | 19.00 | |
| 2015-03-12T04:00:00.000Z | 19.02 | |
| 2015-03-12T05:00:00.000Z | 18.73 | |
| 2015-03-12T06:00:00.000Z | 18.54 | |
| 2015-03-12T07:00:00.000Z | 18.16 | |
| 2015-03-12T08:00:00.000Z | 17.78 | |
| 2015-03-12T09:00:00.000Z | 17.69 | |
| 2015-03-12T10:00:00.000Z | 17.38 | |
| 2015-03-12T11:00:00.000Z | 17.12 | |
| 2015-03-12T12:00:00.000Z | 16.81 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| { | |
| "layout": { | |
| "plugin": "layout", | |
| "state": { | |
| "layout": { | |
| "orientation": "horizontal", | |
| "children": [ | |
| "editor", | |
| { | |
| "orientation": "vertical", | |
| "children": [ | |
| "barChart", | |
| "lineChart" | |
| ] | |
| } | |
| ] | |
| } | |
| } | |
| }, | |
| "editor": { | |
| "plugin": "configEditor", | |
| "state": { | |
| "size": "325px" | |
| } | |
| }, | |
| "barChart": { | |
| "plugin": "barChart", | |
| "state": { | |
| "xColumn": "letter", | |
| "xAxisLabel": "Letter", | |
| "yColumn": "frequency", | |
| "yAxisLabel": "Frequency", | |
| "sortColumn": "frequency", | |
| "sortOrder": "descending", | |
| "margin": { | |
| "top": 32, | |
| "right": 2, | |
| "bottom": 40, | |
| "left": 47 | |
| }, | |
| "xAxisLabelOffset": 1.9, | |
| "yAxisLabelOffset": 1.4, | |
| "colorDefault": "#059e00", | |
| "title": "Bar Chart", | |
| "titleOffset": -0.269568, | |
| "yDomainMin": 0 | |
| } | |
| }, | |
| "lineChart": { | |
| "plugin": "lineChart", | |
| "state": { | |
| "xColumn": "timestamp", | |
| "xAxisLabel": "Time", | |
| "yColumn": "temperature", | |
| "yAxisLabel": "Temperature", | |
| "margin": { | |
| "top": 30, | |
| "right": 2, | |
| "bottom": 40, | |
| "left": 47 | |
| }, | |
| "xAxisLabelOffset": 1.9, | |
| "yAxisLabelOffset": 1.4, | |
| "colorDefault": "#0074db", | |
| "title": "Line Chart", | |
| "titleOffset": -0.30433148928 | |
| } | |
| }, | |
| "barChartCSVLoader": { | |
| "plugin": "csvLoader", | |
| "state": { | |
| "csvPath": "simpleBars.csv", | |
| "numericColumns": [ | |
| "frequency" | |
| ] | |
| } | |
| }, | |
| "lineChartCSVLoader": { | |
| "plugin": "csvLoader", | |
| "state": { | |
| "csvPath": "simpleTime.csv", | |
| "numericColumns": [ | |
| "temperature" | |
| ], | |
| "timeColumns": [ | |
| "timestamp" | |
| ] | |
| } | |
| }, | |
| "links": { | |
| "plugin": "links", | |
| "state": { | |
| "bindings": [ | |
| "barChartCSVLoader.data -> barChart.data", | |
| "lineChartCSVLoader.data -> lineChart.data" | |
| ] | |
| } | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment