I'm new here, I've got a problem. Actually, I've been working with D3.js. I tried to work with some graphs and can do it well when I work all it on the same html document. But When I have the D3.js code in a js document and call it from a html document, it doesn't graph anything. It doesn't show me any error but don't know what is happening and why it doesn't graph nothing
function dotChart() {
this.drawChart = function(uri_data) {
d3.json(uri_data, function(error, data){
keys = data.map((o) => {
return Object.keys(o)
}).reduce((prev, curr) => {
return prev.concat(curr)
}).filter((col, i, array) => {
return array.indexOf(col) === i
});
sum = 0;
data.forEach(function(d){
d[keys[1]] = +d[keys[1]]
sum += d[keys[1]];
});
dotChart.X.domain(data.map(function(d){
return d[keys[0]];
}));
dotChart.Y.domain([0, d3.max(data, function(d){
return d[keys[1]]/sum;
})]);
dotChart.SVG.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0, "+ dotChart.HEIGHT + ")")
.call(dotChart.X_AXIS);
dotChart.SVG.append("g")
.attr("class", "y axis")
.call(dotChart.Y_AXIS);
dotChart.SVG.selectAll(".dot")
.data(data)
.enter()
.append("circle")
.attr("class", "dot")
.attr("r", 3)
.attr("cx", function(d){
return dotChart.X(d[keys[0]]) + 13;
})
.attr("cy", function(d){
return dotChart.Y(d[keys[1]]/sum);
})
.attr("fill", "lightblue")
.attr("stroke", "#1A237E");
dotChart.LABELS.append("text")
.attr("transform", "translate(0, "+ dotChart.HEIGHT +")")
.attr("x", (dotChart.WIDTH - dotChart.MARGIN.right))
.attr("dx", "-1.0em")
.attr("dy", "3.0em")
.text("["+ keys[0] +"]");
dotChart.LABELS.append("text")
.attr("transform", "rotate(-90)")
.attr("y", -40)
.attr("dy", ".71em")
.style("text-anchor", "end")
.text(keys[1]);
dotChart.TITLE.append("text")
.attr("x", dotChart.WIDTH/2)
.attr("y", -30)
.attr("text-anchor", "middle")
.attr("font-size", "22px")
.text("Memoria Libre (RAM)");
});
}
}
dotChart.MARGIN = {
top: 70,
right: 30,
bottom: 50,
left: 50
}
dotChart.WIDTH = 500 - dotChart.MARGIN.left - dotChart.MARGIN.right,
dotChart.HEIGHT = 300 - dotChart.MARGIN.top - dotChart.MARGIN.bottom;
dotChart.X = d3.scaleLinear().range([dotChart.HEIGHT, 0]);
dotChart.Y = d3.scaleBand().rangeRound([0, dotChart.WIDTH]);
dotChart.FORMAT_PERCENT = d3.format(".0%");
dotChart.X_AXIS = d3.axisBottom()
.scale(dotChart.X);
dotChart.Y_AXIS = d3.axisLeft()
.scale(dotChart.Y)
.ticks(5)
.tickFormat(dotChart.FORMAT_PERCENT);
dotChart.SVG = d3.select("body").append("svg")
.attr("width", dotChart.WIDTH + dotChart.MARGIN.left + dotChart.MARGIN.right)
.attr("height", dotChart.HEIGHT + dotChart.MARGIN.top + dotChart.MARGIN.bottom)
.style("font", "10px verdana")
.append("g")
.attr("transform", "translate("+ dotChart.MARGIN.left +", "+ dotChart.MARGIN.top +")");
dotChart.LABELS = dotChart.SVG.append("g")
.attr("class", "labels");
dotChart.TITLE = dotChart.SVG.append("g")
.attr("class", "title");
My html code is
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="js/d3.js"></script>
<script src="dotChart.js"></script>
<style>
.axis path,
.axis line {
fill: none;
stroke: lightgrey;
}
</style>
</head>
<body>
<script type="text/javascript">
var line = new dotChart();
line.drawChart("data_01.json");
</script>
</body>
</html>
Data is
[
{"Country":14,"Income":457.81},
{"Country":15,"Income":4924.5},
{"Country":16,"Income":4792.6},
{"Country":17,"Income": 460.1},
{"Country":18,"Income":4821.7},
{"Country":19,"Income":7601.1},
{"Country":20,"Income": 5267},
{"Country":21,"Income":5006.1},
{"Country":22,"Income":4709.2},
{"Country":23,"Income":7719.2},
{"Country":24,"Income":7754.7},
{"Country":25,"Income":4873.6},
{"Country":26,"Income":4873.6},
{"Country":27,"Income":7754.7},
{"Country":28,"Income":5006.1},
{"Country":29,"Income":5267},
{"Country":30,"Income":4792.6}
]
I solved this adding de doChart.js in the body's sctructure..., another mistake I had, was the x and y domains because was inverted
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="js/d3.js"></script>
<style>
.axis path,
.axis line {
fill: none;
stroke: lightgrey;
}
</style>
</head>
<body>
<script src="dotChart.js"></script>
<script type="text/javascript">
var line = new dotChart();
line.drawChart("data_01.json");
</script>
</body>
</html>
And change the X and Y domains
dotChart.Y = d3.scaleLinear().range([dotChart.HEIGHT, 0]);
dotChart.X = d3.scaleBand().rangeRound([0, dotChart.WIDTH]);
Related
I'm using d3js to build a bar chart from a .csv file, and as my programming knowledge is not good, I get an example from the web and start to working in. I can get a specific value from the .csv and draw the chart, but I would like to implement a dropdown list to select a specific value from the .csv as showed in the image below.
Imagem:
I'm unable to load this data from .csv. It doesn't seem complicated, but I tried it in some ways and it didn't work out. Could someone give me any tips on how to do this?
Best regards!
.csv file
country,year,hdi,gdp,unemp
Australia,2000,45,5.6,9
Austria,2000,54,6.1,8
Canada,2000,23,4.5,6
...
...
HTML + JS
<html>
<head>
<style>
.bar {
fill: steelblue;
}
.bar:hover {
fill: brown;
}
</style>
<script src="//d3js.org/d3.v5.min.js"></script>
</head>
<body>
<div>
<select id="S_indicators"></select>
</div>
<svg width="560" height="300"></svg>
<script>
var svg = d3.select("svg"),
margin = {
top: 20,
right: 20,
bottom: 30,
left: 50
},
width = +svg.attr("width") - margin.left - margin.right,
height = +svg.attr("height") - margin.top - margin.bottom,
g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");
var parseTime = d3.timeParse("%d-%b-%y");
var x = d3.scaleBand()
.rangeRound([0, width])
.padding(0.1);
var y = d3.scaleLinear()
.rangeRound([height, 0]);
d3.csv("output.csv").then(function (data) {
var allGroup = ["gdp","hdi","unemp"]
d3.select("#S_indicators")
.selectAll('myOptions')
.data(allGroup)
.enter()
.append('option')
.text(function (d) { return d; })
.attr("value", function (d) { return d; })
x.domain(data.map(function (d) {
return d.year;
}));
y.domain([0, d3.max(data, function (d) {
return Math.max(d.unemp);
})]);
g.append("g")
.attr("transform", "translate(0," + height + ")")
.call(d3.axisBottom(x))
g.append("g")
.call(d3.axisLeft(y))
.append("text")
.attr("fill", "#000")
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("dy", "0.71em")
.attr("text-anchor", "end")
g.selectAll(".bar")
.data(data)
.enter().append("rect")
.attr("class", "bar")
.attr("x", function (d) {
return x(d.year);
})
.attr("y", function (d) {
return y(Number(d.unemp));
})
.attr("width", x.bandwidth())
.attr("height", function (d) {
return height - y(Number(d.unemp));
});
});
</script>
</body>
</html>
-Add a dropdown to the html file (I named it dd):
<!DOCTYPE html>
<html lang="en">
<title>My Scatter2</title>
<body>
<select id="dd"></select>
<div id="wrap"></div>
<script src="https://d3js.org/d3.v5.js"></script>
<script src="scatterplot.js"></script>
<link rel='stylesheet' href='styles.css'>
</body>
</html>
Populate it in D3 via:
var specs = ['A','B','C']
var dropdown = d3.select('#dd')
dropdown.selectAll('option')
.data(specs)
.enter().append("option")
.attr("value",d=>d)
.text(d => d)
Or if you want an observeable example:
https://observablehq.com/#kickout/basic-scatterplot
I am using D3.js to showcase my data. However, I am unable to get two different objects to not overlap. For example, the code below shows a line graph and a bar graph. I am using code from https://github.com/d3/d3/wiki/Gallery for this example to show my issue. The line graph code is from https://bl.ocks.org/mbostock/3883245. The bar graph code is from https://bl.ocks.org/mbostock/3885304. I tried using as shown in this example http://www.d3noob.org/2013/07/arranging-more-than-one-d3js-graph-on.html, but it did not work. I also made sure they both used the same version of d3.js. The data is from two tsv files that are on the links above for the line and bar graph. Any help would be appreciated!
<!DOCTYPE html>
<meta charset="utf-8">
<style>
.bar {
fill: steelblue;
}
.bar:hover {
fill: brown;
}
.axis--x path {
display: none;
}
</style>
<script src="https://d3js.org/d3.v4.min.js"></script>
<div id="lineg"></div>
<div id="barg"></div>
<lineg width="960" height="500"></lineg>
<barg width="960" height="500"></barg>
<script>
var svga = d3.select("#lineg"),
margina = {top: 20, right: 20, bottom: 30, left: 40},
widtha = +svga.attr("width") - margina.left - margina.right,
heighta = +svga.attr("height") - margina.top - margina.bottom;
var xa = d3.scaleBand().rangeRound([0, widtha]).padding(0.1),
ya = d3.scaleLinear().rangeRound([heighta, 0]);
var ga = svga.append("g")
.attr("transform", "translate(" + margina.left + "," + margina.top + ")");
d3.tsv("bardata.tsv", function(d) {
d.frequency = +d.frequency;
return d;
}, function(error, data) {
if (error) throw error;
xa.domain(data.map(function(d) { return d.letter; }));
ya.domain([0, d3.max(data, function(d) { return d.frequency; })]);
ga.append("g")
.attr("class", "axis axis--x")
.attr("transform", "translate(0," + heighta + ")")
.call(d3.axisBottom(xa));
ga.append("g")
.attr("class", "axis axis--y")
.call(d3.axisLeft(ya).ticks(10, "%"))
.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("dy", "0.71em")
.attr("text-anchor", "end")
.text("Frequency");
ga.selectAll(".bar")
.data(data)
.enter().append("rect")
.attr("class", "bar")
.attr("x", function(d) { return xa(d.letter); })
.attr("y", function(d) { return ya(d.frequency); })
.attr("width", xa.bandwidth())
.attr("height", function(d) { return heighta - ya(d.frequency); });
});
</script>
<script>
var svgb = d3.select("barg"),
marginb = {top: 20, right: 20, bottom: 30, left: 50},
widthb = +svgb.attr("width") - marginb.left - marginb.right,
heightb = +svgb.attr("height") - marginb.top - marginb.bottom,
gb = svgb.append("g").attr("transform", "translate(" + marginb.left + "," + marginb.top + ")");
var parseTime = d3.timeParse("%d-%b-%y");
var xb = d3.scaleTime()
.rangeRound([0, widthb]);
var yb = d3.scaleLinear()
.rangeRound([heightb, 0]);
var line = d3.line()
.x(function(d) { return xb(d.date); })
.y(function(d) { return yb(d.close); });
d3.tsv("linedata.tsv", function(d) {
d.date = parseTime(d.date);
d.close = +d.close;
return d;
}, function(error, data) {
if (error) throw error;
xb.domain(d3.extent(data, function(d) { return d.date; }));
yb.domain(d3.extent(data, function(d) { return d.close; }));
gb.append("g")
.attr("transform", "translate(0," + heightb + ")")
.call(d3.axisBottom(xb))
.select(".domain")
.remove();
gb.append("g")
.call(d3.axisLeft(yb))
.append("text")
.attr("fill", "#000")
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("dy", "0.71em")
.attr("text-anchor", "end")
.text("Price ($)");
gb.append("path")
.datum(data)
.attr("fill", "none")
.attr("stroke", "steelblue")
.attr("stroke-linejoin", "round")
.attr("stroke-linecap", "round")
.attr("stroke-width", 1.5)
.attr("d", line);
});
</script>
In your code barg and lineg are just divs:
<div id="lineg"></div>
<div id="barg"></div>
Instead of that, they should be SVG elements, like this:
<svg id="barg" width="960" height="500"></svg>
<svg id="lineg" width="960" height="500"></svg>
Or, alternatively, append an SVG in your selection:
var svga = d3.select("#lineg").append("svg");
var svgb = d3.select("#barg").append("svg");
However, in that case, you cannot use the getters to get the width and height of the SVGs.
Finally, there is no HTML tag named <lineg> or <barg>.
So I need to read a .CSV file using a HTML webpage loaded locally (e.g with file:///) and plot the contants on a graph using d3.js. So far I have attempted to join two examples together without success...
If you open it, it is able to read the contents of the local csv file, but for some reason the graph does not appear.
Any help much appreciated!
<!DOCTYPE html>
<style> /* set the CSS */
body { font: 12px Arial;}
path {
stroke: steelblue;
stroke-width: 2;
fill: none;
}
.axis path,
.axis line {
fill: none;
stroke: grey;
stroke-width: 1;
shape-rendering: crispEdges;
}
</style>
<html lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="chrome=1" />
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<!--this doesn't seem to help-->
<meta http-equiv="Access-Control-Allow-Origin" content="*"/>
<title>Process local CSV file</title>
<script src="d3.js" charset="utf-8"></script>
</head>
<body>
<script>
var rowToHtml = function( row ) {
var result = "";
for (key in row) {
result += key + ": " + row[key] + "<br/>"
}
return result;
}
var previewCsvUrl = function( csvUrl ) {
d3.csv( csvUrl, function( rows ) {
d3.select("div#preview").html(
"<b>First row:</b><br/>" + rowToHtml(rows[0]));
})
}
d3.select("html")
.style("height","100%")
d3.select("body")
.style("height","100%")
.style("font", "12px sans-serif")
.append("input")
.attr("type", "file")
.attr("accept", ".csv")
.style("margin", "5px")
.on("change", function() {
var file = d3.event.target.files[0];
if (file) {
var reader = new FileReader();
reader.onloadend = function(event1) {
var dataUrl = event1.target.result;
// The following call results in an "Access denied" error in IE.
previewCsvUrl(dataUrl);
rendergraph(dataUrl);
};
reader.readAsDataURL(file);
}
})
d3.select("body")
.append("div")
.attr("id", "preview")
.style("margin", "5px")
var svg = d3.select("svg"),
margin = {top: 20, right: 20, bottom: 30, left: 50},
width = +svg.attr("width") - margin.left - margin.right,
height = +svg.attr("height") - margin.top - margin.bottom,
g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");
var parseTime = d3.timeParse("%d-%b-%y");
var x = d3.scaleTime()
.rangeRound([0, width]);
var y = d3.scaleLinear()
.rangeRound([height, 0]);
var line = d3.line()
.x(function(d) { return x(d.date); })
.y(function(d) { return y(d.close); });
var rendergraph = function( url1 ) {
d3.csv(url1, function(d) {
d.date = parseTime(d.date);
d.close = +d.close;
return d;
}, function(error, data) {
if (error) throw error;
x.domain(d3.extent(data, function(d) { return d.date; }));
y.domain(d3.extent(data, function(d) { return d.close; }));
g.append("g")
.attr("transform", "translate(0," + height + ")")
.call(d3.axisBottom(x))
.select(".domain")
.remove();
g.append("g")
.call(d3.axisLeft(y))
.append("text")
.attr("fill", "#000")
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("dy", "0.71em")
.attr("text-anchor", "end")
.text("Price ($)");
g.append("path")
.datum(data)
.attr("fill", "none")
.attr("stroke", "steelblue")
.attr("stroke-linejoin", "round")
.attr("stroke-linecap", "round")
.attr("stroke-width", 1.5)
.attr("d", line);
});
}
</script>
</body>
</html>
svg is being selected here but its not there in dom:
var svg = d3.select("svg"),
Either add svg element in the html or append to body using d3 by replacing the above code with:
var svg = d3.select("body").append('svg').attr('width', 300).attr('height', 300),
I am working on this force graph in D3 v4.
When a user move his mouse, the color of the bar will be changed. In d3 v3, my code can work very well. But when I use it in d3 v4, it doesn't work. In the official introduction, I can use like this:
selection.on("mousedown touchstart", function() {
console.log(d3.event.type);
});
But it still can't work.
Here is my code:
<html>
<head>
<meta charset="utf-8">
<title>a bar</title>
</head>
<style>
.axis path,
.axis line{
fill: none;
stroke: black;
shape-rendering: crispEdges;
}
.axis text {
font-family: sans-serif;
font-size: 11px;
}
.MyRect {
fill: steelblue;
}
.MyText {
fill: white;
text-anchor: middle;
}
</style>
<body>
<script src="http://d3js.org/d3.v4.min.js" charset="utf-8"></script>
<script>
var width=400;
var height=400;
var svg=d3.select("body")
.append("svg")
.attr("width",width)
.attr("height",height);
var padding = {left:30, right:30, top:20, bottom:20};
var dataset=[10,20,30,40,33,24,12,5];
var xScale = d3.scaleBand()
.domain(d3.range(dataset.length))
.range([0, width-padding.left-padding.right])
.padding(0.2); //some value here
var yScale = d3.scaleLinear()
.domain([0,d3.max(dataset)])
.range([height-padding.top-padding.bottom,0]);
var xAxis = d3.axisBottom()
.scale(xScale);
var yAxis = d3.axisLeft()
.scale(yScale);
var rectPadding=4;
var rects = svg.selectAll(".MyRect")
.data(dataset)
.enter()
.append("rect")
.attr("class","MyRect")
.attr("transform","translate(" + padding.left + "," + padding.top + ")")
.attr("x", function(d,i){
return xScale(i) + rectPadding/2;
} )
.attr("y",function(d){
return yScale(d);
})
.attr("width", xScale.bandwidth() - rectPadding )
.attr("height", function(d){
return height - padding.top - padding.bottom - yScale(d);
})
.attr("fill","steelblue")
.on("mouseover",function(d,i){
d3.select(this)
.attr("fill","yellow");
})
.on("mouseout",function(d,i){
d3.select(this)
.transition()
.duration(500)
.attr("fill","steelblue");
});
var texts = svg.selectAll(".MyText")
.data(dataset)
.enter()
.append("text")
.attr("class","MyText")
.attr("transform","translate(" + padding.left + "," + padding.top + ")")
.attr("x", function(d,i){
return xScale(i) + rectPadding/2;
})
.attr("y",function(d){
return yScale(d);
})
.attr("dx",function(){
return (xScale.bandwidth() - rectPadding)/2;
})
.attr("dy",function(d){
return 20;
})
.text(function(d){
return d;
})
svg.append("g")
.attr("class","axis")
.attr("transform","translate(" + padding.left + "," + (height - padding.bottom) + ")")
.call(xAxis);
svg.append("g")
.attr("class","axis")
.attr("transform","translate(" + padding.left + "," + padding.top + ")")
.call(yAxis);
</script>
</body>
</html>
I'm a beginner, could you help me? Or giving me an useful suggestion is also okay. Thankyou!
Registering mouseover and mouseout is same in d3.v4, same as what you are doing.
But instead of using attr:
.on("mouseover",function(d,i){
console.log("hello")
d3.select(this)
.attr("fill","yellow");//it is style not attribute
})
.on("mouseout",function(d,i){
d3.select(this)
.transition()
.duration(500)
.attr("fill","steelblue");//it is style not attribute
});
you should have used style :
.on("mouseover",function(d,i){
console.log("hello")
d3.select(this)
.style("fill","yellow");//it is style
})
.on("mouseout",function(d,i){
d3.select(this)
.transition()
.duration(500)
.style("fill","steelblue");//it is style
});
working code here
I am trying to launch a WPF webbrowser from a string. I have a java script file referenced in the head section that points to a file on my drive. It looks good to me but still fails. Any ideas?
String served to webbrowser:
<!DOCTYPE html>
<meta charset="utf - 8">
<head>
<script src="file:///C:/Users/ksobon/AppData/Roaming/Dynamo/Dynamo%20Revit/1.0/packages/extra/d3/d3.v3.min.js"></script>
<link rel="stylesheet" href="file:///C:/Users/ksobon/AppData/Roaming/Dynamo/Dynamo%20Revit/1.0/packages/extra/bootstrap/css/bootstrap.min.css">
<style>
body {
font: 10px Arial;
}
.axis path {
fill: none;
stroke: grey;
shape-rendering: crispEdges;
}
.axis text {
font-family: Arial;
font-size: 10px;
}
.axis line {
fill: none;
stroke: grey;
stroke-width: 1;
shape-rendering: crispEdges;
}
</style>
</head>
<div class="row">
<div class="col-md-12" id="linelinechart1" align="center">
<script>
function renderLineChart() {
var data = [{"name":"24-Apr-07","value":93.24},{"name":"25-Apr-07","value":95.35},{"name":"26-Apr-07","value":98.84},{"name":"27-Apr-07","value":99.92},{"name":"30-Apr-07","value":99.8},{"name":"1-May-07","value":99.47},{"name":"2-May-07","value":100.39},{"name":"3-May-07","value":100.4},{"name":"4-May-07","value":100.81},{"name":"7-May-07","value":103.92},{"name":"8-May-07","value":105.06},{"name":"9-May-07","value":106.88},{"name":"10-May-07","value":107.34},{"name":"11-May-07","value":108.74},{"name":"14-May-07","value":109.36},{"name":"15-May-07","value":107.52},{"name":"16-May-07","value":107.34},{"name":"17-May-07","value":109.44},{"name":"18-May-07","value":110.02},{"name":"21-May-07","value":111.98},{"name":"22-May-07","value":113.54},{"name":"23-May-07","value":112.89},{"name":"24-May-07","value":110.69},{"name":"25-May-07","value":113.62},{"name":"29-May-07","value":114.35},{"name":"30-May-07","value":118.77},{"name":"31-May-07","value":121.19},{"name":"1-Jun-07","value":118.4},{"name":"4-Jun-07","value":121.33}];
var tickValues = data.map(function (d){return d.name;});
var step = Math.floor(tickValues.length / 5);
var indexes = d3.range(0,tickValues.length, step);
if (indexes.indexOf(tickValues.length - 1) == -1){
indexes.push(tickValues.length - 1);
}
var tickArray = d3.permute(tickValues, indexes);
var margin = { top: 20, right: 20, bottom: 30, left: 50 },
width = 547 - margin.left - margin.right,
height = 400 - margin.top - margin.bottom;
var x = d3.scale.ordinal()
.domain(data.map(function (d) { return d.name; }))
.rangePoints([0, width], 2);
var y = d3.scale.linear()
.range([height, 0]);
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom")
.tickValues(tickArray);
var yAxis = d3.svg.axis()
.scale(y)
.orient("left");
var line = d3.svg.line()
.x(function (d) { return x(d.name); })
.y(function (d) { return y(d.value); });
var svg = d3.select("#linelinechart1").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 + ")");
data.forEach(function (d) {
d.name = d.name;
d.value = +d.value;});
y.domain([0, 200]);
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
svg.append("g")
.attr("class", "y axis")
.call(yAxis)
.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("dy", ".71em")
.style("text-anchor", "end")
.text("Label");
svg.append("path")
.datum(data)
.attr("d", line)
.attr("stroke", "#FA0000")
.attr("stroke-width", 2)
.attr("fill", "none");
}
renderLineChart();
</script>
</div>
</div>
Previously the reference to d3.min.js was placed after the <script> tag and before renderLineChart() function call and it worked just fine.
So it appears that the answer is within the string formatting where a space in a file path name was replaced with %20 and rendered such path unreadable. I used Uri.UnescapeDataString() to clean that up and it works great. Thanks!