Skip to content

Instantly share code, notes, and snippets.

@mikelotis

mikelotis/.block

Last active December 22, 2018 21:59
Show Gist options
  • Save mikelotis/b21da224f19046ee189c3c9c4f381ab8 to your computer and use it in GitHub Desktop.
Save mikelotis/b21da224f19046ee189c3c9c4f381ab8 to your computer and use it in GitHub Desktop.
Download ZIP
Edmonton 311 Requests - ThemeRiver
Raw
.block
width: 1000
height: 750
border: yes
Raw
README.md
Raw
index.html
<!DOCTYPE html>
<html lang="en" style="height: 100%">
<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>ThemeRiver</title>
</head>
<body style="height: 100%; margin: 0">
<div id="main" style="height: 100%"></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/"+
"67a924261a2c3726747bf887000c2672/raw/b590604a08db874503"+
"193881aea6e3b83d2fddc4/311(July-21-2018)-Flattened.json";
const myChart = echarts.init(document.getElementById('main'));
const months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
d3.json(url)
.then(makeThemeRiver);
function makeThemeRiver(json) {
//-----------------------------Data prep
//311 Requests Processed Data, view link below for more details
//https://beta.observablehq.com/@mikelotis/edmonton-311-requests-business-units-steamgraph
const jsonData = json.data;
const filterBizUnits = (arr) => Object.keys(arr).filter(p => p != "month");
//Converting jsonData to correspond to the format specified on the link below
//https://ecomfe.github.io/echarts-doc/public/en/option.html#series-themeRiver.data
const themeRiverData = jsonData.map(d => {
//311 business units and associated month
const bizUnits = filterBizUnits(d);
const month = d.month;
//data as per specification (themeRiver.data)
const chartData = bizUnits.map( u => {
return [months.indexOf(month), d[u], u];
});
return chartData;
}).reduce((acc, curVal) => acc.concat(curVal), []);
//-----------------------------Data prep
//---------------------------Data Viz
//option for myChart
const option = {
title: {
text: "Edmonton - 311 Requests - ThemeRiver",
x: "center"
},
legend: {
type: "scroll",
orient: "horizontal",
top: "7%",
data: filterBizUnits(jsonData[0])
},
tooltip: {
trigger: "axis",
axisPointer: {
type: "line",
lineStyle: {
color: "rgba(0,0,0,0.2)",
width: 1,
type: "solid"
}
}
},
singleAxis: {
type: 'category',
boundaryGap: true,
axisLabel: {
interval: 0,
showMaxLabel: true,
showMinLabel: true,
formatter: (value, index) => `${months[value]}`
},
axisTick: {
alignWithLabel: true
},
data: d3.range(0, 12),
splitLine: {
show: false
}
},
series: [
{
label: {
normal: {
show: false
}
},
type: "themeRiver",
itemStyle: {
emphasis: {
shadowBlur: 20,
shadowColor: "rgba(0, 0, 0, 0.8)"
}
},
data: themeRiverData
}
]
};
//---------------------------Data Viz
/*
interesting - themeriver shows more biz units than steam graph in the link below
https://bl.ocks.org/mikelotis/67a924261a2c3726747bf887000c2672
TODO: through trial and error, alter offset and order for stack layout -
to investigate if can view all biz units
*/
myChart.setOption(option);
};
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment