Skip to content

Commit f65cb23

Browse files
alexhzhaialexhzhai
committedMay 17, 2020
update worldmap with tasks
1 parent c4b9547 commit f65cb23

File tree

4 files changed

+251
-14
lines changed

4 files changed

+251
-14
lines changed
 

‎translation-dashboard/assets/js/trans-dash.js

+212
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,212 @@
1+
var target_lang = getQueryVariable("target_lang");
2+
console.log("target language: " + target_lang);
3+
4+
var margin = { top: 50, right: 0, bottom: 100, left: 30 },
5+
width = 960 - margin.left - margin.right,
6+
height = 1800 - margin.top - margin.bottom, // legend y position control
7+
gridSize = Math.floor(width / 24),
8+
legendElementWidth = gridSize*2,
9+
buckets = 9,
10+
colors = ["#ffffd9","#edf8b1","#c7e9b4","#7fcdbb","#41b6c4","#1d91c0","#225ea8","#253494","#081d58"], // alternatively colorbrewer.YlGnBu[9]
11+
// TODO Make days and times automatically created based on the all-para-count file
12+
days = Array.from(Array(44).keys()).slice(1), // All translated versions have 43 chapters, 'slice' is for starting from 1 not 0
13+
times = ['en', 'ba', 'bu', 'du', 'fi', 'ge', 'hu', 'pol', 'por', 'ru', 'uk'];
14+
// datasets = ["../data/data.tsv", "../data/data2.tsv"];
15+
datasets = ["data/para-count-heatmap/all-para-count.tsv"];
16+
17+
var svg = d3.select("#chart").append("svg")
18+
.attr("width", width + margin.left + margin.right)
19+
.attr("height", height + margin.top + margin.bottom)
20+
.append("g")
21+
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
22+
23+
// selectAll is just in case these labels already exist. In that case, it updates the corresponding information.
24+
var dayLabels = svg.selectAll(".dayLabel")
25+
.data(days)
26+
.enter().append("text")
27+
.text(function (d) { return d; })
28+
.attr("x", 0)
29+
.attr("y", function (d, i) { return i * gridSize; })
30+
.style("text-anchor", "end")
31+
.attr("transform", "translate(-6," + gridSize / 1.5 + ")")
32+
.attr("class", function (d, i) { return ((i >= 0 && i <= 4) ? "dayLabel mono axis axis-workweek" : "dayLabel mono axis"); })
33+
.attr("id", function(d) {return d;})
34+
.on("click", chapterLabelOnClick)
35+
// .on({
36+
// "mouseover": function(d) {
37+
// d3.select(this).style("cursor", "pointer");
38+
// },
39+
// "mouseout": function(d) {
40+
// d3.select(this).style("cursor", "default");
41+
// }
42+
// })
43+
;
44+
45+
var timeLabels = svg.selectAll(".timeLabel")
46+
.data(times)
47+
.enter().append("text")
48+
.text(function(d) { return d; })
49+
.attr("x", function(d, i) { return i * gridSize; })
50+
.attr("y", 0)
51+
.style("text-anchor", "middle")
52+
.attr("transform", "translate(" + gridSize / 2 + ", -6)")
53+
.attr("class", function(d, i) { return ((i >= 7 && i <= 16) ? "timeLabel mono axis axis-worktime" : "timeLabel mono axis"); })
54+
.attr("id", function(d) {return d;})
55+
.on("click", textLabelOnClick)
56+
.on({
57+
"mouseover": function(d) {
58+
d3.select(this).style("cursor", "pointer");
59+
},
60+
"mouseout": function(d) {
61+
d3.select(this).style("cursor", "default");
62+
}
63+
})
64+
;
65+
66+
// Drawing cells
67+
var heatmapChart = function(tsvFile) {
68+
d3.tsv(tsvFile,
69+
function(d) {
70+
// Accessor function to tsvFile, convert string to numbers during the loading of the data.
71+
return {
72+
day: +d.day,
73+
hour: +d.hour,
74+
value: +d.value,
75+
};
76+
},
77+
function(error, data) {
78+
// Quantile scales map a sampled input domain to a discrete range.
79+
var colorScale = d3.scale.quantile()
80+
// .domain([0, buckets - 1, d3.max(data, function (d) { return d.value; })])
81+
.domain([0, 1, 2, 3, 5, 10, 20, 30, 40, d3.max(data, function (d) { return Math.abs(d.value - data[d.day-1].value); })])
82+
.range(colors);
83+
//TODO domain array automatic generation
84+
// console.log(colorScale.quantiles())
85+
// console.log(colorScale(0))
86+
// console.log(colorScale(1))
87+
// console.log(colorScale(2))
88+
// console.log(colorScale(3))
89+
// console.log(colorScale(6))
90+
// console.log(colorScale(15))
91+
// console.log(colorScale(25))
92+
// console.log(colorScale(33))
93+
// console.log(colorScale(42))
94+
95+
var cards = svg.selectAll(".hour")
96+
.data(data, function(d) {return d.day+':'+d.hour;});
97+
98+
cards.enter().append("rect")
99+
.attr("x", function(d) { return (d.hour - 1) * gridSize; })
100+
.attr("y", function(d) { return (d.day - 1) * gridSize; })
101+
.attr("rx", 4)
102+
.attr("ry", 4)
103+
.attr("class", "hour bordered")
104+
.attr("width", gridSize)
105+
.attr("height", gridSize)
106+
.style("fill", colors[0]);
107+
108+
/*
109+
Fill color when launching the page
110+
Color depends on the difference of # paragraphs compared with English version (data[0]~data[42])
111+
*/
112+
cards.transition().duration(1000)
113+
// .style("fill", function(d) { return colorScale(d.value); });
114+
.style("fill", function(d) { return colorScale(Math.abs(d.value - data[d.day-1].value)); });
115+
116+
cards.append("title");
117+
cards.select("title").text(function(d) { return d.value; });
118+
119+
/*
120+
Coding tips: .enter is usually followed by .append which adds elements to the DOM.
121+
Here we are joining cards array to an empty selection (which is a very common pattern in the examples
122+
on the D3 website. ref: https://d3indepth.com/enterexit/)
123+
*/
124+
cards.enter().append("text")
125+
.text(function(d) { return d.value; })
126+
.on("click", cellOnClick)
127+
.on({
128+
"mouseover": function(d) {
129+
if(d.hour == 2){
130+
d3.select(this).style("cursor", "pointer");
131+
}
132+
},
133+
"mouseout": function(d) {
134+
d3.select(this).style("cursor", "default");
135+
}
136+
})
137+
.attr("class", "mono")
138+
.attr("x", function(d) { return (d.hour - 0.5) * gridSize; })
139+
.attr("y", function(d) { return (d.day - 0.35) * gridSize; })
140+
.attr("font-weight", "bold")
141+
.style('fill', 'FireBrick')
142+
.style("text-anchor", "middle");
143+
144+
cards.exit().remove();
145+
146+
147+
var legend = svg.selectAll(".legend")
148+
.data([0].concat(colorScale.quantiles()), function(d) { return d; });
149+
150+
legend.enter().append("g")
151+
.attr("class", "legend");
152+
153+
legend.append("rect")
154+
.attr("x", function(d, i) { return legendElementWidth * i; })
155+
.attr("y", height)
156+
.attr("width", legendElementWidth)
157+
.attr("height", gridSize / 2)
158+
.style("fill", function(d, i) { return colors[i]; });
159+
160+
legend.append("text")
161+
.attr("class", "mono")
162+
.text(function(d) { return "≥ " + Math.round(d); })
163+
.attr("x", function(d, i) { return legendElementWidth * i; })
164+
.attr("y", height + gridSize);
165+
166+
legend.exit().remove();
167+
168+
});
169+
};
170+
171+
heatmapChart(datasets[0]);
172+
173+
// var datasetpicker = d3.select("#dataset-picker").selectAll(".dataset-button")
174+
// .data(datasets);
175+
//
176+
// datasetpicker.enter()
177+
// .append("input")
178+
// .attr("value", function(d){ return "Dataset " + d })
179+
// .attr("type", "button")
180+
// .attr("class", "dataset-button")
181+
// .on("click", function(d) {
182+
// heatmapChart(d);
183+
// });
184+
185+
function textLabelOnClick(d) {
186+
if(this.id == "en") {
187+
// window.location.href = "../sequences_sunburst/index.html?type=" + this.id;
188+
} else {
189+
console.log("jump to page " + this.id)
190+
window.location.href = "pie-chart.html?target_lang=" + this.id;
191+
}
192+
}
193+
194+
function chapterLabelOnClick(d) {
195+
// if(this.id) {
196+
// window.location.href = "table.html?chapter=" + this.id;
197+
// } else {
198+
// // console.log("jump to page " + this.id)
199+
// // window.location.href = "pie-chart.html?target_lang=" + this.id;
200+
// }
201+
}
202+
203+
function cellOnClick(d) {
204+
if(d.hour == 2) {
205+
// Column 2: Basque translation
206+
window.location.href = "table.html?chapter=" + d.day;
207+
} else {
208+
// console.log("jump to page " + this.id)
209+
// window.location.href = "pie-chart.html?target_lang=" + this.id;
210+
}
211+
}
212+

