The easy way to add diagrams to your webpages.
If you use npm, npm install dgf. Otherwise download the latest release. You can load directly from dgfjs.org. For example:
<script src="https://dgfjs.org/dgf.js"></script>Or for the minified version:
<script src="https://dgfjs.org/dgf.min.js"></script><head>
<title>DGF Tag</title>
<!-- Add D3 and DGF -->
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://dgfjs.org/dgf.min.js"></script>
<script>
dgf.init({
setups: [
dgf.setupD3,
dgf.setupDGF,
dgf.setupBasic,
dgf.setupHierarchic,
dgf.setupMultiSeries,
dgf.setupTime
]
});
</script>
<link rel="stylesheet" type="text/css" href="https://dgfjs.org/dgf.css">
</head>
<body>
<figure id="dgf_001" class="dgf" data-dgf='{
"reader":{
"data":"x,y\nA,1\nB,4\nC,9,\nD,16\nE,25"
},
"template": {
"colorScale": {
"range": "slategray"
}
},
"extend":"dgf.setupBarDiagram"
}'>
<figcaption>New Diagram</figcaption>
</figure>
</body>
</html>When you display the above page in a web browser a bar diagram will be displayed:
<html>
<head>
<title>DGF with TinyMCE</title>
<!-- Add D3, TinyMCE and DGF -->
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tinymce/4.6.4/tinymce.min.js"></script>
<script src="https://dgfjs.org/dgf.min.js"></script>
<!-- Initialize DGF and add the DGF Plugin to TinyMCE -->
<script>
dgf.init({
setups: [
dgf.setupD3,
dgf.setupDGF,
dgf.setupBasic,
dgf.setupHierarchic,
dgf.setupMultiSeries,
dgf.setupTime
]
});
tinymce.init({
selector:"textarea",
external_plugins: {
"dgf": "https://dgfjs.org/dgf-tinymce-plugin.min.js"
},
toolbar: "undo redo | alignleft aligncenter alignright alignjustify | dgf",
height: 600,
content_css : "https://dgfjs.org/dgf.css"
});
</script>
<link rel="stylesheet" type="text/css" href="https://dgfjs.org/dgf.css">
</head>
<body>
<h2>DGF with TinyMCE</h2>
<textarea>
<figure id="dgf_001" class="dgf mceNonEditable" contenteditable="false" data-dgf='{
"reader":{
"data":"x,y\nA,1\nB,4\nC,9,\nD,16\nE,25"
},
"extend":"dgf.setupBarDiagram"
}'>
<figcaption class="mceEditable" contenteditable="true">New Diagram</figcaption>
</figure>
</textarea>
</body>
</html>See dgf-tinymce-plugin to to learn more about the DGF TinyMCE Plugin.
<html>
<head>
<title>DGF JS</title>
<!-- Add D3 and DGF -->
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://dgfjs.org/dgf.min.js"></script>
</head>
<body>
<figure id="fig-1">
<figcaption>New Diagram</figcaption>
</figure>
<script>
var template = dgf.templateLayers()
.width(400)
.height(200)
.margin({top: 30, right: 30, bottom: 30, left: 30 })
.x(function(d) { return +d.x; })
.y(function(d) { return +d.y; })
.color(function(d) { return +d.y; })
.xScale(d3.scaleLinear().domain([-10,15]))
.yScale(d3.scaleLinear().domain([-15,15]))
.colorScale(d3.scaleOrdinal()
.domain(d3.map(function(d) { return +d.x; }))
.range(['black']))
.layer0(dgf.templateAxis()
.yTicks(6)
.yLabel('y-axis'))
.layer1(dgf.templateLine())
.layer2(dgf.templateCircle()
.y1(function(d) { return d.x / d.y; })
.y1Scale(d3.scaleLinear()
.domain([-15,15])
.range([1,10]))
.colorScale(d3.scaleThreshold()
.domain([-10,-5,0,5,10])
.range(dgf.schemeYlOrDr[5])));
var reader = dgf.readerDSV()
.delimiter(',')
.data('x,y\n-5,0.5\n-3,1\n-1,2\n1,-4\n3,-8\n9,16')
.callback(function(selection) {
selection.each(function(data, index) {
d3.select(this).call(template);
});
});
d3.select('#fig-1')
.call(reader);
</script>
</body>
</html>