Skip to main content

React way to use D3 - ( Python as API )

The Inspiration
Andmap is trying to build new BI product, the tech stacks would be D3 + ReactJS as data visualization frontend, Web API, and Python provides data. As with most new projects, it didn’t take long to figure out the major roadblocks.
D3.js is a JavaScript library for manipulating documents based on data. D3 helps you bring data to life using HTML, SVG, and CSS. D3’s emphasis on web standards gives you the full capabilities of modern browsers without tying yourself to a proprietary framework, combining powerful visualization components and a data-driven approach to DOM manipulation.
In one of our initial discovery sessions, we realized that our application needs to be able to adapt D3 library in ReactJS way. More than that, we prefer utilizing new feature of React - Hooks. Finally, we build  component for each chart and Helpers file for drawing each chart.
Here is sample for map chart:


index.js:



map.js - map chart container -
using useEffect hook

helpers.js
- to draw charts

How to trigger mouse event in React

Conclusion

I hope this little tutorial is helpful to anyone who wants to take advantage of the D3 library inside of a React app. If I didn’t explain something well, or if something is wrong with my code, please leave a comment.

Comments

Popular posts from this blog

Vocabulary Victory - Build vocabulary at your own pace

download links:

iOS:
https://apps.apple.com/us/app/vocabulary-victory/id1485320131 Android:
https://play.google.com/store/apps/details?id=com.andmap.vocabularyvictory


update:
1. max connection error on mysql, when do the subquery cards in the loop of query of project, move this function to front end => load flashCards: []  from dashboard.js to project-in-row.js
flashCards:async (project, args, { models }) => { /*const cards = await FlashCard.findAll({ where: { projectId: project.id } }) return cards */ return [] } https://www.qr-code-generator.com/

The Trip to the Pacific Garbage Patch

(My name is M&M) I was thrown into a garbage can after I was used from The Mystical Smoothie Palace.
The wind was blowing and the garbage can was filled past the top, so I got blown off. I started rolling away towards the ocean. On my way to the ocean it was very rough because while I was rolling with the wind about 1 million people stepped on me (It was actually 20 people). I was flattened badly, but luckily I couldn’t feel a thing. A seagull tried to eat me but thought I didn’t taste good enough (thankfully). The wind kept blowing me until… I saw the sea for the first time!!! I’ve only heard tales about it from my old buddies,
but this is better than I ever imagined!!! I can’t wait to get in!!! The wind blew me faster than ever, until I wasn’t rolling anymore, I was flying over the ocean!!! I’m in the ocean!!! The fresh smell!!! I was floating deeper in the ocean as I heard the waves roar faint away. Soon, I couldn’t see the shore, but I still heard voices. I turned around and sa…