What is on the programme?
Featuring expert speakers, EU DataViz 2021 provided an overview of innovative techniques and best practices used in both the private and the public sectors, offering the participants valuable insights into open-data and data-visualisation techniques and practices.
Click here to download the programme.
Check the agenda below to access presentations and recordings of the sessions.
This day casted light on open data as the ‘fuel’ to be reused for shaping Europe’s digital future. Challenges and benefits of reusing data and making it interoperable were discussed along with other related topics.
The thematic sessions were divided as follows:
- Thematic session 1: Creating open data ecosystems. Open data has demonstrated to be the key element of innovation to shape our digital future. In order to unleash its potential, governments need to implement open data policies to ensure trustworthy data-sharing. In order to support this, this session proposed insights on how projects that contribute to the open data policy.
- Thematic session 2: Data for people. In the digital transformation, citizens play an essential role in this process. This thematic session highlighted the importance of citizen engagement and projects with a special user-oriented approach.
- Thematic session 3: Facilitating data reuse. In order to ensure open data, there has to be acceptance and implementation of some principles and strategies. In this session, we focused on the enabling factors as FAIR principles of data, data literacy, and other projects to ensure interoperability.
Going from open data towards data visualisation, this day highlighted the importance of communicating data efficiently to convey the right message. It brought best practices and techniques to build data narratives and ensure to better serve citizens.
The thematic sessions were divided as follows:
- Thematic session 1: From open data to data visualisation. This session served as a bridge between open data and data visualisation, focusing on the importance of openness in building a powerful dataviz.
- Thematic session 2: Serving citizens with dataviz. Based around best practices and innovative techniques, this session focused on how to better engage citizens in the process and how to serve them better.
- Thematic session 3: Using dataviz for policymaking. In this session, we focused on how data visualisation can support the decision-making cycle, with special focus on the EU public sector.
Fighting youth unemployment, improving the sustainability of the food system, bringing EU decision-making closer to citizens, these are some of the ambitions put forward by the teams of application developers selected to compete in the finals of this year´s edition of the open data competition.
At this event, the 9 shortlisted teams pitched their apps to the jury who decided the final ranking of the winning teams in each category. The thematic challenges were introduced by an expert panel and the event closed with an award ceremony. To find out more about the annual EU open data competition, visit the EU Datathon website.
Hiba jelentkezett a sablon feldolgozása során.
The following has evaluated to null or missing:
==> assetRenderer.getArticle [in template "10157#10197#8348058" at line 11, column 28]
----
Tip: It's the step after the last dot that caused this error, not those before it.
----
Tip: If the failing expression is known to legally refer to something that's sometimes null or missing, either specify a default value like myOptionalVar!myDefault, or use <#if myOptionalVar??>when-present<#else>when-missing</#if>. (These only cover the last step of the expression; to cover the whole expression, use parenthesis: (myOptionalVar.foo)!myDefault, (myOptionalVar.foo)??
----
----
FTL stack trace ("~" means nesting-related):
- Failed at: #assign article = assetRenderer.getAr... [in template "10157#10197#8348058" at line 11, column 9]
----
1<#assign liferay_ui = PortletJspTagLibs["/META-INF/liferay-ui.tld"] />
2<#assign liferay_portlet = PortalJspTagLibs["/META-INF/liferay-portlet-ext.tld"] />
3
4<#assign columnsCounter = 1 />
5<#assign displayItemsInColumns = 1 />
6<#list entries as entry>
7 <#assign entry = entry />
8 <#assign assetRenderer = entry.getAssetRenderer() />
9 <#assign className = assetRenderer.getClassName() >
10
11 <#assign article = assetRenderer.getArticle() />
12 <#assign articleId = article.getArticleId() />
13 <#assign groupId = article.getGroupId() />
14
15 <#assign docXml = saxReaderUtil.read(entry.getAssetRenderer().getArticle().getContent()) />
16
17 <#assign date = docXml.valueOf("//dynamic-element[@name='Date1w4g']/dynamic-content/text()") />
18
19 <#if entry_index == 0 >
20 <#assign dateTraker = date />
21 </#if>
22 <#assign order = docXml.valueOf("//dynamic-element[@name='Order']/dynamic-content/text()") />
23 <#if order?has_content >
24 <#if dateTraker != date >
25 <#assign dateTraker = date />
26 <#assign columnsCounter = columnsCounter+1 />
27 </#if>
28 </#if>
29</#list>
30
31<div class="row op-agenda">
32
33 <#list entries as entry>
34 <#assign entry = entry />
35 <#assign assetRenderer = entry.getAssetRenderer() />
36 <#assign className = assetRenderer.getClassName() >
37
38 <#assign article = assetRenderer.getArticle() />
39 <#assign articleId = article.getArticleId() />
40 <#assign groupId = article.getGroupId() />
41
42 <#assign defaultLocale = "en_GB" />
43
44 <#assign docXml = saxReaderUtil.read(entry.getAssetRenderer().getArticle().getContent()) />
45
46 <#assign order = docXml.valueOf("//dynamic-element[@name='Order']/dynamic-content/text()") />
47 <#if order?has_content >
48
49 <#assign title = docXml.valueOf("//dynamic-element[@name='TitleOfTheSession']/dynamic-content/text()") />
50 <#assign subtitle = docXml.valueOf("//dynamic-element[@name='Subtitle']/dynamic-content/text()") />
51 <#assign ShortDescription = docXml.valueOf("//dynamic-element[@name='ShortDescription']/dynamic-content/text()") />
52 <#assign name = docXml.valueOf("//dynamic-element[@name='NameOfSpeaker']/dynamic-content[@language-id='"+defaultLocale+"']/text()") />
53 <#assign time = docXml.valueOf("//dynamic-element[@name='Time']/dynamic-content/text()") />
54 <#assign tags = docXml.valueOf("//dynamic-element[@name='Tags']/dynamic-content/text()") />
55 <#assign tagsBgColor = docXml.valueOf("//dynamic-element[@name='TagsBgColor']/dynamic-content/text()") />
56 <#assign tagsTextColor = docXml.valueOf("//dynamic-element[@name='TagsTextColor']/dynamic-content/text()") />
57 <#assign join = docXml.valueOf("//dynamic-element[@name='Join']/dynamic-content/text()") />
58 <#assign date = docXml.valueOf("//dynamic-element[@name='Date1w4g']/dynamic-content/text()") />
59
60 <#assign photoSrc = docXml.valueOf("//dynamic-element[@name='PictureOfTheSpeaker']/dynamic-content[@language-id='"+defaultLocale+"']/text()") />
61 <#assign jsonPhotoSrc = jsonFactoryUtil.createJSONObject(photoSrc)>
62 <#if photoSrc != "" >
63 <#assign photo = "/documents/"+ jsonPhotoSrc.groupId +"/" +jsonPhotoSrc.fileEntryId +"/"+ jsonPhotoSrc.name +"/"+jsonPhotoSrc.uuid >
64 </#if>
65
66 <#if entry_index == 0 >
67 <#assign dateTraker = date />
68 </#if>
69 <#if displayItemsInColumns == 1 && (dateTraker != date && entry_index != 0) >
70 </div></div>
71 </#if>
72 <#if displayItemsInColumns == 1 && (dateTraker != date || entry_index == 0) >
73 <div class="col-md-${12/columnsCounter} col-sm-12 agenda-column">
74 <div class="agendaBoxBorder">
75 <div class="agenda-column-header">
76 <#assign dateY = date?datetime("yyyy-MM-dd")>
77 <#assign dateY = dateY?date />
78 <h2>${dateY?string["dd MMMM yyyy"]} </h2>
79 <h3>${subtitle}<h3>
80 </div>
81 </#if>
82
83 <div class="col-md-12 p-0 agenda-item order-${order}-t">
84 <div class="col-12 tags">
85 <#list tags?split(";") as tag>
86 <button
87 style="border: unset; color: ${tagsTextColor}; background: ${tagsBgColor};"
88 class="btn btn-sm btn-default"
89 type="button">
90 <span class="lfr-btn-label">${tag}</span>
91 </button>
92 </#list>
93 </div>
94 <div class="col-12 time">
95 ${time}
96 </div>
97 <#if name != "" >
98 <div class="col-12 title-agenda">
99 <h2>${title}<h2>
100 </div>
101 <div class="col-12 photo-name">
102 <div class="col-3 photo">
103 <img src="<#if photoSrc != ''>${photo}</#if>" alt=""/>
104 </div>
105 <div class="col-9 name">
106 ${name}
107 </div>
108 <div class="col-9 shortdescription">
109 ${ShortDescription}
110 </div>
111 </div>
112 </#if>
113 <div class="col-12 join">
114 ${join}
115 </div>
116 </div>
117 <#if displayItemsInColumns == 1 && dateTraker != date >
118 <#assign dateTraker = date />
119 </#if>
120 </#if>
121 </#list>
122 <#if displayItemsInColumns == 1 >
123 </div>
124 </div>
125 </#if>
126</div>
127
128<style>
129.op-agenda .agenda-column-header{
130 background: #003399;
131 color: #FFFFFF;
132 padding: 8px 10px 8px 10px;
133}
134.op-agenda .agenda-column-header h2{
135 margin-bottom: 0;
136 margin-top: 0;
137 font-size: 16px;
138 color: #FFFFFF;
139 font-weight: bold;
140 line-height: 22px;
141}
142.op-agenda .agenda-column-header h3{
143 margin-bottom: 0;
144 margin-top: 0;
145 font-size: 14px;
146 font-weight: bold;
147 color: #FFFFFF;
148 line-height: 19px;
149}
150
151.op-agenda .agenda-item .tags {
152 padding: 23px 12px 10px 12px;
153}
154/* .op-agenda .agenda-item{
155 border-bottom: 1px solid grey;
156}
157.op-agenda .agenda-item > div{
158 padding-bottom: 15px;
159}*/
160
161.op-agenda .agenda-item .btn {
162 background: #003399;
163 justify-content: center;
164 align-items: center;
165 padding: 5px 8px 4px;
166 border-radius: unset;
167 font-style: normal;
168 font-weight: bold;
169 font-size: 12px;
170 text-transform: uppercase;
171 color: #ffffff;
172 line-height: 18px;
173}
174
175.op-agenda .agenda-item .title-agenda,
176.op-agenda .agenda-item .title-agenda a{
177 margin: 0;
178 padding-top: 10px;
179 font-style: normal;
180 font-weight: bold;
181 text-align: left;
182 margin-block-start: unset;
183 font-size: 14px;
184 padding-left: 0px;
185 margin-left: 0px;
186 line-height: 20px;
187 color: #0045AD;
188}
189.title-agenda h2 {
190 margin-block-start: 0;
191 margin-block-end: 0;
192 margin-inline-start: 0px;
193 font-style: normal;
194 font-weight: bold;
195 text-align: left;
196 font-size: 14px;
197 padding-left: 12px;
198 margin-left: 0px;
199 line-height: 20px;
200 color: #0045AD;
201 margin-inline-end: 0px;
202}
203
204.op-agenda .agenda-item .photo{
205 width: 60px;
206 height: 60px;
207 overflow: hidden;
208 border-radius: 50%;
209 float: left;
210 margin: 5px 10px 5px 0;
211}
212.op-agenda .agenda-item .photo img{
213 height: 100%;
214 -webkit-transform: translateX(-50%);
215 transform: translateX(-50%);
216 margin-left: 50%;
217 transition: all ease-in-out 0.3s;
218}
219.op-agenda .agenda-item .name{
220 margin-left: 60px;
221 margin-bottom: 10px;
222 padding-left: 30px;
223 color: #000000;
224 font-style: normal;
225 font-weight: normal;
226 font-size: 13px;
227 line-height: 14px;
228 /* background: url(https://op.europa.eu/documents/10184/8176908/micro.svg/3c02d9b4-1aad-41a4-fdc6-94bf7a44ac78?t=1619144699251) no-repeat; */
229}
230.op-agenda .agenda-item .shortdescription {
231 margin-left: 60px;
232 padding-left: 30px;
233 font-size: 12px;
234 line-height: 13px;
235 color: #6F6E6E;
236}
237.col-12.photo-name {
238 padding-left: 12px;
239 float: left;
240}
241.agenda-item .join .btn {
242 background: #4B72D6;
243 font-style: normal;
244 font-weight: bold;
245 font-size: 12px;
246 line-height: 18px;
247 color: #FFFFFF;
248}
249.agenda-item .join .btn:hover {
250 background: #0045AD;
251 text-decoration: unset;
252}
253
254.agenda-column .agendaBoxBorder{
255 border-left: 1px solid #003399;
256 border-right: 1px solid #003399;
257 border-bottom: 1px solid #003399;
258 margin-left: -1px;
259 margin-right: -1px;
260}
261
262.col-md-12.p-0.agenda-item:not(:last-child) {
263 margin-bottom: 48px !important;
264}
265
266.op-agenda .agenda-item .time{
267 padding-left: 35px;
268 padding-top: 0px;
269 background: url(https://op.europa.eu/documents/10197/0/timeIcon.svg/0596dfad-0e84-cbc1-6158-601dbc783580?t=1625660957582) no-repeat 12px top;
270 font-style: normal;
271 font-weight: bold;
272 font-size: 12px;
273 line-height: 18px;
274 color: #000000;
275}
276.op-agenda .agenda-item .join{
277 text-align: left;
278}
279.op-agenda .join .btn span{
280 width: 16px;
281 height: 16px;
282 position: absolute;
283 display: block;
284 left:10px;
285}
286.op-agenda .join .offset-3 a{
287 padding-left: 36px !important;
288 padding-right: 10px !important;
289 position: relative;
290}
291.op-agenda .join .btn-slides span{
292 background: url("data:image/svg+xml,%3Csvg class='bi bi-download' fill='%23fff' height='16' viewbox='0 0 16 16' width='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M.5 9.9a.5.5 0 0 1 .5.5v2.5a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-2.5a.5.5 0 0 1 1 0v2.5a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2v-2.5a.5.5 0 0 1 .5-.5z'%3E%3C/path%3E%3Cpath d='M7.646 11.854a.5.5 0 0 0 .708 0l3-3a.5.5 0 0 0-.708-.708L8.5 10.293V1.5a.5.5 0 0 0-1 0v8.793L5.354 8.146a.5.5 0 1 0-.708.708l3 3z'%3E%3C/path%3E%3C/svg%3E") left center no-repeat;
293}
294.op-agenda .join .btn-replay span{
295 background: url("data:image/svg+xml,%3Csvg class='bi bi-play' fill='%23fff' height='16' viewbox='0 0 16 16' width='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10.804 8 5 4.633v6.734L10.804 8zm.792-.696a.802.802 0 0 1 0 1.392l-6.363 3.692C4.713 12.69 4 12.345 4 11.692V4.308c0-.653.713-.998 1.233-.696l6.363 3.692z'%3E%3C/path%3E%3C/svg%3E") left center no-repeat;
296}
297</style>