Skip to content

Instantly share code, notes, and snippets.

View amitkaps's full-sized avatar

Amit Kapoor amitkaps

View GitHub Profile
<!DOCTYPE html>
<style>
#chart div {
background-color: brown;
height: 25px;
margin: 5px;
}
</style>
<!DOCTYPE html>
<script src="../lib/d3.min.js"></script>
<div id="chart"></div>
<script>
var data = [5, 25, 15, 20, 10];
d3.select("#chart")
<!DOCTYPE html>
<script src="../lib/d3.min.js"></script>
<svg id="chart"></svg>
<script>
var data = [5, 25, 15, 20, 10];
<!DOCTYPE html>
<script src="../lib/d3.min.js"></script>
<script src="../lib/vega1.5.js"></script>
<script src="../lib/vega-lite.js"></script>
<div id="chart"></div>
<script type="text/javascript">
@amitkaps
amitkaps / Bar_svg.html
Last active October 6, 2015 03:53
Bar Chart - SVG
<!DOCTYPE html>
<svg class="chart" width="250" height="200" fill="brown" >
<rect x="0" y="0" width="50" height="25"></rect>
<rect x="0" y="30" width="250" height="25"></rect>
<rect x="0" y="60" width="150" height="25"></rect>
<rect x="0" y="90" width="200" height="25"></rect>
<rect x="0" y="120" width="100" height="25"></rect>
</svg>
<!DOCTYPE html>
<script src="../lib/d3.min.js"></script>
<script src="../lib/vega.min.js"></script>
<div id="chart"></div>
<script>
function parse(spec) {
vg.parse.spec(spec, function(chart) {
<!DOCTYPE html>
<canvas id="chart" width="250" height="200"></canvas>
<script>
var data = [5, 25, 15, 20, 10];
var canvas = document.getElementById("chart");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "brown";
for (i = 0; i < data.length; i++){
<html lang="en">
<head>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/prism/1.5.1/themes/prism.min.css'/>
<script src='https://cdnjs.cloudflare.com/ajax/libs/marked/0.3.6/marked.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/prism/1.5.1/prism.min.js' data-manual></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/prism/1.5.1/components/prism-python.min.js' data-manual></script>
<script src="https://rawgit.com/kokes/nbviewer.js/master/lib/nbv.js"></script>
<link rel='stylesheet' src="https://rawgit.com/kokes/nbviewer.js/master/lib/nbv.css">
# Visdown
**Make visualisations using only markdown**
Write visualisation using a simple declarative markup like you would write code. Just wrap it in fenced block (three backticks) and mark the language as `vis`.
*Make simple static visualisations*
```vis
data:
@amitkaps
amitkaps / 0_reuse_code.js
Created June 2, 2017 13:07
Here are some things you can do with Gists in GistBox.
// Use Gists to store code you would like to remember later on
console.log(window); // log the "window" object to the console