D3.js don't display the charts

[dataexplorer]

Hi

I'm doing some test in Wordpress to visualize data and charts.

I can't see my new page, edited in Wordpress, with a simple D3.js chart

The code came from here and is visualized in all my browsers, except when loaded from the page update in my blog

https://bl.ocks.org/mbostock/b593534...1928401e2c8608



Is there some kind of block for javascript code?

[alemoppo]

Is there some kind of block for javascript code?

No, it can't be a javascript block, because this is run on the client side.

Are you using classic editor or Gutenberg? The classic editor can broke the code, for example adding the <p> tags on empty lines. Try a code without empty lines like:

<svg width="960" height="500"></svg>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script>var data = [
  {month: "Q1-2016", apples: 3840, bananas: 1920, cherries: -1960, dates: -400},
  {month: "Q2-2016", apples: 1600, bananas: 1440, cherries: -960, dates: -400},
  {month: "Q3-2016", apples:  640, bananas:  960, cherries: -640, dates: -600},
  {month: "Q4-2016", apples:  320, bananas:  480, cherries: -640, dates: -400}
];
var series = d3.stack()
    .keys(["apples", "bananas", "cherries", "dates"])
    .offset(d3.stackOffsetDiverging)
    (data);
var svg = d3.select("svg"),
    margin = {top: 20, right: 30, bottom: 30, left: 60},
    width = +svg.attr("width"),
    height = +svg.attr("height");
var x = d3.scaleBand()
    .domain(data.map(function(d) { return d.month; }))
    .rangeRound([margin.left, width - margin.right])
    .padding(0.1);
var y = d3.scaleLinear()
    .domain([d3.min(series, stackMin), d3.max(series, stackMax)])
    .rangeRound([height - margin.bottom, margin.top]);
var z = d3.scaleOrdinal(d3.schemeCategory10);
svg.append("g")
  .selectAll("g")
  .data(series)
  .enter().append("g")
    .attr("fill", function(d) { return z(d.key); })
  .selectAll("rect")
  .data(function(d) { return d; })
  .enter().append("rect")
    .attr("width", x.bandwidth)
    .attr("x", function(d) { return x(d.data.month); })
    .attr("y", function(d) { return y(d[1]); })
    .attr("height", function(d) { return y(d[0]) - y(d[1]); })
svg.append("g")
    .attr("transform", "translate(0," + y(0) + ")")
    .call(d3.axisBottom(x));
svg.append("g")
    .attr("transform", "translate(" + margin.left + ",0)")
    .call(d3.axisLeft(y));
function stackMin(serie) {
  return d3.min(serie, function(d) { return d[0]; });
}
function stackMax(serie) {
  return d3.max(serie, function(d) { return d[1]; });
}</script>

Bye!

[dataexplorer]

IT WORKS!

Thanks


I summarize the procedure for other users, adding also the problem when loading the data files


- Delete all the empty lines of the page with D3.js script


When you upload a CSV file you could get the following error message:
“Sorry, this file type is not permitted for security reasons” error message in WordPress"

You need plugin WP Add Mime Types
https://wordpress.org/plugins/wp-add-mime-types/

Install the plugin and activate it.
Navigate to Setttings -> Mime Type Settings.

Now you can add mime-type value for the file extension you want to upload.

In my case:
csv = text/csv
xla|xls|xlt|xlw = application/vnd.ms-excel
json = application/json

Save setting


***********************
For MIME-type see also
https://tribulant.com/blog/wordpress...urity-reasons/
https://www.hostinger.com/tutorials/...r-in-wordpress

[dataexplorer]

Hi

I still have problems with this very simple example of D3.js

It works in WP editor code preview but not in browser preview or when published

Any idea


WordPress Version 5.2.1
Classic editor
Google Chrome Version 71.0.3578.98

<script src="https://d3js.org/d3.v4.min.js"></script>
<script type="text/javascript">
			//Width and height
			var w = 500;
			var h = 100;
			var dataset = [
			[5, 20], [480, 90], [250, 50], [100, 33], [330, 95],
			[410, 12], [475, 44], [25, 67], [85, 21], [220, 88]
			];
			//Create SVG element
			var svg = d3.select("body")
			.append("svg")
			.attr("width", w)
			.attr("height", h);
			svg.selectAll("circle")
			   .data(dataset)
			   .enter()
			   .append("circle")
			   .attr("cx", function(d) {
			   		return d[0];
			   })
			   .attr("cy", function(d) {
			   		return d[1];
			   })
			   .attr("r", function(d) {
			   		return Math.sqrt(h - d[1]);
			   });
			svg.selectAll("text")
			   .data(dataset)
			   .enter()
			   .append("text")
			   .text(function(d) {
			   		return d[0] + "," + d[1];
			   })
			   .attr("x", function(d) {
			   		return d[0];
			   })
			   .attr("y", function(d) {
			   		return d[1];
			   })
			   .attr("font-family", "sans-serif")
			   .attr("font-size", "11px")
			   .attr("fill", "red");
  </script>

[alemoppo]

You should check the browser console (F12).

Bye!

[dataexplorer]

Well

These are two screenshots from my browser.
The first is a D3 code that works and the second doesn't.
What should I look for?

[alemoppo]

So the errors seem the same. Can you post the url of the page?

Bye!

[dataexplorer]

Ok, (they are password protected just because they are still tests)

http://dataexplorer.altervista.org/t...lization-chp6/

http://dataexplorer.altervista.org/chapter-6-scatter/

password : dataexplorer

[alemoppo]

The first page is working fine:

In the second page, i think you missed the code:

<svg width="560" height="500"></svg>

Bye!

[dataexplorer]

No, still nothing

For the moment I'll use the <iframe>

http://dataexplorer.altervista.org/d3-iframe/
password: dataexplorer

<iframe
  style="border: 0px;"
  src="www.yourwebsite.com/d3page.html"
  scrolling="no"
  width="100%"
  height="500px">
</iframe