davidbgk
/
larlet-fr-david-cache


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616
							<!doctype html><!-- This is a valid HTML5 document. -->
<!-- Screen readers, SEO, extensions and so on. -->
<html lang=fr>
<!-- Has to be within the first 1024 bytes, hence before the <title>
  See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset -->
<meta charset=utf-8>
<!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 -->
<!-- The viewport meta is quite crowded and we are responsible for that.
  See: https://codepen.io/tigt/post/meta-viewport-for-2015 -->
<meta name=viewport content="width=device-width,minimum-scale=1,initial-scale=1,shrink-to-fit=no">
<!-- Required to make a valid HTML5 document. -->
<title>Data Viz Pioneer Nicholas Felton: “There Is A Real Shadow Over Data” (archive) — David Larlet</title>
<!-- Generated from https://realfavicongenerator.net/ such a mess. -->
<link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons/favicon-16x16.png">
<link rel="manifest" href="/manifest.json">
<link rel="mask-icon" href="/static/david/icons/safari-pinned-tab.svg" color="#5bbad5">
<link rel="shortcut icon" href="/static/david/icons/favicon.ico">
<meta name="apple-mobile-web-app-title" content="David Larlet">
<meta name="application-name" content="David Larlet">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="msapplication-config" content="/static/david/icons/browserconfig.xml">
<meta name="theme-color" content="#f0f0ea">
<!-- That good ol' feed, subscribe :p. -->
<link rel=alternate type="application/atom+xml" title=Feed href="/david/log/">

  <meta name="robots" content="noindex, nofollow">
  <meta content="origin-when-cross-origin" name="referrer">
  <!-- Canonical URL for SEO purposes -->
  <link rel="canonical" href="http://www.fastcodesign.com/3044878/data-viz-pioneer-nicholas-felton-there-is-a-real-shadow-over-data">

