dgf
v0.9.82
Published
Diagram Factory
Downloads
7
Maintainers
thmuflReadme
dgf
The easy way to add diagrams to your webpages.
Resources
Installing
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>Tag Example
<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:
TinyMCE Example
<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.
JavaScript Example
<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>