Skip to content

Instantly share code, notes, and snippets.

@alfredfrancis

alfredfrancis/dimple.html

Created February 23, 2019 11:10
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 alfredfrancis/7fd814d92a09cc5649ecdac0b698b15a to your computer and use it in GitHub Desktop.
Save alfredfrancis/7fd814d92a09cc5649ecdac0b698b15a to your computer and use it in GitHub Desktop.
Download ZIP
Piechart dimplsjs
Raw
dimple.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Lyca Mobiles - Social Media Sentiment analysis </title>
<script src="//d3js.org/d3.v4.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/dimple/2.3.0/dimple.latest.js"></script>
<style>
.main{
width: 100%;
display: flex;
justify-content: space-around;
}
#container {
}
path#dimple-positive---- {
fill: #60a260 !important;
stroke: green !important;
}
rect.dimple-legend.dimple-legend-key.dimple-positive.dimple-custom-legend-key.dimple-custom-format-2 {
fill: #60a260 !important;
stroke: green !important;
}
rect.dimple-legend.dimple-legend-key.dimple-negative.dimple-custom-legend-key.dimple-custom-format-1 {
fill: #e45e5e !important;
stroke: red !important;
}
path#dimple-negative---- {
fill: #e45e5e !important;
stroke: red !important;
}
#container h1 {
width: 600px;
text-align: center;
font-family: "Helvetica Neue", sans-serif;
font-size: 1.3em;
margin: 35px 0px 5px;
}
#container p {
width: 600px;
text-align: center;
font-family: "Helvetica Neue", sans-serif;
font-size: 0.8em;
color: #666;
margin-top: 0;
}
h3{
color:gray
}
h3 span{
color:darkcyan
}
</style>
</head>
<body>
<div class="main">
<div class="container">
<h1>Facebook insights</h2>
<p>Data taken from facebook comments during March 2018 - Feb 2019</p>
<div id="fb_pieChart"></div>
<div>
<h3>Total quries analyzed: <span>284</span></h3>
<h3>Queries replied by Lyca Team: <span>186</span></h3>
<h3>Positive queries : <span>87</span></h3>
<h3>Negative queries : <span>151</span></h3>
<h3>Neutral queries : <span>46</span></h3>
</div>
</div>
<div class="container">
<h1>Twitter insights</h2>
<p>Data taken from replied twitter posts during Dec 2018 - Feb 2019</p>
<div id="twtr_pieChart"></div>
<div>
<h3>Total queries analyzed: <span>172</span></h3>
<h3>Queries replied by Lyca Team: <span>172</span></h3>
<h3>Positive queries : <span>67</span></h3>
<h3>Negative queries : <span>73</span></h3>
<h3>Neutral queries : <span>32</span></h3>
</div>
</div>
</div>
<script>
var fb_insights = { "queries": 284, "replies": 186, "positive": 87, "negative": 151, "neutral": 46, "positive_percent": 30.633802816901408, "negative_percent": 53.16901408450704, "neutral_percent": 16.19718309859155 };
var twitter_insights = { "queries": 172, "replies": 172, "positive": 67, "negative": 73, "neutral": 32, "positive_percent": 38.95348837209303, "negative_percent": 42.44186046511628, "neutral_percent": 18.6046511627907 };
var fb_data = [{
"type": "positive",
"percent": 30.633802816901408,
},
{
"type": "negative",
"percent": 53.16901408450704,
},
{
"type": "neutral",
"percent": 16.19718309859155
}]
var svg = dimple.newSvg("#fb_pieChart", 590, 400);
var myChart = new dimple.chart(svg, fb_data);
myChart.setBounds(20, 20, 460, 360)
myChart.addMeasureAxis("p", "percent");
myChart.addSeries("type", dimple.plot.pie);
myChart.addLegend(500, 20, 90, 300, "left");
myChart.draw();
var twtr_data = [{
"type": "positive",
"percent": 38.95348837209303,
},
{
"type": "negative",
"percent": 42.44186046511628,
},
{
"type": "neutral",
"percent": 18.6046511627907
}]
var svg = dimple.newSvg("#twtr_pieChart", 590, 400);
var myChart = new dimple.chart(svg, twtr_data);
myChart.setBounds(20, 20, 460, 360)
myChart.addMeasureAxis("p", "percent");
myChart.addSeries("type", dimple.plot.pie);
myChart.addLegend(500, 20, 90, 300, "left");
myChart.draw();
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment