{"tag":{"id":"56744721958ef13879b94d8c","feed":{"edges":[{"node":{"id":"64194060e29bf05355868546","_id":"64194060e29bf05355868546","coverImage":{"isPortrait":false,"url":"https://cdn.hashnode.com/res/hashnode/image/upload/v1679375991746/dd9161cc-ec31-49af-b1bc-bd753f90555b.jpeg","__typename":"PostCoverImage"},"slug":"d3-zoom-vs-behavior-zoom","readTime":2,"replyCount":0,"responseCount":0,"brief":"In D3.js, you can use the zoom() method to zoom in or zoom out the chart or graph that you have created. Up until now, D3 has released a stable library version 7 to use publicly. However, there is still some existing project that still uses D3 versio...","subtitle":"","isFeatured":false,"contributors":[],"bookmarked":false,"views":18,"url":"https://sothearin.hashnode.net/d3-zoom-vs-behavior-zoom","totalReactions":0,"title":"D3 zoom() vs behavior.zoom()","dateAdded":"2023-03-21T05:28:00.347Z","cuid":"clfhte9gb000909jic4l7ay2k","preferences":{"disableComments":false,"__typename":"PostPreferences"},"__typename":"Post","author":{"_id":"63edea6646e2f1644c4f0946","name":"Sothearin Ren","photo":"https://cdn.hashnode.com/res/hashnode/image/upload/v1676537276138/rLmwnOLOY.jpg","isPro":false,"username":"rensothearin","__typename":"User"},"series":null,"tags":[{"_id":"56744721958ef13879b94d8c","logo":"https://res.cloudinary.com/hashnode/image/upload/v1459873316/fdlqr3pk587gddsrirxe.jpg","name":"D3.js","slug":"d3js","__typename":"Tag"},{"_id":"5f100ae4eab404222fcc6add","logo":null,"name":"zoom","slug":"zoom","__typename":"Tag"}],"publication":{"_id":"63edeafd3c9c765be7a44005","url":"https://sothearin.hashnode.net","canonicalURL":"https://sothearin.hashnode.net","title":"Sothearin's Hashnode","displayTitle":null,"isHeadless":false,"favicon":null,"headerColor":"#FCE685","metaTags":null,"isTeam":false,"domainInfo":{"hashnodeSubdomain":"sothearin","domain":null,"__typename":"DomainInfo"},"urlPattern":"SIMPLE","__typename":"Publication"},"comments":{"edges":[],"pageInfo":{"hasNextPage":false,"endCursor":null,"__typename":"PageInfo"},"__typename":"PostCommentConnection"}},"__typename":"PostEdge"},{"node":{"id":"641131c9e48961f406c28e53","_id":"641131c9e48961f406c28e53","coverImage":{"isPortrait":false,"url":"https://cdn.hashnode.com/res/hashnode/image/upload/v1678854728012/894f1c35-0748-4d79-9d6e-ab9edd70f894.gif","__typename":"PostCoverImage"},"slug":"algorithms-and-geospatial-data-tools","readTime":10,"replyCount":0,"responseCount":0,"brief":"Abstract:\nGeographic Information Systems, or GIS, are critical for various applications such as location-based services, environmental monitoring, urban planning, and agriculture. This blog post provides an overview of popular geospatial data librari...","subtitle":"A guide to geodesic algorithms and geospatial data tools for distance calculation and visualization using Python or JavaScript","isFeatured":false,"contributors":[],"bookmarked":false,"views":61,"url":"https://pati.hashnode.net/algorithms-and-geospatial-data-tools","totalReactions":0,"title":"Algorithms and Geospatial Data Tools","dateAdded":"2023-03-15T02:47:37.643Z","cuid":"clf930wiz000209ibhibe27pg","preferences":{"disableComments":false,"__typename":"PostPreferences"},"__typename":"Post","author":{"_id":"63235a0edd55cd8b89b19b93","name":"Patricia","photo":"https://cdn.hashnode.com/res/hashnode/image/upload/v1680621265461/2ZrDK9PzO.png","isPro":false,"username":"mejia","__typename":"User"},"series":null,"tags":[{"_id":"56744721958ef13879b94d8c","logo":"https://res.cloudinary.com/hashnode/image/upload/v1459873316/fdlqr3pk587gddsrirxe.jpg","name":"D3.js","slug":"d3js","__typename":"Tag"},{"_id":"56744721958ef13879b94d67","logo":"https://cdn.hashnode.com/res/hashnode/image/upload/v1607321670861/lG265gIUp.png","name":"Python","slug":"python","__typename":"Tag"},{"_id":"56744721958ef13879b94cad","logo":"https://cdn.hashnode.com/res/hashnode/image/upload/v1607082785538/EryuLRriM.png","name":"JavaScript","slug":"javascript","__typename":"Tag"},{"_id":"57fb4f226849a80ac266ca71","logo":null,"name":"GIS","slug":"gis","__typename":"Tag"},{"_id":"5f25726a90ac4260edf35078","logo":null,"name":"Geospatial","slug":"geospatial","__typename":"Tag"}],"publication":{"_id":"63235adcdd55cd8b89b19bc3","url":"https://pati.hashnode.net","canonicalURL":"https://pati.hashnode.net","title":"Nanoblog","displayTitle":null,"isHeadless":false,"favicon":null,"headerColor":"","metaTags":null,"isTeam":false,"domainInfo":{"hashnodeSubdomain":"pati","domain":null,"__typename":"DomainInfo"},"urlPattern":"SIMPLE","__typename":"Publication"},"comments":{"edges":[],"pageInfo":{"hasNextPage":false,"endCursor":null,"__typename":"PageInfo"},"__typename":"PostCommentConnection"}},"__typename":"PostEdge"},{"node":{"id":"6400c8274afe53670a9e3209","_id":"6400c8274afe53670a9e3209","coverImage":{"isPortrait":false,"url":"https://cdn.hashnode.com/res/hashnode/image/upload/v1676575814189/40ee3f0c-bf57-4819-ad16-17175d8b9dcc.png","__typename":"PostCoverImage"},"slug":"creating-a-responsive-donut-chart-using-d3js-in-reactjs","readTime":5,"replyCount":0,"responseCount":1,"brief":"D3.js (Data-Driven Documents) is a powerful JavaScript library used for creating dynamic and interactive data visualizations on the web. With D3.js, creating a donut chart is straightforward and customizable. In this blog post, we will guide you thro...","subtitle":"","isFeatured":false,"contributors":[{"_id":"6406ea226c8cbdd4116b6165","name":"Bolaji","photo":"https://cdn.hashnode.com/res/hashnode/image/upload/v1678523426700/mCQqdlVg9.png","username":"Bolaji51","__typename":"User"}],"bookmarked":false,"views":68,"url":"https://lukman.hashnode.net/creating-a-responsive-donut-chart-using-d3js-in-reactjs","totalReactions":1,"title":"Creating a responsive donut chart using d3.js in React.js","dateAdded":"2023-03-02T16:00:39.634Z","cuid":"cleramoe1074p3knvax8m9pbt","preferences":{"disableComments":false,"__typename":"PostPreferences"},"__typename":"Post","author":{"_id":"63c7e25aafd2f07b2263023f","name":"LuKman","photo":"https://cdn.hashnode.com/res/hashnode/image/upload/v1674043997102/3432d762-5b88-4078-b1d4-7d0a704443b6.jpeg","isPro":false,"username":"lukmanbd","__typename":"User"},"series":{"_id":"63eb622bce792e42b746ffbd","slug":"d3js","name":"D3.js","cuid":"cle43p5lj0120cunv7g2te5h6","__typename":"Series"},"tags":[{"_id":"56744721958ef13879b94d8c","logo":"https://res.cloudinary.com/hashnode/image/upload/v1459873316/fdlqr3pk587gddsrirxe.jpg","name":"D3.js","slug":"d3js","__typename":"Tag"},{"_id":"56744723958ef13879b95434","logo":"https://cdn.hashnode.com/res/hashnode/image/upload/v1513321478077/ByCWNxZMf.png","name":"React","slug":"reactjs","__typename":"Tag"},{"_id":"56744720958ef13879b947d1","logo":null,"name":"charts","slug":"charts","__typename":"Tag"},{"_id":"6400c8274afe53670a9e320c","logo":null,"name":"donut-chart","slug":"donut-chart","__typename":"Tag"}],"publication":{"_id":"63c7e2b2afd2f07b2263024f","url":"https://lukman.hashnode.net","canonicalURL":"https://lukman.hashnode.net","title":"LuKman","displayTitle":null,"isHeadless":false,"favicon":null,"headerColor":"","metaTags":"JavaScript, TypeScript, React.js, Next.js, D3.js, Node.js, Express.js, Nest.js, and MongoDB.","isTeam":false,"domainInfo":{"hashnodeSubdomain":"lukman","domain":null,"__typename":"DomainInfo"},"urlPattern":"SIMPLE","__typename":"Publication"},"comments":{"edges":[{"node":{"id":"640d6ba715cd01486d2270e1","author":{"_id":"6406ea226c8cbdd4116b6165","name":"Bolaji","photo":"https://cdn.hashnode.com/res/hashnode/image/upload/v1678523426700/mCQqdlVg9.png","isPro":false,"username":"Bolaji51","__typename":"User"},"content":{"html":"

Well written

\n","markdown":"Well written ","text":"Well written \n","__typename":"Content"},"dateAdded":"2023-03-12T06:05:27.582Z","stamp":"clf4zrrfh01jrmanvgcos4i9q","totalReactions":1,"__typename":"Comment"},"__typename":"PostCommentEdge"}],"pageInfo":{"hasNextPage":false,"endCursor":"MQ==","__typename":"PageInfo"},"__typename":"PostCommentConnection"}},"__typename":"PostEdge"},{"node":{"id":"63f78da7207712e9dab04a25","_id":"63f78da7207712e9dab04a25","coverImage":{"isPortrait":false,"url":"https://cdn.hashnode.com/res/hashnode/image/upload/v1676574695839/ac3b6c87-cf55-4ffc-aff3-c753b072ec0a.png","__typename":"PostCoverImage"},"slug":"creating-a-responsive-line-chart-using-d3js-in-reactjs","readTime":6,"replyCount":0,"responseCount":0,"brief":"D3.js is a popular data visualization library that provides a lot of tools for creating interactive and dynamic visualizations. In this blog post, we'll cover how to create a line chart using D3.js in React.js.\nPrerequisites\nBefore we get started, en...","subtitle":"","isFeatured":false,"contributors":[],"bookmarked":false,"views":35,"url":"https://lukman.hashnode.net/creating-a-responsive-line-chart-using-d3js-in-reactjs","totalReactions":0,"title":"Creating a responsive line chart using d3.js in React.js","dateAdded":"2023-02-23T16:00:39.050Z","cuid":"clehajpaz00krddnvdzu8gdsw","preferences":{"disableComments":false,"__typename":"PostPreferences"},"__typename":"Post","author":{"_id":"63c7e25aafd2f07b2263023f","name":"LuKman","photo":"https://cdn.hashnode.com/res/hashnode/image/upload/v1674043997102/3432d762-5b88-4078-b1d4-7d0a704443b6.jpeg","isPro":false,"username":"lukmanbd","__typename":"User"},"series":{"_id":"63eb622bce792e42b746ffbd","slug":"d3js","name":"D3.js","cuid":"cle43p5lj0120cunv7g2te5h6","__typename":"Series"},"tags":[{"_id":"56744721958ef13879b94d8c","logo":"https://res.cloudinary.com/hashnode/image/upload/v1459873316/fdlqr3pk587gddsrirxe.jpg","name":"D3.js","slug":"d3js","__typename":"Tag"},{"_id":"56744723958ef13879b95434","logo":"https://cdn.hashnode.com/res/hashnode/image/upload/v1513321478077/ByCWNxZMf.png","name":"React","slug":"reactjs","__typename":"Tag"},{"_id":"56744720958ef13879b947d1","logo":null,"name":"charts","slug":"charts","__typename":"Tag"}],"publication":{"_id":"63c7e2b2afd2f07b2263024f","url":"https://lukman.hashnode.net","canonicalURL":"https://lukman.hashnode.net","title":"LuKman","displayTitle":null,"isHeadless":false,"favicon":null,"headerColor":"","metaTags":"JavaScript, TypeScript, React.js, Next.js, D3.js, Node.js, Express.js, Nest.js, and MongoDB.","isTeam":false,"domainInfo":{"hashnodeSubdomain":"lukman","domain":null,"__typename":"DomainInfo"},"urlPattern":"SIMPLE","__typename":"Publication"},"comments":{"edges":[],"pageInfo":{"hasNextPage":false,"endCursor":null,"__typename":"PageInfo"},"__typename":"PostCommentConnection"}},"__typename":"PostEdge"},{"node":{"id":"63ee7e4c89b9182e50cb7f26","_id":"63ee7e4c89b9182e50cb7f26","coverImage":{"isPortrait":false,"url":"https://cdn.hashnode.com/res/hashnode/image/upload/v1676573266143/84799313-0d5c-4d60-93ce-bb8e67f64f6e.png","__typename":"PostCoverImage"},"slug":"creating-a-responsive-area-chart-using-d3js-in-reactjs","readTime":6,"replyCount":0,"responseCount":0,"brief":"D3.js (Data-Driven Documents) is a powerful JavaScript library used for creating dynamic and interactive data visualizations on the web. With D3.js, creating an area chart is straightforward and customizable.\nTo create an area chart using D3.js, you ...","subtitle":null,"isFeatured":false,"contributors":[],"bookmarked":false,"views":58,"url":"https://lukman.hashnode.net/creating-a-responsive-area-chart-using-d3js-in-reactjs","totalReactions":0,"title":"Creating a responsive area chart using d3.js in React.js","dateAdded":"2023-02-16T19:04:44.512Z","cuid":"cle7h1hb4000909mnafn26oln","preferences":{"disableComments":false,"__typename":"PostPreferences"},"__typename":"Post","author":{"_id":"63c7e25aafd2f07b2263023f","name":"LuKman","photo":"https://cdn.hashnode.com/res/hashnode/image/upload/v1674043997102/3432d762-5b88-4078-b1d4-7d0a704443b6.jpeg","isPro":false,"username":"lukmanbd","__typename":"User"},"series":{"_id":"63eb622bce792e42b746ffbd","slug":"d3js","name":"D3.js","cuid":"cle43p5lj0120cunv7g2te5h6","__typename":"Series"},"tags":[{"_id":"56744721958ef13879b94d8c","logo":"https://res.cloudinary.com/hashnode/image/upload/v1459873316/fdlqr3pk587gddsrirxe.jpg","name":"D3.js","slug":"d3js","__typename":"Tag"},{"_id":"56744723958ef13879b95434","logo":"https://cdn.hashnode.com/res/hashnode/image/upload/v1513321478077/ByCWNxZMf.png","name":"React","slug":"reactjs","__typename":"Tag"},{"_id":"56744720958ef13879b947d1","logo":null,"name":"charts","slug":"charts","__typename":"Tag"}],"publication":{"_id":"63c7e2b2afd2f07b2263024f","url":"https://lukman.hashnode.net","canonicalURL":"https://lukman.hashnode.net","title":"LuKman","displayTitle":null,"isHeadless":false,"favicon":null,"headerColor":"","metaTags":"JavaScript, TypeScript, React.js, Next.js, D3.js, Node.js, Express.js, Nest.js, and MongoDB.","isTeam":false,"domainInfo":{"hashnodeSubdomain":"lukman","domain":null,"__typename":"DomainInfo"},"urlPattern":"SIMPLE","__typename":"Publication"},"comments":{"edges":[],"pageInfo":{"hasNextPage":false,"endCursor":null,"__typename":"PageInfo"},"__typename":"PostCommentConnection"}},"__typename":"PostEdge"},{"node":{"id":"63eb8cff2059e345a6cc122c","_id":"63eb8cff2059e345a6cc122c","coverImage":{"isPortrait":false,"url":"https://cdn.hashnode.com/res/hashnode/image/upload/v1676344361384/1c8125e4-766f-41da-bd84-72dfc3629daf.png","__typename":"PostCoverImage"},"slug":"chatgpt-ai","readTime":7,"replyCount":1,"responseCount":1,"brief":"Introduction\nChatGPT and the rise of generative AI are trending topics at the moment. Since AI affects developers I figured I'd write a piece about my early reflections on ChatGPT. This blog post will mostly be a stream of consciousness of my thought...","subtitle":"An Apprehensive Developer's Reflection","isFeatured":false,"contributors":[{"_id":"61fa019843e34d1181695cb5","name":"Christian Hain","photo":"https://cdn.hashnode.com/res/hashnode/image/upload/v1656213613887/E1HhElRVD.png","username":"XianHain","__typename":"User"}],"bookmarked":false,"views":135,"url":"https://alyssahollandblog.hashnode.net/chatgpt-ai","totalReactions":10,"title":"Initial Thoughts on ChatGPT and Generative AI","dateAdded":"2023-02-14T13:30:39.710Z","cuid":"cle4a85c100cbxpnv4em80a0u","preferences":{"disableComments":false,"__typename":"PostPreferences"},"__typename":"Post","author":{"_id":"5f29f6abe180c5164cdece86","name":"Alyssa Holland","photo":"https://cdn.hashnode.com/res/hashnode/image/upload/v1682464318003/EKHlMZS0W.jpeg","isPro":false,"username":"AlyssaCodes","__typename":"User"},"series":null,"tags":[{"_id":"638891761e50d717cbfd7b5b","logo":null,"name":"chatgpt","slug":"chatgpt","__typename":"Tag"},{"_id":"56744721958ef13879b94c7e","logo":"https://cdn.hashnode.com/res/hashnode/image/upload/v1535648192079/H1daWiBvQ.png","name":"General Programming","slug":"programming","__typename":"Tag"},{"_id":"56744721958ef13879b9488e","logo":null,"name":"ai","slug":"ai","__typename":"Tag"},{"_id":"56744721958ef13879b94927","logo":"https://res.cloudinary.com/hashnode/image/upload/v1496737518/sgflljcm3hidlvipsriq.png","name":"Artificial Intelligence","slug":"artificial-intelligence","__typename":"Tag"},{"_id":"56744721958ef13879b94d8c","logo":"https://res.cloudinary.com/hashnode/image/upload/v1459873316/fdlqr3pk587gddsrirxe.jpg","name":"D3.js","slug":"d3js","__typename":"Tag"}],"publication":{"_id":"5f29fb67e180c5164cdece91","url":"https://alyssahollandblog.hashnode.net","canonicalURL":"https://alyssahollandblog.hashnode.net","title":"Alyssa Holland's Blog","displayTitle":"Alyssa Holland's Blog","isHeadless":false,"favicon":"","headerColor":"#74c7d5","metaTags":"\n\n","isTeam":false,"domainInfo":{"hashnodeSubdomain":"alyssahollandblog","domain":{"host":"blog.alyssaholland.me","ready":true,"__typename":"DomainStatus"},"__typename":"DomainInfo"},"urlPattern":"SIMPLE","__typename":"Publication"},"comments":{"edges":[{"node":{"id":"63ec49d5344b6345d699c630","author":{"_id":"61fa019843e34d1181695cb5","name":"Christian Hain","photo":"https://cdn.hashnode.com/res/hashnode/image/upload/v1656213613887/E1HhElRVD.png","isPro":false,"username":"XianHain","__typename":"User"},"content":{"html":"

Hey! Great article; thanks for sharing your experiences. Your initial understanding of D3 is my current understanding 😅

I love the idea of AI being used to help inform how to approach a problem and see value in using it alongside community-driven support like Stack Overflow.

When you mention AI ever getting to the point of writing code for itself unprompted, we'd have "larger problems on our hands," I couldn't agree more.

The dangers of AI, or unethical use of AI, could put us in a situation where we do have a large problem.

For that reason, I'm avoiding AI generators and would like to advocate for the Stack Overflow community. Not only do they provide answers to questions, but they also discuss the validity of answers and explain why one solution is better than the other.

\n","markdown":"Hey! Great article; thanks for sharing your experiences. Your initial understanding of D3 is my current understanding 😅\n\nI love the idea of AI being used to help inform how to approach a problem and see value in using it alongside community-driven support like Stack Overflow.\n\nWhen you mention AI ever getting to the point of writing code for itself unprompted, we'd have \"larger problems on our hands,\" I couldn't agree more.\n\nThe dangers of AI, or unethical use of AI, could put us in a situation where we *do* have a large problem.\n\nFor that reason, I'm avoiding AI generators and would like to advocate for the Stack Overflow community. Not only do they provide answers to questions, but they also discuss the validity of answers and explain *why* one solution is better than the other.","text":"Hey! Great article; thanks for sharing your experiences. Your initial understanding of D3 is my current understanding 😅\nI love the idea of AI being used to help inform how to approach a problem and see value in using it alongside community-driven support like Stack Overflow.\nWhen you mention AI ever getting to the point of writing code for itself unprompted, we'd have \"larger problems on our hands,\" I couldn't agree more.\nThe dangers of AI, or unethical use of AI, could put us in a situation where we do have a large problem.\nFor that reason, I'm avoiding AI generators and would like to advocate for the Stack Overflow community. Not only do they provide answers to questions, but they also discuss the validity of answers and explain why one solution is better than the other.\n","__typename":"Content"},"dateAdded":"2023-02-15T02:56:21.909Z","stamp":"cle530adw041mz1nvb0t794zr","totalReactions":1,"__typename":"Comment"},"__typename":"PostCommentEdge"}],"pageInfo":{"hasNextPage":false,"endCursor":"MQ==","__typename":"PageInfo"},"__typename":"PostCommentConnection"}},"__typename":"PostEdge"},{"node":{"id":"63eb897b2059e345a6cc114e","_id":"63eb897b2059e345a6cc114e","coverImage":{"isPortrait":false,"url":"https://cdn.hashnode.com/res/hashnode/image/upload/v1676375982037/59568d11-533c-45d1-b0c5-23138d4a1acd.png","__typename":"PostCoverImage"},"slug":"creating-a-responsive-pie-chart-using-d3js-in-reactjs","readTime":6,"replyCount":0,"responseCount":0,"brief":"Pie charts are an effective way to represent data as a proportion of a whole. D3.js is a popular JavaScript library that provides various tools for data visualization. In this blog, we will go over the steps to create a pie chart using D3.js in a Rea...","subtitle":"","isFeatured":false,"contributors":[],"bookmarked":false,"views":120,"url":"https://lukman.hashnode.net/creating-a-responsive-pie-chart-using-d3js-in-reactjs","totalReactions":0,"title":"Creating a responsive pie chart using d3.js in React.js","dateAdded":"2023-02-14T13:15:39.419Z","cuid":"cle49ouow0073xpnv8pn62xzt","preferences":{"disableComments":false,"__typename":"PostPreferences"},"__typename":"Post","author":{"_id":"63c7e25aafd2f07b2263023f","name":"LuKman","photo":"https://cdn.hashnode.com/res/hashnode/image/upload/v1674043997102/3432d762-5b88-4078-b1d4-7d0a704443b6.jpeg","isPro":false,"username":"lukmanbd","__typename":"User"},"series":{"_id":"63eb622bce792e42b746ffbd","slug":"d3js","name":"D3.js","cuid":"cle43p5lj0120cunv7g2te5h6","__typename":"Series"},"tags":[{"_id":"56744721958ef13879b94d8c","logo":"https://res.cloudinary.com/hashnode/image/upload/v1459873316/fdlqr3pk587gddsrirxe.jpg","name":"D3.js","slug":"d3js","__typename":"Tag"},{"_id":"56744723958ef13879b95434","logo":"https://cdn.hashnode.com/res/hashnode/image/upload/v1513321478077/ByCWNxZMf.png","name":"React","slug":"reactjs","__typename":"Tag"},{"_id":"56744723958ef13879b954e0","logo":"https://cdn.hashnode.com/res/hashnode/image/upload/v1607081795383/tEjUv8e8s.png","name":"TypeScript","slug":"typescript","__typename":"Tag"},{"_id":"56744720958ef13879b947d1","logo":null,"name":"charts","slug":"charts","__typename":"Tag"},{"_id":"5ed8a402e6da1cf54d5e3647","logo":null,"name":"pie chart","slug":"pie-chart","__typename":"Tag"}],"publication":{"_id":"63c7e2b2afd2f07b2263024f","url":"https://lukman.hashnode.net","canonicalURL":"https://lukman.hashnode.net","title":"LuKman","displayTitle":null,"isHeadless":false,"favicon":null,"headerColor":"","metaTags":"JavaScript, TypeScript, React.js, Next.js, D3.js, Node.js, Express.js, Nest.js, and MongoDB.","isTeam":false,"domainInfo":{"hashnodeSubdomain":"lukman","domain":null,"__typename":"DomainInfo"},"urlPattern":"SIMPLE","__typename":"Publication"},"comments":{"edges":[],"pageInfo":{"hasNextPage":false,"endCursor":null,"__typename":"PageInfo"},"__typename":"PostCommentConnection"}},"__typename":"PostEdge"},{"node":{"id":"63eb322cbffaa5a01f0ffc37","_id":"63eb322cbffaa5a01f0ffc37","coverImage":{"isPortrait":false,"url":"https://cdn.hashnode.com/res/hashnode/image/upload/v1676357032507/9c060c7e-f6ab-437d-9e78-1d36c3f131de.png","__typename":"PostCoverImage"},"slug":"creating-a-responsive-bar-chart-using-d3js-in-reactjs","readTime":5,"replyCount":0,"responseCount":0,"brief":"Data visualization is an essential aspect of data analysis, and bar charts are a popular choice to display data. D3.js is a powerful library for creating data visualizations, and React.js is a popular JavaScript library for building user interfaces. ...","subtitle":"","isFeatured":false,"contributors":[],"bookmarked":false,"views":72,"url":"https://lukman.hashnode.net/creating-a-responsive-bar-chart-using-d3js-in-reactjs","totalReactions":0,"title":"Creating a responsive bar chart using d3.js in React.js","dateAdded":"2023-02-14T07:03:08.933Z","cuid":"cle3wdsw5000q0aju5csd88wu","preferences":{"disableComments":false,"__typename":"PostPreferences"},"__typename":"Post","author":{"_id":"63c7e25aafd2f07b2263023f","name":"LuKman","photo":"https://cdn.hashnode.com/res/hashnode/image/upload/v1674043997102/3432d762-5b88-4078-b1d4-7d0a704443b6.jpeg","isPro":false,"username":"lukmanbd","__typename":"User"},"series":{"_id":"63eb622bce792e42b746ffbd","slug":"d3js","name":"D3.js","cuid":"cle43p5lj0120cunv7g2te5h6","__typename":"Series"},"tags":[{"_id":"56744721958ef13879b94d8c","logo":"https://res.cloudinary.com/hashnode/image/upload/v1459873316/fdlqr3pk587gddsrirxe.jpg","name":"D3.js","slug":"d3js","__typename":"Tag"},{"_id":"56744723958ef13879b95434","logo":"https://cdn.hashnode.com/res/hashnode/image/upload/v1513321478077/ByCWNxZMf.png","name":"React","slug":"reactjs","__typename":"Tag"},{"_id":"56744723958ef13879b954e0","logo":"https://cdn.hashnode.com/res/hashnode/image/upload/v1607081795383/tEjUv8e8s.png","name":"TypeScript","slug":"typescript","__typename":"Tag"}],"publication":{"_id":"63c7e2b2afd2f07b2263024f","url":"https://lukman.hashnode.net","canonicalURL":"https://lukman.hashnode.net","title":"LuKman","displayTitle":null,"isHeadless":false,"favicon":null,"headerColor":"","metaTags":"JavaScript, TypeScript, React.js, Next.js, D3.js, Node.js, Express.js, Nest.js, and MongoDB.","isTeam":false,"domainInfo":{"hashnodeSubdomain":"lukman","domain":null,"__typename":"DomainInfo"},"urlPattern":"SIMPLE","__typename":"Publication"},"comments":{"edges":[],"pageInfo":{"hasNextPage":false,"endCursor":null,"__typename":"PageInfo"},"__typename":"PostCommentConnection"}},"__typename":"PostEdge"},{"node":{"id":"636205e8cf0d9c664c9e28b3","_id":"636205e8cf0d9c664c9e28b3","coverImage":{"isPortrait":false,"url":"https://cdn.hashnode.com/res/hashnode/image/unsplash/JKUTrJ4vK00/upload/v1667369644053/ibKa850Yf.jpeg","__typename":"PostCoverImage"},"slug":"creating-charts-with-d3js-and-react","readTime":2,"replyCount":0,"responseCount":0,"brief":"D3.js is my go to library for creating charts simply because of the range of charts and the ease with which you can create them. Also the charts you create with D3.js are svg charts which are the best type of charts to have on a webpage compared to a...","subtitle":"","isFeatured":false,"contributors":[],"bookmarked":false,"views":97,"url":"https://vrlj.hashnode.net/creating-charts-with-d3js-and-react","totalReactions":0,"title":"Creating Charts with D3.js and React","dateAdded":"2022-11-02T05:53:44.795Z","cuid":"cl9z83yhn000i09l8a0z05dho","preferences":{"disableComments":false,"__typename":"PostPreferences"},"__typename":"Post","author":{"_id":"61e0855e1f35f378644666b2","name":"Venkataramana","photo":"https://cdn.hashnode.com/res/hashnode/image/upload/v1642104159301/E6FlqnKa6.jpeg","isPro":false,"username":"vrlj","__typename":"User"},"series":null,"tags":[{"_id":"56744721958ef13879b94d8c","logo":"https://res.cloudinary.com/hashnode/image/upload/v1459873316/fdlqr3pk587gddsrirxe.jpg","name":"D3.js","slug":"d3js","__typename":"Tag"},{"_id":"56744723958ef13879b95434","logo":"https://cdn.hashnode.com/res/hashnode/image/upload/v1513321478077/ByCWNxZMf.png","name":"React","slug":"reactjs","__typename":"Tag"},{"_id":"5f3e65a04751c54430fe6999","logo":null,"name":"progress bar","slug":"progress-bar","__typename":"Tag"},{"_id":"63206bed5483096daa0a7b74","logo":null,"name":"Bar Charts","slug":"bar-charts","__typename":"Tag"}],"publication":{"_id":"61e087001f35f378644666d0","url":"https://vrlj.hashnode.net","canonicalURL":"https://vrlj.hashnode.net","title":"devdiary","displayTitle":null,"isHeadless":false,"favicon":null,"headerColor":null,"metaTags":null,"isTeam":false,"domainInfo":{"hashnodeSubdomain":"vrlj","domain":{"host":"blog.ramana.dev","ready":true,"__typename":"DomainStatus"},"__typename":"DomainInfo"},"urlPattern":"SIMPLE","__typename":"Publication"},"comments":{"edges":[],"pageInfo":{"hasNextPage":false,"endCursor":null,"__typename":"PageInfo"},"__typename":"PostCommentConnection"}},"__typename":"PostEdge"},{"node":{"id":"6324407fdd55cd8b89b1bd38","_id":"6324407fdd55cd8b89b1bd38","coverImage":{"isPortrait":false,"url":"https://cdn.hashnode.com/res/hashnode/image/upload/v1663317205794/_hHH8Qvy4.png","__typename":"PostCoverImage"},"slug":"render-geojson-with-d3-on-server-serve-png-not-geojson","readTime":4,"replyCount":0,"responseCount":0,"brief":"Background\nI have project to show thumbnail of maps from a hundreds GeoJSON files, and this is not efficient if we send geoJSON data to our client (web apps in this case). GeoJSON has a bigger size than png image in small resolution, especially for G...","subtitle":"Generate a lot of png images from GeoJSON files with D3.js and serve it to client.","isFeatured":false,"contributors":[],"bookmarked":false,"views":50,"url":"https://jfraziz.hashnode.net/render-geojson-with-d3-on-server-serve-png-not-geojson","totalReactions":0,"title":"Render GeoJSON with D3 on server: Serve PNG not GeoJSON","dateAdded":"2022-09-16T09:23:11.092Z","cuid":"cl849w9ii05fc2invggp0hu5i","preferences":{"disableComments":false,"__typename":"PostPreferences"},"__typename":"Post","author":{"_id":"620166993a8a6e5fe119a2ff","name":"Jafar Aziz","photo":"https://cdn.hashnode.com/res/hashnode/image/upload/v1644258970589/WwiAUobBA.png","isPro":false,"username":"jfraziz","__typename":"User"},"series":null,"tags":[{"_id":"56744722958ef13879b94ffb","logo":"https://cdn.hashnode.com/res/hashnode/image/upload/v1607322143407/LsbeyUL86.png","name":"Node.js","slug":"nodejs","__typename":"Tag"},{"_id":"56744721958ef13879b94d8c","logo":"https://res.cloudinary.com/hashnode/image/upload/v1459873316/fdlqr3pk587gddsrirxe.jpg","name":"D3.js","slug":"d3js","__typename":"Tag"},{"_id":"56fd21cd770db0f14a63ee67","logo":null,"name":"map","slug":"map","__typename":"Tag"},{"_id":"587999c195b23808172165d5","logo":null,"name":"GeoJSON","slug":"geojson","__typename":"Tag"}],"publication":{"_id":"620166c23a8a6e5fe119a30c","url":"https://jfraziz.hashnode.net","canonicalURL":"https://jfraziz.hashnode.net","title":"Jafar Aziz's Blog","displayTitle":null,"isHeadless":false,"favicon":"https://cdn.hashnode.com/res/hashnode/image/upload/v1644261047370/99FlcSEQ_.png","headerColor":"","metaTags":null,"isTeam":false,"domainInfo":{"hashnodeSubdomain":"jfraziz","domain":{"host":"blog.jafaraziz.com","ready":true,"__typename":"DomainStatus"},"__typename":"DomainInfo"},"urlPattern":"SIMPLE","__typename":"Publication"},"comments":{"edges":[],"pageInfo":{"hasNextPage":false,"endCursor":null,"__typename":"PageInfo"},"__typename":"PostCommentConnection"}},"__typename":"PostEdge"}],"pageInfo":{"endCursor":"MTA=","hasNextPage":true,"__typename":"PageInfo"},"__typename":"FeedPostConnection"},"__typename":"Tag"}}

Radar charts with d3.js

Build a real-time leaderboard with D3.js and React !

How to create a simple hierarchy chart in d3 js

D3 zoom() vs behavior.zoom()

Algorithms and Geospatial Data Tools

Creating a responsive donut chart using d3.js in React.js

Creating a responsive line chart using d3.js in React.js

Creating a responsive area chart using d3.js in React.js

Initial Thoughts on ChatGPT and Generative AI

Creating a responsive pie chart using d3.js in React.js

Creating a responsive bar chart using d3.js in React.js

Creating Charts with D3.js and React

Render GeoJSON with D3 on server: Serve PNG not GeoJSON