<style>
/* http://meyerweb.com/eric/tools/css/reset/ */
html, body, div, span,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, address, big, cite, code,
del, dfn, em, img, ins,
small, strike, strong, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section { display: block; }
body { line-height: 1; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* http://practicaltypography.com/equity.html */
/* https://calendar.perfplanet.com/2016/no-font-face-bulletproof-syntax/ */
/* https://www.filamentgroup.com/lab/js-web-fonts.html */
@font-face {
  font-family: 'EquityTextB';
  src: url('/static/david/css/fonts/Equity-Text-B-Regular-webfont.woff2') format('woff2'),
       url('/static/david/css/fonts/Equity-Text-B-Regular-webfont.woff') format('woff');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'EquityTextB';
  src: url('/static/david/css/fonts/Equity-Text-B-Italic-webfont.woff2') format('woff2'),
       url('/static/david/css/fonts/Equity-Text-B-Italic-webfont.woff') format('woff');
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'EquityTextB';
  src: url('/static/david/css/fonts/Equity-Text-B-Bold-webfont.woff2') format('woff2'),
       url('/static/david/css/fonts/Equity-Text-B-Bold-webfont.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'ConcourseT3';
  src: url('/static/david/css/fonts/concourse_t3_regular-webfont-20190806.woff2') format('woff2'),
       url('/static/david/css/fonts/concourse_t3_regular-webfont-20190806.woff') format('woff');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}


/* http://practice.typekit.com/lesson/caring-about-opentype-features/ */
body {
  /* http://www.cssfontstack.com/ Palatino 99% Win 86% Mac */
  font-family: "EquityTextB", Palatino, serif;
  background-color: #f0f0ea;
  color: #07486c;
  font-kerning: normal;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: subpixel-antialiased;
  text-rendering: optimizeLegibility;
  font-variant-ligatures: common-ligatures contextual;
  font-feature-settings: "kern", "liga", "clig", "calt";
}
pre, code, kbd, samp, var, tt {
  font-family: 'TriplicateT4c', monospace;
}
em {
  font-style: italic;
  color: #323a45;
}
strong {
  font-weight: bold;
  color: black;
}
nav {
  background-color: #323a45;
  color: #f0f0ea;
  display: flex;
  justify-content: space-around;
  padding: 1rem .5rem;
}
  nav:last-child {
    border-bottom: 1vh solid #2d7474;
  }
  nav a {
    color: #f0f0ea;
  }
  nav abbr {
    border-bottom: 1px dotted white;
  }

h1 {
  border-top: 1vh solid #2d7474;
  border-bottom: .2vh dotted #2d7474;
  background-color: #e3e1e1;
  color: #323a45;
  text-align: center;
  padding: 5rem 0 4rem 0;
  width: 100%;
  font-family: 'ConcourseT3';
  display: flex;
  flex-direction: column;
}
  h1.single {
    padding-bottom: 10rem;
  }
  h1 span {
    position: absolute;
    top: 1vh;
    left: 20%;
    line-height: 0;
  }
    h1 span a {
      line-height: 1.7;
      padding: 1rem 1.2rem .6rem 1.2rem;
      border-radius: 0 0 6% 6%;
      background: #2d7474;
      font-size: 1.3rem;
      color: white;
      text-decoration: none;
    }
h2 {
  margin: 4rem 0 1rem;
  border-top: .2vh solid #2d7474;
  padding-top: 1vh;
}
h3 {
  text-align: center;
  margin: 3rem 0 .75em;
}
hr {
  height: .4rem;
  width: .4rem;
  border-radius: .4rem;
  background: #07486c;
  margin: 2.5rem auto;
}
time {
  display: bloc;
  margin-left: 0 !important;
}
ul, ol {
  margin: 2rem;
}
ul {
  list-style-type: square;
}
a {
  text-decoration-skip-ink: auto;
  text-decoration-thickness: 0.05em;
  text-underline-offset: 0.09em;
}
article {
  max-width: 50rem;
  display: flex;
  flex-direction: column;
  margin: 2rem auto;
}
  article.single {
    border-top: .2vh dotted #2d7474;
    margin: -6rem auto 1rem auto;
    background: #f0f0ea;
    padding: 2rem;
  }
  article p:last-child {
    margin-bottom: 1rem;
  }
p {
  padding: 0 .5rem;
  margin-left: 3rem;
}
  p + p,
  figure + p {
    margin-top: 2rem;
  }

blockquote {
  background-color: #e3e1e1;
  border-left: .5vw solid #2d7474;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1rem;
  margin: 1.5rem;
}
  blockquote cite {
    font-style: italic;
  }
  blockquote p {
    margin-left: 0;
  }

figure {
  border-top: .2vh solid #2d7474;
  background-color: #e3e1e1;
  text-align: center;
  padding: 1.5rem 0;
  margin: 1rem 0 0;
  font-size: 1.5rem;
  width: 100%;
}
  figure img {
    max-width: 250px;
    max-height: 250px;
    border: .5vw solid #323a45;
    padding: 1px;
  }
figcaption {
  padding: 1rem;
  line-height: 1.4;
}
aside {
  display: flex;
  flex-direction: column;
  background-color: #e3e1e1;
  padding: 1rem 0;
  border-bottom: .2vh solid #07486c;
}
  aside p {
    max-width: 50rem;
    margin: 0 auto;
  }

/* https://fvsch.com/code/css-locks/ */
p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {
  font-size: 1rem;
  line-height: calc( 1.5em + 0.2 * 1rem );
}
h1 {
  font-size: 1.9rem;
  line-height: calc( 1.2em + 0.2 * 1rem );
}
h2 {
  font-size: 1.6rem;
  line-height: calc( 1.3em + 0.2 * 1rem );
}
h3 {
  font-size: 1.35rem;
  line-height: calc( 1.4em + 0.2 * 1rem );
}
@media (min-width: 20em) {
  /* The (100vw - 20rem) / (50 - 20) part
     resolves to 0-1rem, depending on the
     viewport width (between 20em and 50em). */
  p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {
    font-size: calc( 1rem + .6 * (100vw - 20rem) / (50 - 20) );
    line-height: calc( 1.5em + 0.2 * (100vw - 50rem) / (20 - 50) );
    margin-left: 0;
  }
  h1 {
    font-size: calc( 1.9rem + 1.5 * (100vw - 20rem) / (50 - 20) );
    line-height: calc( 1.2em + 0.2 * (100vw - 50rem) / (20 - 50) );
  }
  h2 {
    font-size: calc( 1.5rem + 1.5 * (100vw - 20rem) / (50 - 20) );
    line-height: calc( 1.3em + 0.2 * (100vw - 50rem) / (20 - 50) );
  }
  h3 {
    font-size: calc( 1.35rem + 1.5 * (100vw - 20rem) / (50 - 20) );
    line-height: calc( 1.4em + 0.2 * (100vw - 50rem) / (20 - 50) );
  }
}
@media (min-width: 50em) {
  /* The right part of the addition *must* be a
     rem value. In this example we *could* change
     the whole declaration to font-size:2.5rem,
     but if our baseline value was not expressed
     in rem we would have to use calc. */
  p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {
    font-size: calc( 1rem + .6 * 1rem );
    line-height: 1.5em;
  }
  p, li, pre, details {
    margin-left: 3rem;
  }
  h1 {
    font-size: calc( 1.9rem + 1.5 * 1rem );
    line-height: 1.2em;
  }
  h2 {
    font-size: calc( 1.5rem + 1.5 * 1rem );
    line-height: 1.3em;
  }
  h3 {
    font-size: calc( 1.35rem + 1.5 * 1rem );
    line-height: 1.4em;
  }
  figure img {
    max-width: 500px;
    max-height: 500px;
  }
}

figure.unsquared {
  margin-bottom: 1.5rem;
}
  figure.unsquared img {
    height: inherit;
  }


@media print {
  body { font-size: 100%; }
  a:after { content: " (" attr(href) ")"; }
  a, a:link, a:visited, a:after {
    text-decoration: underline;
    text-shadow: none !important;
    background-image: none !important;
    background: white;
    color: black;
  }
  abbr[title] { border-bottom: 0; }
  abbr[title]:after { content: " (" attr(title) ")"; }
  img { page-break-inside: avoid; }
  @page { margin: 2cm .5cm; }
  h1, h2, h3 { page-break-after: avoid; }
  p3 { orphans: 3; widows: 3; }
  img {
    max-width: 250px !important;
    max-height: 250px !important;
  }
  nav, aside { display: none; }
}

ul.with_columns {
  column-count: 1;
}
@media (min-width: 20em) {
  ul.with_columns {
    column-count: 2;
  }
}
@media (min-width: 50em) {
  ul.with_columns {
    column-count: 3;
  }
}
ul.with_two_columns {
  column-count: 1;
}
@media (min-width: 20em) {
  ul.with_two_columns {
    column-count: 1;
  }
}
@media (min-width: 50em) {
  ul.with_two_columns {
    column-count: 2;
  }
}

.gallery {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}
  .gallery figure img {
    margin-left: 1rem;
    margin-right: 1rem;
  }
  .gallery figure figcaption {
    font-family: 'ConcourseT3'
  }

footer {
  font-family: 'ConcourseT3';
  display: flex;
  flex-direction: column;
  border-top: 3px solid white;
  padding: 4rem 0;
  background-color: #07486c;
  color: white;
}
  footer > * {
    max-width: 50rem;
    margin: 0 auto;
  }
  footer a {
    color: #f1c40f;
  }
  footer .avatar {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    float: left;
    -webkit-shape-outside: circle();
    shape-outside: circle();
    margin-right: 2rem;
    padding: 2px 5px 5px 2px;
    background: white;
    border-left: 1px solid #f1c40f;
    border-top: 1px solid #f1c40f;
    border-right: 5px solid #f1c40f;
    border-bottom: 5px solid #f1c40f;
  }
</style>

<h1>
  <span><a id="jumper" href="#jumpto" title="Un peu perdu ?">?</a></span>
  Data Viz Pioneer Nicholas Felton: “There Is A Real Shadow Over Data” (archive)
  <time>Pour la pérennité des contenus liés. Non-indexé, retrait sur simple email.</time>
</h1>
<section>
  <article>
    <h3><a href="http://www.fastcodesign.com/3044878/data-viz-pioneer-nicholas-felton-there-is-a-real-shadow-over-data">Source originale du contenu</a></h3>
    <p><strong>Khoi Vinh, <a href="http://howtheygotthere.us/" target="_blank"><em>HTGT</em></a>: What was your career ambition while you were at Rhode Island School of Design? Did you want to get a job at an agency or studio, or start your own agency or studio?</strong></p>

<p>Nicholas Felton: RISD is not a school that focuses on what’s going to happen when you leave its doors. Everybody there was pretty focused on what’s due tomorrow and what’s due this week. I got to the end of my education, and that’s when I started going to portfolio reviews in New York and showing up with a really unrefined portfolio. There was good stuff in it, but it was in a paper bag. I would see people who had gone to schools that were really focused on job placement after graduation, and those people had beautiful portfolios and had a photographer shoot their work. That’s when I realized that I hadn’t really been thinking about what was next. I was very short-sighted about doing well in school and pursuing the ideas I had there.</p>

<figure class="inline-large inline">
<img src="//d.fastcompany.net/multisite_files/fastcompany/imagecache/inline-large/inline/2015/04/3044878-inline-i-2-2012-feltron-report-2.jpg" alt=""/><figcaption>2012 Feltron Report</figcaption>
</figure>

<p><strong>Was that discouraging to get that bit of cold water splashed in your face?</strong><br />
[<em>Laughs</em>] I remember going to a portfolio review and having a good conversation with someone from <em>Martha Stewart Living</em> who liked my work. But my final project at RISD had been all about making artifacts from the book <em>Catch 22</em>, so I had made my own camouflage and a war-timey stencil typeface. He thought the work was great, but said, "We have no place for you at Martha Stewart." That was a glimmer of hope.</p>

<p><strong>After working at an agency, DeMassimo, you started to produce your now-famous <a href="http://feltron.com/" target="_blank">annual reports</a>?<br />
</strong><br />
The first full annual report, which was about 2005, was something I thought that just a few people who knew me personally would find interesting. It was surprising that it spread around<br />
the Internet and strangers found it intriguing.</p>

<figure class="inline-large inline">
<img src="//b.fastcompany.net/multisite_files/fastcompany/imagecache/inline-large/inline/2015/04/3044878-inline-i-1-2012-feltron-report-1.jpg" alt=""/><figcaption>2012 Feltron Report</figcaption>
</figure>

<p><strong>When did you realize people would be willing to pay for it?</strong></p>

<p>The first time I charged was 2007, at five dollars a piece, strictly as an experiment to see whether I could recoup some of the printing costs. That was a great success. I think I printed 2,000 copies—I held onto some for myself, but otherwise I sold all the ones that I had available. That’s the moment when I learned, if more people are willing to pay for it, then the more elaborate it could become, both in terms of printing and the time that I dedicate to it. Although I’ve never been very good at managing that balance. I always seem to break even.</p>

<figure class="inline-large inline">
<img src="//e.fastcompany.net/multisite_files/fastcompany/imagecache/inline-large/inline/2015/04/3044878-inline-i-4-2013-feltron-report-2.jpg" alt=""/><figcaption>2013 Feltron Report</figcaption>
</figure>

<p><strong>Was that an eye-opening moment for you?<br />
</strong></p>

<p><br />
<aside class="pullquote"><q>In 2007 or early 2008,  I saw how robust this world of working with data was.</q></aside></p>

<p>Yes, and it was about that time, in 2007 or early 2008, that I saw how robust this world of working with data was. I was starting to see it everywhere and realizing that the best way to become better with this medium was to start taking jobs that had their root in it.</p>

<p>I got editorial commissions, and at first they just wanted me to apply some nice typography to their charts and graphs. But these projects started getting more and more elaborate, giving me less and less direction. It moved to the point of "Here’s some data, what stories can you tell from it?" Those were the most interesting editorial assignments. I’m not sure how long it took to be able to move over to strictly doing data projects, but it was the best way to get better at it and it really keyed into this annual report being a self-promotional tool and a research-and-development playground for it.</p>

<figure class="inline-large inline">
<img src="//c.fastcompany.net/multisite_files/fastcompany/imagecache/inline-large/inline/2015/04/3044878-inline-i-3-2013-feltron-report-1.jpg" alt=""/><figcaption>2013 Feltron Report</figcaption>
</figure>

<p><strong>You had your design practice, but then your reputation suddenly became synonymous with information visualization and you decided to build a business around that. Could you describe starting <a href="http://www.daytum.com/" target="_blank">Daytum</a>?</strong></p>

<p>That idea primarily came from my friend and partner Ryan Case, who I’d been sharing the same office with. One day soon after releasing the 2008 report, he said, "Hey, what if we made an app that would allow people to visualize some of their data?" The initial idea was, "Let’s make a skin for Last.fm, where you could plug it in and visualize some of your music." That quickly turned into wanting the functionality where you could count the sort of stuff that I was collecting in the annual reports, such as how many miles you ran or what books you read or how many beers you drank. That led us closer to the idea of democratizing the tools behind the annual report. It’s hard to gather this data and it’s hard to analyze it and make it presentable. So we wanted to give people access to this kind of shorthand in a single system where they could both count and communicate with stuff that they cared about.</p>

<figure class="inline-large inline">
<img src="//c.fastcompany.net/multisite_files/fastcompany/imagecache/inline-large/inline/2015/04/3044878-inline-i-5-daytum-1.jpg" alt=""/><figcaption>Daytum</figcaption>
</figure>

<p><strong>What happened when Facebook came calling?<br />
</strong></p>

<aside class="pullquote"><q>Do we want to work on Daytum and try and bring it to a grand scale, or have even a tiny influence on what 600 or 700 million people are using?</q></aside>

<p>I got a message from Mark Zuckerberg, saying, "I know you guys are working on a startup, but I would love to talk to you." It’s not the kind of invitation that you turn down. A couple months later, Ryan and I went out to California for some meetings about Daytum and about starting this pursuit of getting funding so we could work on it full-time. We went and talked to Mark and found out they were working on Timeline. We were especially interested in Open Graph, which was basically the ability to plug anything into Facebook. This included data sources that we were pretty interested in, like music, being able to visualize what you were listening to, or things that you’re watching from Netflix. At that point, the question for us was, "Do we want to work on Daytum and try and bring it to a grand scale, or have even a tiny influence on what 600 or 700 million people are using?" That was a hard conversation.</p>

<p><strong>Were you excited by the Facebook path or was it painful to put<br />
Daytum on hold?</strong></p>

<p>We had a really strong vision for Daytum and I think we were hoping that we could bring a lot of that to Facebook, and sometimes that seemed very viable. Once we had our first meeting, we were out and working at Facebook within two weeks. We just dove in and Timeline was going to be announced in four or five months after we started, so there really was no time to catch our breath or think twice about the decision we made.</p>

<p><strong>You left two years into your four-year Facebook contract. Without getting into sensitive details, could you say why you left?</strong></p>

<p>I could see the balance shift between the work that Facebook wanted me to do for them and the kind of projects I wanted to build or the things that I wanted to put out into the world. It was just amazing, and learning what went into building a company and a website that’s top of class was an enormous education. I’m really happy to have learned that, and I think it changed the trajectory of my career to the point where now products are the things that I tend to be building.</p>

<p><strong>Prior to Facebook you had been doing services with products on the side, but now you’re focused on products, period?</strong></p>

<p>There are a couple of products that I left Facebook wanting to build. The first was <a href="http://www.reporter-app.com/" target="_blank">Reporter</a>, and the next one is one that I’m starting work on right now. I think they both come out of the same root inspiration that led to Daytum and led to wanting to work on Timeline, which is seeing these vacuums in the world of how people relate to their personal data and not having enough control over understanding what’s there or in being able to express themselves through it. When I see these vacuums, I feel obliged to jump into them and try and build the products that will create the experiences or tools that I think need to exist.<aside class="pullquote"><q>When I see vacuums, I feel obliged to jump into them and build the products that I think need to exist.</q></aside></p>

<p><strong>What’s your career been like since leaving Facebook?</strong></p>

<p>I left Facebook in April 2013 and I wanted to give myself some time off just to figure out what was going to be next. During that time I did some traveling and I did some little coding experiments, trying to build my chops in that realm. Then around the end of the year I decided Reporter needed to get out into the world, so I focused on that. I thought that by the end of the<br />
year I would have a clear focus as to what was next, but then it came time to do the annual report, which this year is really just a monster and it’s taking a long time. This one is going to be the penultimate report. The next one will probably be the last.</p>

<figure class="inline-large inline">
<img src="//c.fastcompany.net/multisite_files/fastcompany/imagecache/inline-large/inline/2015/04/3044878-inline-i-6-daytum-2.jpg" alt=""/><figcaption>Daytum</figcaption>
</figure>

<p><strong>Why is that?</strong></p>

<p>It’s too hard. The annual report is now more a piece of software than a piece of print. There’s an enormous database that underlies it. There are probably 20 processing apps that are feeding into it. It’s like a multidimensional creature that’s really hard to flatten into a static two-dimensional form. That’s a challenge that just gets harder and harder every year. Especially this one, the theme is communication and so I can tell this really rich story of my communication with my girlfriend, but that’s a private story. It’s not one that I want to communicate to the rest of the world. How do I find this middle path that talks about the kind of overwhelming world of communication we live in without violating people’s privacy or violating secrets or NDAs that all encumber the communication we have these days?</p>

<p><strong>When you look ahead, with this ongoing project that’s going to come to an end, and you’re working on some new products that are very young, what do you see in your future? Do you think about what you’re going to be doing in two, five, or ten years?</strong></p>

<figure class="inline-small inline">
<img src="//d.fastcompany.net/multisite_files/fastcompany/imagecache/inline-small/inline/2015/04/3044878-inline-i-1-infographic-guru-nicholas-felton-there-is-a-real-shadow-over-data.jpg" alt=""/>
</figure>

<p>I don’t know. I think working with data is almost a little fraught, because when I started with it, it looked like "sky’s the limit," and I saw it from a very personal angle. Now, if you generate data, the first question to ask about it is, "How is this data going to be used against you?" While I’m still fighting the fight to show the narrative potential of data, there is a real shadow over it. I’m not sure where we land if the value added by having access to your data or having the data saved is greater than the potential damage that that data can create in the wrong hands. That’s something I wrestle with at the moment.</p>
  </article>
</section>


<nav id="jumpto">
  <p>
    <a href="/david/blog/">Accueil du blog</a> |
    <a href="http://www.fastcodesign.com/3044878/data-viz-pioneer-nicholas-felton-there-is-a-real-shadow-over-data">Source originale</a> |
    <a href="/david/stream/2019/">Accueil du flux</a>
  </p>
</nav>

<footer>
  <div>
    <img src="/static/david/david-larlet-avatar.jpg" loading="lazy" class="avatar" width="200" height="200">
    <p>
      Bonjour/Hi!
      Je suis <a href="/david/" title="Profil public">David&nbsp;Larlet</a>, je vis actuellement à Montréal et j’alimente cet espace depuis 15 ans. <br>
      Si tu as apprécié cette lecture, n’hésite pas à poursuivre ton exploration. Par exemple via les <a href="/david/blog/" title="Expériences bienveillantes">réflexions bimestrielles</a>, la <a href="/david/stream/2019/" title="Pensées (dés)articulées">veille hebdomadaire</a> ou en t’abonnant au <a href="/david/log/" title="S’abonner aux publications via RSS">flux RSS</a> (<a href="/david/blog/2019/flux-rss/" title="Tiens c’est quoi un flux RSS ?">so 2005</a>).
    </p>
    <p>
      Je m’intéresse à la place que je peux avoir dans ce monde. En tant qu’humain, en tant que membre d’une famille et en tant qu’associé d’une coopérative. De temps en temps, je fais aussi des <a href="https://github.com/davidbgk" title="Principalement sur Github mais aussi ailleurs">trucs techniques</a>. Et encore plus rarement, <a href="/david/talks/" title="En ce moment je laisse plutôt la place aux autres">j’en parle</a>.
    </p>
    
    <p>
      Voici quelques articles choisis :
      <a href="/david/blog/2019/faire-equipe/" title="Accéder à l’article complet">Faire équipe</a>,
      <a href="/david/blog/2018/bivouac-automnal/" title="Accéder à l’article complet">Bivouac automnal</a>,
      <a href="/david/blog/2018/commodite-effondrement/" title="Accéder à l’article complet">Commodité et effondrement</a>,
      <a href="/david/blog/2017/donnees-communs/" title="Accéder à l’article complet">Des données aux communs</a>,
      <a href="/david/blog/2016/accompagner-enfant/" title="Accéder à l’article complet">Accompagner un enfant</a>,
      <a href="/david/blog/2016/senior-developer/" title="Accéder à l’article complet">Senior developer</a>,
      <a href="/david/blog/2016/illusion-sociale/" title="Accéder à l’article complet">L’illusion sociale</a>,
      <a href="/david/blog/2016/instantane-scopyleft/" title="Accéder à l’article complet">Instantané Scopyleft</a>,
      <a href="/david/blog/2016/enseigner-web/" title="Accéder à l’article complet">Enseigner le Web</a>,
      <a href="/david/blog/2016/simplicite-defaut/" title="Accéder à l’article complet">Simplicité par défaut</a>,
      <a href="/david/blog/2016/minimalisme-esthetique/" title="Accéder à l’article complet">Minimalisme et esthétique</a>,
      <a href="/david/blog/2014/un-web-omni-present/" title="Accéder à l’article complet">Un web omni-présent</a>,
      <a href="/david/blog/2014/manifeste-developpeur/" title="Accéder à l’article complet">Manifeste de développeur</a>,
      <a href="/david/blog/2013/confort-convivialite/" title="Accéder à l’article complet">Confort et convivialité</a>,
      <a href="/david/blog/2013/testament-numerique/" title="Accéder à l’article complet">Testament numérique</a>,
      et <a href="/david/blog/" title="Accéder aux archives">bien d’autres…</a>
    </p>
    <p>
      On peut <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">échanger par courriel</a>. Si éventuellement tu souhaites que l’on travaille ensemble, tu devrais commencer par consulter le <a href="http://larlet.com">profil dédié à mon activité professionnelle</a> et/ou contacter directement <a href="http://scopyleft.fr/">scopyleft</a>, la <abbr title="Société coopérative et participative">SCOP</abbr> dont je fais partie depuis six ans. Je recommande au préalable de lire <a href="/david/blog/2018/cout-site/" title="Attention ce qui va suivre peut vous choquer">combien coûte un site</a> et pourquoi je suis plutôt favorable à une <a href="/david/pro/devis/" title="Discutons-en !">non-demande de devis</a>.
    </p>
    <p>
      Je ne traque pas ta navigation mais mon
      <abbr title="Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33.184162340">hébergeur</abbr>
      conserve des logs d’accès.
    </p>
  </div>
</footer>
<script type="text/javascript">
  ;(_ => {
    const jumper = document.getElementById('jumper')
    jumper.addEventListener('click', e => {
      e.preventDefault()
      const anchor = e.target.getAttribute('href')
      const targetEl = document.getElementById(anchor.substring(1))
      targetEl.scrollIntoView({behavior: 'smooth'})
    })
  })()
</script>