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
#import packages | |
import pandas as pd | |
import os | |
import zipfile | |
#change directory | |
os.chdir('/Users/ChiHuang/Documents/python/python_files') | |
os.listdir() | |
#read zip file |
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> | |
<head> | |
<script src="https://d3js.org/d3.v4.min.js" type="text/JavaScript"></script> | |
<style> | |
.rect { | |
fill: rgb(131, 192, 224); | |
stroke: white; |
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
<head> | |
<!-- Load d3 source scripts --> | |
<script src="https://d3js.org/d3.v4.min.js" type="text/JavaScript"></script> | |
<script src="https://d3js.org/colorbrewer.v1.min.js"></script> | |
<!-- style section--> | |
<style> | |
.axis path{ | |
stroke:black; |
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> | |
<head> | |
<!-- Load d3 source scripts --> | |
<script src="https://d3js.org/d3.v4.min.js" type="text/JavaScript"></script> | |
<script src="https://d3js.org/colorbrewer.v1.min.js"></script> | |
<!-- style section--> | |
<style> |
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
function lineChart(data) { | |
//DataSource: eMarketer, March 2018 | |
var data = [ | |
{ year: 2016, media: "Digital", spending: 72.2 }, | |
{ year: 2017, media: "Digital", spending: 90.39 }, | |
{ year: 2018, media: "Digital", spending: 107.3 }, | |
{ year: 2019, media: "Digital", spending: 125.75 }, | |
{ year: 2020, media: "Digital", spending: 142.23 }, | |
{ year: 2021, media: "Digital", spending: 156.43 }, |
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
//draw xAxis and xAxis label | |
xAxis = d3.axisBottom() | |
.scale(xScale) | |
d3.select("svg") | |
.append("g") | |
.attr("class", "axis") | |
.attr("transform", "translate(0,620)") | |
.call(xAxis) | |
.append("text") |
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
//use .nest()function to group data so the line can be computed for each group | |
var sumstat = d3.nest() | |
.key(d => d.media) | |
.entries(data); | |
console.log(sumstat) | |
//set color pallete for different vairables | |
var mediaName = sumstat.map(d => d.key) | |
var color = d3.scaleOrdinal().domain(mediaName).range(colorbrewer.Set2[6]) |
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
//append legends | |
var legend = d3.select("svg") | |
.selectAll('g.legend') | |
.data(sumstat) | |
.enter() | |
.append("g") | |
.attr("class", "legend"); | |
legend.append("circle") | |
.attr("cx", 1000) |
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> | |
<head> | |
<!-- Load d3 source scripts --> | |
<script src="https://d3js.org/d3.v4.min.js" type="text/JavaScript"></script> | |
<!-- style section--> | |
<style> | |
.axis path{ |
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> | |
<head> | |
<!-- Load d3 source scripts --> | |
<script src="https://d3js.org/d3.v4.min.js" type="text/JavaScript"></script> | |
<!-- style section--> | |
<style> | |
.axis path{ |