Skip to content

Instantly share code, notes, and snippets.

@mikelotis
Last active December 22, 2018 22:10
Show Gist options
  • Save mikelotis/4176672486b650e7b21891071e90f13b to your computer and use it in GitHub Desktop.
Save mikelotis/4176672486b650e7b21891071e90f13b to your computer and use it in GitHub Desktop.
Edmonton - Residential Building Permits (echarts.js)
border: yes
width: 500
height: 500
<!DOCTYPE html >
<html lang="en" style="height: 90%">
<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>Pie Chart</title>
<style>
div#main {
margin: 0 auto;
padding-top: 2%;
}
</style>
</head>
<body style="height: 100%;">
<div id="main" style="width: 80%; height: 80%;"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/4.1.0/echarts.min.js"></script>
<script lang="babel" type="text/babel">
const log = console.log;
const url = "https://gist.githubusercontent.com/mikelotis/"+
"484782bf436625625657bdca95fcee10/raw/54bb0f1380ddcaa9f19"+
"b3c77037c30266a18348a/Residential_Building_Permits_2009-2014.csv"
const myChart = echarts.init(document.getElementById('main'));
d3.csv(url).then(makePie);
function makePie(csv) {
// years aggregated array
const yearsAgg= d3.nest()
.key(d => d.Year)
.entries(csv)
.map(d => {
return {
"name": +d.key,
"value": d.values.length
};
});
//pie series
const option = {
title: {
text: "Edmonton - Residential Building Permits",
x: "center"
},
series: [
{
type: "pie",
radius: "82%",
center: ["50%", "55%"],
data: yearsAgg,
label: {
show: true,
formatter: "{b} : {c}"
}
}
]
};
myChart.setOption(option);
};
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment