<!doctype html>
<html>
<head>
<title>Transitions Tutorial</title>
<script src="https://d3js.org/d3.v4.min.js"></script>
</head>
<body>
<script>
d3.json("myData.json",function(data){
var canvas= d3.select("body").append("svg")
.attr("width",500)
.attr("height",500);
canvas.selectAll("rect")
.data(data)
.enter()
.append("rect")
.attr("width",function(d){return d.age*10;})
.attr("height",48)
.attr("y",function(d,i){ i*48;})
.attr("fill","blue");
})
//console.log(d3);
</script>
</body>
</html>
the following html is to extract data from json file myData.json
I am getting this error message :"Failed to load file:///D:/Java/D3_DEMO/myData.json: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https."
Related
d3 loaded external svg which contains closed paths,Code is highlighting green fill only once per each path from the refresh. Is it possible to make green fills for all the mouseovers.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="./d3.min.js"></script>
<title>svg and d3</title>
</head>
<body>
<script type="text/javascript">
d3.xml("t.svg")
.mimeType("image/svg+xml")
.get(function(error, xml) {
if (error) throw error;
document.body.appendChild(xml.documentElement);
d3.selectAll('path.tel')
.on("mouseover", function(d) {
d3.select(this).style("fill", "green");
})
.on("mouseout", function(d) {
d3.select(this).style("fill", "none");
});
});
</script>
</body>
</html>
I followed this instruction, entering the complete code into the HTML pane of web-maker:
<!doctype html>
<html>
<head>
<title>D3 tutorial</title>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<!--<script src="d3.min.js"></script>-->
</head>
<body>
<script>
var canvas = d3.select("body")
.append("svg")
.attr("width", 500)
.attr("height", 500);
var circle = canvas.append("circle")
.attr("cx",250)
.attr("cy", 250)
.attr("r", 50)
.attr("fill", "red");
</script>
</body>
</html>
That results in an empty page.
The I moved the script "content" to the JS pane, that results in "ReferenceError: d3 is not defined".
The script content will move to the JS pane. But the external scripts need to be loaded through the "Add library" button. In the "Add library" box, simply select D3 from the list of popular libraries.
This doesn't work offline, it works just fine when internet connection is available :
<!doctype html>
<html>
<head>
<title>d3 SVG barchart</title>
<script src="http://d3js.org/d3.v3.min.js"></script><!--Line A-->
<script src="d3.js"></script>
<script src="d3.min.js"></script>
</head>
<body>
<script>
var dataArray = [20, 40, 50, 60];
var width=500;
var height=500;
var canvas = d3.select("body")
.append("svg")
.attr("width", width)
.attr("height", height);
var widthScale = d3.scale.linear()
.domain([0, 60])
.range([0, width]);
var bars = canvas.selectAll("rect")
.data(dataArray)
.enter()
.append("rect")
.attr("width", function(d){
return widthScale(d);
})
.attr("height", 50)
.attr("y", function(d, i){
return i*100;
});
</script>
</body>
</html>
It seems like the scale operation(s) of d3.js library doesn't work when I'm offline (or when Line A in is put in a comment block), why? Is there any d3.js version that works for offline user?
I enjoy snap.svg practices offline (I don't have private internet connection available), is there any way to do this with d3.js?
Your problem is here
<script src="http://d3js.org/d3.v3.min.js"></script><!--Line A-->
<script src="d3.js"></script>
<script src="d3.min.js"></script>
Download
<script src="http://d3js.org/d3.v3.min.js"></script>
Refer correctly to it locally and remove:
<script src="d3.js"></script>
<script src="d3.min.js"></script>
1.download and add d3.v3.min.js in asset folder
2.remove
<script src="http://d3js.org/d3.v3.min.js"></script><!--Line A-->
<script src="d3.js"></script>
<script src="d3.min.js"></script>
3.add
<script src="d3.v3.min.js"></script>
then d3 graph will work in offline .
I am learning D3.js, and I have the following code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>D3 Graphic</title>
</head>
<body>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
</body>
</html>
I am using Chrome as a browser on my mac. Am I making an obvious mistake? Thank you!
There is nothing really wrong per-se with your code, other than the fact that it will do nothing (and I personally would put the 'script src' tag in the head section). You have simply written a HTML document which then loads in the D3.JS Javascript library.
What you now need to do is start using the library by issuing some D3 commands to create HTML/DOM elements from data. There is plenty to read up on the internet (try dashingd3js.com) but to get you started here is a v.simple starter for 10 expanding on your code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>D3 Column Chart</title>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
</head>
<body>
<div id="chartarea"></div>
<script type="text/javascript">
// Some random data
var data = [0.27, 0.5, 0.1, 0.15, 0.3, 0.21, 0.25, 0.94, 0.04, 1.00];
var svg = d3.select('#chartarea')
.selectAll('div')
.data(data)
.enter()
.append('div')
.attr('class', 'bar')
.style('height', function (d) {
return d * 400 + 'px';
});
</script>
</body>
</html>
The above should create a v.simple column chart using HTML DIV's. You can then move on to more advanced implementations to generate SVG components.
Also see example here:
http://bl.ocks.org/jamesleesaunders/260cf482c8a56d49dfa6
I'm trying to start with d3 but have bad exp. :)
I can't make a simple example run localy. I'm runing it under chrome with webstorm local server;
http://localhost:63342/svg-tests/index.html
There are no errors but no red circles are drawen. And "console.log(d);" is not fired;
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<script src="js/d3.v3.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<script>
var dataSet = [10, 20, 30, 40];
var svg = d3.select('svg');
var circle = svg.selectAll('circle')
.data(dataSet)
.enter()
.append('circle')
.attr({
r: function(d){ console.log(d); return d },
cx: 10,
cy: 10,
fill: 'red'
});
</script>
<svg></svg>
</body>
</html>
Please help!?
You just need to define the <svg> element before the script as it relies on it:
<svg></svg>
<script>
...
</script>