{"id":28298,"date":"2022-05-18T14:01:37","date_gmt":"2022-05-18T14:01:37","guid":{"rendered":"http:\/\/generate-custom-art-with-react"},"modified":"2022-05-18T14:01:37","modified_gmt":"2022-05-18T14:01:37","slug":"generate-custom-art-with-react","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/guest_post\/generate-custom-art-with-react\/","title":{"rendered":"Generate Custom Art with React"},"content":{"rendered":"

Art is one of the ways you can express yourself freely. As someone working in tech, it might be hard to find the time to take up painting or drawing when you\u2019re trying to constantly stay on top of all the new tools coming out. Luckily for us, there are some creative ways to combine tech and art to make expressive visuals through data visualization.<\/p>\n

In this tutorial, we\u2019re going to make a React app to generate custom artwork with the d3.js<\/a> and changing data. This will help us learn more about an advanced JavaScript topic, play with a new library, and make some art in the process.<\/p>\n

Set up the React app<\/h2>\n

Let\u2019s start by creating a brand new React TypeScript app with the following command:<\/p>\n

$ npx create-react-app art-generator --template typescript\n<\/code><\/span><\/pre>\n
Since we used npx<\/code> to create the app, we\u2019ll be working with npm<\/code> commands throughout the rest of the project instead of yarn<\/code>. If you do prefer yarn<\/code>, you can create the app with yarn create-react-app art-generator --template typescript<\/code>.<\/p>\n
With all of the files and folders in place for the React app, we can install the packages we need.<\/p>\n
$ npm i d3 @types\/d3 html-to-image\n<\/code><\/span><\/pre>\n
We\u2019re getting the d3<\/code> library installed so we can make the art based on some data we get from the user and we\u2019re using html-to-image<\/code> to save that art to Cloudinary. If you don\u2019t have a Cloudinary account, you can sign up for a free one here<\/a>. You\u2019ll need your cloud name and upload preset from your account settings in order to make the API call to upload the art images.<\/p>\n
Now that everything is set up and we have the credentials we need to upload images, we can start working on a new component to get some user input to create the images.<\/p>\n
Add the generated art component<\/h2>\n
The first thing we need to do is create a new folder in the src<\/code> folder called components<\/code>. Inside the components<\/code> folder, add a new file called Art.tsx<\/code>. This is where we will write all of the code for this art functionality. To make sure that this component is rendered, we\u2019re going to update the App.tsx<\/code> file to import this component we are going to make in a bit.<\/p>\n
So open your App.tsx<\/code> file and edit it to look like this:<\/p>\n
\/\/ App.tsx<\/span>\n\nimport<\/span> Art from<\/span> \".\/components\/Art\"<\/span>;\n\nfunction<\/span> App<\/span>(<\/span>) <\/span>{\n  return<\/span> <Art<\/span> \/><\/span><\/span>;\n}\n\nexport<\/span> default<\/span> App;\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
It trims down a lot of the boilerplate code and imports to the exact thing we need. If you try running the app now, you\u2019ll get an error because we haven\u2019t made the Art<\/code> component yet. That\u2019s what we are about to make.<\/p>\n
The art component<\/h3>\n
Open the Art.tsx<\/code> file and add the following imports.<\/p>\n
\/\/ Art.tsx<\/span>\n\nimport<\/span> { useEffect, useRef, useState } from<\/span> \"react\"<\/span>;\nimport<\/span> { toPng } from<\/span> \"html-to-image\"<\/span>;\nimport<\/span> * as<\/span> d3 from<\/span> \"d3\"<\/span>;\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
This is all we\u2019re going to need to create the artwork from user input. Next, we need to define the type for the user input data since we\u2019re building a TypeScript app. Beneath the import statements, add this type declaration.<\/p>\n
\/\/ Art.tsx<\/span>\n...\n\ntype ConfigDataType = {\n  color<\/span>: string,\n  svgHeight<\/span>: number,\n  svgWidth<\/span>: number,\n  xMultiplier<\/span>: number,\n  yMultiplier<\/span>: number,\n  othWidth<\/span>: number,\n  data<\/span>: number[],\n};\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
These are all of the values we\u2019ll get from the user to make their art and they\u2019ll be used in d3<\/code> as values for attributes. In order to use d3<\/code>, we need to write a function outside of the actual component to set up what and how d3<\/code> will draw elements on the page.<\/p>\n
Set up d3.js<\/h3>\n
Since we know the type of data we expect to be used in d3<\/code>, let\u2019s go ahead and write a function to handle the d3<\/code> drawings below the type definition.<\/p>\n
\/\/ Art.tsx<\/span>\n...\n\nfunction<\/span> drawArt<\/span>(configData: ConfigDataType)<\/span> <\/span>{\n  const<\/span> svg = d3\n    .select(\"#art\"<\/span>)\n    .append(\"svg\"<\/span>)\n    .attr(\"width\"<\/span>, configData.svgWidth)\n    .attr(\"height\"<\/span>, configData.svgHeight)\n    .style(\"margin-left\"<\/span>, 100<\/span>);\n\n  svg\n    .selectAll(\"rect\"<\/span>)\n    .data(configData.data)\n    .enter()\n    .append(\"rect\"<\/span>)\n    .attr(\"x\"<\/span>, (d, i) => i * configData.xMultiplier)\n    .attr(\"y\"<\/span>, (d, i) => 300<\/span> - configData.yMultiplier * d)\n    .attr(\"width\"<\/span>, configData.othWidth)\n    .attr(\"height\"<\/span>, (d, i) => d * configData.yMultiplier)\n    .attr(\"fill\"<\/span>, configData.color);\n}\n<\/code><\/span>Code language:<\/span> PHP<\/span> (<\/span>php<\/span>)<\/span><\/small><\/pre>\n
This is a very simple d3<\/code> drawing based on the user input. Honestly, d3<\/code> has a pretty steep learning curve and I usually have the docs open the entire time I\u2019m working. So let\u2019s walk through this code in a little more detail.<\/p>\n
First, this function selects an HTML element with the art<\/code> id and appends an svg<\/code> HTML element inside it. (We\u2019ll make the art<\/code> element in just a bit when we get to the rendered part of the component.) Then we set the height<\/code> and width<\/code> attributes for the svg<\/code> element based on the user input. After that, we add a little style<\/code> to the svg<\/code> to give it a margin on the left.<\/p>\n
Now that the svg<\/code> element is there, we can start adding the art inside of it. We start by preemptively selecting all of the rect<\/code> elements that will be created in the svg<\/code>. Then we get the data array the user entered and start appending rect<\/code> elements with attributes for the x<\/code>, y<\/code>, width<\/code>, height<\/code>, and fill<\/code> attributes set based on the user input.<\/p>\n
With this function, d3<\/code> is ready to draw something for us.<\/p>\n
Set up the component functions<\/h3>\n
We\u2019re almost<\/em> ready to render something on the page when the app runs, but we have to set up a few things for the component to work correctly. Below the drawArt<\/code> function, add the following code. It looks like a lot, but we\u2019ll explain what\u2019s going on.<\/p>\n
\/\/ Art.tsx<\/span>\n...\n\nexport default<\/span> function<\/span> Art<\/span>(<\/span>) <\/span>{\n  const<\/span> d3ContainerRef = useRef();\n  const<\/span> [configData, setConfigData] = useState<ConfigDataType>({\n    color<\/span>: \"black\"<\/span>,\n    svgHeight<\/span>: 300<\/span>,\n    svgWidth<\/span>: 700<\/span>,\n    xMultiplier<\/span>: 90<\/span>,\n    yMultiplier<\/span>: 15<\/span>,\n    othWidth<\/span>: 65<\/span>,\n    data<\/span>: [12<\/span>, 5<\/span>, 6<\/span>, 6<\/span>, 9<\/span>, 10<\/span>],\n  });\n\n  useEffect(()<\/span> =><\/span> {\n    drawArt(configData);\n  }, [configData]);\n\n  function<\/span> updateArt<\/span>(e: any<\/span>) <\/span>{\n    e.preventDefault();\n\n    const<\/span> newConfigs = {\n      color<\/span>: e.target.color?.value || configData.color,\n      svgHeight<\/span>: e.target.svgHeight?.value || configData.svgHeight,\n      svgWidth<\/span>: e.target.svgWidth?.value || configData.svgWidth,\n      xMultiplier<\/span>: e.target.xMultiplier?.value || configData.xMultiplier,\n      yMultiplier<\/span>: e.target.yMultiplier?.value || configData.yMultiplier,\n      othWidth<\/span>: e.target.othWidth?.value || configData.othWidth,\n      data<\/span>: e.target.data?.value || configData.data,\n    };\n\n    setConfigData(newConfigs);\n  }\n\n  async<\/span> function<\/span> submit<\/span>(e: any<\/span>) <\/span>{\n    e.preventDefault();\n\n    if<\/span> (d3ContainerRef.current === null<\/span>) {\n      return<\/span>;\n    }\n\n    \/\/ @ts-ignore<\/span>\n    const<\/span> dataUrl = await<\/span> toPng(d3ContainerRef.current, { cacheBust<\/span>: true<\/span> });\n\n    const<\/span> uploadApi = `https:\/\/api.cloudinary.com\/v1_1\/your_cloud_name\/image\/upload`<\/span>;\n\n    const<\/span> formData = new<\/span> FormData();\n    formData.append(\"file\"<\/span>, dataUrl);\n    formData.append(\"upload_preset\"<\/span>, \"your_upload_preset_value\"<\/span>);\n\n    await<\/span> fetch(uploadApi, {\n      method<\/span>: \"POST\"<\/span>,\n      body<\/span>: formData,\n    });\n  }\n}\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
We start by creating a ref for the art<\/code> element we targeted in the drawArt<\/code> function. Then we set the initial state of the user input so that something shows on the screen when the app starts up. Next, you can see that we call the drawArt<\/code> function each time the configData<\/code> is changed. This is how we keep appending elements to the svg<\/code>.<\/p>\n
Then we have a couple of helper functions. The updateArt<\/code> function takes the values from the user input (we\u2019ll make the form for this shortly) and calls setConfigData<\/code> to update the state, which triggers the drawArt<\/code> function. This will only be called when a button is clicked to prevent unexpected re-renders.<\/p>\n
The submit<\/code> function is what will get called when a user decides that they want to save the image to Cloudinary. We start by keeping the page from refreshing, then we make sure the ref element isn\u2019t empty. Next, we capture the image as a PNG and make a variable for the Cloudinary upload API.<\/p>\n
After that, we make a new FormData<\/code> object to hold the values we need to upload an image to Cloudinary. Once the data is ready, we called the fetch<\/code> method to submit a POST request to the API. That\u2019s all of the functions we need for the component so the only thing left is the return statement.<\/p>\n
Add the rendered elements<\/h3>\n
We need a form to get the user input, a couple of buttons, and the ref element. Add this code below all of the component functions we just defined.<\/p>\n
\/\/ Art.tsx<\/span>\n...\n\n\/\/ Art()<\/span>\n...\n\nreturn (\n    <><\/span>\n      <form<\/span> onSubmit<\/span>={updateArt}<\/span>><\/span>\n        <div<\/span>><\/span>\n          <label<\/span> htmlFor<\/span>=\"color\"<\/span>><\/span>Color<\/label<\/span>><\/span>\n          <input<\/span> type<\/span>=\"text\"<\/span> name<\/span>=\"color\"<\/span> onChange<\/span>={(e)<\/span> =><\/span> e.target.value} \/>\n        <\/div<\/span>><\/span>\n        <div<\/span>><\/span>\n          <label<\/span> htmlFor<\/span>=\"svgHeight\"<\/span>><\/span>SVG Height<\/label<\/span>><\/span>\n          <input<\/span>\n            type<\/span>=\"number\"<\/span>\n            name<\/span>=\"svgHeight\"<\/span>\n            onChange<\/span>={(e)<\/span> =><\/span> e.target.value}\n          \/>\n        <\/div<\/span>><\/span>\n        <div<\/span>><\/span>\n          <label<\/span> htmlFor<\/span>=\"svgWidth\"<\/span>><\/span>SVG Width<\/label<\/span>><\/span>\n          <input<\/span>\n            type<\/span>=\"number\"<\/span>\n            name<\/span>=\"svgWidth\"<\/span>\n            onChange<\/span>={(e)<\/span> =><\/span> e.target.value}\n          \/>\n        <\/div<\/span>><\/span>\n        <div<\/span>><\/span>\n          <label<\/span> htmlFor<\/span>=\"xMultiplier\"<\/span>><\/span>X Multiplier<\/label<\/span>><\/span>\n          <input<\/span>\n            type<\/span>=\"number\"<\/span>\n            name<\/span>=\"xMultiplier\"<\/span>\n            onChange<\/span>={(e)<\/span> =><\/span> e.target.value}\n          \/>\n        <\/div<\/span>><\/span>\n        <div<\/span>><\/span>\n          <label<\/span> htmlFor<\/span>=\"yMultiplier\"<\/span>><\/span>Y Multiplier<\/label<\/span>><\/span>\n          <input<\/span>\n            type<\/span>=\"number\"<\/span>\n            name<\/span>=\"yMultiplier\"<\/span>\n            onChange<\/span>={(e)<\/span> =><\/span> e.target.value}\n          \/>\n        <\/div<\/span>><\/span>\n        <div<\/span>><\/span>\n          <label<\/span> htmlFor<\/span>=\"othWidth\"<\/span>><\/span>Other Width<\/label<\/span>><\/span>\n          <input<\/span>\n            type<\/span>=\"number\"<\/span>\n            name<\/span>=\"othWidth\"<\/span>\n            onChange<\/span>={(e)<\/span> =><\/span> e.target.value}\n          \/>\n        <\/div<\/span>><\/span>\n        <div<\/span>><\/span>\n          <label<\/span> htmlFor<\/span>=\"data\"<\/span>><\/span>Some Numbers<\/label<\/span>><\/span>\n          <input<\/span> type<\/span>=\"text\"<\/span> name<\/span>=\"data\"<\/span> onChange<\/span>={(e)<\/span> =><\/span> e.target.value} \/>\n        <\/div<\/span>><\/span>\n        <button<\/span> type<\/span>=\"submit\"<\/span>><\/span>See Art<\/button<\/span>><\/span>\n      <\/form<\/span>><\/span>\n      {\/* @ts-ignore *\/}\n      <div<\/span> id<\/span>=\"art\"<\/span> ref<\/span>={d3ContainerRef}<\/span>><\/span><\/div<\/span>><\/span>\n      <button<\/span> type<\/span>=\"submit\"<\/span> onClick<\/span>={submit}<\/span>><\/span>\n        Save picture\n      <\/button<\/span>><\/span>\n    <\/><\/span><\/span>\n  );\n}\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
We have a form here with several input fields and a button that calls the updateArt<\/code> method. Then we have the art<\/code> element we select in the drawArt<\/code> function. Finally, there\u2019s the button to upload the image whenever the user is ready.<\/p>\n
Now you can run the app with npm start<\/code> and you should see something similar to this.<\/p>\n
\"the<\/p>\n
That\u2019s it! Now you can play around with the values through the form or you can work on the code and make fancier data visualizations.<\/p>\n
Finished code<\/h2>\n
You can check out the complete code in the art-generator folder of this repo<\/a> or this CodeSandbox<\/a><\/p>\n<\/div>\n  \n  
\n    <\/iframe>\n  <\/div>\n\n  
Conclusion<\/h2>\n
Yes, there is beauty in a simple bar chart. When is the last time you were actually able to make a simple bar chart for an app? No fancy transitions, no labels, no real scaling, or showing anything meaningful? That\u2019s a special kind of freedom and it does give you a chance to think about other things you can do with your data.<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"","protected":false},"author":41,"featured_media":28299,"comment_status":"","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_cloudinary_featured_overwrite":false,"footnotes":""},"categories":[1],"tags":[134,370,246,371],"class_list":["post-28298","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-guest-post","tag-image","tag-react","tag-under-review"],"acf":[],"yoast_head":"\nGenerate Custom Art with React<\/title>\n<meta name=\"description\" content=\"There is beauty in data even though we don't get to see it often. If you're wanting to learn how to make data visualizations with d3.js, let's start by making simple art.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/cloudinary.com\/blog\/guest_post\/generate-custom-art-with-react\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Generate Custom Art with React\" \/>\n<meta property=\"og:description\" content=\"There is beauty in data even though we don't get to see it often. If you're wanting to learn how to make data visualizations with d3.js, let's start by making simple art.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/cloudinary.com\/blog\/guest_post\/generate-custom-art-with-react\/\" \/>\n<meta property=\"og:site_name\" content=\"Cloudinary Blog\" \/>\n<meta property=\"article:published_time\" content=\"2022-05-18T14:01:37+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924886\/Web_Assets\/blog\/ec6325f1ba87dba61fdfd8bf3ddc3e16fe082eda-6000x4000-1_28299b91e9\/ec6325f1ba87dba61fdfd8bf3ddc3e16fe082eda-6000x4000-1_28299b91e9.jpg?_i=AA\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"NewsArticle\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/generate-custom-art-with-react\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/generate-custom-art-with-react\/\"},\"author\":{\"name\":\"\",\"@id\":\"\"},\"headline\":\"Generate Custom Art with React\",\"datePublished\":\"2022-05-18T14:01:37+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/generate-custom-art-with-react\/\"},\"wordCount\":5,\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/generate-custom-art-with-react\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924886\/Web_Assets\/blog\/ec6325f1ba87dba61fdfd8bf3ddc3e16fe082eda-6000x4000-1_28299b91e9\/ec6325f1ba87dba61fdfd8bf3ddc3e16fe082eda-6000x4000-1_28299b91e9.jpg?_i=AA\",\"keywords\":[\"Guest Post\",\"Image\",\"React\",\"Under Review\"],\"inLanguage\":\"en-US\",\"copyrightYear\":\"2022\",\"copyrightHolder\":{\"@id\":\"https:\/\/cloudinary.com\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/generate-custom-art-with-react\/\",\"url\":\"https:\/\/cloudinary.com\/blog\/guest_post\/generate-custom-art-with-react\/\",\"name\":\"Generate Custom Art with React\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/generate-custom-art-with-react\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/generate-custom-art-with-react\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924886\/Web_Assets\/blog\/ec6325f1ba87dba61fdfd8bf3ddc3e16fe082eda-6000x4000-1_28299b91e9\/ec6325f1ba87dba61fdfd8bf3ddc3e16fe082eda-6000x4000-1_28299b91e9.jpg?_i=AA\",\"datePublished\":\"2022-05-18T14:01:37+00:00\",\"description\":\"There is beauty in data even though we don't get to see it often. If you're wanting to learn how to make data visualizations with d3.js, let's start by making simple art.\",\"breadcrumb\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/generate-custom-art-with-react\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/cloudinary.com\/blog\/guest_post\/generate-custom-art-with-react\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/generate-custom-art-with-react\/#primaryimage\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924886\/Web_Assets\/blog\/ec6325f1ba87dba61fdfd8bf3ddc3e16fe082eda-6000x4000-1_28299b91e9\/ec6325f1ba87dba61fdfd8bf3ddc3e16fe082eda-6000x4000-1_28299b91e9.jpg?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924886\/Web_Assets\/blog\/ec6325f1ba87dba61fdfd8bf3ddc3e16fe082eda-6000x4000-1_28299b91e9\/ec6325f1ba87dba61fdfd8bf3ddc3e16fe082eda-6000x4000-1_28299b91e9.jpg?_i=AA\",\"width\":6000,\"height\":4000},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/generate-custom-art-with-react\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/cloudinary.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Generate Custom Art with React\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\",\"url\":\"https:\/\/cloudinary.com\/blog\/\",\"name\":\"Cloudinary Blog\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/cloudinary.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\",\"name\":\"Cloudinary Blog\",\"url\":\"https:\/\/cloudinary.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA\",\"width\":312,\"height\":60,\"caption\":\"Cloudinary Blog\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Generate Custom Art with React","description":"There is beauty in data even though we don't get to see it often. If you're wanting to learn how to make data visualizations with d3.js, let's start by making simple art.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/cloudinary.com\/blog\/guest_post\/generate-custom-art-with-react\/","og_locale":"en_US","og_type":"article","og_title":"Generate Custom Art with React","og_description":"There is beauty in data even though we don't get to see it often. If you're wanting to learn how to make data visualizations with d3.js, let's start by making simple art.","og_url":"https:\/\/cloudinary.com\/blog\/guest_post\/generate-custom-art-with-react\/","og_site_name":"Cloudinary Blog","article_published_time":"2022-05-18T14:01:37+00:00","twitter_card":"summary_large_image","twitter_image":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924886\/Web_Assets\/blog\/ec6325f1ba87dba61fdfd8bf3ddc3e16fe082eda-6000x4000-1_28299b91e9\/ec6325f1ba87dba61fdfd8bf3ddc3e16fe082eda-6000x4000-1_28299b91e9.jpg?_i=AA","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"NewsArticle","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/generate-custom-art-with-react\/#article","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/generate-custom-art-with-react\/"},"author":{"name":"","@id":""},"headline":"Generate Custom Art with React","datePublished":"2022-05-18T14:01:37+00:00","mainEntityOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/generate-custom-art-with-react\/"},"wordCount":5,"publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/generate-custom-art-with-react\/#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924886\/Web_Assets\/blog\/ec6325f1ba87dba61fdfd8bf3ddc3e16fe082eda-6000x4000-1_28299b91e9\/ec6325f1ba87dba61fdfd8bf3ddc3e16fe082eda-6000x4000-1_28299b91e9.jpg?_i=AA","keywords":["Guest Post","Image","React","Under Review"],"inLanguage":"en-US","copyrightYear":"2022","copyrightHolder":{"@id":"https:\/\/cloudinary.com\/#organization"}},{"@type":"WebPage","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/generate-custom-art-with-react\/","url":"https:\/\/cloudinary.com\/blog\/guest_post\/generate-custom-art-with-react\/","name":"Generate Custom Art with React","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/generate-custom-art-with-react\/#primaryimage"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/generate-custom-art-with-react\/#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924886\/Web_Assets\/blog\/ec6325f1ba87dba61fdfd8bf3ddc3e16fe082eda-6000x4000-1_28299b91e9\/ec6325f1ba87dba61fdfd8bf3ddc3e16fe082eda-6000x4000-1_28299b91e9.jpg?_i=AA","datePublished":"2022-05-18T14:01:37+00:00","description":"There is beauty in data even though we don't get to see it often. If you're wanting to learn how to make data visualizations with d3.js, let's start by making simple art.","breadcrumb":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/generate-custom-art-with-react\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/cloudinary.com\/blog\/guest_post\/generate-custom-art-with-react\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/generate-custom-art-with-react\/#primaryimage","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924886\/Web_Assets\/blog\/ec6325f1ba87dba61fdfd8bf3ddc3e16fe082eda-6000x4000-1_28299b91e9\/ec6325f1ba87dba61fdfd8bf3ddc3e16fe082eda-6000x4000-1_28299b91e9.jpg?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924886\/Web_Assets\/blog\/ec6325f1ba87dba61fdfd8bf3ddc3e16fe082eda-6000x4000-1_28299b91e9\/ec6325f1ba87dba61fdfd8bf3ddc3e16fe082eda-6000x4000-1_28299b91e9.jpg?_i=AA","width":6000,"height":4000},{"@type":"BreadcrumbList","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/generate-custom-art-with-react\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/cloudinary.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Generate Custom Art with React"}]},{"@type":"WebSite","@id":"https:\/\/cloudinary.com\/blog\/#website","url":"https:\/\/cloudinary.com\/blog\/","name":"Cloudinary Blog","description":"","publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/cloudinary.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/cloudinary.com\/blog\/#organization","name":"Cloudinary Blog","url":"https:\/\/cloudinary.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA","width":312,"height":60,"caption":"Cloudinary Blog"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":""}]}},"jetpack_featured_media_url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924886\/Web_Assets\/blog\/ec6325f1ba87dba61fdfd8bf3ddc3e16fe082eda-6000x4000-1_28299b91e9\/ec6325f1ba87dba61fdfd8bf3ddc3e16fe082eda-6000x4000-1_28299b91e9.jpg?_i=AA","_links":{"self":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/28298","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/users\/41"}],"replies":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/comments?post=28298"}],"version-history":[{"count":0,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/28298\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media\/28299"}],"wp:attachment":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media?parent=28298"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/categories?post=28298"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/tags?post=28298"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}