30:Td7d,html`

The D3 logo, deconstructed

`31:T7cf,md` Many of the world's iconic data visualizations have been created using D3. And that's because **D3 has changed how the world visualizes data.** From its release 10 years ago to today, it has transformed what and how dataviz is created in the world. In 10 years, so much can happen, especially in the world of open-source JavaScript libraries. Today, we're taking a moment to reflect, express our gratitude, and talk about what comes next. Looking back, part of D3's success was largely due to timing. In 2010, data was growing exponentially. With that growth, there was an urgent need to make sense of the data. Web browsers were becoming more and more powerful. The conditions were right to fill the need: make sense of that data, using the language of the web, JavaScript. Part of D3's success is its design. D3 was designed to enable rich, expressive visualizations. D3 enabled anyone with an idea and a bit of curiosity (and determination) to create where the only constraint was their imagination. With its low level primitives, you can keep questioning, exploring, discovering - following the thread of where the data takes you. With its decoupled design, you can use the parts of D3 that you need (shapes, arrays, etc.) and skip the parts you don't (DOM, for the React and Svelte users). But it's not just the design of D3 that has led to its growth and longevity. Much of its strength is owed to the D3 community, which is doing incredible work. The community-built examples have been powerful aids to inspire and teach others. And, the community doesn't just create, it's also participatory and inclusive. So many community creators teach by _showing_ their own process, offer suggestions on design, code, or a fix to an issue. This alone would be impressive. What is truly amazing is the kindness the community brings. Dataviz is difficult and the D3 community understands this and brings that understanding and kindness to people new to D3. `32:T4b3,html`

${previews([ { path: "@d3/animated-treemap", thumbnail: "882768da05f294d7eea3aef0e4d5e060b9f9ee542d681772b54341f26b6abfef", title: "Animated treemap", author: "D3" }, { path: "@d3/temporal-force-directed-graph", thumbnail: "c5a7dced97b9c84ce64b8bfbabb7d62f9d819e1377ac4a6dc6929abce7936b0f", title: "Temporal force-directed graph", author: "D3" }, { path: "@d3/connected-scatterplot", thumbnail: "c4c3780815c8e3cc1370d67f1596101cbde2d420125db73d33600e249c382e51", title: "Connected scatterplot", author: "D3" }, { path: "@mbostock/the-wealth-health-of-nations", thumbnail: "6eb6014778b13abd6c15dddaabaa0c7ca27b091982736703a0b9f75013445ebf", title: "The wealth & health of nations", author: "Mike Bostock" }, { path: "@d3/scatterplot-tour", thumbnail: "d18023b5df31a426d5d9f0d2e4f1fd7954a905b478787977ec576bd01f8e9024", title: "Scatterplot tour", author: "D3" }, { path: "@d3/bar-chart-race", thumbnail: "b43c7847e13508c9b9bdff7e827e2998da03b8e6e4093a2f6a8d5de90c9a72c7", title: "Bar chart race", author: "D3" }, ])}

A few examples from the D3 Gallery

`33:T4fa,md`New people are discovering D3 every day. In a recent survey, we found that ~37% of respondants were new to D3 (vs ~36% familiar with D3). There are so many examples such as the connected scatterplot above to fork and get started - 100s of examples in the D3 gallery, 10K+ of community examples. All you have to do is search and you will find tutorials, books, video courses, Slack channels, and meet ups. D3 community leaders are thinking ahead to support this growth. From new resources to improved documentation to newsletters, the community will experience continued investment for learning and teaching. We want Observable to be the ideal place for working with D3 to collaborate, iterate, fork, share, and publish. While D3 v6.0 launched in 2020, there is still a lot more we can do to improve and incorporate community feedback. At Observable, you should expect to use what makes you productive for the task at hand. It might be D3. It might be Vega-lite. It might be something new. We want the best of dataviz to be available as people are creating their next dataviz on Observable. We are excited about the community led and community created future for D3. We can't wait to see what the next 10 years will bring to D3 and dataviz in the world. `34:T6e1,md` ### Continuously Inspired: [**Melody Meckfessel**](https://observablehq.com/@melody) When I first learned about D3, I was curious whether dataviz would be part of the developer experience. I felt the struggles of visualizing data to operate production services or to make important scaling and infrastructure decisions. I experienced first hand the growing complexity of data and the demand to find new ways of understanding. Was there demand for a new way of visualizing data? Would developers be interested in learning something new? It turns out the answer was a resounding yes. We _had_ to find ways for understanding. It wasn't optional. Visualizations _are_ how we make sense of data. Now 10 years later, I continue to be amazed by where D3 shows up. Friends working at Enterprise companies are using D3 for data analysis, reports and dashboards. Journalists are writing about the latest news using D3 to tell stories in the world. Dataviz enthusiasts are visualizing their favorite data from personal health and finances to their favorite bike routes in cities. Creators are generating mindblowing art with it. Professors and teachers are using it to understand topics from systems to biology. And, developers are using dataviz to understand code, algorithms, and production services. All of these people came together in a community, generously teaching and sharing their work with the world. I continue to be inspired by this community, especially people new to D3. They bring new insights and push the boundaries of dataviz. D3 changed how I think about understanding data. It opened a whole world of expressiveness. I am grateful for everything that came before. I am inspired and excited to be part of what's to come. `35:T713,md`### A Catalyst For Change: [Kerry Rodden](https://observablehq.com/@kerryrodden) I started using D3 soon after it was first launched in 2011. I was working at Google at the time, as a quantitative UX researcher, and was looking for ways to visualize large-scale user behavior patterns. I had been making static visualizations as images, using tools like R, but I loved the idea that D3 would allow me to make interactive visualizations in the browser using web standards like SVG. Looking at the gallery of D3 examples, I got an idea of how I could adapt one of them for my use case. I was comfortable with programming but hadn’t used JavaScript before, so I had quite a learning curve to overcome: I wasn’t familiar with many of the JS conventions that D3 used, like selections or method chaining, and I had to learn how to use the browser’s developer tools for debugging, and give myself a crash course in event propagation. Still, I had a clear idea of what I was trying to do, and persisted doggedly until I got there, making the first version of what was to become the [sequences sunburst](/@kerryrodden/sequences-sunburst).

(The breadcrumb in that visualization was how I learned the D3 data join, and it’s implemented using the SVG \`\` element). I was amazed by the positive response to the visualization inside Google, with people sharing the link widely, and other teams adapting my work in order to create similar visualizations for their own projects. After that, I found as many reasons to use D3 as I possibly could, and eventually switched career paths to become a data visualization developer, first as a freelancer and now at Observable. Without D3 I don’t think any of that would have happened.`36:T493,md`### Extending the Olive Branch: [Toph Tucker](https://observablehq.com/@tophtucker) I learned D3 in my first job after college, alone and lost in a new city. I mean that’s an exaggeration but you know the feeling. I’d done programming before, but D3 felt like a kick into a world where the nature of the programming was alive — like it wasn’t yet settled and known but was being discovered by everyone as they went. It reassured me that, like the motivational speakers had promised, learning indeed did not stop after school. And it let me weave code into a job that was not at first explicitly about it. D3 let me put code into my writing and writing into my code and get paid for it. As a vernacular craft, it let me transmute something I could get good at — making charts — into something that I was not good at — making friends and making plans with them. I think most of my socializing in New York was, like, getting drinks with someone I knew because they’d made a chart I’d seen. It let me feel like I knew people before I’d met them, because D3 let them put enough of themselves into their work that you could hear their true voice in it.`37:T49d,md`### New Possibilities: [Ian Johnson](https://observablehq.com/@enjalot) I lucked into learning D3 when I joined a small startup right after graduating from school, wide-eyed and inspired by the exciting examples. I remember that the more I dug into it the more I needed to learn. I turned to the active d3 mailing list for help. That introduced me to the growing community of folks trying to apply D3 to an exciting range of data and applications. It wasn't long before some of us on the mailing list gathered in San Francisco and formed the [Bay Area D3 Meetup](https://www.meetup.com/Bay-Area-d3-User-Group).

Through the meetup I got to meet so many talented practitioners and be inspired by countless works of data visualization. It was the meetup that introduced me to the folks who would help me get hired as both a freelancer and all of my full-time positions since. In fact I first met Kerry after she gave a talk on their sequences sunburst visualization at a D3 meetup, and our conversations led to me joining Observable. It's safe to say that D3 and the surrounding community made my career! `38:T6d2,md` ## Looking Forward D3 is part of Observable's DNA. The people who've shaped and been shaped by the data visualization library apply themselves every day to make Observable easier to think with data. We wouldn't be here without D3. We will continue to give back to the library and community that has given us so much. We'd like to express our gratitude with some pledges to D3 and it's community: **Continued Investment in D3** Managing and maintaing such a large and widely used library is no small task. Observable has always and will continue to dedicate our time contributing code, documentation and examples to D3. We look forward to what will come in D3 v7.0 and beyond. One of D3's differentiating features is it's large library of examples, with over 400 official examples being kept up-to-date by the team. **Expanded Support for Community** Supporting the people that use the technology is a big part of Observable's culture. People first. We are increasing our investment in the D3 community in a number of ways. We are contributing to the organization of community efforts such as online meetups, live-streams, visualization contests and improvements to community infrastructure. We look forward to sponsoring in-person events when it is safe, bringing together the folks who's work we so enjoy seeing online. [Check out](https://observablehq.com/@d3/powering-the-d3-community) what the community leadership team is planning for D3. We know that when D3 thrives, so does Observable. Observable is a growing destination for data visualization and D3 is one of the primary ways of working with data on the web. We look forward to the next 10 years of open source data visualization being even more vibrant than the last! `39:[{"id":"550901d5056b9d268a30eef33ac36a858e2178d629c24132deee61cf546d67d45481dceef4a3c63e6c31ebefe5f3f711485ef14d952738571e3f45498722404c","href":"https://static.observableusercontent.com/files/550901d5056b9d268a30eef33ac36a858e2178d629c24132deee61cf546d67d45481dceef4a3c63e6c31ebefe5f3f711485ef14d952738571e3f45498722404c","name":"Kerry.png","type":"image/png","lastModified":1613535497822.291,"size":99471},{"id":"41db2be01fabaa90ee288f1ef800e63abd5ef73e79de930eeb2ad947baa2b15cf7093f6d827c571deb97169dac83eebc3719d888f3071b9dd868661a8e2c7bee","href":"https://static.observableusercontent.com/files/41db2be01fabaa90ee288f1ef800e63abd5ef73e79de930eeb2ad947baa2b15cf7093f6d827c571deb97169dac83eebc3719d888f3071b9dd868661a8e2c7bee","name":"d3unconf-2.jpg","type":"image/jpeg","lastModified":1613539071522.622,"size":765505},{"id":"3fb49550df6a2b6617e1bbd44f81d5f62a59d1590dd8c7d04ff65fcd31f80795cfb712a9763973d6b013f8335a2a9a0c431f369ec59460e681acda2af7b7215d","href":"https://static.observableusercontent.com/files/3fb49550df6a2b6617e1bbd44f81d5f62a59d1590dd8c7d04ff65fcd31f80795cfb712a9763973d6b013f8335a2a9a0c431f369ec59460e681acda2af7b7215d","name":"streamgraph.png","type":"image/png","lastModified":1613538145844.679,"size":297900}] 2e:{"title":"D3 Turns 10","cells":[{"id":0,"value":"md`# D3 Turns 10\n

A Decade of Growth and Gratitude

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":321,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":350,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":154,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":270,"value":"toc({\n headers: \"h2,h3,h4\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"md` ## Stories From the Team\n\nA few members of the team want to share their heartfelt gratitude for the library that has shaped their careers and played a huge part in bringing them to Observable. \n\n\n\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":378,"value":"md`

` ","pinned":false,"hidden":false,"mode":"ojs"},{"id":38,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":82,"value":"$36","pinned":false,"hidden":false,"mode":"ojs"},{"id":64,"value":"$37","pinned":false,"hidden":false,"mode":"ojs"},{"id":16,"value":"$38","pinned":false,"hidden":false,"mode":"ojs"},{"id":272,"value":"import {toc} from \"@nebrius/indented-toc\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":348,"value":"import {previews} from \"@d3/gallery\"","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W39","stdlib":"1","titling":"auto"}