Trying to build a linechart (multiple lines). Initial data has been an array of object such as:
[{
2010: 8236.082,
countryName: "Afghanistan"
}]
Each line required an array of x/y pairs [[x,y],[x,y]]. My x and y are year and amount of emissions. This means I had to restructure my data it to make it look like this:
[
{
country: "Afganistan",
emissions: [
{ year: 2019, amount: 8236.082 }
]
}
]
However this doesn't work for me. Is the problem in the domain?
Please help.
Codepen
//Define full width, full height and margins
let fullWidth = 600;
let fullHeight = 700;
let margin = {
top: 20,
left: 70,
bottom: 100,
right: 10
}
//Define line chart with and height
let width = fullWidth - margin.left - margin.right;
let height = fullHeight - margin.top - margin.bottom;
//Define x and y scale range
let xScale = d3.scaleLinear()
.range([0, width])
let yScale = d3.scaleLinear()
.range([0, height])
//Draw svg
let svg = d3.select("body")
.attr("width", fullWidth)
.attr("height", fullHeight)
.append("svg")
.append("g")
d3.json("https://api.myjson.com/bins/izmg6").then(data => {
console.log(data);
//Structure data so should be an array of arrays etc [[x,y], [x,y], [x,y]]
let years = d3.keys(data[0]).slice(0, 50);
console.log(years);
let dataset = [];
data.forEach((d, i) => {
let myEmissions = [];
years.forEach(y => {
if (d[y]) {
myEmissions.push({
year: y,
amount: d[y]
})
}
})
dataset.push({
country: d.countryName,
emissions: myEmissions
});
})
console.log(dataset);
//Define x and y domain
xScale
.domain(d3.extent(years, d =>d))
yScale
.domain([d3.max(dataset, d =>
d3.max(d.emissions, d =>
+d.amount)), 0])
//Generate line
let line = d3.line()
.x(d =>
xScale(d.year))
.y(d =>
yScale(d.amount));
let groups = svg.selectAll("g")
.data(dataset)
.enter()
.append("g")
groups.append("title")
.text(d => d.country)
groups.selectAll("path")
.data(d => [d.emissions])
.enter()
.append("path")
.attr("d", line)
.attr("class", line)
}).catch(error => console.log(error))
Minor change/typo:
You're assigning height and width to the body and not the svg. Interchanging those 2 lines:
let svg = d3.select("body")
.append("svg")
.attr("width", fullWidth)
.attr("height", fullHeight)
And adding some CSS to the paths:
path.line {
fill: none;
stroke: #000;
}
Here's a fork: https://codepen.io/shashank2104/pen/GwqjVK
Related
I wan to four graphs side-by-side linearly but they keep overlapping. I am using d3.js and I would like to draw these four graphs side by side.
I tried drawing each graph in its own svg tag and then combine them but it doesn't work.
<script>
const svg = d3.select("svg");
const width = +svg.attr("width");
const height = +svg.attr("height");
var TelescopeData = [
{ Average: 2000, TelescopeName: "1 meter" },
{ Average: 3000, TelescopeName: "1.9 meter" },
{ Average: 4000, TelescopeName: "Lesedi" }
];
var padding = { top: 40, right: 20, bottom: 30, left: 75 };
const innerWidth = width - padding.left - padding.right;
const innerHeight = height - padding.top - padding.bottom;
var colors = ["red", "black", "green"];
var yScale = d3
.scaleLinear()
.domain([0, d3.max(TelescopeData, d => d.Average)])
.range([innerHeight, 0])
.nice();
var xScale = d3
.scaleBand()
.domain(
TelescopeData.map(d => {
return d.TelescopeName;
})
)
.range([0, innerWidth])
.padding(0.4);
//xAxis
const xAxis = svg
.append("g")
.classed("xAxis", true)
.attr(
"transform",
`translate(${padding.left},${innerHeight + padding.top})`
)
.call(d3.axisBottom(xScale));
//yAxis
const yAxis = svg
.append("g")
.classed("yAxis", true)
.attr("transform", `translate(${padding.left},${padding.top})`)
.call(d3.axisLeft(yScale));
// now adding the data
const rectGrp = svg
.append("g")
.attr("transform", `translate(${padding.left},${padding.top})`);
rectGrp
.selectAll("rect")
.data(TelescopeData)
.enter()
.append("rect")
.attr("width", xScale.bandwidth())
.attr("height", (d, i) => {
return innerHeight - yScale(d.Average);
})
.attr("x", d => {
return xScale(d.TelescopeName);
})
.attr("y", function(d) {
return yScale(d.Average);
})
.attr("fill", (d, i) => {
return colors[i];
});
rectGrp
.append("text")
.attr("y", -20)
.attr("x", 50)
.text("Quarterly Average");
</script>
I expect to see the code attached here to be used for drawing 3 other graphs side-side with the first one
Are you wanting to have four graphs shown side by side on the screen next to each other?
That is what your question seems to imply, without having an example of what you want the output to look like. The other option would be, how to merge four graphs into one graph, which is an entirely different question.
Here is a very simple HTML document that will put the four graphs side by side on the screen. I think your problem was probably that you were selecting the element to draw to using the SVG selector instead of assigning an id to each different element and then selecting each element id.
<html>
<head>
<title>Example</title>
<script src="https://d3js.org/d3.v5.min.js"></script>
<script>
function drawGraph(elementId) {
const svg = d3.select(elementId);
const width = +svg.attr("width");
const height = +svg.attr("height");
let TelescopeData = [
{ Average: 2000, TelescopeName: "1 meter" },
{ Average: 3000, TelescopeName: "1.9 meter" },
{ Average: 4000, TelescopeName: "Lesedi" }
];
let padding = { top: 40, right: 20, bottom: 30, left: 75 };
const innerWidth = width - padding.left - padding.right;
const innerHeight = height - padding.top - padding.bottom;
let colors = ["red", "black", "green"];
let yScale = d3
.scaleLinear()
.domain([0, d3.max(TelescopeData, d => d.Average)])
.range([innerHeight, 0])
.nice();
let xScale = d3
.scaleBand()
.domain(
TelescopeData.map(d => {
return d.TelescopeName;
})
)
.range([0, innerWidth])
.padding(0.4);
//xAxis
const xAxis = svg
.append("g")
.classed("xAxis", true)
.attr("transform",`translate(${padding.left},${innerHeight + padding.top})`)
.call(d3.axisBottom(xScale));
//yAxis
const yAxis = svg
.append("g")
.classed("yAxis", true)
.attr("transform", `translate(${padding.left},${padding.top})`)
.call(d3.axisLeft(yScale));
// now adding the data
const rectGrp = svg
.append("g")
.attr("transform", `translate(${padding.left},${padding.top})`);
rectGrp
.selectAll("rect")
.data(TelescopeData)
.enter()
.append("rect")
.attr("width", xScale.bandwidth())
.attr("height", (d, i) => {
return innerHeight - yScale(d.Average);
})
.attr("x", d => {
return xScale(d.TelescopeName);
})
.attr("y", function(d) {
return yScale(d.Average);
})
.attr("fill", (d, i) => {
return colors[i];
});
rectGrp
.append("text")
.attr("y", -20)
.attr("x", 50)
.text("Quarterly Average");
}
drawGraph("#testsvg1");
drawGraph("#testsvg2");
drawGraph("#testsvg3");
drawGraph("#testsvg4");
</script>
</head>
<body>
<svg id="#testsvg1" width="200" height="200"></svg>
<svg id="#testsvg2" width="200" height="200"></svg>
<svg id="#testsvg3" width="200" height="200"></svg>
<svg id="#testsvg4" width="200" height="200"></svg>
</body>
</html>
I have a d3 project where I want to include all my dates but only on certain intervals. Right now it displays everything which is too cluttered. I only want to display the labels on the x axis every 7 years. so for example 1947, 1954, 1961, 1968, etc. Pease help and thank you in advance.
Here is my code:
loadData = ()=> {
req = new XMLHttpRequest();
req.open("GET", "https://raw.githubusercontent.com/freeCodeCamp/ProjectReferenceData/master/GDP-data.json" , true);
req.send();
req.onload= ()=>{
json = JSON.parse(req.responseText);
//dynmaic height
/*var margin = {top: 20, right: 200, bottom: 0, left: 20},
width = 300,
height = datajson.length * 20 + margin.top + margin.bottom;*/
//create measurements
const margin = 60
const width = 1000 - margin;
const height = 600 - margin;
const maxYScale = d3.max(json.data, (d) => d[1]);
//date formatter
const formatDate = d3.timeParse("%Y-%m-%d"); //convert from string to date format
const parseDate = d3.timeFormat("%Y"); //format date to cstring
//create svg
const svg = d3.select("svg");
const chart = svg.append("g")
.attr("transform", `translate(${margin}, ${margin})`);
//y-axis: split charts into 2 equal parts using scaling function
const yScale = d3.scaleLinear()
.range([height, 0]) //length
.domain([0, maxYScale]); //content
//create x-axis
const yAxis = d3.axisLeft(yScale);
//append y-axis
chart.append("g")
.call(yAxis);
//create x-scale
const xScale = d3.scaleBand()
.range([0, width]) //length
//.domain(json.data.filter((date, key) => { return (key % 20 === 0)}).map((d)=> parseDate(formatDate(d[0]))))
.domain(json.data.map((d)=> parseDate(formatDate(d[0]))))
.padding(0.2);
//create x-axis
const xAxis = d3.axisBottom(xScale);
//append x-axis
chart.append("g")
.attr(`transform`, `translate(0, ${height})`)
.call(xAxis);
//make bars
chart.selectAll("rect")
.data(json.data)
.enter()
.append("rect")
.attr("x", (d) => xScale(parseDate(formatDate(d[0]))))
.attr("y", (d) => yScale(d[1]))
.attr("height", (d) => height - yScale(d[1]))
.attr("width", xScale.bandwidth())
}
}
loadData();
Here is my codepen:
codepen
I am just going to answer my own question as I found the solution. In order to set intervals in the x axis I simply used tickValues. Then I used my scale and a filter function to filter the intervals based on the data I had. Below you may find the answer.
const xAxis = d3.axisBottom(xScale)
.tickValues(xScale.domain().filter(function(d) { return (d % 7 === 0)}));
Trying to change line stroke-width with an IF statement / ternary operator e.g. if d.country === "China" stroke-width: 2. This has to be a path.line attribute so this is what I'm attaching it to after line is called.
I've added countryName to the emissions object, I have also noticed that condition is always FALSE so the stroke-width is 0.5. Why its not TRUE?
Codepen
//Define line chart with and height
const width = fullWidth - margin.left - margin.right;
const height = fullHeight - margin.top - margin.bottom;
//Define x and y scale range
let xScale = d3.scaleLinear()
.range([0, width])
let yScale = d3.scaleLinear()
.range([0, height])
//Define x and y axis
let xAxis = d3.axisBottom(xScale)
.ticks(15)
let yAxis = d3.axisLeft(yScale)
.ticks(10)
//Draw svg
let svg = d3.select("body")
.append("svg")
.attr("width", fullWidth)
.attr("height", fullHeight)
.append("g")
.attr("transform", "translate(" + 53 + "," + 0 +")");
d3.json("https://api.myjson.com/bins/izmg6").then(data => {
console.log(data);
//Structure data so should be an array of arrays etc [[x,y], [x,y], [x,y]]
let years = d3.keys(data[0]).slice(0, 50);
console.log(years);
let dataset = [];
data.forEach((d, i) => {
let myEmissions = [];
years.forEach(y => {
if (d[y]) {
myEmissions.push({
country: d.countryName,
year: y,
amount: d[y]
})
}
})
dataset.push({
country: d.countryName,
emissions: myEmissions
});
})
console.log(dataset);
//Define x and y domain
xScale
.domain(d3.extent(years, d =>d))
yScale
.domain([d3.max(dataset, d =>
d3.max(d.emissions, d =>
+d.amount)), 0])
//Generate line
let line = d3.line()
.curve(d3.curveBasis)
.x(d =>
xScale(d.year))
.y(d =>
yScale(d.amount));
let groups = svg.selectAll("g")
.data(dataset)
.enter()
.append("g")
groups.append("title")
.text(d => d.country)
groups.selectAll("path")
.data(d => [d.emissions])
.enter()
.append("path").classed("line", true)
.attr("d", line)
.style("stroke-width", d =>
d.country === "China" ? 10 : 0.5
)
}).catch(error => console.log(error))
What rioV8 meant is that you already have your group selection, so you just need to use groups to append new elements.
groups is a selection of all your g, it's where you want to append your paths. The same way you're not selecting again to add the titles.
groups
.append("path").classed("line", true)
.attr("d", d=> line(d.emissions))
.style("stroke-width", d =>
d.country === "China" ? 5 : 0.5
)
I am wondering is it possible to achieve the combination of area and bar chart in the way shown in the screenshot below?
Along with making the area in between clickable for some other action.
It would be really helpful if you can guide me to some of the examples to get an idea how to achieve the same.
I posted a codepen here. That creates a bar chart, and then separate area charts between each bar chart.
const BarChart = () => {
// set data
const data = [
{
value: 48,
label: 'One Rect'
},
{
value: 32,
label: 'Two Rect'
},
{
value: 40,
label: 'Three Rect'
}
];
// set selector of container div
const selector = '#bar-chart';
// set margin
const margin = {top: 60, right: 0, bottom: 90, left: 30};
// width and height of chart
let width;
let height;
// skeleton of the chart
let svg;
// scales
let xScale;
let yScale;
// axes
let xAxis;
let yAxis;
// bars
let rect;
// area
let areas = [];
function init() {
// get size of container
width = parseInt(d3.select(selector).style('width')) - margin.left - margin.right;
height = parseInt(d3.select(selector).style('height')) - margin.top - margin.bottom;
// create the skeleton of the chart
svg = d3.select(selector)
.append('svg')
.attr('width', '100%')
.attr('height', height + margin.top + margin.bottom)
.append('g')
.attr('transform', 'translate(' + margin.left + ', ' + margin.top + ')');
xScale = d3.scaleBand().padding(0.15);
xAxis = d3.axisBottom(xScale);
yScale = d3.scaleLinear();
yAxis = d3.axisLeft(yScale);
svg.append('g')
.attr('class', 'x axis')
.attr('transform', `translate(0, ${height})`);
svg.append('g')
.attr('class', 'y axis');
svg.append('g')
.attr('class', 'x label')
.attr('transform', `translate(10, 20)`)
.append('text')
.text('Value');
xScale
.domain(data.map(d => d.label))
.range([0, width])
.padding(0.3);
yScale
.domain([0, 75])
.range([height, 0]);
xAxis
.scale(xScale);
yAxis
.scale(yScale);
rect = svg.selectAll('rect')
.data(data);
rect
.enter()
.append('rect')
.style('fill', d => '#00BCD4')
.attr('y', d => yScale(d.value))
.attr('height', d => height - yScale(d.value))
.attr('x', d => xScale(d.label))
.attr('width', xScale.bandwidth());
// call the axes
svg.select('.x.axis')
.call(xAxis);
svg.select('.y.axis')
.call(yAxis);
// rotate axis text
svg.select('.x.axis')
.selectAll('text')
.attr('transform', 'rotate(45)')
.style('text-anchor', 'start');
if (parseInt(width) >= 600) {
// level axis text
svg.select('.x.axis')
.selectAll('text')
.attr('transform', 'rotate(0)')
.style('text-anchor', 'middle');
}
data.forEach(
(d, i) => {
if (data[i + 1]) {
areas.push([
{
x: d.label,
y: d.value
},
{
x: data[i + 1].label,
y: data[i + 1].value
}
]);
}
}
);
areas = areas.filter(
d => Object.keys(d).length !== 0
);
areas.forEach(
a => {
const area = d3.area()
.x((d, i) => {
return i === 0 ?
xScale(d.x) + xScale.bandwidth() :
xScale(d.x);
})
.y0(height)
.y1(d => yScale(d.y));
svg.append('path')
.datum(a)
.attr('class', 'area')
.style('fill', d => '#B2EBF2')
.attr('d', area)
.on('click', d => {
console.log('hello click!');
});
}
)
}
return { init };
};
const myChart = BarChart();
myChart.init();
#bar-chart {
height: 500px;
width: 100%;
}
<script src="https://unpkg.com/d3#5.2.0/dist/d3.min.js"></script>
<div id="bar-chart"></div>
After creating the bar chart, I repackage the data to make it conducive to creating an area chart. I created an areas array where each item is going to be a separate area chart. I'm basically taking the values for the first bar and the next bar, and packaging them together.
data.forEach(
(d, i) => {
if (data[i + 1]) {
areas.push([
{
x: d.label,
y: d.value
},
{
x: data[i + 1].label,
y: data[i + 1].value
}
]);
}
}
);
areas = areas.filter(
d => Object.keys(d).length !== 0
);
I then iterate through each element on areas and create the area charts.
The only tricky thing here, I think, is getting the area chart to span from the end of the first bar to the start of the second bar, as opposed to from the end of the first bar to the end of the second bar. To accomplish this, I added a rectangle width from my x-scale to the expected x value of the area chart when the first data point is being dealt with, but not the second.
I thought of this as making two points on a line: one for the first bar and one for the next bar. D3's area function can shade all the area under a line. So, the first point on my line should be the top-right corner of the first bar. The second point should be the top-left corner of the next bar.
Attaching a click event at the end is pretty straightforward.
areas.forEach(
a => {
const area = d3.area()
.x((d, i) => {
return i === 0 ?
xScale(d.x) + xScale.bandwidth() :
xScale(d.x);
})
.y0(height)
.y1(d => yScale(d.y));
svg.append('path')
.datum(a)
.attr('class', 'area')
.style('fill', d => '#B2EBF2')
.attr('d', area)
.on('click', d => {
console.log('hello click!');
});
}
)
In the example below, I have combined a simple bar chart (like in this famous bl.lock) with some polygons in between. I guess it could also be achieved with a path.
const data = [
{ letter: "a", value: 9 },
{ letter: "b", value: 6 },
{ letter: "c", value: 3 },
{ letter: "d", value: 8 }
];
const svg = d3.select("#chart");
const margin = { top: 20, right: 20, bottom: 30, left: 40 };
const width = +svg.attr("width") - margin.left - margin.right;
const height = +svg.attr("height") - margin.top - margin.bottom;
const xScale = d3.scaleBand()
.rangeRound([0, width]).padding(0.5)
.domain(data.map(d => d.letter));
const yScale = d3.scaleLinear()
.rangeRound([height, 0])
.domain([0, 10]);
const g = svg.append("g")
.attr("transform", `translate(${margin.left},${margin.top})`);
g.append("g")
.attr("class", "axis axis--x")
.attr("transform", `translate(0,${height})`)
.call(d3.axisBottom(xScale));
g.append("g")
.attr("class", "axis axis--y")
.call(d3.axisLeft(yScale));
g.selectAll(".bar")
.data(data)
.enter().append("rect")
.attr("class", "bar")
.attr("x", d => xScale(d.letter))
.attr("y", d => yScale(d.value))
.attr("width", xScale.bandwidth())
.attr("height", d => height - yScale(d.value));
// Add polygons
g.selectAll(".area")
.data(data)
.enter().append("polygon")
.attr("class", "area")
.attr("points", (d,i,nodes) => {
if (i < nodes.length - 1) {
const dNext = d3.select(nodes[i + 1]).datum();
const x1 = xScale(d.letter) + xScale.bandwidth();
const y1 = height;
const x2 = x1;
const y2 = yScale(d.value);
const x3 = xScale(dNext.letter);
const y3 = yScale(dNext.value);
const x4 = x3;
const y4 = height;
return `${x1},${y1} ${x2},${y2} ${x3},${y3} ${x4},${y4} ${x1},${y1}`;
}
})
.on("click", (d,i,nodes) => {
const dNext = d3.select(nodes[i + 1]).datum();
const pc = Math.round((dNext.value - d.value) / d.value * 100.0);
alert(`${d.letter} to ${dNext.letter}: ${pc > 0 ? '+' : ''}${pc} %`);
});
.bar {
fill: steelblue;
}
.area {
fill: lightblue;
}
.area:hover {
fill: sandybrown;
cursor: pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.13.0/d3.min.js"></script>
<svg width="400" height="300" id="chart"></svg>
If anyone could take a look at my code and let me know why D3 doesn't want to format Y axis ticks as %M:%S.
JSFiddle
Code:
function renderScatterPlot(data) {
// set up svg and bar dimensions/margins
const width = 1000;
const height = 500;
const padding = 20;
const margin = { top: 40, right: 20, bottom: 80, left: 80 };
// append svg to DOM
const svg = d3.select('body')
.append('svg')
.attr('width', width)
.attr('height', height)
// for parsing time string in data and converting back to original format
const parse = d3.timeParse('%M:%S');
const format = d3.timeFormat('%M:%S')
// calculate min and max data values
const timeMin = d3.min(data, (d) => parse(d.Time));
const timeMax = d3.max(data, (d) => parse(d.Time));
// set up scales
const xScale = d3.scaleBand()
.domain(data.map((d) => d.Year))
.range([margin.left, width - margin.right])
.paddingInner(0.1)
const yScale = d3.scaleTime()
.domain([timeMin, timeMax])
.range([height - margin.bottom, margin.top])
// set up x and y axes
const xAxis = d3.axisBottom(xScale)
const yAxis = d3.axisLeft(yScale)
.tickFormat(format)
// append axes to svg
svg.append('g')
.attr('id', 'x-axis')
.attr('transform', `translate(0, ${height - margin.bottom})`)
.call(xAxis)
svg.append('g')
.call(d3.axisLeft(yScale))
.attr('transform', `translate(${margin.left}, 0)`)
.attr('id', 'y-axis')
}
$.getJSON('https://raw.githubusercontent.com/FreeCodeCamp/ProjectReferenceData/master/cyclist-data.json', (data) => renderScatterPlot(data));
D3 is formatting your ticks, tickFormat is working just fine.
However, there is no point in doing this...
const yAxis = d3.axisLeft(yScale)
.tickFormat(format)
... if, when calling the axis, you simply ignore yAxis:
svg.append('g')
.call(d3.axisLeft(yScale))
It should be:
svg.append('g')
.call(yAxis)
Here is your updated fiddle: https://jsfiddle.net/swxbx0Lt/