Skip to content

Instantly share code, notes, and snippets.

@DavidStrada

DavidStrada/index.html

Forked from anonymous/index.html
Created May 22, 2016 19:50
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save DavidStrada/37d2cf004c9f39b3c3956cc46b7ca21f to your computer and use it in GitHub Desktop.
Save DavidStrada/37d2cf004c9f39b3c3956cc46b7ca21f to your computer and use it in GitHub Desktop.
Download ZIP
JS Bin // source http://jsbin.com/ravahipiye
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://dimplejs.org/dist/dimple.v2.1.6.min.js"></script>
<style id="jsbin-css">
.dimple-example {
height: 400px;
}
</style>
</head>
<body>
<div class="dimple-example"></div>
<script id="jsbin-javascript">
var svg = d3.select('.dimple-example')
.append('svg')
.attr('width', "100%")
.attr('height', "100%");
d3.tsv( 'http://dimplejs.org/data/example_data.tsv' , function ( data ) {
var myChart = new dimple.chart(svg, data);
myChart.setMargins(0, 0, 200, 0); // This can change at any time.
myChart.addMeasureAxis("p", "Unit Sales");
var ring = myChart.addSeries("Owner", dimple.plot.pie);
ring.innerRadius = "75%";
myChart.addLegend(500, 20, 90, 300, "left");
var svgWidth = svg.style('width').replace('px',"");
var svgHeight = svg.style('height').replace('px',"");
var textCenterX = parseInt( (svgWidth - 250 ) / 2, 10 );
var textCenterY = parseInt( ( svgHeight - 15) / 2, 10 );
// needs to calculate ( width height ) of the text before it gets inserted or after...
svg
.select('g')
.append('text')
.text('$432M')
.attr('x', textCenterX ) // This needs to be calculated dynamically
.attr('y', textCenterY) // This needs to be calculated dynamically
.attr('font-size', "28px");
console.log( svg.style('width').replace('px',"") );
console.log( svg.style('height').replace('px',"") );
myChart.defaultColors = [
new dimple.color("#7DC855", "blue", 1),
new dimple.color("#358ED7", "", 1),
new dimple.color("red", "green", 1),
new dimple.color("violet", "green", 1),
new dimple.color("yellow", "green", 1),
new dimple.color("orange", "green", 1),
new dimple.color("purple", "green", 1),
];
myChart.draw();
});
</script>
<script id="jsbin-source-css" type="text/css">.dimple-example {
height: 400px;
}</script>
<script id="jsbin-source-javascript" type="text/javascript">var svg = d3.select('.dimple-example')
.append('svg')
.attr('width', "100%")
.attr('height', "100%");
d3.tsv( 'http://dimplejs.org/data/example_data.tsv' , function ( data ) {
var myChart = new dimple.chart(svg, data);
myChart.setMargins(0, 0, 200, 0); // This can change at any time.
myChart.addMeasureAxis("p", "Unit Sales");
var ring = myChart.addSeries("Owner", dimple.plot.pie);
ring.innerRadius = "75%";
myChart.addLegend(500, 20, 90, 300, "left");
var svgWidth = svg.style('width').replace('px',"");
var svgHeight = svg.style('height').replace('px',"");
var textCenterX = parseInt( (svgWidth - 250 ) / 2, 10 );
var textCenterY = parseInt( ( svgHeight - 15) / 2, 10 );
// needs to calculate ( width height ) of the text before it gets inserted or after...
svg
.select('g')
.append('text')
.text('$432M')
.attr('x', textCenterX ) // This needs to be calculated dynamically
.attr('y', textCenterY) // This needs to be calculated dynamically
.attr('font-size', "28px");
console.log( svg.style('width').replace('px',"") );
console.log( svg.style('height').replace('px',"") );
myChart.defaultColors = [
new dimple.color("#7DC855", "blue", 1),
new dimple.color("#358ED7", "", 1),
new dimple.color("red", "green", 1),
new dimple.color("violet", "green", 1),
new dimple.color("yellow", "green", 1),
new dimple.color("orange", "green", 1),
new dimple.color("purple", "green", 1),
];
myChart.draw();
});</script></body>
</html>
Raw
jsbin.ravahipiye.css
.dimple-example {
height: 400px;
}
Raw
jsbin.ravahipiye.js
var svg = d3.select('.dimple-example')
.append('svg')
.attr('width', "100%")
.attr('height', "100%");
d3.tsv( 'http://dimplejs.org/data/example_data.tsv' , function ( data ) {
var myChart = new dimple.chart(svg, data);
myChart.setMargins(0, 0, 200, 0); // This can change at any time.
myChart.addMeasureAxis("p", "Unit Sales");
var ring = myChart.addSeries("Owner", dimple.plot.pie);
ring.innerRadius = "75%";
myChart.addLegend(500, 20, 90, 300, "left");
var svgWidth = svg.style('width').replace('px',"");
var svgHeight = svg.style('height').replace('px',"");
var textCenterX = parseInt( (svgWidth - 250 ) / 2, 10 );
var textCenterY = parseInt( ( svgHeight - 15) / 2, 10 );
// needs to calculate ( width height ) of the text before it gets inserted or after...
svg
.select('g')
.append('text')
.text('$432M')
.attr('x', textCenterX ) // This needs to be calculated dynamically
.attr('y', textCenterY) // This needs to be calculated dynamically
.attr('font-size', "28px");
console.log( svg.style('width').replace('px',"") );
console.log( svg.style('height').replace('px',"") );
myChart.defaultColors = [
new dimple.color("#7DC855", "blue", 1),
new dimple.color("#358ED7", "", 1),
new dimple.color("red", "green", 1),
new dimple.color("violet", "green", 1),
new dimple.color("yellow", "green", 1),
new dimple.color("orange", "green", 1),
new dimple.color("purple", "green", 1),
];
myChart.draw();
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment