# d3.js Published articles for d3.js. This is one page of public article previews, not the complete archive. Follow Next page to continue. Summaries are not the original full articles. ## Interactive Data Visualizations with React DevFeed: [Interactive Data Visualizations with React]() Original publisher: [Read original article]() Author: admin Published: 2024-06-02T08:26:04Z Content type: tutorial Language: en Sources: [Posts on Chris Banes]() Topics: [React](), [Data visualization](), [JavaScript](), [User Interfaces]() Tags: [charts](), [charts-and-graphs](), [d3-js](), [data-visualization](), [javascript](), [react](), [uncategorized]() ### AI overview This tutorial explains how React can be used to create interactive data visualizations. It discusses component-based architecture, dynamic updates through the Virtual DOM, performance, flexibility, and the React visualization ecosystem, including Chart.js and D3.js. ### Source excerpt React, the popular JavaScript library for building user interfaces, is a fantastic tool for creating interactive data visualizations. With its component-based architecture and a wealth of libraries at your disposal, React makes it easier than ever to bring your data to life and engage your audience. But why should you choose React for your data [...] ## Ariadne: building a custom observability UI for personalized search DevFeed: [Ariadne: building a custom observability UI for personalized search]() Original publisher: [Read original article]() Published: 2023-06-13T01:00:00Z Content type: article Language: en Sources: [Stitch Fix]() Topics: [observability](), [ui](), [React](), [d3.js](), [Microservice](), [Logging and metrics](), [debugging]() Tags: [d3-js](), [debugging](), [development](), [logging-and-metrics](), [microservices](), [observability](), [react](), [ui]() ### AI overview Stitch Fix describes Ariadne, a custom interactive observability UI for introspecting its personalized search pipeline. Built with React, D3.js, visx, and internal libraries, the tool uses production and experimental search APIs to help teams trace search behavior, diagnose bugs, and support experimentation. ### Source excerpt In June 2022, Stitch Fix launched the Freestyle search feature, transforming how our clients discover styles that are tailored to their taste. Under the hood, personalized search is fulfilled by a pipeline of modular microservices. We designed the search system to be composable, making it easy to swap in new components and speeding up experimentation and development. Composability also made the system more observable, making it simpler to make each event traceable and reproducible with built-in logging and metrics. However, even with extensive logging, debugging a complex system such as personalized search can be quite challenging. As a hypothetical example, if a client searches for running shoes and instead sees paisley sweaters, we need to quickly diagnose where in the search pipeline the problem occurred, so that the experts in that system can work on a resolution. Where did the sweaters come from, and where are the shoes we expected to see instead? Did the query get parsed into incorrect attributes? Did the attributes get poorly matched with items in our inventory? Did the result rankings disproportionately focus on the client's past preference for sweaters and disinterest in sportswear? Understanding which service is responsible for the problem is a crucial first step in addressing it. Ideally, we want to anticipate and prevent such problems through interrogating hypothetical search scenarios before clients encounter them. Early on, we knew that slogging through system logs to understand bugs and dependencies of search would not sustain our need for iterative experimentation and collaborative development. To reduce toil and enhance the impact of the Search team, we invested in building a dedicated tool. Ariadne, named after the labyrinth expert from Greek mythology, is a custom interactive UI designed for search introspection. Ariadne is built with React and custom visualization components based on D3.js, visx, and internal libraries, and is powered by producti ## DependenTree, Graph Visualization Library DevFeed: [DependenTree, Graph Visualization Library]() Original publisher: [Read original article]() Author: Amogh Kambale Published: 2022-03-23T19:00:00Z Content type: article Language: en Sources: [Square Corner Blog RSS Feed]() Topics: [Graphs](), [Library](), [Reverse Dependencies](), [API](), [data](), [Front end](), [JSON](), [Code]() Tags: [api](), [d3-js](), [data-lineage](), [dependency](), [engineering](), [front-end](), [graph](), [graphs](), [json](), [library](), [mapping](), [scale](), [visualization]() ### AI overview DependenTree is a D3.js-based visualization library for representing large dependency graphs as collapsible trees. It supports upstream and downstream dependencies, cyclic graphs, and client-side dependency mapping to avoid oversized server-to-client payloads. ### Source excerpt Visualize dependency graphs at scale ## Integrating React and D3.js for Data Visualization DevFeed: [Integrating React and D3.js for Data Visualization]() Original publisher: [Read original article]() Author: Zach Silveira Published: 2016-04-21T17:00:00Z Content type: tutorial Language: en Sources: [ReactJS News]() Topics: [React](), [Data visualization](), [JavaScript](), [User Interfaces](), [Document Object Model (DOM)](), [Library]() Tags: [d3](), [d3-js](), [data-visualization](), [declarative](), [interfaces](), [javascript](), [libraries](), [react](), [user-interfaces](), [web-applications]() ### AI overview This tutorial explains how React and D3.js can be used together for data visualization. It contrasts React's virtual DOM and reusable UI components with D3's direct DOM manipulation and data-focused utilities, and discusses React's role in building client-side interfaces. ### Source excerpt D3 is great at data visualizations, but it manipulates the DOM directly to display that data. Rendering DOM elements is where React shines. It uses a virtual representation of the DOM (virtual DOM) and a super performant diffing algorithm in order to determine the fastest way to update the DOM. We want to leverage React's highly efficient, declarative, and reusable components with D3's data utility functions. At this point, we can safely say that React is the preferred JavaScript library for building user interfaces. It is used practically everywhere and is almost as pervasive as jQuery. It has an API that is simple, powerful, and easy to learn. Its performance metrics are really impressive thanks to the Virtual DOM and its clever diff algorithm between state changes. Nothing, however, is perfect, and React too has its limitations. One of React's greatest strengths is the ease with which it integrate third-party libraries, but some libraries, especially opinionated ones, are more difficult to integrate than others. An extremely popular library that can be tricky to integrate with React is D3.js. D3 is an excellent data visualization library with a rich and powerful API. It is the gold standard of data visualizations. However, Because this library is opinionated about data, it is no trivial endeavour to get it to work with React. A few simple strategies permit these two libraries to work together in very powerful ways. Editor's Note: Check out our upcoming workshop, React and D3, a crash course in learning how to create data visualizations with these two in demand libraries. Reserve your spot now on Eventbrite and get 20% off admission. Learn more at the Eventbrite page What is React? React is an open-source JavaScript library for creating user interfaces that addresses the challenges of building large applications with data that changes over time. Originally developed at Facebook, it is now seen in many of the most commonly used web applications including Instagram, ## Plotting Reddit post frequencies with d3 DevFeed: [Plotting Reddit post frequencies with d3]() Original publisher: [Read original article]() Published: 2016-02-20T00:00:00Z Content type: tutorial Language: en Sources: [Adam Bard]() Topics: [d3.js](), [plotting](), [data](), [Code]() Tags: [charts](), [code](), [d3](), [d3-js](), [data](), [graphs](), [plotting]() ### AI overview A tutorial describing how the author added a 7x24 color-coded grid plot to Later's Reddit post timing analysis page using D3.js. The chart represents posting frequency across hours and days of the week, providing a more precise view than separate bar charts. ### Source excerpt This week I added a better graph to Later (for Reddit)'s post timing analysis page. Previously, the most common time and the most common day were plotted on separate bar charts. However, I noticed that I got called out on this in this article on Medium, which offered a pretty sensible alternative that I wasted no time in ripping off wholesale. I still have the bar graphs in, but I also added a 7x24 color-coded grid plot, allowing for a more accurate view of exactly when the most popular posts were posted. ## Welcome to Square! Let's Learn D3! DevFeed: [Welcome to Square! Let's Learn D3!]() Original publisher: [Read original article]() Author: Square Engineering Published: 2014-10-13T16:07:00Z Content type: tutorial Language: en Sources: [Square Corner Blog RSS Feed]() Topics: [Tutorial](), [Learning](), [Code](), [NEO](), [GitHub]() Tags: [code](), [d3](), [d3-js](), [engineering](), [examples](), [github](), [pull-requests](), [tutorial]() ### AI overview Square introduces an internal tutorial for learning D3.js, created for its NEO engineer onboarding program. The tutorial grew from teaching notes and includes examples, with source available on GitHub for contributions. ### Source excerpt Our internal tutorial for learning D3.