วีดีโอ

This is gold <3

Thank you Pedro, very easy to understand! Great job!

yes very nice

Thank you Pedro, this video helped me a lot, today we use websocket with aws at a client and it is always been a pain in the a**, you salved me and my colleagues.

wooooooowwwwwwwww

Nice

Nice one!

Hi Pedro. I'm from Brazil and I really liked the way you teach. Thank you!

Thank you for making this video! What extension(s) did you use for the autofill? It really seemed to know your code really well. Was it an extension specific to D3?

Please Check Your email brother.

when are you uploading the next videos of this series?

You are the man!

Superman! Thanks

Wonderful! Thanks

When you do the Polkadot API query call my Typescript compiler complains, because the awaited return value is Codec, but not BigInt like in your case. What are your ts compiler settings?

There's very few people teaching data visualization with these tools, Thanks!!

how to turn 1 line into separate line thank you

Maybe don't copy and paste code on tutorials? Personally moving from codepen to VS code was another layer of complexity added on top of trying to learn the syntax.

Great series! Was wondering tho what a great strategy would be to stream in data in chunks overtime for large data sets

How much of the visx API was used in this playlist?

thank u!!

Is there a way to get auto import for visx in VS Code?

Thanos was right

Pedro, you are an excellent teacher. I hope you continue with the channel. Cheers. Jorge

Thanks mate < 3 If you think about to make one more video of "How to use polkaJs to interact with a ink! or solidity contract" that would be cool 🐳

Translation from React to Vue as the following: ```vue <script setup lang="ts"> /*Imports*/ import { ApiPromise, WsProvider } from "@polkadot/api"; import { web3Accounts, web3Enable } from "@polkadot/extension-dapp"; import { InjectedAccountWithMeta } from "@polkadot/extension-inject/types"; import { onMounted, ref, watch } from "vue"; /*consts*/ const NAME = "GMOrDie"; /*Refs*/ let apiRef = ref<ApiPromise>(); let accounts = ref<InjectedAccountWithMeta[]>(); let selectedAccount = ref<InjectedAccountWithMeta>(); let selectedAccountAddress = ref<string>(""); let gmgntime = ref<string>(); let toggle = ref<boolean>(false); /*Setup*/ const setup = async () => { const wsProvider = new WsProvider("wss://ws.gm.bldnodes.org/"); const api = await ApiPromise.create({ provider: wsProvider }); apiRef.value = api; const getTime = await api.query.currencies.currentTimePeriod(); gmgntime.value = getTime.toPrimitive() as string; }; /*Setup on Mounted*/ onMounted(() => { setup(); }); /*handle Conenction on Button click*/ const handleConnection = async () => { const extensions = await web3Enable(NAME); if (!extensions) { throw Error("NO_EXTENSION_FOUND"); } const allAccounts = await web3Accounts(); accounts.value = allAccounts; if (allAccounts.length === 1) { selectedAccount.value = allAccounts[0]; selectedAccountAddress.value = allAccounts[0].address; } }; /*Set selectedAccountAddress if changed from "" to something*/ watch( () => selectedAccountAddress.value, (newVal) => { if (!newVal) return; const account = accounts.value!.find( (account) => account.address == newVal ); if (!account) { throw Error("NO_ACCOUNT_FOUND"); } selectedAccount.value = account; } ); /*GMGN Time */ const getGmGnTime = async () => { const getTime = await apiRef.value!.query.currencies.currentTimePeriod(); gmgntime.value = getTime.toPrimitive() as string; }; </script> <template> <div> <!--If not connect show button--> <button v-if="!accounts" @click="handleConnection">Connect</button> <!--If connected but no account selected show select--> <select v-else-if="accounts?.length > 0 && !selectedAccount" v-model="selectedAccountAddress" > <option value="" disabled selected hidden>Choose your Account</option> <option v-for="account in accounts" :value="account.address"> {{ account.address }} </option> </select> <!--If connected and account selected show selected Address --> <p v-else><strong>Thats me:</strong> {{ selectedAccountAddress }}</p> <!--If connected and account selected show GmGnTime Button --> <!--If clicked, refresh time and show GmGnTime --> <button @click=" getGmGnTime(); toggle = !toggle; " v-if="selectedAccountAddress" > {{ toggle ? "Ok, now I know" : "Show me the time" }} </button> <h2 v-show="toggle">{{ gmgntime }}</h2> </div> </template> ```

