Graphics, as a Function of State / Graphic = fn(state)

My name's Anil Durman. I'm an engineer at the New York Times and this is my talk called Graphic as a Function of State. As I said, by day I'm a senior software engineer at the New York Times. At the Times, my team helps people understand the news with new formats and pages. So you may have seen our live blog page where it is a thread of posts, and reported updates on live events as they're developing, or even more information-heavy pages, like our COVID Hub, where people can update information on the pandemic. I work with a lot of great people who are doing work that is highly impactful and highly fulfilling. And as always, we are hiring and looking for not just developers, but designers, product managers, and just anyone who works in tech.

By night, I am a creative coder. I love the web, and a lot of my work has to do with exploring how creativity and code intersect and interact with one another. My Twitter handle is MeloGood. You can see where I post a lot of experiments, especially observable notebooks. And my latest project is called Good Graphics, where I have been doing a lot of experimentation. And this talk kind of naturally arised out of some of my findings.

So, this quick overview of where we're headed. We're going to talk about the principle of UI, the functions, state, talk a little bit about SVGs, talk about them in the context of React components, and then talk about the graphics systems that you can build with them once you kind of have this understanding.

So, when we say UI, the function, state, it's a core React principle. You can render your entire site application as a function of the state that you give it. So, when you give it the first name, last name, it will render out the world. And as that input changes, your UI naturally re-renders and is always up to date with the state that it's giving. And it really just means that JXS allows us to declaratively write in mark-up, especially in the context of updates.

This is a very simple React component. It's called click-text. And really what it does is it assumes that you're going to give it a count and then as your back count updates, the text updates. So, when we have the prop of click equals one, it's just going to say click one time. As it has the prop of two, click two times, and so on and so forth. But really this illustrates that React allows us to really incorporate the state of the data that you were given and rendered on the screen without having to do too much extra.

Let's talk about SVGs. If you were like me before I started learning more about them, they're kind of just this design asset that my designer would give me and that I would just throw into a React component and just use but never really touch ever again. But it turns out they're a lot more than that. It's an XML-based language, they're describing 2D-based graphics which basically just means that there's a bunch of primitives that allow you to describe things like a circle or a rectangle on the screen. This need to be supported by JSX out of the box and the markup looks really similar to React components just with special props. So, in action this is an SVG. You see that we wrap the top level components SVG with a list for height, some details about how to draw lines with a stroke and a fill, and then you can see the circle component has a few props. The circle is x coordinate, the circle is y coordinate, and then r which is the answer radius. This is just the specification for how you would draw a circle using SVGs, and it kind of already follows and looks like a React component, so it lends itself very well to thinking in React. So we can start to build these SVGs out and kind of componentise them. We can add more logic to them and really start to work with graphics in the same context in a way that we already know how to work with our UIs.

Our components can be updated based on a state, and really the power that it unlocks is that JS sets an SVG that allows us to declaratively write graphics. So let's talk about through an example of what I mean.

This component is called ColorBar. It takes in a prop stock color, and then it renders a rectangle that is 20 pixels high and entire width. If we call the ColorBar component with the color black you can see at the bottom we have a black bar. But because, like I said, JSX allows us to render our components and graphics in a very declarative way, we can pass in a prop of color red and see our bar automatically update and re-render the same way a UI would. Or we can pass it the color green and same thing with the color blue. So this is another way of thinking about working with State and working with React and thinking in a very declarative way about how we write our components, both the output being a graphic instead of a fully functional UI but allowing us to use the same principles.

We can start to really think and add in a lot of complicated logic into these components because like I said they are fully functional components and they have everything that a regular React component would do and have. So in this example we have props.colors and it's also this one is called multibar or multicolored bar to back up a little bit. It takes the prop.colors which is just array of colors and then plots those colors within a gradient. The linear gradient component is a natively supported SVG tag and it just allows you to declare a gradient and then in our rectangle we can apply that gradient as the fill. So the color of the rectangle is going to match the gradient. So in this example we call it is black so it renders a fully black bar the whole time because you don't have to space out the colors are all one color but using the same component you can update a state to be red green blue and you get a fully gradients colored bar of red green blue. So following again that same idea of the state you pass into your graphic is automatically updated and our graphics can become super complex to handle all these different states.

So when I say graphic as a function of state I'm really trying to convey that we can use plain HTML to build these really complex graphic systems and our logic can be broken down in components similar to how we already work with uis and our graphic designs can be rich and reactive and as intuitive to the end user as our uis are. So let's kind of work through and walk through building a graphic together. So this graphic, it again is just a very simple circle graphic. I abstracted out to the circle svg markup into a component that takes the same props I just passed it in. We kind of get a very similar output of a single circle. But if we were to add a little logic and lean on some of the functionality that React can give us, we can do some really cool things. This component is called Grid. And what Grid does is basically a nested for loop of columns and rows. And if you give it the input to five columns, five rows, it takes whatever child components you give it and plots it multiple times in each spot on that grid. So, in practice, using it, it does something like this to where we give that grid a circle component as the child. And it goes and makes a five by five grid of circle components by using a lot of the React native functionality around children and coupling that with the made in the supported group functionality that SVGs give us. So, we can, like I said, take our logic, componentize it down. We really start to combine logic together on top of one another in a React friendly way to build complex systems. So, now that we have this system in place, you can start doing some really cool things right out of the box with it. You could even swap out the circle for a rectangle component and really just leverage the we've already written, similar to how you could reuse logic for a component you've already written.

Or you could come up with really cool designs and have a bunch of circles nested in place with each other so you don't have to only do one single thing, you can do a bunch of different things. But it still reuses a lot of the same logic we had before, but allows us to do a bit more experimentation around swapping things out and seeing how much our graphic can hold in terms of possibilities.

But I think there's also a step forward, we can even take this, if you look at the ability of componentization. So this is a component called nested circles. And if we were to go back to the last example, it's just the taking of that logic of let's have five circles nested into one another and really building it out to make it a little bit more robust and a little bit more determinable and reusable. So what nested circle does is that same for loop logic of an empty array, and it just plots the number of circles congruent to the first circle taking up all the space. And then if there's two circles, the second circle taking up half the space. And if there's 10 circles spreading that space out even further amongst those 10 circles.

So a component like this, you're able to build a system that doesn't just have one single output, but can have a multiplicity of outputs. So using our components, in the first top left corner you see it's a nested circle with a certain number of circles, prop equals to one, whereas in the bottom right corner, with number of circles, prop is equal to 10 or 15. So you can start to see how our systems can be more complex once we have this componentization down, and once we can start building onto it and playing around with our state a little bit more. So like I said in previous examples, we can even take nested circle and combine it with other pieces of code in our codebase to do something really cool. So this is nested circle loop grid, and it looks very similar to the very first example of grid I showed you, but because we have nested circles and that component can handle so many different stateful options, you can see how this system, this same system, depending on the props and state you give it, could render a single circle or render these two outputs either or as well by playing around with the number of circles nested circle has to render. Or even if you wanted to play around with the number of grids as well, you could even render a bunch of massive circles, but in a two by two grid. And that really highlights the fact that this system isn't really about combining our isn't really about creating one single graphic, but it's more about creating a system that can hold a bunch of different outputs and multiplicity of outcomes.

So, to summarize, in React your UI is a representation of your state. You can use SVUs to apply React principles to graphic design. When we think of our state, we can contain infinite possibilities and there isn't one single design you can pass a design for. You can design for a wide array of things and outcomes. And our graphic designs can be dynamic and reactive.