Page 1 of 2 12 LastLast
Results 1 to 10 of 12

Thread: D3.js don't display the charts

  1. #1
    dataexplorer is offline Utente AlterBlog
    Join Date
    Jan 2019
    Posts
    7

    Question D3.js don't display the charts

    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?

  2. #2
    alemoppo is offline AlterVista Staff
    Join Date
    Feb 2010
    Location
    IT
    Posts
    256

    Default

    Quote Originally Posted by dataexplorer View Post
    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:
    Code:
    <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!
    Last edited by alemoppo; 01-24-2019 at 05:00 PM.

  3. #3
    dataexplorer is offline Utente AlterBlog
    Join Date
    Jan 2019
    Posts
    7

    Default

    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
    Last edited by dataexplorer; 01-25-2019 at 10:47 AM.

  4. #4
    dataexplorer is offline Utente AlterBlog
    Join Date
    Jan 2019
    Posts
    7

    Unhappy



    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



    Code:
    <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>
    Last edited by dataexplorer; 06-21-2019 at 08:03 PM.

  5. #5
    alemoppo is offline AlterVista Staff
    Join Date
    Feb 2010
    Location
    IT
    Posts
    256

    Default

    You should check the browser console (F12).

    Bye!

  6. #6
    dataexplorer is offline Utente AlterBlog
    Join Date
    Jan 2019
    Posts
    7

    Default

    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?






  7. #7
    alemoppo is offline AlterVista Staff
    Join Date
    Feb 2010
    Location
    IT
    Posts
    256

    Default

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

    Bye!

  8. #8
    dataexplorer is offline Utente AlterBlog
    Join Date
    Jan 2019
    Posts
    7

    Default

    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

  9. #9
    alemoppo is offline AlterVista Staff
    Join Date
    Feb 2010
    Location
    IT
    Posts
    256

    Default

    The first page is working fine:

    In the second page, i think you missed the code:
    HTML Code:
    <svg width="560" height="500"></svg>
    Bye!

  10. #10
    dataexplorer is offline Utente AlterBlog
    Join Date
    Jan 2019
    Posts
    7

    Cool

    No, still nothing

    For the moment I'll use the <iframe>

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

    Code:
    <iframe
      style="border: 0px;"
      src="www.yourwebsite.com/d3page.html"
      scrolling="no"
      width="100%"
      height="500px">
    </iframe
    Last edited by dataexplorer; 06-25-2019 at 11:14 AM.

Page 1 of 2 12 LastLast

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  

SEO by vBSEO