A Coder or a Designer?--Project from Sihan Yuanecharts value配置项内容和展示
This is my first individual visualization work, aiming to help students in our class to form a team.
配置项如下
var dataCS = [
[30, 13, 3, 10, 8, 72, 'Hannah Abbott '],
[19, 14, 3, 6, 8, 60, 'Katie Bell '],
[7, 14, 3, 9, 10, 51, 'Phineas Nigellus Black'],
[31, 7, 6, 9, 6, 70, 'Susan Bones'],
[35, 12, 4, 8, 10, 77, 'Vincent Crabbe'],
[27, 13, 6, 9, 4, 69, 'Marcus Flint'],
[26, 23, 4, 8, 8, 83, 'Filius Flitwick'],
[11, 14, 3, 6, 7, 47, 'Rubeus Hagrid'],
[32, 15, 6, 9, 9, 79, 'Graham Montague'],
[24, 13, 3, 7, 8, 71, 'Theodore Nott'],
[17, 14, 3, 7, 7, 58,'Garrick Ollivander'],
[9, 8, 1, 4, 5, 31, 'Antioch Peverell'],
[23, 15, 7, 10, 10, 71, 'Sturgis Podmore'],
[10, 10, 2, 3, 4, 38, 'Poppy Pomfrey'],
[13, 18, 1, 5, 8, 49, 'Quirinus Quirrell'],
[16, 16, 5, 8, 6, 62, 'Tom Marvolo Riddle'],
[15, 12, 3, 7, 8, 56, 'Albert Runcorn'],
[19, 12, 4, 5, 7, 58, 'Kingsley Shacklebolt'],
[28, 17, 9, 10, 2, 79, 'Aurora Sinistra'],
[18, 13, 1, 10, 8, 61, 'Rita Skeeter'],
[12, 15, 3, 8, 7, 54, 'Severus Snape'],
[15, 15, 2, 8, 9, 58, 'Pomona Sprout'],
[11, 15, 2, 3, 7, 46, 'Emmeline Vance'],
[15, 5, 3, 3, 3, 39,'Newt Scamander'],
[5, 13, 2, 3, 5, 33, 'Amelia Bones'],
[17, 21, 2, 7, 10, 62, 'Thorfinn Rowle'],
[21, 21, 2, 8, 9, 69, 'Rufus Scrimgeour'],
[10, 13, 2, 7, 8, 50, 'Irma Pince']
];
var dataHCI = [
[4, 26, 2, 3, 9, 51, 'Ludo Bagman'],
[26, 15, 7, 9, 5, 76, 'Frank Bryce'],
[16, 24, 3, 10, 8, 71, 'Alecto Carrow'],
[25, 26, 7, 9, 9, 90, 'Gellert Grindelwald'],
[16, 23, 5, 5, 7, 68, 'Rolanda Hooch'],
[9, 18, 2, 4, 6, 48, 'Helga Hufflepuff'],
[5, 20, 3, 6, 7, 47, 'Viktor Krum'],
[17, 22, 3, 6, 7, 62, 'Bellatrix Lestrange'],
[24, 16, 5, 8, 9, 68, 'Neville Longbottom'],
[21, 17, 7, 8, 4, 62, 'Remus Lupin'],
[6, 29, 2, 9, 10, 59, 'Lily Potter'],
[10, 21, 5, 8, 9, 61, 'Helena Ravenclaw'],
[14, 28, 2, 8, 8, 70, 'Salazar Slytherin'],
[11, 15, 2, 6, 6, 47, 'Ron Weasley'],
[10, 20, 5, 7, 9, 54, 'Colin Creevey'],
[12, 20, 7, 9, 6, 62, 'Peter Pettigrew'],
[12, 20, 3, 10, 9, 62, 'Draco Malfoy'],
[9, 26, 3, 8, 8, 62, 'Penelope Clearwater'],
[19, 14, 4, 7, 8, 58, 'Michael Corner'],
[4, 19, 3, 4, 4, 40, 'Amos Diggory '],
[28, 18, 6, 8, 7, 76, 'Igor Karkaroff '],
[23, 21, 7, 8, 10, 80, 'Silvanus Kettleburn '],
[25, 16, 7, 9, 9, 74, 'Sirius Black']
];
var dataMT = [
[16, 21, 2, 8, 9, 60, 'Cuthbert Binns'],
[25, 18, 4, 8, 8, 71, 'Terry Boot'],
[22, 19, 5, 8, 7, 71, 'Lavender Brown'],
[14, 20, 1, 4, 9, 58, 'Millicent Bulstrode'],
[14, 21, 2, 8, 8, 59, 'Amycus Carrow'],
[17, 20, 4, 8, 9, 67, 'Reginald Cattermole'],
[27, 23, 5, 9, 9, 79, 'Mary Cattermole '],
[18, 15, 3, 8, 8, 59, 'Cho Chang '],
[16, 22, 3, 9, 8, 69, 'Fleur Delacour '],
[8, 20, 2, 8, 10, 56, 'Seamus Finnigan'],
[20, 11, 1, 7, 8, 60, 'Cornelius Fudge'],
[11, 23, 2, 6, 10, 60, 'Godric Gryffindor'],
[14, 18, 3, 7, 8, 59, 'Hermione Granger'],
[26, 19, 6, 9, 8, 78, 'Xenophilius Lovegood'],
[16, 13, 4, 7, 6, 56, 'Ernie Macmillan'],
[10, 18, 2, 6, 8, 50, 'Minerva McGonagall'],
[13, 24, 3, 8, 10, 66, 'Cormac McLaggen'],
[16, 19, 1, 7, 10, 61, 'Harry Potter'],
[10, 21, 1, 8, 5, 53, 'James Potter '],
[6, 20, 1, 4, 7, 43, 'Rowena Ravenclaw'],
[22, 24, 3, 9, 8, 77, 'Demelza Robins'],
[21, 23, 2, 7, 8, 69, ' Augustus Rookwood'],
[5, 22, 1, 5, 10, 50, 'Stanley Shunpike'],
[13, 18, 2, 7, 6, 52, 'Horace Slughorn'],
[23, 21, 3, 9, 9, 73, 'Hepzibah Smith'],
[15, 12, 3, 6, 5, 47, 'Nymphadora Tonks'],
[6, 13, 2, 3, 8, 40, 'Oliver Wood']
];
var dataOther = [
[11, 21, 2, 5, 8, 56, 'Bathilda Bagshot'],
[16, 16, 5, 7, 6, 63, 'Dean Thomas'],
[7, 16, 2, 9, 9, 54, 'Pansy Parkinson'],
[6, 22, 3, 3, 9, 49, 'Charity Burbage'],
[10, 12, 2, 5, 5, 38, 'Charity Burbage']
];
var schema = [
{name: 'coder', index: 0, text: 'Coder'},
{name: 'designer', index: 1, text: 'Desginer'},
{name: 'visualization', index: 2, text: 'Visualization'},
{name: 'computer usage', index: 3, text: 'Computer usage'},
{name: 'collaboration', index: 4, text: 'Collaboration'},
{name: 'overallratings', index: 5, text: 'Overallratings'},
{name: 'name', index: 6, text: 'Name'}
];
var itemStyle = {
normal: {
opacity: 0.8,
shadowBlur: 10,
shadowOffsetX: 0,
shadowOffsetY: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
};
option = {
backgroundColor: '#404a59',
title : {
text: 'A Coder or a Designer?',
x:'center',
textStyle: {
color: '#fff'
}
},
color: ['#dd4444', '#426ab3', '#fec42c', '#80F1BE'], //不同图例的颜色
legend: {
y: 'top',
data: ['Computer Science','Human Computer Interaction','Media Technology', 'Other related majors'],
textStyle: {
color: '#fff',
fontSize: 16
}
},
grid: {
x: '10%',
x2: 150,
y: '18%',
y2: '10%'
},
tooltip: {
backgroundColor: '#100',
borderColor: '#777',
borderWidth: 1,
formatter: function (obj) {
var value = obj.value;
return '<div style="border-bottom: 1px solid rgba(255,255,255,.3); font-size: 18px;padding-bottom: 7px;margin-bottom: 7px">'
+ obj.seriesName + '：'
+ '</div>'
+ schema[0].text + '：' + value[0] + '<br>'
+ schema[1].text + '：' + value[1] + '<br>'
+ schema[2].text + '：' + value[2] + '<br>'
+ schema[3].text + '：' + value[3] + '<br>'
+ schema[4].text + '：' + value[4] + '<br>'
+ schema[5].text + '：' + value[5] + '<br>'
+ schema[6].text + '：' + value[6] + '<br>';
}
},
xAxis: {
type: 'value',
name: 'Coder-programming skills',
nameGap: 12,
nameTextStyle: {
color: '#fff',
fontSize: 11
},
max: 31,
splitLine: {
show: false
},
axisLine: {
lineStyle: {
color: '#eee'
}
}
},
yAxis: {
type: 'value',
name: 'Designer-art,talk,evaluation',
nameLocation: 'end',
nameGap: 10,
nameTextStyle: {
color: '#fff',
fontSize: 12
},
axisLine: {
lineStyle: {
color: '#eee'
}
},
splitLine: {
show: false
}
},
series: [
{
name: 'CS',
type: 'scatter',
itemStyle: itemStyle,
data: dataCS
},
{
name: 'HCI',
type: 'scatter',
itemStyle: itemStyle,
data: dataHCI
},
{
name: 'MT',
type: 'scatter',
itemStyle: itemStyle,
data: dataMT
},
{
name: 'Other',
type: 'scatter',
itemStyle: itemStyle,
data: dataOther
}
]
};
截图如下
