{"id":28179,"date":"2022-03-23T22:25:02","date_gmt":"2022-03-23T22:25:02","guid":{"rendered":"http:\/\/Data-Visualizations-with-D3.js-and-Redwood"},"modified":"2022-03-23T22:25:02","modified_gmt":"2022-03-23T22:25:02","slug":"data-visualizations-with-d3-js-and-redwood","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/guest_post\/data-visualizations-with-d3-js-and-redwood\/","title":{"rendered":"Data Visualizations with D3"},"content":{"rendered":"

Showing users data in easy to understand formats is an important part of front-end development these days. You can add images, make updates with CSS, or use a number of different libraries. While these approaches are fine, there is another way to generate custom data-based graphics quickly with D3js<\/a>.<\/p>\n

In this tutorial, we\u2019ll create a Redwood app that takes data from the back-end and display it in different charts on the front-end. We\u2019ll also be able to auto-upload images of the charts to Cloudinary so we can show them to people outside of the app.<\/p>\n

Getting everything set up<\/h2>\n

There are a few things that we need to have in place before we get started.<\/p>\n

Setting up Cloudinary<\/h3>\n

One of the things you\u2019ll need to follow along is a free Cloudinary account. You can sign up for one of those here<\/a>.<\/p>\n

Setting up the Redwood app<\/h3>\n

To start, open a terminal and run the following command.<\/p>\n

yarn create redwood-app d3-visuals\n<\/code><\/span><\/pre>\n
This will bootstrap a new Redwood app with multiple files and folders that hold the front-end and the back-end code. You\u2019ll find all of the back-end code in the api<\/code> directory and all of the front-end code is in the web<\/code> directory.<\/p>\n
We\u2019ll also be working with a Postgres database, so if you don\u2019t have a local instance installed you can download it here<\/a>.<\/p>\n
Building the GraphQL back-end<\/h2>\n
We\u2019ll start work on the back-end so that we get the business logic in place.<\/p>\n
Making the models<\/h3>\n
Go to the api > db<\/code> directory and open the schema.prisma<\/code> file. This is where we\u2019ll make our connection to the database and define the models for our tables. We\u2019ll start by updating the provider<\/code> to use our Postgres instance.<\/p>\n
datasource db {\n  provider = \"postgresql\"<\/span>\n  url      = env(\"DATABASE_URL\"<\/span>)\n}\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
You\u2019ll notice we get the DATABASE_URL<\/code> from the environment variables. So we actually need to make a file that holds this variable. In the root directory of the project, make a new file called .env<\/code>. In this file, we\u2019ll define the connection string for our database. It\u2019ll look similar to this.<\/p>\n
DATABASE_URL=postgres:\/\/admin:postgres@localhost:5432\/d3_charts<\/span>\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
Now we can delete the example model in the file and replace it with the tables we need for our data. You can delete the UserExample<\/code> model and replace it with this.<\/p>\n
model Fruit {\n  id    String<\/span> @id @default<\/span>(uuid())\n  label String<\/span>\n  value Int\n}\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
Since we have the model in place, we do need some data to start working with.<\/p>\n
Seeding the data<\/h3>\n
We\u2019ll need something to show when we start making the graphics on the front-end, so we\u2019re going to seed our database with some initial values. Go to the seed.js<\/code> file in api > db<\/code> and feel free to delete the commented out code inside the main<\/code> function.<\/p>\n
Now we\u2019re going to add the code that will seed each table in the database. All of the following code goes inside the main<\/code> function.<\/p>\n
const<\/span> fruitData = [\n  { label<\/span>: 'Tangerine'<\/span>, value<\/span>: 10<\/span> },\n  { label<\/span>: 'Kumquat'<\/span>, value<\/span>: 20<\/span> },\n  { label<\/span>: 'Dragonfruit'<\/span>, value<\/span>: 14<\/span> },\n  { label<\/span>: 'Starfruit'<\/span>, value<\/span>: 42<\/span> },\n  { label<\/span>: 'Raspberry'<\/span>, value<\/span>: 31<\/span> },\n  { label<\/span>: 'Plantain'<\/span>, value<\/span>: 18<\/span> }\n]\n\nreturn<\/span> Promise<\/span>.all(\n  fruitData.map(async<\/span> (fruit) => {\n    const<\/span> record = await<\/span> db.fruit.create({\n      data<\/span>: fruit,\n    })\n    console<\/span>.log(record)\n  })\n)\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
One thing to note is that the seed data should follow the schema for the tables they will be added to. The data has the same values in the object that are expected in the models we wrote eariler.<\/p>\n
Now we can go ahead and run the migration on our database and add the tables and the initial data. To do this, we\u2019ll run 2 Redwood commands.<\/p>\n
yarn rw prisma migrate dev\nyarn rw prisma db seed\n<\/code><\/span><\/pre>\n
The first command connects to the Postgres instance and adds the table schema for the database. The second command adds all of the seed data to the tables in the database.<\/p>\n
With the database work out of the way, we\u2019ll be able to move on to the GraphQL server.<\/p>\n
Creating the GraphQL types and resolvers<\/h3>\n
Now we have to create the types and resolvers that our front-end will use to communicate with the back-end. For this project, we won\u2019t need to add data through the front-end. We\u2019ll just need to view the data.<\/p>\n
There\u2019s a Redwood command that will generate all of the types and resolvers we need to retrieve the data to show in our charts. We\u2019ll need to run this command for each of our tables. Open a terminal and run these 3 commands.<\/p>\n
yarn rw g sdl fruit\n<\/code><\/span><\/pre>\n
These commands generate quite a few new files for us. If you take a look in api > src > graphql<\/code>, you\u2019ll see a new file. The file defines the GraphQL types for the table we created the model for. It has a couple of types for create and update mutations, but we won\u2019t be implementing those.<\/p>\n
Now go to api > src > services<\/code>. You\u2019ll see a new folder that has a resolver file and two files related to testing. If you take a look at any of the resolver files, you\u2019ll see that right now we have the queries to read all of the rows in the table.<\/p>\n
That\u2019s all we need on the back-end! The database is set up and our GraphQL server is ready to go because Redwood did a lot of heavy lifting here. Now we can shift the focus to the front-end.<\/p>\n
Adding the front-end<\/h2>\n
There are a few things we need to do on the front-end to wrap this up. We need to add a chart we build with D3 and we need to save the images to Cloudinary.<\/p>\n
We\u2019ll start by adding a few packages to the front-end. In a terminal, go to the web<\/code> directory and run this.<\/p>\n
yarn add d3\n<\/code><\/span><\/pre>\n
This gives us the package we need to build the charts. Now we\u2019ll make a new page to show them.<\/p>\n
Making a new page<\/h3>\n
We\u2019ll use another Redwood command to create this page for us.<\/p>\n
yarn rw g page charts \/\n<\/code><\/span><\/pre>\n
Take a look in web > src > pages<\/code> and you\u2019ll see a new folder called ChartsPage<\/code>. This folder has the component for the page, a Storybook entry, and a test. Plus the Routes.js<\/code> file has automatically been updated to include this new component as the root page.<\/p>\n
If you run the project with yarn rw dev<\/code>, you should see something similar to this.<\/p>\n
\"picture<\/p>\n
Go to the ChartsPage.js<\/code> file in web > src > pages > ChartsPage<\/code> and delete all of the elements below the <h1><\/code> and add this.<\/p>\n
<PieChart<\/span> data<\/span>={pieData}<\/span> \/><\/span>\n<\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n
This is the component we\u2019re going to make with D3.<\/p>\n
Creating a new chart component with D3<\/h3>\n
Next we can make the PieChart<\/code> component. In the terminal, run this command.<\/p>\n
yarn rw g component PieChart\n<\/code><\/span><\/pre>\n
Go to web > src > components > PieChart<\/code> and open the PieChart.js<\/code> file. First let\u2019s add the following imports at the top of the file.<\/p>\n
import<\/span> * as<\/span> d3 from<\/span> 'd3'<\/span>;\nimport<\/span> { useEffect } from<\/span> 'react'<\/span>;\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
Then delete the current component because we\u2019ll replace it with this.<\/p>\n
function<\/span> PieChart<\/span>({ data, drawChart }<\/span>) <\/span>{\n  \/\/ These are some values that define how the pie chart will be drawn.<\/span>\n  const<\/span> innerRadius = 50<\/span>\n  const<\/span> outerRadius = 150<\/span>\n  const<\/span> margin = {\n    top<\/span>: 50<\/span>, right<\/span>: 50<\/span>, bottom<\/span>: 50<\/span>, left<\/span>: 50<\/span>,\n  };\n\n  const<\/span> width = 2<\/span> * outerRadius + margin.left + margin.right;\n  const<\/span> height = 2<\/span> * outerRadius + margin.top + margin.bottom;\n\n  \/\/ scaleSequential maps values to an output range based on the<\/span>\n  \/\/ interpolator which gives us a color within a certain gradient over the<\/span>\n  \/\/ domain which determines how many colors we need.<\/span>\n  const<\/span> colorScale = d3\n    .scaleSequential()\n    .interpolator(d3.interpolateMagma)\n    .domain([0<\/span>, data.length]);\n\n  \/\/ This is the function we will call to create the chart whenever the data is updated.<\/span>\n  useEffect(()<\/span> =><\/span> {\n    drawChart();\n  }, [data]);\n\n  \/\/ This is the function that will actually draw the chart.<\/span>\n  function<\/span> drawChart<\/span>(<\/span>) <\/span>{\n    \/\/ select the pie-container element and remove the existing svg to draw a fresh one<\/span>\n    d3.select('#pie-container'<\/span>)\n      .select('svg'<\/span>)\n      .remove();\n\n    \/\/ append the new svg inside the pie-container element using the<\/span>\n    \/\/ attr values for the width and height we defined earlier then<\/span>\n    \/\/ append a new element and use the<\/span>\n    \/\/ attr to move it in the view<\/span>\n    const<\/span> svg = d3\n      .select('#pie-container'<\/span>)\n      .append('svg'<\/span>)\n      .attr('width'<\/span>, width)\n      .attr('height'<\/span>, height)\n      .append('g'<\/span>)\n      .attr('transform'<\/span>, `translate(${width \/ 2}, ${height \/<\/span> 2<\/span>}<\/span>)`<\/span>);\n\n    \/\/ arc is used to make circular sections and we give it an<\/span>\n    \/\/ innerRadius that we define how big the inner circle is and an<\/span>\n    \/\/ outerRadius to define how big the outer circle is.<\/span>\n    const<\/span> arcGenerator = d3\n      .arc()\n      .innerRadius(innerRadius)\n      .outerRadius(outerRadius);\n\n    \/\/ pie calculates the angles we need to represent the<\/span>\n    \/\/ value correctly in the chart<\/span>\n    const<\/span> pieGenerator = d3\n      .pie()\n      .padAngle(0<\/span>)\n      .value((d<\/span>) =><\/span> d.value);\n\n    \/\/ selectAll gets multiple elements from the document and generates the chart based on the<\/span>\n    \/\/ data.<\/span>\n    const<\/span> arc = svg\n      .selectAll()\n      .data(pieGenerator(data))\n      .enter();\n\n    \/\/ append arcs for each data segment<\/span>\n    arc\n      .append('path'<\/span>)\n      .attr('d'<\/span>, arcGenerator)\n      .style('fill'<\/span>, (_, i) => colorScale(i))\n      .style('stroke'<\/span>, '#ffffff'<\/span>)\n      .style('stroke-width'<\/span>, 0<\/span>);\n\n    \/\/ append text labels for each data segment<\/span>\n    arc\n      .append('text'<\/span>)\n      .attr('text-anchor'<\/span>, 'middle'<\/span>)\n      .attr('alignment-baseline'<\/span>, 'middle'<\/span>)\n      .text((d<\/span>) =><\/span> d.data.label)\n      .style('fill'<\/span>, (_, i) => colorScale(data.length - i))\n      .attr('transform'<\/span>, (d) => {\n        const<\/span> [x, y] = arcGenerator.centroid(d);\n        return<\/span> `translate(${x}<\/span>, ${y}<\/span>)`<\/span>;\n      });\n  }\n\n  \/\/ Return the chart element<\/span>\n  return<\/span> <div<\/span> id<\/span>=\"pie-container\"<\/span> \/><\/span><\/span>;\n}\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
We\u2019re using a lot of D3 methods chained together and it\u2019ll be easier to understand if you read through the comments in the code snippet.<\/p>\n
D3 can be a difficult to get started with and it\u2019s common to need to try things out and refer to the documentation<\/a> often. So if this is still confusing after reading through the comments, take some time to try going through the docs as well.<\/p>\n
With the chart component ready, we can pull the data from our GraphQL server.<\/p>\n
Pulling the data into the front-end<\/h2>\n
Since we have the back-end ready, all we have to do is write a little query in the ChartsPage.js<\/code> file. So open that file and add the following imports.<\/p>\n
import<\/span> { useQuery } from<\/span> '@redwoodjs\/web'<\/span>\nimport<\/span> PieChart from<\/span> '..\/..\/components\/PieChart\/PieChart'<\/span>\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
The first import is how we\u2019re going to connect to the GraphQL back-end and the second lets us use the PieChart<\/code> component. Next we need to add the query for our fruits below these imports.<\/p>\n
const<\/span> GET_FRUITS = gql`\n  query {\n    fruits {\n      label\n      value\n    }\n  }\n`<\/span>\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
This query will call the resolver to get all of the rows in the fruits table and give us the label<\/code> and value<\/code> for each so we can display them in our chart.<\/p>\n
Now we\u2019ll add the call we need to execute this query using the useQuery<\/code> hook we imported. This code will go inside of the ChartsPage<\/code> component.<\/p>\n
const<\/span> { data, loading } = useQuery(GET_FRUITS)\n\nif<\/span> (loading) {\n  return<\/span> <div<\/span>><\/span>Loading...<\/div<\/span>><\/span><\/span>\n}\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
We\u2019re getting the data from our query and also a loading state. When you\u2019re working with databases, sometimes you\u2019ll run into latency issues with your requests that could cause a page to crash because it doesn\u2019t have the data it expects. Returning a loading indicator while we wait for the data gives a better user experience.<\/p>\n
All that\u2019s left for our component is updating the data value for the PieChart<\/code> that gets rendered. This replaces the previous pieData<\/code> we had in this element a bit earlier, but we still have just one instance of the PieChart<\/code> on the page.<\/p>\n
<PieChart<\/span> data<\/span>={data.fruits}<\/span> \/><\/span>\n<\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n
Now if you save everything and run the project with yarn rw dev<\/code>, you\u2019ll see something like this in your browser.<\/p>\n
\"the<\/p>\n
All that\u2019s left is uploading a snapshot to Cloudinary!<\/p>\n
Saving the image<\/h3>\n
We\u2019ll add a little function inside the PieChart.js<\/code> file right above our component declaration.<\/p>\n
const<\/span> uploadChart = ()<\/span> =><\/span> {\n  const<\/span> svgEl = document<\/span>.getElementsByTagName('svg'<\/span>)[0<\/span>]\n\n  const<\/span> svgString = new<\/span> XMLSerializer().serializeToString(svgEl)\n\n  const<\/span> base64 = window<\/span>.btoa(svgString);\n\n  const<\/span> imgSrc = `data:image\/svg+xml;base64,${base64}<\/span>`<\/span>;\n\n  const<\/span> uploadApi = 'https:\/\/api.cloudinary.com\/v1_1\/your_cloud_name\/upload'<\/span>\n\n  const<\/span> body = {\n    'file'<\/span>: imgSrc,\n    'upload_preset'<\/span>: 'your_preset_name'<\/span>\n  }\n\n  fetch(uploadApi, {\n    method<\/span>: \"POST\"<\/span>,\n    body<\/span>: JSON<\/span>.stringify(body)\n  })\n  .then((response<\/span>) =><\/span> {\n    console<\/span>.log(response.text)\n  })\n}\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
First we grab the svg<\/code> element that has the chart image. Then we convert that to a string using the XMLSerializer<\/code>. That\u2019s so we can get a base64 string for the image using the btoa<\/code> function in the browser. The next step appends the image type on the base64 string so that when we upload the image, it\u2019s able to be processed as an SVG image.<\/p>\n
This function will be added to the useEffect<\/code> hook after we create the chart. That way each time the data updates, we\u2019ll have an updated image being uploaded to Cloudinary.<\/p>\n
useEffect(()<\/span> =><\/span> {\n  drawChart();\n  uploadChart();\n}, [data]);\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
Now you have an app that can generate report graphics and upload them to another source!<\/p>\n
Finished code<\/h2>\n
You can take a look at some of the front-end code in this Code Sandbox<\/a> or you can check out the full project in the d3-visuals<\/code> folder of this repo<\/a>.<\/p>\n<\/div>\n  \n  
\n    <\/iframe>\n  <\/div>\n\n  
Conclusion<\/h2>\n
You can make charts with D3 now! Getting used to all of the options you have in D3 can take a while, but once you play with it you\u2019ll be able to make graphics that can\u2019t be generated with CSS. You can even make these graphics interactive with some JavaScript work.<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"","protected":false},"author":41,"featured_media":28180,"comment_status":"","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_cloudinary_featured_overwrite":false,"footnotes":""},"categories":[1],"tags":[134,370,177,246,371],"class_list":["post-28179","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-guest-post","tag-image","tag-javascript","tag-react","tag-under-review"],"acf":[],"yoast_head":"\nData Visualizations with D3<\/title>\n<meta name=\"description\" content=\"Sometimes you need to make custom graphics to show complex data. In this tutorial, you'll learn how to do that with D3js and then upload snapshots to Cloudinary!\" \/>\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\/data-visualizations-with-d3-js-and-redwood\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Data Visualizations with D3\" \/>\n<meta property=\"og:description\" content=\"Sometimes you need to make custom graphics to show complex data. In this tutorial, you'll learn how to do that with D3js and then upload snapshots to Cloudinary!\" \/>\n<meta property=\"og:url\" content=\"https:\/\/cloudinary.com\/blog\/guest_post\/data-visualizations-with-d3-js-and-redwood\/\" \/>\n<meta property=\"og:site_name\" content=\"Cloudinary Blog\" \/>\n<meta property=\"article:published_time\" content=\"2022-03-23T22:25:02+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\/v1681925198\/Web_Assets\/blog\/5f4c315e2c9b75b5fed7fd55d513f5c1abb18d34-4195x2802-1_2818059b13\/5f4c315e2c9b75b5fed7fd55d513f5c1abb18d34-4195x2802-1_2818059b13.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\/data-visualizations-with-d3-js-and-redwood\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/data-visualizations-with-d3-js-and-redwood\/\"},\"author\":{\"name\":\"\",\"@id\":\"\"},\"headline\":\"Data Visualizations with D3\",\"datePublished\":\"2022-03-23T22:25:02+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/data-visualizations-with-d3-js-and-redwood\/\"},\"wordCount\":4,\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/data-visualizations-with-d3-js-and-redwood\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925198\/Web_Assets\/blog\/5f4c315e2c9b75b5fed7fd55d513f5c1abb18d34-4195x2802-1_2818059b13\/5f4c315e2c9b75b5fed7fd55d513f5c1abb18d34-4195x2802-1_2818059b13.jpg?_i=AA\",\"keywords\":[\"Guest Post\",\"Image\",\"Javascript\",\"React\",\"Under Review\"],\"inLanguage\":\"en-US\",\"copyrightYear\":\"2022\",\"copyrightHolder\":{\"@id\":\"https:\/\/cloudinary.com\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/data-visualizations-with-d3-js-and-redwood\/\",\"url\":\"https:\/\/cloudinary.com\/blog\/guest_post\/data-visualizations-with-d3-js-and-redwood\/\",\"name\":\"Data Visualizations with D3\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/data-visualizations-with-d3-js-and-redwood\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/data-visualizations-with-d3-js-and-redwood\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925198\/Web_Assets\/blog\/5f4c315e2c9b75b5fed7fd55d513f5c1abb18d34-4195x2802-1_2818059b13\/5f4c315e2c9b75b5fed7fd55d513f5c1abb18d34-4195x2802-1_2818059b13.jpg?_i=AA\",\"datePublished\":\"2022-03-23T22:25:02+00:00\",\"description\":\"Sometimes you need to make custom graphics to show complex data. In this tutorial, you'll learn how to do that with D3js and then upload snapshots to Cloudinary!\",\"breadcrumb\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/data-visualizations-with-d3-js-and-redwood\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/cloudinary.com\/blog\/guest_post\/data-visualizations-with-d3-js-and-redwood\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/data-visualizations-with-d3-js-and-redwood\/#primaryimage\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925198\/Web_Assets\/blog\/5f4c315e2c9b75b5fed7fd55d513f5c1abb18d34-4195x2802-1_2818059b13\/5f4c315e2c9b75b5fed7fd55d513f5c1abb18d34-4195x2802-1_2818059b13.jpg?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925198\/Web_Assets\/blog\/5f4c315e2c9b75b5fed7fd55d513f5c1abb18d34-4195x2802-1_2818059b13\/5f4c315e2c9b75b5fed7fd55d513f5c1abb18d34-4195x2802-1_2818059b13.jpg?_i=AA\",\"width\":4195,\"height\":2802},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/data-visualizations-with-d3-js-and-redwood\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/cloudinary.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Data Visualizations with D3\"}]},{\"@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":"Data Visualizations with D3","description":"Sometimes you need to make custom graphics to show complex data. In this tutorial, you'll learn how to do that with D3js and then upload snapshots to Cloudinary!","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\/data-visualizations-with-d3-js-and-redwood\/","og_locale":"en_US","og_type":"article","og_title":"Data Visualizations with D3","og_description":"Sometimes you need to make custom graphics to show complex data. In this tutorial, you'll learn how to do that with D3js and then upload snapshots to Cloudinary!","og_url":"https:\/\/cloudinary.com\/blog\/guest_post\/data-visualizations-with-d3-js-and-redwood\/","og_site_name":"Cloudinary Blog","article_published_time":"2022-03-23T22:25:02+00:00","twitter_card":"summary_large_image","twitter_image":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925198\/Web_Assets\/blog\/5f4c315e2c9b75b5fed7fd55d513f5c1abb18d34-4195x2802-1_2818059b13\/5f4c315e2c9b75b5fed7fd55d513f5c1abb18d34-4195x2802-1_2818059b13.jpg?_i=AA","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"NewsArticle","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/data-visualizations-with-d3-js-and-redwood\/#article","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/data-visualizations-with-d3-js-and-redwood\/"},"author":{"name":"","@id":""},"headline":"Data Visualizations with D3","datePublished":"2022-03-23T22:25:02+00:00","mainEntityOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/data-visualizations-with-d3-js-and-redwood\/"},"wordCount":4,"publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/data-visualizations-with-d3-js-and-redwood\/#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925198\/Web_Assets\/blog\/5f4c315e2c9b75b5fed7fd55d513f5c1abb18d34-4195x2802-1_2818059b13\/5f4c315e2c9b75b5fed7fd55d513f5c1abb18d34-4195x2802-1_2818059b13.jpg?_i=AA","keywords":["Guest Post","Image","Javascript","React","Under Review"],"inLanguage":"en-US","copyrightYear":"2022","copyrightHolder":{"@id":"https:\/\/cloudinary.com\/#organization"}},{"@type":"WebPage","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/data-visualizations-with-d3-js-and-redwood\/","url":"https:\/\/cloudinary.com\/blog\/guest_post\/data-visualizations-with-d3-js-and-redwood\/","name":"Data Visualizations with D3","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/data-visualizations-with-d3-js-and-redwood\/#primaryimage"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/data-visualizations-with-d3-js-and-redwood\/#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925198\/Web_Assets\/blog\/5f4c315e2c9b75b5fed7fd55d513f5c1abb18d34-4195x2802-1_2818059b13\/5f4c315e2c9b75b5fed7fd55d513f5c1abb18d34-4195x2802-1_2818059b13.jpg?_i=AA","datePublished":"2022-03-23T22:25:02+00:00","description":"Sometimes you need to make custom graphics to show complex data. In this tutorial, you'll learn how to do that with D3js and then upload snapshots to Cloudinary!","breadcrumb":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/data-visualizations-with-d3-js-and-redwood\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/cloudinary.com\/blog\/guest_post\/data-visualizations-with-d3-js-and-redwood\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/data-visualizations-with-d3-js-and-redwood\/#primaryimage","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925198\/Web_Assets\/blog\/5f4c315e2c9b75b5fed7fd55d513f5c1abb18d34-4195x2802-1_2818059b13\/5f4c315e2c9b75b5fed7fd55d513f5c1abb18d34-4195x2802-1_2818059b13.jpg?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925198\/Web_Assets\/blog\/5f4c315e2c9b75b5fed7fd55d513f5c1abb18d34-4195x2802-1_2818059b13\/5f4c315e2c9b75b5fed7fd55d513f5c1abb18d34-4195x2802-1_2818059b13.jpg?_i=AA","width":4195,"height":2802},{"@type":"BreadcrumbList","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/data-visualizations-with-d3-js-and-redwood\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/cloudinary.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Data Visualizations with D3"}]},{"@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\/v1681925198\/Web_Assets\/blog\/5f4c315e2c9b75b5fed7fd55d513f5c1abb18d34-4195x2802-1_2818059b13\/5f4c315e2c9b75b5fed7fd55d513f5c1abb18d34-4195x2802-1_2818059b13.jpg?_i=AA","_links":{"self":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/28179","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=28179"}],"version-history":[{"count":0,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/28179\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media\/28180"}],"wp:attachment":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media?parent=28179"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/categories?post=28179"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/tags?post=28179"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
Then we get the Cloudinary API to handle uploads and set the values for the post request. You\u2019ll need to go in your Cloudinary settings<\/a> and make an upload preset if you don\u2019t have one already.<\/p>\n
This model defines the table for the data we\u2019ll be displaying. You see there\u2019s a mix of text and number values all defined using Prisma<\/a>. We default the id to a uuid<\/code> so that we get a unique identifier automatically each time a row is added.<\/p>\n