Related
d3.js How to draw line chart with vertical x axis labels?
My Fiddle:
https://jsfiddle.net/nitinjs/p1r49qeg/
// set the dimensions and margins of the graph
var margin = {top: 10, right: 30, bottom: 30, left: 60},
width = 460 - margin.left - margin.right,
height = 400 - margin.top - margin.bottom;
// append the svg object to the body of the page
var svg = d3.select("#my_dataviz")
.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/D3-graph-gallery/master/DATA/connectedscatter.csv",
// When reading the csv, I must format variables:
function(d){
return { date : d3.timeParse("%Y-%m-%d")(d.date), value : d.value }
},
// Now I can use this dataset:
function(data) {
// Add X axis --> it is a date format
var x = d3.scaleTime()
.domain(d3.extent(data, function(d) { return d.date; }))
.range([ 0, width ]);
svg.append("g")
.attr("transform", "translate(0," + height + ")")
.call(d3.axisBottom(x));
// Add Y axis
var y = d3.scaleLinear()
.domain( [8000, 9200])
.range([ height, 0 ]);
svg.append("g")
.call(d3.axisLeft(y));
// Add the line
svg.append("path")
.datum(data)
.attr("fill", "none")
.attr("stroke", "#69b3a2")
.attr("stroke-width", 1.5)
.attr("d", d3.line()
.x(function(d) { return x(d.date) })
.y(function(d) { return y(d.value) })
)
// Add the points
svg
.append("g")
.selectAll("dot")
.data(data)
.enter()
.append("circle")
.attr("cx", function(d) { return x(d.date) } )
.attr("cy", function(d) { return y(d.value) } )
.attr("r", 5)
.attr("fill", "#69b3a2")
})
UPDATE
I have few questions,
1. how to make this graph resposive in bootstrap ie. without hardcoding width and height
2. how to update this graph on button click
3. how do I start y axis at 0 to any value e.g. 0 to 9100
Updated answer: to change the label rotation just select all text elements and apply rotate through transform attribute, and adjust the location using dx and dy, also if you notice I changed the padding bottom value in margin variable to be able to view the tick text since this will make them half visible with rotation.
...
svg.append("g")
.attr("transform", "translate(0," + height + ")")
.call(d3.axisBottom(x))
.selectAll("text")
.style("text-anchor", "end")
.attr("dx", "-.8em")
.attr("dy", "-.5em")
.attr("transform", "rotate(-90)");
...
or a working snippet:
// set the dimensions and margins of the graph
var margin = {top: 10, right: 30, bottom: 60, left: 60},
width = 460 - margin.left - margin.right,
height = 400 - margin.top - margin.bottom - 45;
// append the svg object to the body of the page
var svg = d3.select("#my_dataviz")
.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/D3-graph-gallery/master/DATA/connectedscatter.csv",
// When reading the csv, I must format variables:
function(d){
return { date : d3.timeParse("%Y-%m-%d")(d.date), value : d.value }
},
// Now I can use this dataset:
function(data) {
// Add X axis --> it is a date format
var x = d3.scaleTime()
.domain(d3.extent(data, function(d) { return d.date; }))
.range([ 0, width ]);
svg.append("g")
.attr("transform", "translate(0," + height + ")")
.call(d3.axisBottom(x))
.selectAll("text")
.style("text-anchor", "end")
.attr("dx", "-.8em")
.attr("dy", "-.5em")
.attr("transform", "rotate(-90)");
// Add Y axis
var y = d3.scaleLinear()
.domain( [8000, 9200])
.range([ height, 0 ]);
svg.append("g")
.call(d3.axisLeft(y))
// Add the line
svg.append("path")
.datum(data)
.attr("fill", "none")
.attr("stroke", "#69b3a2")
.attr("stroke-width", 1.5)
.attr("d", d3.line()
.x(function(d) { return x(d.date) })
.y(function(d) { return y(d.value) })
)
// Add the points
svg
.append("g")
.selectAll("dot")
.data(data)
.enter()
.append("circle")
.attr("cx", function(d) { return x(d.date) } )
.attr("cy", function(d) { return y(d.value) } )
.attr("r", 5)
.attr("fill", "#69b3a2")
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.13.0/d3.js"></script>
<div id="my_dataviz"></div>
updated answer for, I added responsive to the chart and change the label of the first element in the left axis, I will leave the data update to you, also some notes there are better ways to make responsive d3 charts one of them is to use viewport attribute but I didn't test it myself, also the first the element to start from 0 I did it as a hack, I'm sure there is a better way of doing it without select and change, those are a starting point for you, I hope my change give some insights on where to look for here:
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
</head>
<body>
<div id="my_dataviz"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.13.0/d3.js"></script>
<script>
// set the dimensions and margins of the graph
var margin = {top: 10, right: 30, bottom: 60, left: 60},
width = 1280 - margin.left - margin.right,
height = 650 - margin.top - margin.bottom - 45;
// append the svg object to the body of the page
var svg = d3.select("#my_dataviz")
.append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr('class', 'main-container')
.attr("transform",
"translate(" + margin.left + "," + margin.top + ")");
//Read the data
d3.csv("https://raw.githubusercontent.com/holtzy/D3-graph-gallery/master/DATA/connectedscatter.csv",
// When reading the csv, I must format variables:
function(d){
return { date : d3.timeParse("%Y-%m-%d")(d.date), value : d.value }
},
// Now I can use this dataset:
function(data) {
// Add X axis --> it is a date format
var x = d3.scaleTime()
.domain(d3.extent(data, function(d) { return d.date; }))
.range([ 0, width ]);
var axisBottom = svg.append("g")
.attr("transform", "translate(0," + height + ")")
.call(d3.axisBottom(x));
d3.selectAll('.axis-left text').filter((d, i) => { return i === 0}).text('0,000');
// Add Y axis
var y = d3.scaleLinear()
.domain( [8000, 9200])
.range([ height, 0 ]);
var axisLeft = svg.append("g")
.call(d3.axisLeft(y));
// Add the line
var line = svg.append("path")
.datum(data)
.attr("fill", "none")
.attr("stroke", "#69b3a2")
.attr("stroke-width", 1.5)
.attr("d", d3.line()
.x(function(d) { return x(d.date) })
.y(function(d) { return y(d.value) })
)
// Add the points
var dots = svg
.append("g")
.attr('class', 'dots')
.selectAll("dot")
.data(data)
.enter()
.append("circle")
.attr("cx", function(d) { return x(d.date) } )
.attr("cy", function(d) { return y(d.value) } )
.attr("r", 5)
.attr("fill", "#69b3a2")
function drawChart() {
// reset the width
width = parseInt(d3.select('body').style('width'), 10) - margin.left - margin.right;
height = (width * 0.45) - margin.top - margin.bottom;
d3.select("#my_dataviz svg")
.attr("height", height + margin.top + margin.bottom)
.attr("width", width + margin.left + margin.right)
d3.select('.main-container')
.attr("transform",
"translate(" + margin.left + "," + margin.top + ")");
x = d3.scaleTime()
.domain(d3.extent(data, function(d) { return d.date; }))
.range([ 0, width ]);
axisBottom.attr("transform", "translate(0," + height + ")")
.call(d3.axisBottom(x))
.attr('class', 'axis-bottom')
.selectAll("text")
.style("text-anchor", "end")
.attr("dx", "-.8em")
.attr("dy", "-.5em")
.attr("transform", "rotate(-90)");
// Add Y axis
y = d3.scaleLinear()
.domain( [8000, 9200])
.range([ height, 0 ]);
axisLeft.call(d3.axisLeft(y)).attr('class', 'axis-left');
//this is shiit!! there must be a better way.
d3.selectAll('.axis-left text').filter((d, i) => { return i === 0}).text('0,000');
line.datum(data)
.attr("fill", "none")
.attr("stroke", "#69b3a2")
.attr("stroke-width", 1.5)
.attr("d", d3.line()
.x(function(d) { return x(d.date) })
.y(function(d) { return y(d.value) })
);
d3.select('.dots').remove();
var dots = svg
.append("g")
.attr('class', 'dots')
.selectAll("dot")
.data(data)
.enter()
.append("circle")
.attr("cx", function(d) { return x(d.date) } )
.attr("cy", function(d) { return y(d.value) } )
.attr("r", 5)
.attr("fill", "#69b3a2");
}
// call this once to draw the chart initially
drawChart();
//////////////////////////////////////////////
// Resizing //////////////////////////////////
//////////////////////////////////////////////
// redraw chart on resize
window.addEventListener('resize', drawChart);
})
</script>
</body>
</html>
`
var margin = {top: 50, right: 50, bottom: 50, left: 50}
, width = window.innerWidth - margin.left - margin.right
, height = window.innerHeight - margin.top - margin.bottom;
// n data points
var n = 7;
// X scale
var xScale = d3.scaleBand()
.domain(['A','B','C','D','F','E','Z']) // input
.range([0, width]); // output
// Y scale
var yScale = d3.scaleLinear()
.domain([0, 1])
.range([height, 0]);
var line = d3.line()
.x(function(d, i) { return xScale(i); })
.y(function(d) { return yScale(d.y); })
.curve(d3.curveMonotoneX)
var dataset = d3.range(n).map(function(d) { return {"y": d3.randomUniform(1)()} })
// SVGs
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.append("rect")
.attr("width", "100%")
.attr("height", "100%")
.attr("fill", "white");
svg.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
// x axis call
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(d3.axisBottom(xScale));
// y axis call
svg.append("g")
.attr("class", "y axis")
.call(d3.axisLeft(yScale));
svg.append("path")
.datum(dataset)
.attr("class", "line")
.attr("d", line);
// 12. Appends a circle for each datapoint
svg.selectAll(".dot")
.data(dataset)
.enter().append("circle") // Uses the enter().append() method
.attr("class", "dot") // Assign a class for styling
.attr("cx", function(d, i) { return xScale(i) })
.attr("cy", function(d) { return yScale(d.y) })
.attr("r", 6);
svg.append("text")
.attr("class", "title")
.attr("x", width/2)
.attr("y", 0 - (margin.top / 2))
.attr("text-anchor", "middle")
.text("Testing");
/* 13. Basic Styling with CSS */
/* Style the lines by removing the fill and applying a stroke */
.line {
fill: none;
stroke: green;
stroke-width: 3;
}
/* Style the dots by assigning a fill and stroke */
.dot {
fill: red;
stroke: #fff;
}
<!DOCTYPE html>
<meta charset="utf-8">
<style type="text/css">
</style>
<!-- Body tag is where we will append our SVG and SVG objects-->
<body>
</body>
<!-- Load in the d3 library -->
<script src="https://d3js.org/d3.v4.min.js"></script>
<script>
</script>
I need for each data point to correspond to an (string) x-coordinate.
I am knew to d3 and I have yet to get accustomed to formatting axis.
I would also be great if anyone can point me out to how to add a tooltip. (Just an explanation)
Thank you everyone.
Not sure why it keeps saying your: "
It looks like your post is mostly code; please add some more details."
`
The scaleOrdinal is mapped to an array of alphabets but when you are calculating the cx you are mapping to an integer i. To resolve this:
Separate the labels as as array first:
var labels = ['A','B','C','D','F','E','Z'];
Then pass the labels to the domain:
// X scale
var xScale = d3.scaleBand()
.domain(labels) // input
.range([0, width]); // output
Finally, when you call calculate the cx, you need to send a value which was used in the domain. In your case since your domain is an array of alphabets you need to reparse the i to that particular alphabet. Hence you need to return xScale(labels[i]) as below:
svg.selectAll(".dot")
.data(dataset)
.enter().append("circle") // Uses the enter().append() method
.attr("class", "dot") // Assign a class for styling
.attr("cx", function(d, i) { return xScale(labels[i]) })
.attr("cy", function(d) { return yScale(d.y) })
.attr("r", 6);
Full working snippet below. Hope this helps.
var margin = {top: 50, right: 50, bottom: 50, left: 50}
, width = window.innerWidth - margin.left - margin.right
, height = window.innerHeight - margin.top - margin.bottom;
// n data points
var n = 7;
//labels
var labels = ['A','B','C','D','F','E','Z'];
// X scale
var xScale = d3.scaleBand()
.domain(labels) // input
.range([0, width]); // output
// Y scale
var yScale = d3.scaleLinear()
.domain([0, 1])
.range([height, 0]);
var line = d3.line()
.x(function(d, i) { return xScale(i); })
.y(function(d) { return yScale(d.y); })
.curve(d3.curveMonotoneX)
var dataset = d3.range(n).map(function(d) { return {"y": d3.randomUniform(1)()} })
// SVGs
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.append("rect")
.attr("width", "100%")
.attr("height", "100%")
.attr("fill", "white");
svg.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
// x axis call
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(d3.axisBottom(xScale));
// y axis call
svg.append("g")
.attr("class", "y axis")
.call(d3.axisLeft(yScale));
svg.append("path")
.datum(dataset)
.attr("class", "line")
.attr("d", line);
// 12. Appends a circle for each datapoint
svg.selectAll(".dot")
.data(dataset)
.enter().append("circle") // Uses the enter().append() method
.attr("class", "dot") // Assign a class for styling
.attr("cx", function(d, i) { return xScale(labels[i]) })
.attr("cy", function(d) { return yScale(d.y) })
.attr("r", 6);
svg.append("text")
.attr("class", "title")
.attr("x", width/2)
.attr("y", 0 - (margin.top / 2))
.attr("text-anchor", "middle")
.text("Testing");
/* 13. Basic Styling with CSS */
/* Style the lines by removing the fill and applying a stroke */
.line {
fill: none;
stroke: green;
stroke-width: 3;
}
/* Style the dots by assigning a fill and stroke */
.dot {
fill: red;
stroke: #fff;
}
<!DOCTYPE html>
<meta charset="utf-8">
<style type="text/css">
</style>
<!-- Body tag is where we will append our SVG and SVG objects-->
<body>
</body>
<!-- Load in the d3 library -->
<script src="https://d3js.org/d3.v4.min.js"></script>
<script>
</script>
Updated Snippet with Lines:
var margin = {top: 50, right: 50, bottom: 50, left: 50}
, width = window.innerWidth - margin.left - margin.right
, height = window.innerHeight - margin.top - margin.bottom;
// n data points
var n = 7;
//labels
var labels = ['A','B','C','D','F','E','Z'];
// X scale
var xScale = d3.scaleBand()
.domain(labels) // input
.range([0, width]); // output
// Y scale
var yScale = d3.scaleLinear()
.domain([0, 1])
.range([height, 0]);
var line = d3.line()
.x(function(d, i) { return xScale(labels[i]); })
.y(function(d) { return yScale(d.y); })
.curve(d3.curveMonotoneX)
var dataset = d3.range(n).map(function(d) { return {"y": d3.randomUniform(1)()} })
// SVGs
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.append("rect")
.attr("width", "100%")
.attr("height", "100%")
.attr("fill", "white");
svg.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
// x axis call
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(d3.axisBottom(xScale));
// y axis call
svg.append("g")
.attr("class", "y axis")
.call(d3.axisLeft(yScale));
svg.append("path")
.datum(dataset)
.attr("class", "line")
.attr("d", line);
// 12. Appends a circle for each datapoint
svg.selectAll(".dot")
.data(dataset)
.enter().append("circle") // Uses the enter().append() method
.attr("class", "dot") // Assign a class for styling
.attr("cx", function(d, i) { return xScale(labels[i]) })
.attr("cy", function(d) { return yScale(d.y) })
.attr("r", 6);
svg.append("text")
.attr("class", "title")
.attr("x", width/2)
.attr("y", 0 - (margin.top / 2))
.attr("text-anchor", "middle")
.text("Testing");
/* 13. Basic Styling with CSS */
/* Style the lines by removing the fill and applying a stroke */
.line {
fill: none;
stroke: green;
stroke-width: 3;
}
/* Style the dots by assigning a fill and stroke */
.dot {
fill: red;
stroke: #fff;
}
<!DOCTYPE html>
<meta charset="utf-8">
<style type="text/css">
</style>
<!-- Body tag is where we will append our SVG and SVG objects-->
<body>
</body>
<!-- Load in the d3 library -->
<script src="https://d3js.org/d3.v4.min.js"></script>
<script>
</script>
i'm trying to generate multiple charts into multiple divs, as i try to duplicate the barchart in another div , the second barchart goes out of position and generates the chart at random location
i have posted js in two script tags
<script>
function intermediate(selected){
console.log(selected);
d3.select("svg").remove();
var metric = selected;
console.log(metric);
var dataFile = metric + '.csv';
d3.csv(dataFile,function(data){
console.log(data);
updateData(data);
});
}
var dataFile="SP_Sterling.csv";
d3.csv(dataFile,function(data){
// console.log(data);
updateData(data);
})
function updateData(data){
var margin = {top: 20, right: 20, bottom: 30, left: 80},
padding = {top: 60, right: 60, bottom: 60, left: 60},
width = 860 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
var svg = d3.select("#groupedbarchart").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 + ")");
// Update the bar chart
//i'm trying to Update the bar chart based on array objects and it seems that my bar is not getting refreshed
var x0 = d3.scale.ordinal()
.rangeRoundBands([0, width], .1);
var x1 = d3.scale.ordinal()
.rangeRoundBands([0, width], .1);
var y = d3.scale.linear()
.range([height, 0]);
var color = d3.scale.ordinal()
.range(["#00a65a", "#f56954"]);
var xAxis = d3.svg.axis()
.scale(x0)
.orient("bottom");
var yAxis = d3.svg.axis()
.scale(y)
.orient("left")
.tickFormat(d3.format(".2s"));
var tip = d3.tip()
.attr('class', 'd3-tip')
.offset([-10, 0])
.html(function(d,i) {
return "<strong>Count:</strong> <span style='color:red';>" + d.value + "</span>";
});
var monthvalues = d3.keys(data[0]).filter(function(key) { return key !== "Month"; });
data.forEach(function(d) {
d.monthdata = monthvalues.map(function(name) { return {name: name, value: +d[name]}; });
});
x0.domain(data.map(function(d) { return d.Month; }));
x1.domain(monthvalues).rangeRoundBands([0, x0.rangeBand()]);
y.domain([0, d3.max(data, function(d) { return d3.max(d.monthdata, function(d) { return d.value; }); })]);
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("Count");
svg.call(tip);
//enter
var bar = svg.selectAll(".bar")
.data(data);
bar.enter()
.append("g")
.attr("class", "bar")
.attr("transform", function(d) { return "translate(" + x0(d.Month) + ",0)"; });
//update()
bar.selectAll("rect")
.data(function(d) { return d.monthdata; })
.enter()
.append("rect")
.attr("width", x1.rangeBand())
.attr("x", function(d) { return x1(d.name); })
.attr("y", function(d) { return y(d.value); })
.attr("height", function(d) { return height - y(d.value); })
.on('mouseover', tip.show)
.on('mouseout', tip.hide)
.style("fill", function(d) { return color(d.name); });
//remove()
var legend = svg.selectAll(".legend")
.data(monthvalues.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)
.append("rect");
legend.append("text")
.attr("x", width - 24)
.attr("y", 9)
.attr("dy", ".35em")
.style("text-anchor", "end")
.text(function(d) { return d; });
}
</script>
<script>
function longrunning(selected){
console.log(selected);
d3.select("svg").remove();
var metric = selected;
console.log(metric);
var dataFile1 = metric +'_long' + '.csv';
console.log(dataFile1);
d3.csv(dataFile1,function(data){
console.log(data);
updateData(data);
});
}
var dataFile1="SP_Sterling_long.csv";
d3.csv(dataFile1,function(data){
// console.log(data);
updateData(data);
})
function updateData(data){
var margin = {top: 20, right: 20, bottom: 30, left: 80},
padding = {top: 60, right: 60, bottom: 60, left: 60},
width = 860 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
var svg = d3.select("#barchart").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 + ")");
// Update the bar chart
//i'm trying to Update the bar chart based on array objects and it seems that my bar is not getting refreshed
var x0 = d3.scale.ordinal()
.rangeRoundBands([0, width], .1);
var x1 = d3.scale.ordinal()
.rangeRoundBands([0, width], .1);
var y = d3.scale.linear()
.range([height, 0]);
var color = d3.scale.ordinal()
.range(["#00a65a", "#f56954"]);
var xAxis = d3.svg.axis()
.scale(x0)
.orient("bottom");
var yAxis = d3.svg.axis()
.scale(y)
.orient("left")
.tickFormat(d3.format(".2s"));
var tip = d3.tip()
.attr('class', 'd3-tip')
.offset([-10, 0])
.html(function(d,i) {
return "<strong>Count:</strong> <span style='color:red';>" + d.value + "</span>";
});
var monthvalues = d3.keys(data[0]).filter(function(key) { return key !== "Month"; });
data.forEach(function(d) {
d.monthdata = monthvalues.map(function(name) { return {name: name, value: +d[name]}; });
});
x0.domain(data.map(function(d) { return d.Month; }));
x1.domain(monthvalues).rangeRoundBands([0, x0.rangeBand()]);
y.domain([0, d3.max(data, function(d) { return d3.max(d.monthdata, function(d) { return d.value; }); })]);
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("Count");
svg.call(tip);
//enter
var bar = svg.selectAll("barchart")
.data(data);
bar.enter()
.append("g")
.attr("class", "bar")
.attr("transform", function(d) { return "translate(" + x0(d.Month) + ",0)"; });
//update()
bar.selectAll("rect")
.data(function(d) { return d.monthdata; })
.enter()
.append("rect")
.attr("width", x1.rangeBand())
.attr("x", function(d) { return x1(d.name); })
.attr("y", function(d) { return y(d.value); })
.attr("height", function(d) { return height - y(d.value); })
.on('mouseover', tip.show)
.on('mouseout', tip.hide)
.style("fill", function(d) { return color(d.name); });
//remove()
var legend = svg.selectAll(".legend")
.data(monthvalues.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)
.append("rect");
legend.append("text")
.attr("x", width - 24)
.attr("y", 9)
.attr("dy", ".35em")
.style("text-anchor", "end")
.text(function(d) { return d; });
}
</script>
<div class="groupedbarchart;visible-*-block" id="groupedbarchart" style="height: 600px;border: red 2px solid;">
<select class="selectpicker" data-live-search="false" data-size="7">
<option>SP_Sterling</option>
<option>IWH</option>
<option>IWH_BreakFix</option>
</select>
</div>
<div class="barchart;visible-*-block" id="barchart" style="height: 500px; border:red solid 2px;">
<select class="longrunning" data-live-search="false" data-size="7">
<option>SP_Sterling</option>
<option>IWH</option>
<option>IWH_BreakFix</option>
</select>
</div>
Ok, so I fixed it so you can have multiple barcharts which different id attributes. They will have the same functionality. I am sorry to say, but I really hate the jsbin editor, as it seems to very crowded and not really easy to use. Therefor, i have made a plunker, just so I could faster figure out your code. You can find it here.
Let me explain what I did:
First, i added the functionality of the select box in your html to another barchart container. Here I added the select to the div with id "bar-chart":
<div class="box-body chart-responsive">
<div class="chart" id="bar-chart" style="height: 500px;">
<select class="selectpicker" data-live-search="false" data-size="7">
<option>SP_Sterling</option>
<option>IWH</option>
<option>IWH_BreakFix</option>
</select>
</div>
</div>
Then I changed the calling function at the end of your html, the one where you build charts on the change events:
$('.selectpicker').on('change', function(){
var parent = $(this).parent();
console.log(parent);
var selected = $(this).find("option:selected").val();
//alert(selected);
intermediate(selected, parent);
});
As you can see, I am looking for the parent here (the parent of each select picker is the div to which you want to append your chart, I noticed). I pass that element as parameter to your intermediate function.
Then as last, I have changed the intermediate function. I will only show the beginning, as that is where i did my changes:
function intermediate(data, element){
d3.select("svg").remove();
var newData=[
{
"Month": "Feb",
"Success_Count": 49,
"Failure_Count": 20
},
{
"Month": "Jan",
"Success_Count": 35,
"Failure_Count": 3
}
];
updateData(newData, element);
}
function updateData(data, element){
var margin = {top: 20, right: 20, bottom: 30, left: 40},
width = 760 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
var selection = d3.select(element);
console.log("d3 selection", element[0]);
var svg = d3.select(element[0]).append("svg") // THIS IS VERY IMPORTANT!!
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
So basically, I have added a new parameter to your functions (the one which will pass the parent element). Then I also cleaned up your "old data". For this example, you don't need it.
Then, and this is the most important part, I have changed the d3 selection. The plunk works, if you have more questions, shoot! :-)
************* EDIT ****************
I did notice that the charts do not really update the way they should and if you change one barchart, the other one disappears. I have fixed that now. The plunker code has been update (the link should still be the same).
What have I changed:
d3.select("svg").remove();
This has been removed from the code. You don't need it.
Then, I also had to change the update data function:
function updateData(data, element){
var margin = {top: 20, right: 20, bottom: 30, left: 40},
width = 760 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
var svg;
//check if there already is an svg element
if(d3.select(element[0]).select("svg").empty()) {
svg = d3.select(element[0]).append("svg") // THIS IS VERY IMPORTANT!!
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
As you can see, it now checks if there is already an svg. If so, it just updates the data and the graph if necessary. You also need this:
...
else {
svg = d3.select(element[0]).select("svg");
}
in case there already is an svg element. The graph and its axes is created entirely in that first "if" statement.
This whole thing of enter selections, updating and the exit selection might look very complicated. I have written about it in a previous post, which you can find here. If you have more questions, please let me know!
I am trying to create a Date vs time heat map based on this http://bl.ocks.org/mbostock/3202354
The changes i am trying to do:
->x axis still has dates
->y axis will have 24 hours of the day in half hour intervals (00:00:00, 00:30:00, 01:00:00, 01:30:00 so on). Therefore 48 ticks
I have managed to modify the code so far which is below. The two problems are:
1. y axis does not have labels
2. Data goes one tick below x axis
I am a D3 noob (this is my first hands on experiment ) and struggling with it.
d3+html+css code:
<!DOCTYPE html>
<meta charset="utf-8">
<style>
body {
font: 10px sans-serif;
}
.label {
font-weight: bold;
}
.tile {
shape-rendering: crispEdges;
}
.axis path,
.axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
</style>
<body>
<script src="http://d3js.org/d3.v2.js?2.9.6"></script>
<script>
var margin = {top: 20, right: 90, bottom: 30, left: 50},
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
var parseDate = d3.time.format("%m/%d/%Y").parse,
formatDate = d3.time.format("%b %d");
var parseTimeBucket = d3.time.format("%H:%M:%S").parse,
formatTimeBucket =d3.time.format("%H:%M");
var StartTime = parseTimeBucket("00:00:00");
var EndTime = parseTimeBucket("23:59:59");
var x = d3.time.scale().range([0, width]),
y = d3.scale.linear().range([height, 0]),
z = d3.scale.linear().range(["white", "black"]);
// The size of the buckets in the CSV data file.
// This could be inferred from the data if it weren't sparse.
var xStep = 864e5,
yStep = 18e5;
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 + ")");
d3.csv("TimeDateHeatMap.csv", function(buckets) {
// Coerce the CSV data to the appropriate types.
buckets.forEach(function(d) {
d.date = parseDate(d.date);
d.bucket = parseTimeBucket(d.bucket);
d.count = +d.count;
});
// Compute the scale domains.
x.domain(d3.extent(buckets, function(d) { return d.date; }));
y.domain([StartTime, EndTime]);
// y.domain(d3.extent(buckets, function(d) { return d.bucket; }));
//console.log(d3.extent(buckets, function(d) { return d.bucket; }));
z.domain([0, d3.max(buckets, function(d) { return d.count; })]);
// Extend the x- and y-domain to fit the last bucket.
// For example, the y-bucket 3200 corresponds to values [3200, 3300].
x.domain([x.domain()[0], +x.domain()[1] + xStep]);
y.domain([y.domain()[0], +y.domain()[1] + yStep]);
// Display the tiles for each non-zero bucket.
// See http://bl.ocks.org/3074470 for an alternative implementation.
svg.selectAll(".tile")
.data(buckets)
.enter().append("rect")
.attr("class", "tile")
.attr("x", function(d) { return x(d.date); })
.attr("y", function(d) { return y(d.bucket); })
.attr("width", x(xStep) - x(0))
.attr("height", y(0) - y(yStep))
.style("fill", function(d) { return z(d.count); });
// Add a legend for the color values.
var legend = svg.selectAll(".legend")
.data(z.ticks(6).slice(1).reverse())
.enter().append("g")
.attr("class", "legend")
.attr("transform", function(d, i) { return "translate(" + (width + 20) + "," + (20 + i * 20) + ")"; });
legend.append("rect")
.attr("width", 20)
.attr("height", 20)
.style("fill", z);
legend.append("text")
.attr("x", 26)
.attr("y", 10)
.attr("dy", ".35em")
.text(String);
svg.append("text")
.attr("class", "label")
.attr("x", width + 20)
.attr("y", 10)
.attr("dy", ".35em")
.text("Count");
// Add an x-axis with label.
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(d3.svg.axis().scale(x).ticks(d3.time.days).tickFormat(formatDate).orient("bottom"))
.append("text")
.attr("class", "label")
.attr("x", width)
.attr("y", -6)
.attr("text-anchor", "end")
.text("Date");
// Add a y-axis with label.
svg.append("g")
.attr("class", "y axis")
//.call(d3.svg.axis().scale(y).orient("left"))
.call(d3.svg.axis().scale(y).ticks(d3.time.minutes).tickFormat(formatTimeBucket).orient("left"))
.append("text")
.attr("class", "label")
.attr("y", 6)
.attr("dy", ".71em")
.attr("text-anchor", "end")
.attr("transform", "rotate(-90)")
.text("Value");
});
</script>
TimeDateHeatMap.csv:
date,bucket,count
7/20/2012,00:00:00,119
7/20/2012,00:30:00,123
7/20/2012,01:00:00,173
7/20/2012,01:30:00,226
7/20/2012,02:00:00,284
7/20/2012,02:30:00,257
7/20/2012,03:00:00,268
7/20/2012,03:30:00,244
7/20/2012,04:00:00,191
7/20/2012,04:30:00,204
7/20/2012,05:00:00,187
7/20/2012,05:30:00,177
7/20/2012,06:00:00,164
7/20/2012,06:30:00,125
7/20/2012,07:00:00,140
7/20/2012,07:30:00,109
7/20/2012,08:00:00,103
7/21/2012,08:30:00,123
7/21/2012,09:00:00,165
7/21/2012,09:30:00,237
7/21/2012,10:00:00,278
7/21/2012,10:30:00,338
7/21/2012,11:00:00,306
7/21/2012,11:30:00,316
7/21/2012,12:00:00,269
7/21/2012,12:30:00,271
7/21/2012,13:00:00,241
7/21/2012,13:30:00,188
7/21/2012,14:00:00,174
7/21/2012,14:30:00,158
7/21/2012,15:00:00,153
7/21/2012,15:30:00,132
7/22/2012,16:00:00,154
7/22/2012,16:30:00,241
7/22/2012,17:00:00,246
7/22/2012,17:30:00,300
7/22/2012,18:00:00,305
7/22/2012,18:30:00,301
7/22/2012,19:00:00,292
7/22/2012,19:30:00,253
7/22/2012,20:00:00,251
7/22/2012,20:30:00,214
7/22/2012,21:00:00,189
7/22/2012,21:30:00,179
7/22/2012,22:00:00,159
7/22/2012,22:30:00,161
7/22/2012,23:00:00,144
7/22/2012,23:30:00,139
7/22/2012,00:00:00,132
7/22/2012,00:30:00,136
7/22/2012,01:00:00,105
7/23/2012,01:30:00,120
7/23/2012,02:00:00,156
7/23/2012,02:30:00,209
7/23/2012,03:00:00,267
7/23/2012,03:30:00,299
7/23/2012,04:00:00,316
7/23/2012,04:30:00,318
7/23/2012,05:00:00,307
7/23/2012,05:30:00,295
7/23/2012,06:00:00,273
7/23/2012,06:30:00,283
7/23/2012,07:00:00,229
7/23/2012,07:30:00,192
7/23/2012,08:00:00,193
7/23/2012,08:30:00,170
7/23/2012,09:00:00,164
7/23/2012,09:30:00,154
7/23/2012,10:00:00,138
7/23/2012,10:30:00,101
7/23/2012,11:00:00,115
7/23/2012,11:30:00,103
7/24/2012,12:00:00,105
7/24/2012,12:30:00,156
7/24/2012,13:00:00,220
7/24/2012,13:30:00,255
7/24/2012,14:00:00,308
7/24/2012,14:30:00,338
7/24/2012,15:00:00,318
7/24/2012,15:30:00,255
7/24/2012,16:00:00,278
7/24/2012,16:30:00,260
7/24/2012,17:00:00,235
7/24/2012,17:30:00,230
7/24/2012,18:00:00,185
7/24/2012,18:30:00,145
7/24/2012,19:00:00,147
7/24/2012,19:30:00,157
7/24/2012,20:00:00,109
7/25/2012,20:30:00,104
7/25/2012,21:00:00,191
7/25/2012,21:30:00,201
7/25/2012,22:00:00,238
7/25/2012,22:30:00,223
7/25/2012,23:00:00,229
7/25/2012,23:30:00,286
7/25/2012,00:00:00,256
7/25/2012,00:30:00,240
7/25/2012,01:00:00,233
7/25/2012,01:30:00,202
7/25/2012,02:00:00,180
7/25/2012,02:30:00,184
7/25/2012,03:00:00,161
7/25/2012,03:30:00,125
7/25/2012,04:00:00,110
7/25/2012,04:30:00,101
7/26/2012,05:00:00,132
7/26/2012,05:30:00,117
7/26/2012,06:00:00,124
7/26/2012,06:30:00,154
7/26/2012,07:00:00,167
7/26/2012,07:30:00,137
7/26/2012,08:00:00,169
7/26/2012,08:30:00,175
7/26/2012,09:00:00,168
7/26/2012,09:30:00,188
7/26/2012,10:00:00,137
7/26/2012,10:30:00,173
7/26/2012,11:00:00,164
7/26/2012,11:30:00,167
7/26/2012,12:00:00,115
7/26/2012,12:30:00,116
7/26/2012,13:00:00,118
7/26/2012,13:30:00,125
7/26/2012,14:00:00,104
Changes to original mbostock code:They mostly concentrate on y axis, while x xis remains same as original. Because the original mbostock code has numbers on y axis while i need 48 half hour interval buckets on y axis
I have added the following so that later on i can create a y axis of times:
var parseTimeBucket = d3.time.format("%H:%M:%S").parse,
formatTimeBucket =d3.time.format("%H:%M");
Then changed domain this way:
var StartTime = parseTimeBucket("00:00:00");
var EndTime = parseTimeBucket("23:59:59");
y.domain([StartTime, EndTime]);
also added ystep in addition to xstep. ystep corresponds to 30 minute intervals
var xStep = 864e5,
yStep = 18e5;
and then finally to build the axis i changed the third line (.call...)
svg.append("g")
.attr("class", "y axis")
.call(d3.svg.axis().scale(y).ticks(d3.time.minutes, 30).tickFormat(formatTimeBucket).orient("left"))
.append("text")
.attr("class", "label")
.attr("y", 6)
.attr("dy", ".71em")
.attr("text-anchor", "end")
.attr("transform", "rotate(-90)")
.text("Value");
The scale for the y axis you're using is a linear scale. You're using .ticks(d3.time.minutes) to set the ticks for the axis for that scale. You can only do this for time scales, not linear scales. If you change either the way the ticks are computed or the type of scale it should work.
I'm a D3 newbie and having a slow time getting up to speed on this library. I am trying to get this simple D3 area chart to work but am having some trouble displaying the actual area it self. I can get the axis to display correctly with the right ranges for the data, but no area displays on the graph itself.
I am feeding it JSON data that looks like this and it appears to be consuming the data fine as best as I can tell.
[{"Date":"Date","Close":"Close"},{"Date":"20130125","Close":"75.03"},{"Date":"20130124","Close":"75.32"},{"Date":"20130123","Close":"74.29"},{"Date":"20130122","Close":"74.16"},{"Date":"20130118","Close":"75.04"},{"Date":"20130117","Close":"75.26"},{"Date":"20130116","Close":"74.34"},{"Date":"20130115","Close":"76.94"},{"Date":"20130114","Close":"76.55"}]
This is my code
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("%Y%m%d").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.Date); })
.y0(height)
.y1(function(d) { return y(d.Close); });
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 + ")");
d3.json('JSONstockPriceOverTime.php', function (data) {
data.forEach(function(d) {
d.Date = parseDate(d.Date);
d.Close = +d.Close;
});
x.domain(d3.extent(data, function(d) { return d.Date; }));
y.domain([0, d3.max(data, function(d) { return d.Close; })]);
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("Price ($)");
});
And I have this style applied
<style>
body {
font: 10px sans-serif;
}
.axis path,
.axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
.area {
fill: steelblue;
}
</style>
Remove the starting part of the json (JSONstockPriceOverTime.php) file;
{"Date":"Date","Close":"Close"},
Since it has the 'Date' and 'Close' variables defined as part of the json format, you won't be required to include header information like a csv file, and add 'error' into your json load line
d3.json("JSONstockPriceOverTime.php", function(error, data) {
and you should be all go (worked for me).
You're making good progress.