Comments (10)
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.
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.
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.
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.
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.
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.
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.
@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.
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.
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)
- Dual-scale-Chart
- Github Actions HOT 1
- Update to Stencil 1.8.1
- Create npm release for 2.2.1 HOT 2
- CI removal HOT 2
- D3-Stencil with Ionic/Angular
- Install and import d3-stencil and there is an issue HOT 3
- TS Paths not working HOT 1
- Error on building project [cannot find module...]
- Duplicate components HOT 2
- manifest problem
- How to import a component ?
- update packages
- fix errors
- Docs & Examples
- Stencil 1.1.1 requires Puppeteer 1.17.0 HOT 3
- Latest version of Stencil changes demo alignment HOT 1
- Undefined props in react
- update to latest d3 and stencil
- Test is using puppeteer 1.17.0 HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
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.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from d3-stencil.