Code Monkey home page Code Monkey logo

Comments (10)

 avatar commented on May 18, 2024

Hello @Ry10p

Of course!

You can use D3.js to make SVG maps from JSON like this.

I would like that you can follow the interfaces, decorators, etc. In this way, we doing all the components similar use for the client as far as possible. If you need more information contact me.

Send a pull request and I merge your work!

Thanks for your interest!

from d3-stencil.

 avatar commented on May 18, 2024

@edgarordonez

Just so I am following along correctly, I want to make sure that "graph-data.ts & the shared folder" is essentially a service providing data and type format for example data in for all the charts?

Thanks so much!
Ryan

from d3-stencil.

 avatar commented on May 18, 2024

Hi @Ry10p

Today I made some changes that have a relation with "graph-data.ts & the shared folder".

I changed the "graph-data.ts to default-graph-data.ts". Now, all graphs doing a deep copy of default data, that are in "default-graph-data.ts". So, the properties of graph-data not are mandatory if the default options are valid for the client. If update your fork, can see the example in "App Component."

Therefore, We can say that "shared folder" provide formats and default data for all the charts, yes!

If you have any doubt, write me!

Thank you, I hope your maps! :)

Edgar.

from d3-stencil.

 avatar commented on May 18, 2024

Hi @edgarordonez ,

Maps are coming along.
I have a question for you... do you know where i can find a good tutorial on how to implement interfaces in typescript?

Thanks again!

from d3-stencil.

 avatar commented on May 18, 2024

Hi @Ry10p,

I have read some articles on Medium for example Interface vs Type alias in TypeScript 2.7
or in my repository of books I have some about TypeScript, but sincerely, I don't read all parts of the book, I never found the time. I use Mastering TypeScript or TypeScript Design Patterns like sourcebook.

I hope that these resources are of help and if you have any question, write me, and we can speak it.

We are in contact! 😄

from d3-stencil.

 avatar commented on May 18, 2024

Good Morning! @edgarordonez

I was Interested if you knew a pure JS or a "StencilJS" way around React.cloneElement(), according to the react documentation it is very different from,
let blah = document.getElementById("anID"); ,
let cln = itm.cloneNode(true);,
document.getElementById("myList1").appendChild(cln);
...?

it is in the utils file of link to react-simple-maps utils page

My assumption is that it is because react is rendering the elements and not in the traditional way, but i'm not the smartest when it comes to this. LOL

Thanks in advance!

from d3-stencil.

 avatar commented on May 18, 2024

Hi @Ry10p

I guess that it's for shadow DOM or immutable purposes, but I'm not sure.

I saw this method in examples like this: https://mxstbr.blog/2017/02/react-children-deepdive/#immutably-cloning-elements, but I don't know something like this is StencilJS... I need investigate sorry.

What do you want to do or why you think that you need this?

Thanks!

from d3-stencil.

 avatar commented on May 18, 2024

@edgarordonez
Thanks for getting back to me so fast!

I though I would need to be able to access the child elements in a unconventional way, but I watched this Video and read over the docs, and it seems that stencil makes it possible to just use a slot and map in whatever we need.

That is SO COOL!... because, in react-simple-maps they had to create a component that was essentially a group component that ties all the markers and locations together.

If I am understanding correctly we can just use them like native components without the need to use a filler. :)

You can take a look at a prototype for a map that I have here=)

from d3-stencil.

 avatar commented on May 18, 2024

Hi @Ry10p

Sorry for the delay!

Yes, exactly!

For example, I made a Tooltip and Legend components as a slot, and all others components have access to them. It seemed a simple way, and I hope that it'll util and simple for use.

You can see that I'm making more changes in the project, adding some test, removing others, etc... Sorry. When you finished the maps, we will look a simple way to incorporate!

I'm downloading your prototype :)

Thanks!!

from d3-stencil.

 avatar commented on May 18, 2024

Hi @Ry10p

I published the d3-stencil first version into NPM package. I guess that I made more changes than you have in your fork so, sorry for that, but I'm gonna to close this issue for now.

If you have the maps components ready, feels free to fork the repository again and I'll add your contributions, okay?

Thanks so much, and sorry for the changes!

Keep in touch! :)

from d3-stencil.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.