Translation from React to Vue as the following: ```vue <script setup lang="ts"> /*Imports*/ import { ApiPromise, WsProvider } from "@polkadot/api"; import { web3Accounts, web3Enable } from "@polkadot/extension-dapp"; import { InjectedAccountWithMeta } from "@polkadot/extension-inject/types"; import { onMounted, ref, watch } from "vue"; /*consts*/ const NAME = "GMOrDie"; /*Refs*/ let apiRef = ref<ApiPromise>(); let accounts = ref<InjectedAccountWithMeta[]>(); let selectedAccount = ref<InjectedAccountWithMeta>(); let selectedAccountAddress = ref<string>(""); /*Setup*/ const setup = async () => { const wsProvider = new WsProvider("wss://ws.gm.bldnodes.org/"); const api = await ApiPromise.create({ provider: wsProvider }); apiRef.value = api; }; /*Setup on Mounted*/ onMounted(() => { setup(); }); /*handle Conenction on Button click*/ const handleConnection = async () => { const extensions = await web3Enable(NAME); if (!extensions) { throw Error("NO_EXTENSION_FOUND"); } const allAccounts = await web3Accounts(); accounts.value = allAccounts; if (allAccounts.length === 1) { selectedAccount.value = allAccounts[0]; selectedAccountAddress.value = allAccounts[0].address; } }; /*Set selectedAccountAddress if changed from "" to something*/ watch( () => selectedAccountAddress.value, (newVal) => { if (!newVal) return; const account = accounts.value!.find( (account) => account.address == newVal ); if (!account) { throw Error("NO_ACCOUNT_FOUND"); } selectedAccount.value = account; } ); </script> <template> <div> <!--If not connect show button--> <button v-if="!accounts" @click="handleConnection">Connect</button> <!--If connected but no account selected show select--> <select v-else-if="accounts?.length > 0 && !selectedAccount" v-model="selectedAccountAddress" > <option value="">Choose your Account</option> <option v-for="account in accounts" :value="account.address"> {{ account.address }} </option> </select> <!--If connected and account selected show selected Address --> <p v-else>{{ selectedAccountAddress }}</p> </div> </template> ````

This was really helpful , thank you so much for making such quality content. The explanations were very concise and understandable!

Thank You, very nicely explained. Can I use the same Bar Component to draw horizontal bars instead of vertical bars?

That would be great to see treemap example...

when is the next video going live?

Where's the discord link?

more videos covering more topics please. @typescript-react @metamask @ethers

Hi! Why you choose React and not Next js for your DApp? Which one I need to choose for my app =)

i hope u add more video

Will you maybe create a video on keyring API from backend and how to interact with it with polkadot.js

awesome stuff, pedro! keep it up 🔥🔥🔥

Great videos! Thank you for leading me to polkadot dapps world. Looking forward to the rest.

Very Nice series. hope you success in making these videos :)

Great videos!! Keep creating more web3 content!

This was excellent, thank you for putting this together!

thanks pedro, finally my step by step guide to a 100k salary, regards

Bro this hairstyle look cool stay with it, nice video on visx I have done three dashboard project on visx, thanks for the videos help me a lot, keep posting on blockchain front-end

Can you please make a video on how to make a tooltip in a React, D3, TypeScript & Tailwind project?

Thanks a lot! ! ! Very cool. I am waiting for your next videous

Been trying the tooltip but it is not being rendered where it supposed to :(

great video man, i can see a great ed tech channel in making, must say the video breakup is top notch. Concise and on point. Thanks a lot and best of luck for the future.

A nice one

Hi, thank you for the tutorial! I have a problem: your app don't show the graphic in the first time render, even when i refresh the page (F5), it don't show the graphic. I must do something to rerender like change dimension (width or height) for it work! how can i fix this bug?

Pedro, great tutorial on visx. I have learned a lot from your data visualization series. Wondering if you could post a tutorial on visx with animation for time series data, such as stock price movement over time.