‎translation-dashboard/pie-chart.html

+7-1
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,13 @@ <h1 id="pie_chart_title"></h1>
2222
<!--<div id="explanation"/>-->
2323
</a>
2424
</div>
25-
2625
<script type="text/javascript" src="assets/js/pie-chart.js"></script>
26+
27+
<div id="chart"></div>
28+
<div id="dataset-picker">
29+
<g id="heatmapChart">
30+
</div>
31+
<script type="text/javascript" src="assets/js/trans-dash.js"></script>
32+
2733
</body>
2834
</html>

‎worldmap/README.md

+21-13
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,25 @@
1-
# Web development notes
2-
## General information
3-
### [GLOBAL HUCK Website](https://rosetta.univ-lille.fr/worldmap/)
1+
# Web Development Notes
2+
## General Information
3+
### [GLOBAL HUCK Website, not up to date](https://rosetta.univ-lille.fr/worldmap/)
44
### Features we already have:
55
- Three types of bubbles on the map: blue for well-resourced languages, orange for medium-resourced languages and red for low resourced-languages.
6-
- Mouseover bubbles for general information
6+
- Mouseover bubbles for general information.
77
- The bigger green bubble in Brazil’s position is clickable: You gonna get a menu with 4 translators with the corresponding book cover and description at the bottom of the page. Changing the cover and the description by clicking different translators name. Hide all by clicking other bubbles.
88
### Goal
9-
- For the data visualization part, we want to have a website as beautiful and functional as the [The translation routes](https://routes-traductions.huma-num.fr) website.
10-
- For the interactive part, it should accept user input. [LATER]
11-
## Development resources
12-
### Datamaps
13-
- [Code on GitHub](https://github.com/markmarkoh/datamaps/blob/master/README.md#getting-started)
14-
- [Official Website](http://datamaps.github.io)
15-
### TODO
16-
1. Update bubbles information based on the [translations information](references/List%20of%20translations%20to%20feed%20the%20map.pdf)
17-
2. Correct wrong bubble information [LATER]
9+
The goal of the World Map is to create a beautiful and functional global display of translations.
10+
### Tasks
11+
- [ ] Input more data/fix data for different countries with Ronald’s resources and Shelley’s comments.
12+
- [ ] Move the dots onto the city of publication, not a random place in the country.
13+
- [ ] Map Inter-country Connections
14+
- [ ] Visualize connections and translations over time with scroll
15+
- [ ] World Map Search Function (search for specific versions, dates, translators, locations, etc)
16+
- [ ] Allow users to upload their own resources and create their own datapoints
17+
- [ ] Add information/about section about the purpose of the World Map
18+
## Translation Resources
19+
- [Translation Information](references/List%20of%20translations%20to%20feed%20the%20map.pdf)
20+
## Development Resources
21+
### Leaflet
22+
- [Leaflet](https://leafletjs.com/)
23+
### DataMaps
24+
- [DataMaps](http://datamaps.github.io)
25+
- [Code on GitHub](https://github.com/markmarkoh/datamaps/blob/master/README.md#getting-started)

‎worldmap/index2.html

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Title</title>
6+
</head>
7+
<body>
8+
<h2>test</h2>
9+
</body>
10+
</html>
11+

0 commit comments

Comments
 (0)
Please sign in to comment.