Can't render a simple HTML page example

Question

I saw an example at http://graphalchemist.github.io/Alchemy/#/examples

I am working with 'basic graph' example

I wanted to copy the example on my own local computer.

I made a directory with two files : trial.html and charlize.json , and copied the code.

Only change I made was switching

dataSource: 'data/charlize.json',

to

dataSource: 'charlize.json', ( I also tried ./charlize.json)

When I open trial.html , I don't get the network graph. I get a blank white HTML page . I don't see what I have to do different.

Alchemy.js says that I don't need to install any libraries, there is a link to a CSS style in the head , and I don't know what else I would need.

UPDATE (working code) :

<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/alchemyjs/0.4.2/alchemy.min.css" />
</head>
<body>
  <div class="alchemy" id="alchemy"></div>

  <script src="http://cdn.graphalchemist.com/alchemy.min.js"></script>

  <script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/alchemyjs/0.4.2/alchemy.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/alchemyjs/0.4.2/scripts/vendor.js"></script>


  <script type="text/javascript">
        var config = {
            dataSource: './charlize.json',
            };

        alchemy = new Alchemy(config)
    </script>
  </body>
</html>

Are you behind a proxy by chance? When I try to run this on my computer at work, I get the same result (a blank screen). If you go into the developer tools and look at the network tab, you might see that the CSS and JS files from Alchemy are being blocked. — tblznbits, May 01 '17 at 16:04

score 2 · Accepted Answer · answered May 01 '17 at 16:11

I've never used Alchemy, but I put their demo code together and looks like it requires their vendor.js and the d3 library. Here's a demo with their example code.

<html>

<head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/alchemyjs/0.4.2/alchemy.min.css" />
</head>


<body>
  <div class="alchemy" id="alchemy"></div>
  <script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/alchemyjs/0.4.2/alchemy.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/alchemyjs/0.4.2/scripts/vendor.js"></script>
  <script type="text/javascript">
    var json = {
      comment: "Charlize Theron's 'ego' network as GraphJSON",
      nodes: [
        {
          caption: "Screen Actors Guild Award for Outstanding Performance by a Female Actor in a Miniseries or Television Movie",
          type: "award",
          id: 595472
        },
        {
          caption: "Children of the Corn III: Urban Harvest",
          type: "movie",
          id: 626470
        },
        {
          caption: "Sleepwalking",
          type: "movie",
          id: 795744
        },
        {
          caption: "That Thing You Do!",
          type: "movie",
          id: 692946
        },
        {
          caption: "Trapped",
          type: "movie",
          id: 689794
        },
        {
          caption: "Head in the Clouds",
          type: "movie",
          id: 709577
        },
        {
          caption: "Waking Up in Reno",
          type: "movie",
          id: 635905
        },
        {
          caption: "Battle in Seattle",
          type: "movie",
          id: 734583
        },
        {
          caption: "Mighty Joe Young",
          type: "movie",
          id: 662595
        },
        {
          caption: "Academy Award for Actress in a Leading Role",
          type: "award",
          id: 593781
        },
        {
          caption: "The Devil's Advocate",
          type: "movie",
          id: 740763
        },
        {
          caption: "Screen Actors Guild Award for Outstanding Performance by a Cast in a Motion Picture",
          type: "award",
          id: 595440
        },
        {
          caption: "Silver Bear for Best Actress",
          type: "award",
          id: 601507
        },
        {
          caption: "The Curse of the Jade Scorpion",
          type: "movie",
          id: 649461
        },
        {
          caption: "MTV Movie Award for Best Female Performance",
          type: "award",
          id: 595074
        },
        {
          caption: "15 Minutes",
          type: "movie",
          id: 634248
        },
        {
          caption: "The Burning Plain",
          type: "movie",
          id: 670704
        },
        {
          caption: "The Life and Death of Peter Sellers",
          type: "movie",
          id: 794982
        },
        {
          caption: "Prometheus",
          type: "movie",
          id: 608746
        },
        {
          caption: "Teen Choice Award for Choice Summer Movie Star: Female",
          type: "award",
          id: 599909
        },
        {
          caption: "Chicago Film Critics Association Award for Best Actress",
          type: "award",
          id: 623686
        },
        {
          caption: "Golden Globe Award for Best Supporting Actress - Series, Miniseries or Television Film",
          type: "award",
          id: 598027
        },
        {
          caption: "Golden Globe Award for Best Actress - Musical or Comedy Film",
          type: "award",
          id: 595206
        },
        {
          caption: "Mad Max: Fury Road",
          type: "movie",
          id: 804341
        },
        {
          caption: "In the Valley of Elah",
          type: "movie",
          id: 621675
        },
        {
          caption: "Screen Actors Guild Award for Outstanding Performance by a Female Actor in a Leading Role",
          type: "award",
          id: 593954
        },
        {
          caption: "Golden Raspberry Award for Worst Actress",
          type: "award",
          id: 594134
        },
        {
          caption: "East of Havana",
          type: "movie",
          id: 609415
        },
        {
          caption: "The Road",
          type: "movie",
          id: 627715
        },
        {
          caption: "Golden Globe Award for Best Actress - Drama Film",
          type: "award",
          id: 593776
        },
        {
          caption: "Charles Jacobus Theron",
          type: "person",
          id: 314008
        },
        {
          caption: "Jackson Theron",
          type: "person",
          id: 314009
        },
        {
          caption: "Primetime Emmy Award for Outstanding Supporting Actress in a Miniseries or a Movie",
          type: "award",
          id: 595684
        },
        {
          caption: "The Cider House Rules",
          type: "movie",
          id: 801237
        },
        {
          caption: "The Astronaut's Wife",
          type: "movie",
          id: 657006
        },
        {
          caption: "Broadcast Film Critics Association Award for Best Actress",
          type: "award",
          id: 601849
        },
        {
          caption: "Hancock",
          type: "movie",
          id: 652245
        },
        {
          caption: "Charlize Theron",
          root: true,
          id: 314003
        },
        {
          caption: "Stuart Townsend",
          type: "person",
          id: 314004
        },
        {
          caption: "Stephan Jenkins",
          type: "person",
          id: 314005
        },
        {
          caption: "Benoni, Gauteng",
          type: "person",
          id: 314006
        },
        {
          caption: "Gerda Jacoba Aletta Maritz",
          type: "person",
          id: 314007
        },
        {
          caption: "Æon Flux",
          type: "movie",
          id: 663286
        },
        {
          caption: "Snow White and the Huntsman",
          type: "movie",
          id: 599907
        },
        {
          caption: "Young Adult",
          type: "movie",
          id: 661733
        },
        {
          caption: "Reindeer Games",
          type: "movie",
          id: 761000
        },
        {
          caption: "Monster",
          type: "movie",
          id: 729778
        },
        {
          caption: "The Legend of Bagger Vance",
          type: "movie",
          id: 804616
        },
        {
          caption: "Teen Choice Award for Choice Hissy Fit: Film",
          type: "award",
          id: 599908
        },
        {
          caption: "The Yards",
          type: "movie",
          id: 781638
        },
        {
          caption: "MTV Movie Award for Best Kiss",
          type: "award",
          id: 595095
        },
        {
          caption: "Celebrity",
          type: "movie",
          id: 611629
        },
        {
          caption: "Astro Boy",
          type: "movie",
          id: 818608
        },
        {
          caption: "North Country",
          type: "movie",
          id: 784437
        },
        {
          caption: "2 Days in the Valley",
          type: "movie",
          id: 615556
        },
        {
          caption: "Satellite Award for Best Actress – Motion Picture",
          type: "award",
          id: 595704
        },
        {
          caption: "Trial and Error",
          type: "movie",
          id: 799574
        },
        {
          caption: "National Society of Film Critics Award for Best Actress",
          type: "award",
          id: 595702
        },
        {
          caption: "Independent Spirit Award for Best Female Lead",
          type: "award",
          id: 595703
        },
        {
          caption: "Two Eyes Staring",
          type: "movie",
          id: 788889
        },
        {
          caption: "Sweet November",
          type: "movie",
          id: 811358
        },
        {
          caption: "Teen Choice Movie Award: Villain",
          type: "award",
          id: 595082
        },
        {
          caption: "Satellite Award for Best Supporting Actress – Drama",
          type: "award",
          id: 602151
        },
        {
          caption: "San Francisco Film Critics Circle Award for Best Actress",
          type: "award",
          id: 669827
        },
        {
          caption: "Independent Spirit Award for Best First Feature",
          type: "award",
          id: 599387
        },
        {
          caption: "The Italian Job",
          type: "movie",
          id: 817380
        },
        {
          caption: "Hollywood Confidential",
          type: "movie",
          id: 711550
        },
        {
          caption: "Men of Honor",
          type: "movie",
          id: 682763
        },
        {
          caption: "BAFTA Award for Best Actress in a Leading Role",
          type: "award",
          id: 594478
        }
      ],
      edges: [
        {
          source: 314003,
          target: 621675,
          caption: "ACTED_IN"
        },
        {
          source: 314003,
          target: 818608,
          caption: "ACTED_IN"
        },
        {
          source: 314003,
          target: 601849,
          caption: "NOMINATED"
        },
        {
          source: 314003,
          target: 649461,
          caption: "ACTED_IN"
        },
        {
          source: 314003,
          target: 669827,
          caption: "RECEIVED"
        },
        {
          source: 314003,
          target: 608746,
          caption: "ACTED_IN"
        },
        {
          source: 314003,
          target: 593954,
          caption: "RECEIVED"
        },
        {
          source: 314003,
          target: 595702,
          caption: "NOMINATED"
        },
        {
          source: 314003,
          target: 601849,
          caption: "RECEIVED"
        },
        {
          source: 314003,
          target: 595095,
          caption: "NOMINATED"
        },
        {
          source: 314003,
          target: 729778,
          caption: "ACTED_IN"
        },
        {
          source: 314003,
          target: 595703,
          caption: "NOMINATED"
        },
        {
          source: 314003,
          target: 811358,
          caption: "ACTED_IN"
        },
        {
          source: 314003,
          target: 595472,
          caption: "NOMINATED"
        },
        {
          source: 314003,
          target: 661733,
          caption: "PRODUCED"
        },
        {
          source: 314003,
          target: 784437,
          caption: "ACTED_IN"
        },
        {
          source: 314003,
          target: 634248,
          caption: "ACTED_IN"
        },
        {
          source: 314003,
          target: 662595,
          caption: "ACTED_IN"
        },
        {
          source: 314003,
          target: 804616,
          caption: "ACTED_IN"
        },
        {
          source: 314003,
          target: 595703,
          caption: "RECEIVED"
        },
        {
          source: 314003,
          target: 626470,
          caption: "ACTED_IN"
        },
        {
          source: 314003,
          target: 599387,
          caption: "RECEIVED"
        },
        {
          source: 314003,
          target: 599908,
          caption: "RECEIVED"
        },
        {
          source: 314003,
          target: 682763,
          caption: "ACTED_IN"
        },
        {
          source: 314003,
          target: 595702,
          caption: "RECEIVED"
        },
        {
          source: 314003,
          target: 788889,
          caption: "ACTED_IN"
        },
        {
          source: 314003,
          target: 657006,
          caption: "ACTED_IN"
        },
        {
          source: 314003,
          target: 795744,
          caption: "ACTED_IN"
        },
        {
          source: 314003,
          target: 593781,
          caption: "RECEIVED"
        },
        {
          source: 314003,
          target: 594478,
          caption: "NOMINATED"
        },
        {
          source: 314003,
          target: 594134,
          caption: "NOMINATED"
        },
        {
          source: 314003,
          target: 595074,
          caption: "NOMINATED"
        },
        {
          source: 314003,
          target: 692946,
          caption: "ACTED_IN"
        },
        {
          source: 314003,
          target: 740763,
          caption: "ACTED_IN"
        },
        {
          source: 314005,
          target: 314003,
          caption: "PARTNER_OF"
        },
        {
          source: 314003,
          target: 711550,
          caption: "ACTED_IN"
        },
        {
          source: 314003,
          target: 595440,
          caption: "NOMINATED"
        },
        {
          source: 314003,
          target: 801237,
          caption: "ACTED_IN"
        },
        {
          source: 314003,
          target: 599907,
          caption: "ACTED_IN"
        },
        {
          source: 314003,
          target: 761000,
          caption: "ACTED_IN"
        },
        {
          source: 314003,
          target: 781638,
          caption: "ACTED_IN"
        },
        {
          source: 314003,
          target: 670704,
          caption: "ACTED_IN"
        },
        {
          source: 314003,
          target: 609415,
          caption: "PRODUCED"
        },
        {
          source: 314003,
          target: 314009,
          caption: "PARENT_OF"
        },
        {
          source: 314003,
          target: 652245,
          caption: "ACTED_IN"
        },
        {
          source: 314003,
          target: 661733,
          caption: "ACTED_IN"
        },
        {
          source: 314003,
          target: 602151,
          caption: "NOMINATED"
        },
        {
          source: 314003,
          target: 635905,
          caption: "ACTED_IN"
        },
        {
          source: 314003,
          target: 799574,
          caption: "ACTED_IN"
        },
        {
          source: 314003,
          target: 593781,
          caption: "NOMINATED"
        },
        {
          source: 314003,
          target: 817380,
          caption: "ACTED_IN"
        },
        {
          source: 314003,
          target: 611629,
          caption: "ACTED_IN"
        },
        {
          source: 314003,
          target: 729778,
          caption: "PRODUCED"
        },
        {
          source: 314003,
          target: 709577,
          caption: "ACTED_IN"
        },
        {
          source: 314003,
          target: 804341,
          caption: "ACTED_IN"
        },
        {
          source: 314003,
          target: 627715,
          caption: "ACTED_IN"
        },
        {
          source: 314003,
          target: 794982,
          caption: "ACTED_IN"
        },
        {
          source: 314003,
          target: 623686,
          caption: "RECEIVED"
        },
        {
          source: 314003,
          target: 595082,
          caption: "NOMINATED"
        },
        {
          source: 314003,
          target: 689794,
          caption: "ACTED_IN"
        },
        {
          source: 314003,
          target: 788889,
          caption: "PRODUCED"
        },
        {
          source: 314007,
          target: 314003,
          caption: "PARENT_OF"
        },
        {
          source: 314003,
          target: 593776,
          caption: "NOMINATED"
        },
        {
          source: 314003,
          target: 734583,
          caption: "ACTED_IN"
        },
        {
          source: 314003,
          target: 598027,
          caption: "NOMINATED"
        },
        {
          source: 314003,
          target: 601507,
          caption: "RECEIVED"
        },
        {
          source: 314003,
          target: 599909,
          caption: "NOMINATED"
        },
        {
          source: 314003,
          target: 314004,
          caption: "PARTNER_OF"
        },
        {
          source: 314003,
          target: 663286,
          caption: "ACTED_IN"
        },
        {
          source: 314003,
          target: 314006,
          caption: "BORN_AT"
        },
        {
          source: 314003,
          target: 615556,
          caption: "ACTED_IN"
        },
        {
          source: 314004,
          target: 314003,
          caption: "PARTNER_OF"
        },
        {
          source: 314008,
          target: 314003,
          caption: "PARENT_OF"
        },
        {
          source: 314003,
          target: 314005,
          caption: "PARTNER_OF"
        },
        {
          source: 314003,
          target: 795744,
          caption: "PRODUCED"
        },
        {
          source: 314003,
          target: 595704,
          caption: "RECEIVED"
        },
        {
          source: 314003,
          target: 670704,
          caption: "EXEC_PRODUCED"
        },
        {
          source: 314003,
          target: 593954,
          caption: "NOMINATED"
        },
        {
          source: 314003,
          target: 595206,
          caption: "NOMINATED"
        },
        {
          source: 314003,
          target: 593776,
          caption: "RECEIVED"
        },
        {
          source: 314003,
          target: 595704,
          caption: "NOMINATED"
        },
        {
          source: 314003,
          target: 595684,
          caption: "NOMINATED"
        },
        {
          source: 314003,
          target: 599387,
          caption: "NOMINATED"
        }
      ]
    };
    var config = {
      dataSource: json
    };
    
    alchemy = new Alchemy(config);
  </script>
</body>

</html>

this is correct. It appears that my original HREF and SRC links were wrong in some way even though they were the ones provided. Working code is updated in question statement — sam, May 01 '17 at 16:23

Can't render a simple HTML page example

1 Answers1

Linked