Skip to content

Commit

Permalink
Updated editor
Browse files Browse the repository at this point in the history
  • Loading branch information
@amitkaps
amitkaps committed Dec 5, 2017
1 parent 31723e3 commit b5ded09
Show file tree
Hide file tree
Showing 8 changed files with 124 additions and 64 deletions.
17 changes: 11 additions & 6 deletions index.html
View file
Expand Up @@ -14,23 +14,28 @@
<script src="/static/lib/markdown.js"> </script>

<!-- Vega, Vega-Lite Dependencies -->
<script src="/static/lib/vega.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vega/3.0.8/vega.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vega-lite/2.0.3/vega-lite.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vega-embed/3.0.0-rc7/vega-embed.js"></script>

<!-- <script src="/static/lib/vega.min.js"></script>
<script src="/static/lib/vega-lite.min.js"></script>
<script src="/static/lib/vega-embed.min.js"></script>

-->
<!-- Markdown Dependencies -->
<script src="/static/lib/marked.js"></script>
<script src="/static/lib/marked.min.js"></script>
<script src="/static/lib/yaml.min.js"></script>


<body class="yin">
<header>
<a href="/"><img class="logo" src="/static/img/visdown.svg"></a>
<nav>
<img class="icon" id="view" src="/static/img/view.svg"></button>
<!-- <img class="icon" id="view" src="/static/img/view.svg"></button>
<img class="icon" id="edit" style="display:none;" src="/static/img/pencil.svg">
<a href="#data"><img class="icon" src="/static/img/datasets.svg"></a>
<img class="icon" id="contrast" src="/static/img/contrast.svg">
<a href="#share"><img class="icon" src="/static/img/share.svg"></a>
<img class="icon" id="contrast" src="/static/img/contrast.svg">
<a href="#share"><img class="icon" src="/static/img/share.svg"></a> -->

<div class="icons-bottom">
<a href="http://twitter.com/amitkaps" target="_blank">
Expand Down
91 changes: 50 additions & 41 deletions js/editor.js
View file
@@ -1,6 +1,9 @@
// For Editor Operations
const visdown = window.visdown
const datum = window.datum
// const visdown = window.visdown
// const vega = window.vega
// const vl = window.vl
// const marked = window.marked
// const YAML = window.yaml

