jake_elex Posted March 17, 2020 Share Posted March 17, 2020 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. Link to comment
humxahafeex Posted March 18, 2020 Share Posted March 18, 2020 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 🙂 Link to comment
jake_elex Posted March 18, 2020 Author Share Posted March 18, 2020 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! Link to comment
humxahafeex Posted March 18, 2020 Share Posted March 18, 2020 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. Link to comment
jake_elex Posted March 19, 2020 Author Share Posted March 19, 2020 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. Link to comment
humxahafeex Posted March 19, 2020 Share Posted March 19, 2020 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 Link to comment
jake_elex Posted March 19, 2020 Author Share Posted March 19, 2020 @humxahafeex-- You're a lifesaver. Thank you!!! Link to comment
humxahafeex Posted March 19, 2020 Share Posted March 19, 2020 2 minutes ago, jake_elex said: @humxahafeex-- You're a lifesaver. Thank you!!! Glad I could Help 🙂 Ha Link to comment
Recommended Posts
Archived
This topic is now archived and is closed to further replies.