[{"data":1,"prerenderedAt":197},["ShallowReactive",2],{"DefaultLayouten":3,"language-blog-slug-artsy-piece-of-data-i18n-slugs":134,"language-blog-slug-en-artsy-piece-of-data":138},{"app":4,"menu":31,"footer":66},{"githubUrl":5,"youtubeUrl":6,"linkedinUrl":7,"phoneNumber":8,"emailAddress":9,"legal":10,"addresses":20},"https:\u002F\u002Fgithub.com\u002Fvoorhoede\u002F","https:\u002F\u002Fwww.youtube.com\u002Fchannel\u002FUCzHuhQVYFRixtQN2-swcuGg","https:\u002F\u002Fwww.linkedin.com\u002Fcompany\u002Fde-voorhoede","+31 20 2610 954","post@voorhoede.nl",[11,14,17],{"title":12,"value":13},"KvK","56017235",{"title":15,"value":16},"BTW","NL851944620B01",{"title":18,"value":19},"IBAN","NL14TRIO0320142078",[21,26],{"address":22,"city":23,"googleMapsLink":24,"postalCode":25},"Koivistokade 70","Amsterdam","https:\u002F\u002Fwww.google.com\u002Fmaps\u002Fplace\u002FDe+Voorhoede+%7C+Front-end+Development\u002F@52.396847,4.8700823,17z\u002Fdata=!3m1!4b1!4m5!3m4!1s0x47c5e21d502d2d59:0xbf570944a96ebf45!8m2!3d52.347647!4d4.8502154","1013 BB",{"address":27,"city":28,"googleMapsLink":29,"postalCode":30},"Koornmarkt 22","Delft","https:\u002F\u002Fwww.google.nl\u002Fmaps\u002Fplace\u002FKoornmarkt+22,+2611+EG+Delft\u002F@52.0093477,4.3573054,17z\u002F","2611 EG",{"title":32,"callToActions":33,"links":39},"Site Menu",[34],{"id":35,"title":36,"link":37},"163140902","Contact",{"__typename":38},"ContactRecord",[40,46,51,56,61],{"id":41,"title":42,"link":43},"163140904","Impact",{"__typename":44,"slug":45},"PageRecord","impact",{"id":47,"title":48,"link":49},"163140905","Services",{"__typename":50},"ServiceOverviewRecord",{"id":52,"title":53,"link":54},"163140906","Cases",{"__typename":55},"CaseOverviewRecord",{"id":57,"title":58,"link":59},"163140908","About us",{"__typename":44,"slug":60},"about-us",{"id":62,"title":63,"link":64},"d6WdFJq2SOuc3dWtpibbXQ","Work at",{"__typename":44,"slug":65},"work-at",{"links":67,"copyrightTitle":93,"copyrightLabel":94,"copyrightLink":95,"privacyTitle":96,"privacyLabel":97,"privacyLink":98,"certificatesGrid":99},[68,71,74,77,82,85,88],{"id":69,"title":42,"link":70},"144185264",{"__typename":44,"slug":45},{"id":72,"title":48,"link":73},"144185265",{"__typename":50},{"id":75,"title":53,"link":76},"144185266",{"__typename":55},{"id":78,"title":79,"link":80},"144185267","Blog",{"__typename":81},"BlogPostOverviewRecord",{"id":83,"title":58,"link":84},"144185268",{"__typename":44,"slug":60},{"id":86,"title":36,"link":87},"144185269",{"__typename":38},{"id":89,"title":90,"link":91},"144185270","FAQ",{"__typename":44,"slug":92},"faq","Creative Commons licence and disclaimer","CC BY 4.0","https:\u002F\u002Fcreativecommons.org\u002Flicenses\u002Fby\u002F4.0\u002F","De Voorhoede privacy statement (pdf)","Privacy statement","https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1763455455-vh-isms-006-privacy-statement-de-voorhoede-en.pdf",[100,112,123],{"id":101,"image":102,"link":107},"Xq4bBfg_TZ6Fkjax9mkbLQ",{"url":103,"alt":104,"width":105,"height":106},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1687353463-b-corp-logo-black-rgb.png","B Corp logo",404,680,{"__typename":108,"id":109,"title":110,"url":111},"ExternalLinkRecord","fGW1ak8XQYaYDLkBSyncog","B Corp","https:\u002F\u002Fwww.bcorporation.net\u002Fen-us\u002Ffind-a-b-corp\u002Fcompany\u002Fde-voorhoede\u002F",{"id":113,"image":114,"link":119},"c5mCXRTiSraRIB25fw1p7Q",{"url":115,"alt":116,"width":117,"height":118},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1687353461-dda-boxlogo-black.png","Dutch Digital Agencies logo",627,480,{"__typename":108,"id":120,"title":121,"url":122},"P6Jh7B0cTv2cKyNEeKVWVQ","Dutch Digital Agencies","https:\u002F\u002Fdutchdigitalagencies.com\u002Fleden\u002Fde-voorhoede\u002F",{"id":124,"image":125,"link":129},"MT5SCyNxSTSr_v5eeATMZw",{"url":126,"alt":127,"width":128,"height":128},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1775730283-dnv.png","DNV logo",518,{"id":130,"title":131,"link":132},"BRtNB5HnT5i-7HkA8IYzBw","DIV",{"__typename":44,"slug":133},"impact\u002Fdigitale-producten-privacy-by-design",[135],{"locale":136,"value":137},"en","artsy-piece-of-data",{"page":139},{"slug":137,"i18nSlugs":140,"social":142,"title":147,"subtitle":79,"isArchived":148,"headerIllustration":149,"date":150,"authors":151,"introTitle":160,"items":161,"pivots":184,"relatedBlogPosts":195,"tags":196,"onMountedScript":165,"onUnmountedScript":165},[141],{"locale":136,"value":137},{"title":143,"description":144,"image":145},"Artsy piece of data | De Voorhoede","Aesthetically pleasing real-time data visualisation of NPO streams",{"url":146},"https:\u002F\u002Fwww.datocms-assets.com\u002F2651\u002F1500890708-artsy-data.gif","Artsy piece of data",false,null,"2017-02-03T01:00:00.000+01:00",[152],{"name":153,"lastName":154,"slug":155,"image":156},"Peter","Goes","peter",{"url":157,"alt":149,"width":158,"height":159},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1744374527-peter-edit.jpg",1381,1839,"Aesthetically pleasing real-time data visualisation",[162,167,170,180],{"__typename":163,"id":164,"title":165,"body":166},"TextSectionRecord","406430","","\u003Cp>\u003Cspan>Here at De Voorhoede, we primarily write practical front-end code. Imagine our delight when NPO asked us to create a \u003Ca href=\"https:\u002F\u002Fwww.voorhoede.nl\u002Fen\u002Fservices\u002Fdata-visualisation\u002F\">data visualisation\u003C\u002Fa>: an artistic view of all streams currently playing on the npo.nl platform. All based on realtime data. Now that is a challenge we like!\u003C\u002Fspan>\u003C\u002Fp>",{"__typename":163,"id":168,"title":165,"body":169},"406431","\u003Cp>\u003Cspan>The television landscape is changing. We move from linear to on-demand. Watch whatever you want, whenever you want. The NPO platform plays a huge role in The Netherlands. You can find anything, from live streams of the traditional channels to specialty channels and episodic content.\u003C\u002Fspan>\u003C\u002Fp>",{"__typename":171,"id":172,"image":173,"caption":175,"fullWidth":178,"captionPosition":179},"ImageRecord","176453931",{"url":174,"alt":175,"width":176,"height":177},"https:\u002F\u002Fwww.datocms-assets.com\u002F2651\u002F1500886212-artsy-data.jpg","Connected streams represented by tiles on a screen",926,521,true,"left",{"__typename":163,"id":181,"title":182,"body":183},"406433","From data to visualisation","\u003Cp>\u003Cspan>Together with \u003C\u002Fspan>\u003Ca href=\"https:\u002F\u002Fhike.one\u002F\">Hike One\u003C\u002Fa>\u003Cspan> and the NPO Marketing Intelligence Team we created a format and implemented it in a couple of days.\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cp>\u003Cspan>Every stream image gets its place on the screen. The more popular the stream, the bigger that image will be. When another viewer opens the stream the image pulses on screen. Now you have an almost living representation of currently watched streams.\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cp>\u003Cspan>Every data point is delivered via a \u003Ca href=\"https:\u002F\u002Fen.wikipedia.org\u002Fwiki\u002FWebSocket\">WebSocket\u003C\u002Fa> connection. A data point can be anything like the start of a stream or a heartbeat. On a set interval, every video player signals it is still playing. That’s our heartbeat. All these data points (of which there are a lot) make up the data stream our visualisation hooks into.\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cp>\u003Cspan>Put this visualisation on a big screen and you’ve got a beautiful and handy overview of what is being watched!\u003C\u002Fspan>\u003C\u002Fp>",[185],{"title":186,"body":187,"links":188,"mailchimpValue":165,"mailchimpName":165,"mailchimpId":165,"formType":165,"contactPerson":149},"Also in love with the web?","\u003Cp>For us, that’s about technology and user experience. Fast, available for all, enjoyable to use. And fun to build. This is how our team bands together, adhering to the same values, to make sure we achieve a solid result for clients both large and small. Does that fit you?\u003C\u002Fp>\n",[189],{"__typename":190,"id":191,"title":192,"link":193},"InternalLinkRecord","163140992","Join our team",{"__typename":44,"slug":194},"jobs",[],[],1776256145479]