D3 with JSX - Feedback wanted

[Bill Kidwell]

I have been playing around with the idea of using JSX with D3.js.

I created a sample project, and wrote up a description.

Article | Project

I would like to know if there is interest before I pursue it further.  Let me know your thoughts.

[reed spool]

Thanks for this Bill,

I am very interested in your project. I've had this same thought before, but had no idea about babel-plugin-transform-jsx which is half the puzzle solved! 

I can think of two use cases for simplifying D3 code w JSX: 

.append(...).attr(...).append(...)

and

.select(...).attr(...).select(...)

Currently, you're transforming JSX into JSON at compile time, then using that JSON at runtime. What about getting closer to what React does, like so: Transform JSX into JSON, transform that JSON into D3 calls (still at  compile time), and finally, end up using only normal D3 calls at runtime. Additionally, use a DSL to differentiate between the use cases.

E.g. (using xml namespace as a jsx directive DSL)

d3.select("body")
  <D3_APPEND:svg className="chart" width={width} height={height}></svg>

is transformed at compile-time into

d3.select("body")
  .append("svg")
    .classed("chart", true)
    .attr("width", width)
    .attr("height", height);

Because most D3 user code is so idiomatic, this would be really useful!

What do you think?

[Marc Fawzi]

why not go a step further with 

<D3_SELECT:body>

  <D3_APPEND:svg className="chart" width={width} height={height}></svg>

</D3_SELECT>

Not sure about the whole premise but mixing JS syntax like d3.select("body") and JSX without use of curly braces, i.e. in the same statement, is a bit odd looking. 

Either way, it's interesting...  

--
You received this message because you are subscribed to the Google Groups "d3-js" group.
To unsubscribe from this group and stop receiving emails from it, send an email to d3-js+unsubscribe@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Bill Kidwell]

Great feedback.  Thanks.

I was not thinking of making any of the tags commands, so to speak, but I am thinking in a similar direction.

For example, I want to see this:

d3.select("body").append(<svg className="chart" width={width} height={height}></svg>);

and this d3.select("body").insert(<svg className="chart" width={width} height={height}></svg>, :first-child);

We would have to extend select, and have append/insert behave differently when they get an object with the appropriate structure.

I think d3-jetpack and d3-multi-selection both take this approach.

However, things get a little fuzzier when you start thinking about transitions and multiple selections.

[Bill Kidwell]

If you found this interesting, you might be interested in tracking the implementation @ https://github.com/d3-jsx/d3-jsx.

Thanks.

On Saturday, October 14, 2017 at 9:10:56 PM UTC-4, Bill Kidwell wrote: