Linking a CSV file to D3 visualization on Squarespace

Hello,

I'm attempting to add a D3 map visualization to my site via a code block. The map uses a CSV dataset to display its values. I'm unsure of how to link to/host the underlying CSV data file that the visualization should use. I believe this is typically achieved using a CDN, but it's not clear to me how to do this using SS. Any suggestions for how to tackle this?

Thank you in advance.

15 hours ago, jake_elex said:

Hello,

I'm attempting to add a D3 map visualization to my site via a code block. The map uses a CSV dataset to display its values. I'm unsure of how to link to/host the underlying CSV data file that the visualization should use. I believe this is typically achieved using a CDN, but it's not clear to me how to do this using SS. Any suggestions for how to tackle this?

Thank you in advance.

Hi @jake_elex Please do share a code you are using currently for D3 so I can look in to it and send you modifications required to load csv 🙂

Hi @humxahafeex. Thanks for taking the time to answer my question.

I am using the steps found on this blog to try to upload the code and data. I don't have my own D3 written yet as I'm simply trying to test whether or not this can be done using Squarespace. The bubble example the blogger links to uses the following code:
 

<div class="mydiv_1">
<style>
.bubbles {
  stroke-width: 1px;
  stroke: black;
  opacity: .8
}
.bubbles:hover {
  stroke: black;
}
</style>

<script>
// set the dimensions and margins of the graph
var margin = {top: 40, right: 150, bottom: 60, left: 30},
    width = 500 - margin.left - margin.right,
    height = 420 - margin.top - margin.bottom;

// append the svg object to the body of the page
var svg = d3.select(".mydiv_1")
  .append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
  .append("g")
    .attr("transform",
          "translate(" + margin.left + "," + margin.top + ")");

//Read the data
d3.csv("https://raw.githubusercontent.com/holtzy/data_to_viz/master/Example_dataset/4_ThreeNum.csv", function(data) {

Note that he/she links to the CSV file by using a GitHub link. A few questions related to this:

• Is this how you would go about it? If not, why not?
• Do you know if the GitHub repo being linked to has to be public, or can it be private to work?

Thanks again for your help!

2 hours ago, jake_elex said:

Hi @humxahafeex. Thanks for taking the time to answer my question.

I am using the steps found on this blog to try to upload the code and data. I don't have my own D3 written yet as I'm simply trying to test whether or not this can be done using Squarespace. The bubble example the blogger links to uses the following code:
 

<div class="mydiv_1">
<style>
.bubbles {
  stroke-width: 1px;
  stroke: black;
  opacity: .8
}
.bubbles:hover {
  stroke: black;
}
</style>

<script>
// set the dimensions and margins of the graph
var margin = {top: 40, right: 150, bottom: 60, left: 30},
    width = 500 - margin.left - margin.right,
    height = 420 - margin.top - margin.bottom;

// append the svg object to the body of the page
var svg = d3.select(".mydiv_1")
  .append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
  .append("g")
    .attr("transform",
          "translate(" + margin.left + "," + margin.top + ")");

//Read the data
d3.csv("https://raw.githubusercontent.com/holtzy/data_to_viz/master/Example_dataset/4_ThreeNum.csv", function(data) {

Note that he/she links to the CSV file by using a GitHub link. A few questions related to this:

• Is this how you would go about it? If not, why not?
• Do you know if the GitHub repo being linked to has to be public, or can it be private to work?

Thanks again for your help!

Hi,  You did most of the part you can use this ( https://bl.ocks.org/d3noob/8952219 ) Guide to get it done, it's quite simple. The core code to get it one is as follows

d3.csv("bar-data.csv", function(error, data) {

    data.forEach(function(d) {
        d.date = parseDate(d.date);
        d.value = +d.value;
    });
	

here you can simply use csv file and then you can assign values as per the values from csv file. and then use them to create the visuals.

Regarding your Questions :

- You can do this way. No Problem.

-It must be public in order to access that specific file , You cannot make single file public in private repo.

Hope it Helps.

Thanks, @humxahafeex. One last question: You say that I can reference the "bar-data.csv" file in my code, but where do I host that CSV file on Squarespace? Is there a way to do it, or is the best way to host it on a  public GitHub repo and link to it from there? Thanks again.

2 minutes ago, jake_elex said:

Thanks, @humxahafeex. One last question: You say that I can reference the "bar-data.csv" file in my code, but where do I host that CSV file on Squarespace? Is there a way to do it, or is the best way to host it on a  public GitHub repo and link to it from there? Thanks again.

Yes you can host file on squarespace , Just add  a link to non linked section then go it's settings by clikcing gear icon in front of it pop up will open from theri choose last option File and upload your csv file there then select the file and click save as you save your file link will appear you can use that.

Images are attched for ease of refrence.

Your Link will look like  /s/YourFileName

@humxahafeex-- You're a lifesaver. Thank you!!!

2 minutes ago, jake_elex said:

@humxahafeex-- You're a lifesaver. Thank you!!!

Glad I could Help 🙂 Ha