/**
* Calculate a 32 bit FNV-1a hash
Expand Down Expand Up @@ -52,7 +55,7 @@ function _keys(str) {
let start = 0
visCode.forEach(function(code, i){
let visText = _getVisText(code);
let spec = datum(visText)
let spec = YAML.parse(visText)
let hash = _hashFnv32a(visText.trim());
console.log(spec, code, hash);
startIndex = checkString.indexOf(code)
Expand Down Expand Up @@ -99,7 +102,7 @@ function update() {
elVis.id = "vis-editor-" + i;
elVis.setAttribute('data-hash', key.hash);
editor.addLineWidget(endLine, el);
vega.embed(elVis, spec, opts)
vegaEmbed(elVis, spec, opts)
console.log(el);
} else {
node = editor.lineInfo(endLine).widgets[0].node
Expand All @@ -108,7 +111,7 @@ function update() {
console.log(hash, key.hash)
if (hash != key.hash) {
node.setAttribute('data-hash', key.hash);
vega.embed(node, spec, opts);
vegaEmbed(node, spec, opts);
}
}
})
Expand Down Expand Up @@ -144,6 +147,12 @@ function _debounce(func, wait, immediate) {

window.onload = function () {

// Need to have vega, vega-lite and marked as dependencies
const vega = window.vega
const vl = window.vl
const marked = window.marked
const YAML = window.yaml

// Codemirror setup
let sc = document.getElementById("input-text");
let content = sc.textContent || sc.innerText || sc.innerHTML;
Expand Down Expand Up @@ -178,45 +187,45 @@ window.onload = function () {
elEdit = document.getElementById("edit")
elContrast = document.getElementById("contrast")

function changeContrast( event ){
elEditor.style.backgroundColor = "white";
// function changeContrast( event ){
// elEditor.style.backgroundColor = "white";

}

let darkLayout = false;
function changeContrast ( event ) {
if ( darkLayout === false ) {
document.body.className = 'yang';
elCodemirror.style.backgroundColor = "#111"
elCodemirror.style.color = "#FDFDFD"
} else {
document.body.className = 'yin';
elCodemirror.style.backgroundColor = "#FDFDFD"
elCodemirror.style.color = "#111"
}
console.log(darkLayout)
darkLayout = !darkLayout;
}

function showOutput( event ) {
console.log("showOutput")
elView.style.display = "none"
elEdit.style.display = "block"
elInput.style.display = "none";
elOutput.style.display = "block";
visdown(text, elOutput);
}
// }

// let darkLayout = false;
// function changeContrast ( event ) {
// if ( darkLayout === false ) {
// document.body.className = 'yang';
// elCodemirror.style.backgroundColor = "#111"
// elCodemirror.style.color = "#FDFDFD"
// } else {
// document.body.className = 'yin';
// elCodemirror.style.backgroundColor = "#FDFDFD"
// elCodemirror.style.color = "#111"
// }
// console.log(darkLayout)
// darkLayout = !darkLayout;
// }

// function showOutput( event ) {
// console.log("showOutput")
// elView.style.display = "none"
// elEdit.style.display = "block"
// elInput.style.display = "none";
// elOutput.style.display = "block";
// visdown(text, elOutput);
// }

function showInput( event) {
elView.style.display = "block"
elEdit.style.display = "none"
elInput.style.display = "block";
elOutput.style.display = "none";
}
// function showInput( event) {
// elView.style.display = "block"
// elEdit.style.display = "none"
// elInput.style.display = "block";
// elOutput.style.display = "none";
// }

elView.onclick = showOutput
elEdit.onclick = showInput
elContrast.onclick = changeContrast
// elView.onclick = showOutput
// elEdit.onclick = showInput
// elContrast.onclick = changeContrast

var waiting;
//Run on editor change
Expand Down
15 changes: 13 additions & 2 deletions pages/data.md
View file
@@ -1,6 +1,12 @@
# Datasets

Use these datasets to try out Visdown and start making interactive visualisations.
You can use external datasets or use the following datasets to try out Visdown.

## Loading data
You can use any csv, tsv or json file to load your data set.

```
data:
## Sample
Expand All @@ -20,7 +26,12 @@ Metadata
- Dimensions `(p)` : 3
```vis
data(data/sample.csv) | point(x=sales:Q, y=profit:Q, color=area:N)
data:
- url: sample.csv
mark: point
encoding:
x:
(data/sample.csv) | point(x=sales:Q, y=profit:Q, color=area:N)
```

## Cars
Expand Down
42 changes: 38 additions & 4 deletions pages/intro.md
View file
Expand Up @@ -7,9 +7,16 @@ Write visualisation using a simple declarative markup like you would write code.
*Make simple static visualisations*

```vis
data(cars.csv)
filter(datum.kmpl > 20)
point(x=kmpl:Q, y=price:Q)
data:
url: data/cars.csv
mark: point
encoding:
x:
field: kmpl
type: quantitative
y:
field: price
type: quantitative
```

Visdown is based on the grammar of interactive graphic (vega-lite) which allows you to specify the visualisation including interactions in a declarative fashion.
Expand All @@ -19,7 +26,34 @@ Visdown is based on the grammar of interactive graphic (vega-lite) which allows
Select the circles with the mouse

```vis
data(cars.csv) | point(x=kmpl:Q, y=price:Q, color=bhp:Q)
data:
url: "data/cars.csv"
mark: circle
selection:
brush:
type: interval
encoding:
x:
type: quantitative
field: kmpl
scale:
domain: [12,25]
y:
type: quantitative
field: price
scale:
domain: [100,900]
color:
condition:
selection: brush
field: type
type: nominal
value: grey
size:
type: quantitative
field: bhp
width: 450
height: 300
```

---
Expand Down
11 changes: 6 additions & 5 deletions src/visdown.js
View file
Expand Up @@ -7,9 +7,10 @@
;(function() {

// Need to have vega, vega-lite and marked as dependencies
const vega = window.vega
const vl = window.vl
const marked = window.marked
// const vega = window.vega
// const vl = window.vl
// const marked = window.marked
// const YAML = window.yaml


// Start Marked Renderer
Expand All @@ -34,13 +35,13 @@ function _render(element) {
let num = specs.length;
for (var i=0; i < num; i++) {
let el = "#vis-" + i;
let jsonSpec = datum(specs[i].textContent)
let jsonSpec = YAML.parse(specs[i].textContent)
console.log(jsonSpec)
//console.log(vl.compile(jsonVis).spec == undefined)
htmlString = "<div class='vega-embed' id='vis-" + i + "'></div>"
specs[i].parentNode.insertAdjacentHTML('beforebegin', htmlString);
specs[i].parentNode.style.display = 'none';
vega.embed(el, jsonSpec, opts);
vegaEmbed(el, jsonSpec, opts);
};
};

Expand Down
4 changes: 2 additions & 2 deletions static/lib/vega-embed.min.js
View file

Large diffs are not rendered by default.

4 changes: 2 additions & 2 deletions static/lib/vega-lite.min.js
View file

Large diffs are not rendered by default.

4 changes: 2 additions & 2 deletions static/lib/vega.min.js
View file

Large diffs are not rendered by default.

0 comments on commit b5ded09

Please sign in to comment.