Interesting - ThemeRiver shows more business units than steam graph in the link below
Steam Graph
Through trial and error, alter offset and order for stack layout - to investigate if can view all business units.
Last active
December 22, 2018 21:59
-
-
Save mikelotis/b21da224f19046ee189c3c9c4f381ab8 to your computer and use it in GitHub Desktop.
Edmonton 311 Requests - ThemeRiver
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| width: 1000 | |
| height: 750 | |
| border: yes |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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