I am unable to display a D3 plot on a web-page.
I am able to display the plot when I select <body>. However, I cannot display a plot when I select a, say, <div>.
The following is my setting:
plot.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Protein Structure Analyzer</title>
<script type="text/javascript" src="../static/jquery/jquery-3.6.3.js"></script>
<script type="text/javascript" src="../static/d3/d3.js"></script>
<script type="text/javascript" src="../static/d3/d3.min.js"></script>
</head>
<body>
<script type="text/javascript">
// set the dimensions and margins of the graph
var margin = {top: 10, right: 40, bottom: 30, left: 30},
width = 450 - margin.left - margin.right,
height = 400 - margin.top - margin.bottom;
// append the svg object to the body of the page
var svG = d3.select("#plot-div")
.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 + ")");
// Create data
var data = [ {x:10, y:20}, {x:40, y:90}, {x:80, y:50} ]
// X scale and Axis
var x = d3.scaleLinear()
.domain([0, 100]) // This is the min and the max of the data: 0 to 100 if percentages
.range([0, width]); // This is the corresponding value I want in Pixel
svG
.append('g')
.attr("transform", "translate(0," + height + ")")
.call(d3.axisBottom(x));
// X scale and Axis
var y = d3.scaleLinear()
.domain([0, 100]) // This is the min and the max of the data: 0 to 100 if percentages
.range([height, 0]); // This is the corresponding value I want in Pixel
svG
.append('g')
.call(d3.axisLeft(y));
// Add 3 dots for 0, 50 and 100%
svG
.selectAll("whatever")
.data(data)
.enter()
.append("circle")
.attr("cx", function(d){ return x(d.x) })
.attr("cy", function(d){ return y(d.y) })
.attr("r", 7)
</script>
<div id="plot-div"></div>
</body>
</html>
What am I doing incorrectly?
The DIV needs to be in the document before the script runs so just move the DIV to the top of the document:
// set the dimensions and margins of the graph
var margin = {top: 10, right: 40, bottom: 30, left: 30},
width = 450 - margin.left - margin.right,
height = 400 - margin.top - margin.bottom;
// append the svg object to the body of the page
var svG = d3.select("#plot-div")
.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 + ")");
// Create data
var data = [ {x:10, y:20}, {x:40, y:90}, {x:80, y:50} ]
// X scale and Axis
var x = d3.scaleLinear()
.domain([0, 100]) // This is the min and the max of the data: 0 to 100 if percentages
.range([0, width]); // This is the corresponding value I want in Pixel
svG
.append('g')
.attr("transform", "translate(0," + height + ")")
.call(d3.axisBottom(x));
// X scale and Axis
var y = d3.scaleLinear()
.domain([0, 100]) // This is the min and the max of the data: 0 to 100 if percentages
.range([height, 0]); // This is the corresponding value I want in Pixel
svG
.append('g')
.call(d3.axisLeft(y));
// Add 3 dots for 0, 50 and 100%
svG
.selectAll("whatever")
.data(data)
.enter()
.append("circle")
.attr("cx", function(d){ return x(d.x) })
.attr("cy", function(d){ return y(d.y) })
.attr("r", 7)
<script src="https://code.jquery.com/jquery-3.6.3.min.js" integrity="sha256-pvPw+upLPUjgMXY0G+8O0xUf+/Im1MZjXxxgOcBQBXU=" crossorigin="anonymous"></script>
<script type="text/javascript" src="https://d3js.org/d3.v7.min.js"></script>
<div id="plot-div"></div>
Related
I am doing a sample project using d3js sample from bl.ocks.org to plot graph. There is a csv file which is continuously updated. My task is to read it every second and update the plot. I tried to look up ajax example to add into the d3. However bl.ocks.org did not have what I needed. Can anyone please let me know a good ajax example which I can integrate with my application.
--> next task is to get csv off and have a restful service to read data. Then it is to be parsed and graph is to be updated periodically.
Thanks in advance!
<!DOCTYPE html>
<meta charset="utf-8">
<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>
<body>
<!-- load the d3.js library -->
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>
// Set the dimensions of the canvas / graph
var margin = {top: 30, right: 20, bottom: 30, left: 50},
width = 600 - margin.left - margin.right,
height = 270 - margin.top - margin.bottom;
// Parse the date / time
var parseDate = d3.time.format("%d-%b-%y").parse;
// Set the ranges
var x = d3.time.scale().range([0, width]);
var y = d3.scale.linear().range([height, 0]);
// Define the axes
var xAxis = d3.svg.axis().scale(x)
.orient("bottom").ticks(5);
var yAxis = d3.svg.axis().scale(y)
.orient("left").ticks(5);
// Define the line
var valueline = d3.svg.line()
.x(function(d) { return x(d.date); })
.y(function(d) { return y(d.close); });
// Adds the svg canvas
var svg = d3.select("body")
.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 + ")");
// Get the data
d3.csv("data.csv", function(error, data) {
data.forEach(function(d) {
d.date = parseDate(d.date);
d.close = +d.close;
});
// Scale the range of the data
x.domain(d3.extent(data, function(d) { return d.date; }));
y.domain([0, d3.max(data, function(d) { return d.close; })]);
// Add the valueline path.
svg.append("path")
.attr("class", "line")
.attr("d", valueline(data));
// Add the X Axis
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
// Add the Y Axis
svg.append("g")
.attr("class", "y axis")
.call(yAxis);
});
</script>
</body>
i'm using the d3js area chart examples with json Chart Link.
the x and y axis are changing when we change the data feeding but no data shown in the graph.but i used a console log.so i saw the datas are already there in the x and y axis.could not figure out why does the data doesn't appear in the chart.
var margin = {top: 20, right: 20, bottom: 30, left: 50},
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
var parseDate = d3.time.format("%d-%b-%y").parse;
var x = d3.time.scale()
.range([0, width]);
var y = d3.scale.linear()
.range([height, 0]);
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom");
var yAxis = d3.svg.axis()
.scale(y)
.orient("left");
var area = d3.svg.area()
.x(function(d) { return x(d.timeStamp); })
.y0(height)
.y(function(d) {return y(d.memberAverageLoadAverage); });
var svg = d3.select("body").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 + ")");
var json1=[{"clusterId":"","timeStamp":1437063744524,"memberAverageLoadAverage":51,"memberId":""},
{"clusterId":"","timeStamp":1437069850060,"memberAverageLoadAverage":5,"memberId":""},
{"clusterId":"","timeStamp":1437069910059,"memberAverageLoadAverage":6,"memberId":""},
{"clusterId":"","timeStamp":1437069970060,"memberAverageLoadAverage":15,"memberId":""},
{"clusterId":"","timeStamp":1437070030056,"memberAverageLoadAverage":20,"memberId":""}];
var data = json1;
x.domain(d3.extent(data, function(d) { return d.timeStamp; }));
y.domain([-2, d3.max(data, function(d) { console.info(d.memberAverageLoadAverage); return d.memberAverageLoadAverage; })]);
svg.append("path")
.datum(data)
.attr("class", "area")
.attr("d", area);
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("memberAverageLoadAverage");
Any help will be really appreciated.
In
var area = d3.svg.area()
.x(function(d) { return x(d.timeStamp); })
.y0(height)
.y(function(d) {return y(d.memberAverageLoadAverage); });
you should use .y1(...) instead of .y(...).
I think that should do the trick!
I am trying to make the following bar chart from this tutorial. The tutorial utilizes TSV files, but I have modified the code for JSON. I have checked that the endpoint http://localhost:3000/graphs/data from my Node / Express service I created is indeed returning JSON, which can be seen below. The proper D3 libraries are also being included. After checking all this, I cannot get the chart to render.
The goal is to have route on the x-axis and count on the y-axis. Any suggestions would be greatly appreciated.
JSON Response:
[{"route":"9","count":273},{"route":"49","count":242},{"route":"151","count":221},{"route":"8","count":220},{"route":"3","count":213},{"route":"82","count":209},{"route":"79","count":206},{"route":"N5","count":206},{"route":"62","count":206},{"route":"4","count":202}]
Bar Chart Code
<script>
var margin = {top: 40, right: 20, bottom: 30, left: 40},
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
var formatPercent = d3.format(".0%");
var x = d3.scale.ordinal()
.rangeRoundBands([0, width], .1);
var y = d3.scale.linear()
.range([height, 0]);
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom");
var yAxis = d3.svg.axis()
.scale(y)
.orient("left");
var tip = d3.tip()
.attr('class', 'd3-tip')
.offset([-10, 0])
.html(function(d) {
return "<strong>Count:</strong> <span style='color:red'>" + d.count + "</span>";
})
var svg = d3.select("body").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 + ")");
svg.call(tip);
d3.json('http://localhost:3000/graphs/data', type, function(error, data) {
x.domain(data.map(function(d) { return d.route; }));
y.domain([0, d3.max(data, function(d) { return d.count; })]);
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("Frequency");
svg.selectAll(".bar")
.data(data)
.enter().append("rect")
.attr("class", "bar")
.attr("x", function(d) { return x(d.route); })
.attr("width", x.rangeBand())
.attr("y", function(d) { return y(d.count); })
.attr("height", function(d) { return height - y(d.count); })
.on('mouseover', tip.show)
.on('mouseout', tip.hide)
});
function type(d) {
d.count = +d.count;
return d;
}
</script>
d3.json(), unlike d3.csv(), takes only two arguments, with the second being the callback function. Your call
d3.json('http://localhost:3000/graphs/data', type, function(error, data) {
passes the result of the call to type, not to the anonymous function after that, which is never executed. The call should be
d3.json('http://localhost:3000/graphs/data', function(error, data) {
I created a line graph using a csv file and now I am trying to update this graph using new data from the same csv. However when I open the file in firefox I am getting an error: ReferenceError: updateData is not defined.
Here is my code:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="d3/d3.min.js"></script>
</head>
<body>
<div id="option">
<input name="updateButton"
type="button"
value="Update"
onclick="updateData()" />
</div>
<script type="text/javascript">
// Set the dimensions of the canvas / graph
var margin = {top: 30, right: 20, bottom: 30, left: 150},
width = 1000 - margin.left - margin.right,
height = 400 - margin.top - margin.bottom;
// Set the ranges
var x = d3.time.scale().range([0, width]);
var y = d3.scale.linear().range([height, 0]);
// Define the axes
var xAxis = d3.svg.axis().scale(x)
.tickFormat(d3.format(".0f"))
.orient("bottom");
var yAxis = d3.svg.axis().scale(y)
.orient("left")
.ticks(5);
// Define the line
var valueline = d3.svg.line()
.x(function(d) { return x(d.Year); })
.y(function(d) { return y(d.AttendancePerG); });
// Adds the svg canvas
var svg = d3.select("body")
.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 + ")");
// Get the data
d3.csv("piratesAttendance.csv", function(error, data) {
data.forEach(function(d) {
d.Year = +d.Year;
d.AttendancePerG = +d.AttendancePerG;
});
// Scale the range of the data
x.domain(d3.extent(data, function(d) { return d.Year; }));
y.domain([0, d3.max(data, function(d) { return d.AttendancePerG; })]);
// Add the valueline path.
svg.append("path")
.attr("class", "line")
.attr("d", valueline(data))
.attr("stroke", "black")
.attr("stroke-width",2)
.attr("fill","none");
// Add the X Axis
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
// Add the Y Axis
svg.append("g")
.attr("class", "y axis")
.call(yAxis);
function updateData() {
// Get the data again
d3.tsv("pittsburghAttendance", function(error, data) {
data.forEach(function(d) {
d.Year = +d.Year;
d.Attendance = +d.Attendance;
});
// Scale the range of the data again
x.domain(d3.extent(data, function(d) { return d.Year; }));
y.domain([0, d3.max(data, function(d) { return d.Attendance; })]);
// Select the section we want to apply our changes to
var svg = d3.select("body").transition();
// Make the changes
svg.select(".line") // change the line
.duration(750)
.attr("class", "line")
.attr("d", valueline(data));
svg.select(".x.axis") // change the x axis
.duration(750)
.call(xAxis);
svg.select(".y.axis") // change the y axis
.duration(750)
.call(yAxis);
});
}
});
</script>
</body>
</html>
Your function updateData is defined in a callback, so it will not be in the "global" scope of your page, hence you cannot invoke it from the HTML.
Try to simply move its declaration to the beginning (or end) of your <script> tag.
Oh and also your usage of d3.csv seems incorrect.
Ok, so I'm trying to make a d3 chart, but when I do nothing shows up. Here is how my data is coming out in the JSON:
[{"Commodity":"Base","num_complete_print":"3","num_incomplete_print":15},{"Commodity":"Blade","num_complete_print":"1","num_incomplete_print":53},{"Commodity":"DTE","num_complete_print":"1","num_incomplete_print":17},{"Commodity":"HUB","num_complete_print":"0","num_incomplete_print":"18"},{"Commodity":"MH","num_complete_print":"0","num_incomplete_print":"18"},{"Commodity":"Mid","num_complete_print":"0","num_incomplete_print":18},{"Commodity":"Top","num_complete_print":"0","num_incomplete_print":18}]
Here is my javascript....
<script type="text/javascript">
var margin = {top: 20, right: 20, bottom: 100, left: 100},
width = 750 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
var x = d3.scale.ordinal()
.rangeRoundBands([0, width-100], .1); //width-100 to make room for the legend.
var y = d3.scale.linear()
.rangeRound([height, 0]);
var color = d3.scale.ordinal()
//.range(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56", "#d0743c", "#ff8c00"]);
//.range(["#1f77b4", "#ff7f0e","d62728"]); //blue, orange, red
//color code for Progress Report
.range(["#00FFFF","#00FF00","#990099","#FF0000","#FFFF00"]);
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom");
var yAxis = d3.svg.axis()
.scale(y)
.orient("left")
.tickFormat(d3.format(".2s"));
var svg = d3.select("#area_progress_report").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 + ")");
// Get the data
var data = <?php echo json_encode($dataset_progress001); ?>;
//d3.csv("data.csv", function(error, data) {
color.domain(d3.keys(data[0]).filter(function(key) { return key !== "Commodity"; }));
data.forEach(function(d) {
var y0 = 0;
d.ages = color.domain().map(function(name) { return {name: name, y0: y0, y1: y0 += +d[name]}; });
d.total = d.ages[d.ages.length - 1].y1;
});
//use this to sort the bars from largest to smallest
//data.sort(function(a, b) { return b.total - a.total; });
x.domain(data.map(function(d) { return d.Commodity; }));
y.domain([0, d3.max(data, function(d) { return d.total; })]);
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis)
.selectAll("text") //added this line through rotate to change orientation of x axis
.style("text-anchor", "end")
.attr("dx", "-.8em")
.attr("dy", "-1em")
.attr("transform", function(d) {
return "rotate(-90)"
});
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("Population");
var state = svg.selectAll(".state")
.data(data)
.enter().append("g")
.attr("class", "g")
.attr("transform", function(d) { return "translate(" + x(d.Commodity) + ",0)"; });
state.selectAll("rect")
.data(function(d) { return d.ages; })
.enter().append("rect")
.attr("width", x.rangeBand())
.attr("y", function(d) { return y(d.y1); })
.attr("height", function(d) { return y(d.y0) - y(d.y1); })
.style("fill", function(d) { return color(d.name); });
var legend = svg.selectAll(".legend")
.data(color.domain().slice().reverse())
.enter().append("g")
.attr("class", "legend")
.attr("transform", function(d, i) { return "translate(0," + i * 20 + ")"; });
legend.append("rect")
.attr("x", width - 18)
.attr("width", 18)
.attr("height", 18)
.style("fill", color);
legend.append("text")
.attr("x", width - 24)
.attr("y", 9)
.attr("dy", ".35em")
.style("text-anchor", "end")
.text(function(d) { return d; });
//Added y label 10/28
svg.append("text")
.attr("class", "y label")
.attr("text-anchor", "end")
.attr("y", -60)
.attr("x",-190)
.attr("dy", ".75em")
.attr("transform", "rotate(-90)")
.text("Number Of Components");
</script>
And of course in my body I have this
<div id="area_progress_report"></div>
What am I doing wrong? I include the d3 locally...
<meta http-equiv="content-type" content="text/html; charset=UTF-8"> <!-- added to try to avoid the d3 is not valid -->
<script type="text/javascript" src="d3-master/d3.v3.js"></script> <!-- load the d3.js library -->
<script type="text/javascript" src="d3-master/d3.v3.min.js"></script> <!-- load the d3.js library -->
Seems to work for me:
http://jsfiddle.net/wqHqP/
I simply replaced the line:
var data = <?php echo json_encode($dataset_progress001); ?>;
with your output JSON.