Skip to content

Instantly share code, notes, and snippets.

/Donut-Chart-with-gRaphaël.markdown

Created April 21, 2015 01:26
Show Gist options
  • Save anonymous/8c51078348a5a3ac9084 to your computer and use it in GitHub Desktop.
Save anonymous/8c51078348a5a3ac9084 to your computer and use it in GitHub Desktop.
Download ZIP
Donut Chart with gRaphaël
Raw
Donut-Chart-with-gRaphaël.markdown
Raw
index.html
<html lang="en">
<head>
<!-- start: Meta -->
<meta charset="utf-8">
<script type="text/javascript" src="http://52.6.119.161/assets/5c350dda/jquery.js"></script>
<script type="text/javascript">
/*<![CDATA[*/
$.ajaxSetup({
data: {"CSRF_TOKEN": "967b621bade43b51ae4d961b09ac10088da8a29a"},
cache:false
});
/*]]>*/
</script>
</script>
<!-- Load c3.css -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.css" rel="stylesheet" type="text/css">
<!-- Load d3.js and c3.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js" charset="utf-8"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.js"></script>
<title>CoMotion</title>
<!-- end: Meta -->
<!-- start: Mobile Specific -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<!-- end: Mobile Specific -->
<!-- start: CSS -->
<link href="http://52.6.119.161//css/animate.min.css?ver=0.11.1" rel="stylesheet">
<link href="http://52.6.119.161//css/bootstrap.min.css?ver=0.11.1" rel="stylesheet">
<link href="http://52.6.119.161//css/datepicker.css?ver=0.11.1" rel="stylesheet">
<link href="http://52.6.119.161//css/style.css?ver=0.11.1" rel="stylesheet">
<link
href="http://52.6.119.161//resources/font-awesome/css/font-awesome.min.css?ver=0.11.1"
rel="stylesheet">
<link href="http://52.6.119.161//css/bootstrap-wysihtml5.css?ver=0.11.1"
rel="stylesheet">
<link href="http://52.6.119.161//css/flatelements.css?ver=0.11.1" rel="stylesheet">
<!-- end: CSS -->
<!-- The HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="/js/html5shiv.js"></script>
<link id="ie-style" href="/css/ie.css" rel="stylesheet">
<![endif]-->
<!--[if IE 9]>
<link id="ie9style" href="/css/ie9.css" rel="stylesheet">
<![endif]-->
<!-- start: JavaScript -->
<script type="text/javascript"
src="http://52.6.119.161/js/bootstrap.min.js?ver=0.11.1"></script>
<script type="text/javascript"
src="http://52.6.119.161/js/ekko-lightbox-modified.js?ver=0.11.1"></script>
<script type="text/javascript"
src="http://52.6.119.161/js/modernizr.js?ver=0.11.1"></script>
<script type="text/javascript"
src="http://52.6.119.161/js/jquery.cookie.js?ver=0.11.1"></script>
<script type="text/javascript"
src="http://52.6.119.161/js/jquery.highlight.min.js?ver=0.11.1"></script>
<script type="text/javascript"
src="http://52.6.119.161/js/jquery.autosize.min.js?ver=0.11.1"></script>
<script type="text/javascript"
src="http://52.6.119.161/js/jquery.timeago.js?ver=0.11.1"></script>
<script type="text/javascript"
src="http://52.6.119.161/js/locales/jquery.timeago.en.js?ver=0.11.1"></script>
<script type="text/javascript"
src="http://52.6.119.161/js/jquery.knob.min.js?ver=0.11.1"></script>
<script type="text/javascript"
src="http://52.6.119.161/js/wysihtml5-0.3.0.js?ver=0.11.1"></script>
<script type="text/javascript"
src="http://52.6.119.161/js/bootstrap3-wysihtml5.js?ver=0.11.1"></script>
<script type="text/javascript"
src="http://52.6.119.161/js/jquery.nicescroll.min.js?ver=0.11.1"></script>
<script type="text/javascript"
src="http://52.6.119.161/js/jquery.flatelements.js?ver=0.11.1"></script>
<script type="text/javascript"
src="http://52.6.119.161/js/jquery.placeholder.js?ver=0.11.1"></script>
<script type="text/javascript"
src="http://52.6.119.161/js/jquery.iframe-transport.js?ver=0.11.1"></script>
<script type="text/javascript"
src="http://52.6.119.161/js/jquery.ui.widget.js?ver=0.11.1"></script>
<script type="text/javascript"
src="http://52.6.119.161/js/jquery.fileupload.js?ver=0.11.1"></script>
<script type="text/javascript"
src="http://52.6.119.161/js/jquery.color-2.1.0.min.js?ver=0.11.1"></script>
<!-- start: render additional head (css and js files) -->
<script type="text/javascript"
src="http://52.6.119.161/js/jasny-bootstrap.js"></script>
<!-- start: CSS -->
<link href="http://52.6.119.161/css/jasny-bootstrap.min.css" rel="stylesheet">
<link href="http://52.6.119.161/themes/CoMotion/css/datepicker.css?ver=0.11.1" rel="stylesheet">
<link href="http://52.6.119.161/themes/CoMotion/css/theme.css?ver=0.11.1" rel="stylesheet">
<link href="http://52.6.119.161/themes/CoMotion/css/flatelements.css?ver=0.11.1" rel="stylesheet">
<!--<link href="/themes/CoMotion/font/open_sans/open-sans.css" rel="stylesheet"> -->
<!-- end: CSS -->
<!-- start: JS -->
<script type="text/javascript" src="http://52.6.119.161/js/jasny-bootstrap.js"></script>
<script type="text/javascript" src="http://fb.me/react-0.13.2.js"></script>
<script type="text/javascript" src="http://fb.me/JSXTransformer-0.13.2.js"></script>
<script type="text/jsx" src="http://52.6.119.161/themes/CoMotion/js/user_recommendation_list.js"></script>
<script type="text/jsx" src="http://52.6.119.161/themes/CoMotion/js/user_compatibility.js"></script>
<!-- end: JS -->
<!-- end: render additional head -->
<script type="text/javascript"
src="//maps.googleapis.com/maps/api/js?key=AIzaSyApfAEDQx11EyCou2TrTmR5kEtPYmgsBkg"></script>
<script type="text/javascript"
src="/js/comotion-geolocation.js?ver=0.11.1"></script>
<!-- Global app functions -->
<script type="text/javascript" src="http://52.6.119.161/js/app.js?ver=0.11.1"></script>
<!-- end: JavaScript -->
<!-- start: Favicon and Touch Icons -->
<link rel="apple-touch-icon" sizes="57x57" href="/ico/apple-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="/ico/apple-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="//ico/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="/ico/apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="/ico/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="/ico/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="/ico/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="/ico/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="/ico/apple-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192" href="/ico/android-icon-192x192.png">
<link rel="icon" type="image/png" sizes="32x32" href="/ico/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="/ico/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="/ico/favicon-16x16.png">
<link rel="manifest" href="/manifest.json">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="/ms-icon-144x144.png">
<meta name="theme-color" content="#ffffff">
<!-- end: Favicon and Touch Icons -->
</head>
<body><script type="text/javascript" src="http://52.6.119.161/assets/a72f133a/stream.js"></script>
<script type="text/javascript" src="http://52.6.119.161/assets/a72f133a/wall.js"></script>
<script type="text/javascript">
/*<![CDATA[*/
var localeId = 'en';
var csrfName = 'CSRF_TOKEN';
var csrfValue = '967b621bade43b51ae4d961b09ac10088da8a29a';
var baseUrl = 'http://52.6.119.161';
var streamUrl = '/index.php?r=user/profile/stream&limit=-limit-&filters=-filter-&sort=-sort-&from=-from-&mode=normal&uguid=ba502dda-cdd9-4038-bb2b-72948de10437';
/*]]>*/
</script>
<nav id="myNavmenu" class="navmenu navmenu-default navmenu-fixed-left navmenu-inverse offcanvas" role="navigation">
<div>
<img id="user-account-image" height="32" width="32" alt="32x32" style="width: 32px; height: 32px;"
src="http://52.6.119.161/uploads/profile_image/40c689b4-0e15-4115-8816-40bff619d859.jpg?cacheId=0">
<p>
CoMotion Admin </p>
</div>
<!-- <a class="navmenu-brand" href="#">Brand</a> -->
</nav>
<!-- start: first top navigation bar -->
<div id="topbar-first" class="topbar">
<div class="container">
<div class="notifications pull-right">
<div class="btn-group">
<a href="#" data-toggle="offcanvas" data-target=".navmenu" data-canvas="body">
</a>
</div>
</div>
<!--
<div class="topbar-brand hidden-xs">
</div>
<div class="topbar-actions pull-right">
</div>
<div class="notifications pull-right">
</div>
-->
</div>
</div>
<!-- end: first top navigation bar -->
<!-- start: second top navigation bar -->
<!--
<div id="topbar-second" class="topbar">
<div class="container">
<ul class="nav ">
</ul>
<ul class="nav pull-right" id="search-menu-nav">
<li class="dropdown">
<a href="#" id="search-menu" class="dropdown-toggle" data-toggle="dropdown">
<i class="fa fa-search"></i>
</a>
<ul class="dropdown-menu pull-right" id="search-menu-dropdown">
</ul>
</li>
</ul>
</div>
</div>
-->
<!-- start: show content (and check, if exists a sublayout -->
<div class="container profile-layout-container">
<div class="row">
<div class="">
<div class="comotion-profile comotion-profile-header">
<!-- TODO: port inline style to css -->
<div class="image-upload-container profile-user-photo-container" style="width: 320px; height: 320px; z-index:300">
<!-- profile image output-->
<img class="profile-user-photo" id="user-profile-image"
src="http://52.6.119.161/uploads/profile_image/ba502dda-cdd9-4038-bb2b-72948de10437.jpg?cacheId=0"
data-src="holder.js/320x320" alt="320x320" style="width: 320px; height: 320px; z-index: 200"/>
<div id="chart-holder">
<div id="chart-percent">15</div>
<div id="chart-center"></div>
<div id="chart"></div>
</div>
</div>
<div class="comotion-profile-data">
<h1>Ken Myer</h1>
<h2>Interim Executive / Consultant</h2>
<h3>An inspiring leader who develops clear market-focused strategies that drive revenue growth</h3>
<h2>I am a <em>partner</em>
seeking a <em><span class="role">innovator</em></h2>
<!-- FOLLOW BUTTON -->
<a class="btn btn-primary" id="5535a0fc4cc12506337946" href="#">Unfollow</a>
<!-- TODO: CONNECT and MESSAGE buttons -->
<hr/>
<div class="comotion-profile-about">
<h3>About</h3>
<p>Experienced technology executive with a record of success in both Fortune 100 and startup environments. A history of exceeding company objectives by combining strong leadership skills with operational effectiveness and deep sales/marketing, experience. An inspiring leader who develops clear market-focused strategies that drive revenue growth, recruits an “A” player team, and implements effective processes and metrics to scale and ensure accountability. Hands-on acquisition and divestiture experience in the software and telecommunications industries as an executive in a public company. Recognized three times for building a “best company to work for” and in 2009 recognized as one of Seattle&#039;s most influential business leaders.</p>
</div>
<p>https://twitter.com/kenmyer</p>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="">
<!-- CONTENT STARTS HERE -->
<!-- mode 1: global user recommendations -->
<div class="panel panel-default">
<div id="recommendedUsers" class="panel-body"
data-base-url=""
data-in-userid="ba502dda-cdd9-4038-bb2b-72948de10437"
data-out-userid="40c689b4-0e15-4115-8816-40bff619d859">
</div>
</div>
<script type="text/jsx">
var container = $("#recommendedUsers");
$(document).ready(function() {
React.render(
<RecommendationList base_url={container.attr('data-base-url')}
data={STUB_DATA}
in_userid={container.attr('data-in-userid')} />,
container[0]
);
});
</script>
<div class="comotion-events-placeholder">
<h3>Events</h3>
<h4>Ken Myer is attending:</h4>
<img src="/themes/CoMotion/img/fake_events_360.png" />
</div>
<ul class="nav nav-tabs wallFilterPanel" id="filter" style="display: none;">
<li class=" dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Filter <b
class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#" class="wallFilter" id="filter_entry_userinvoled"><i
class="fa fa-square-o"></i> Where I´m involved</a>
</li>
<li><a href="#" class="wallFilter" id="filter_entry_mine"><i
class="fa fa-square-o"></i> Created by me</a></li>
<!-- post module related -->
<li><a href="#" class="wallFilter" id="filter_entry_files"><i
class="fa fa-square-o"></i> Content with attached files </a></li>
<li><a href="#" class="wallFilter" id="filter_posts_links"><i
class="fa fa-square-o"></i> Posts with links</a>
</li>
<li><a href="#" class="wallFilter" id="filter_model_posts"><i
class="fa fa-square-o"></i> Posts only</a></li>
<!-- /post module related -->
<li class="divider"></li>
<li><a href="#" class="wallFilter" id="filter_entry_archived"><i
class="fa fa-square-o"></i> Include archived posts </a></li>
<li><a href="#" class="wallFilter" id="filter_visibility_public"><i
class="fa fa-square-o"></i> Only public posts</a>
</li>
<li><a href="#" class="wallFilter" id="filter_visibility_private"><i
class="fa fa-square-o"></i> Only private posts</a>
</li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Sorting <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#" class="wallSorting" id="sorting_c"><i
class="fa fa-check-square-o"></i> Creation time</a></li>
<li><a href="#" class="wallSorting" id="sorting_u"><i
class="fa fa-square-o"></i> Last update</a></li>
</ul>
</li>
</ul>
<div id="wallStream">
<!-- DIV for a normal wall stream -->
<div class="s2_stream" style="display:none">
<div class="s2_streamContent"></div>
<div class="loader streamLoader">
<div class="sk-spinner sk-spinner-three-bounce">
<div class="sk-bounce1"></div>
<div class="sk-bounce2"></div>
<div class="sk-bounce3"></div>
</div>
</div>
<div class="emptyStreamMessage">
<div class="placeholder ">
<div class="panel">
<div class="panel-body">
<b>This profile stream is still empty!</b> </div>
</div>
</div>
</div>
<div class="emptyFilterStreamMessage">
<div class="placeholder ">
<div class="panel">
<div class="panel-body">
No matches with your selected filters! </div>
</div>
</div>
</div>
</div>
<!-- DIV for an single wall entry -->
<div class="s2_single" style="display: none;">
<div class="back_button_holder">
<a href="#"
class="singleBackLink btn btn-primary">Back to stream</a><br><br>
</div>
<div class="p_border"></div>
<div class="s2_singleContent"></div>
<div class="loader streamLoaderSingle"></div>
<div class="test"></div>
</div>
</div>
<!-- show "Load More" button on mobile devices -->
<div class="col-md-12 text-center visible-xs visible-sm">
<button id="btn-load-more" class="btn btn-primary btn-lg ">Load more</button>
<br/><br/>
</div>
<div class="comotion-interests-placeholder">
<h3>Interests</h3>
<div>Interests</div>
</div>
</div>
</div>
</div>
<!-- end: show content -->
<!-- start: Modal (every lightbox will/should use this construct to show content)-->
<div class="modal" id="globalModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<div class="loader">
<div class="sk-spinner sk-spinner-three-bounce">
<div class="sk-bounce1"></div>
<div class="sk-bounce2"></div>
<div class="sk-bounce3"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- end: Modal -->
<script type="text/javascript">
// Replace the standard checkbox and radio buttons
$('body').find(':checkbox, :radio').flatelements();
</script>
<div style='display:none'><form id="postLink_5535a0fc4cc12506337946" action="/index.php?r=user/profile/unfollow&amp;uguid=ba502dda-cdd9-4038-bb2b-72948de10437" method="POST">
<div style="display:none"><input type="hidden" value="967b621bade43b51ae4d961b09ac10088da8a29a" name="CSRF_TOKEN" /></div></form></div><script type="text/javascript">
/*<![CDATA[*/
jQuery(function($) {
s = new Stream('#wallStream');
s.showStream();
currentStream = s;
mainStream = s;
$('#btn-load-more').click(function() { currentStream.loadMore(); })
$("#5535a0fc4cc12506337946").on("click", function(){ $("#postLink_5535a0fc4cc12506337946").submit(); return true; });
});
/*]]>*/
</script>
</body>
</html>
Raw
script.js
var width = 90,
height = 90,
radius = Math.min(width, height) / 2;
var color = d3.scale.ordinal()
.range(["#128BD3", "rgba(200,200,220,0.5)"]);
var arc = d3.svg.arc()
.outerRadius(radius )
.innerRadius(radius - 17);
var pie = d3.layout.pie()
.sort(null)
.value(function(d) { return d.population; });
var svg = d3.select("#chart").append("svg")
.attr("width", width)
.attr("height", height)
.append("g")
.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
var data = [{ 'population': 15 }, { 'population': 85 },];
var g = svg.selectAll(".arc")
.data(pie(data))
.enter().append("g")
.attr("class", "arc");
g.append("path")
.attr("d", arc)
.style("fill", function(d) { return color(d.data.population); });
Raw
style.css
span {
background: #003F87;
border-radius: 4px;
color: #fff;
font-size: 18px;
padding: 6px
}
.match{ color: white;}
#user-profile-image{
z-index: 2;
position: relative;
}
#chart-holder{
position: relative;
}
#chart{
border: 1px solid blue;
width: 89px;
height: 89px;
position: absolute;
margin-top: -46px;
right: 0;
z-index: 3000;
}
#chart-percent{
height: 56px;
width: 56px;
right: 8px;
top: -23px;
z-index: 3003;
position: absolute;
color: #128BD3;
font-size: 38px;
}
#chart-center{
height: 56px;
width: 56px;
right: 15px;
top: -28px;
z-index: 3001;
position: absolute;
background: #fff;
border-radius:50%;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment