Skip to content

Instantly share code, notes, and snippets.

@martinstannard

martinstannard/README.md

Last active August 29, 2015 14:09
Show Gist options
  • Save martinstannard/e6341cc39c27e682e745 to your computer and use it in GitHub Desktop.
Save martinstannard/e6341cc39c27e682e745 to your computer and use it in GitHub Desktop.
Download ZIP
Dimple.js for student graph
Raw
README.md

Another graphing test for Dimple

Raw
data.csv
Name Type Score
student1 Comprehension 221
student2 Comprehension 223
student3 Comprehension 223
student4 Comprehension 239
student5 Comprehension 241
student6 Comprehension 243
student7 Comprehension 285
student8 Comprehension 249
student1 Spelling 32
student2 Spelling 40
student3 Spelling 20
student4 Spelling 40
student5 Spelling 27
student6 Spelling 20
student7 Spelling 20
student8 Spelling 164
Raw
index.html
<div id="chartContainer">
<script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.4.13/d3.min.js"></script>
<script src="http://dimplejs.org/dist/dimple.v2.1.0.min.js"></script>
<script type="text/javascript">
var svg = dimple.newSvg("#chartContainer", 590, 400);
d3.csv("data.csv", function (data) {
var myChart = new dimple.chart(svg, data);
myChart.setBounds(75, 30, 480, 330)
myChart.addMeasureAxis("x", "Score");
var y = myChart.addCategoryAxis("y", "Name");
y.addOrderRule("Name");
myChart.addSeries("Type", dimple.plot.bar);
myChart.addLegend(60, 10, 510, 20, "right");
myChart.draw();
});
</script>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment