I am looking to create a color gradient along the x axis of a d3 chart as the fill-area under the chart, and I'm not sure where to start. Hoping you can help:)
So for example, I draw a line graph based on dates and values.(x and y). Then underneath the line, I want the color of the fill to reflect the temperature for that day (higher temperatures, warmer colors, etc).
data = [
{"date": "2018-04-10"
"value": "122"
"temperature" "13"
},
{"date": "2018-04-11"
"value": "129"
"temperature" "15"
},
{"date": "2018-04-12"
"value": "114"
"temperature" "17"
},
{"date": "2018-04-13"
"value": "120"
"temperature" "14"
},
{"date": "2018-04-14"
"value": "139"
"temperature" "11"
},
{"date": "2018-04-15"
"value": "120"
"temperature" "10"
},
{"date": "2018-04-16"
"value": "119"
"temperature" "13"
}
]
and say my colors are
colors = ["red","orange","yellow","green","blue","purple" ]
I'm thinking I'd set the area and fill it with a function that will create the color vertically based on the temperature?
var area = d3.svg.area()
.x(function(d, i) { return x(format.parse(d.date)); })
.y0(height)
.y1(function(d) { return y(d.value); });
graph.append("path")
.datum(data)
.attr("class", "area")
.attr('fill', areaFill)
.attr("d", area);
I got this code from THIS codepen to get me started... it's obviously not right but helps show how to create a single color fill. So, how might I loop through colors and assign a gradient fill based off a separate value?
Thanks so much for your help! Let me know if I can clarify
Related
I am trying to modify the Vega.js choropleth example to use a gradient legend, and then to make that legend wider. I have succeeded in changing the type to "gradient", but when I try to make the legend wider, the text labels remain stuck and do not widen with the color bar.
Here's a link to the full code: https://jsbin.com/tamenucohu/edit?html,output
Here is the legend-specific part:
"legends": [
{
"fill": "color",
"orient": "bottom-right",
"title": "Unemployment",
"format": "0.1%",
"type": "gradient",
"encode": {
"gradient": {
"update": {
"width": {"value": 300}
}
}
}
}
Here's a screenshot when I set the width to 300, note that the "0.0%" and "15.0%" text labels are not properly spaced: wider color bar with narrower labels
There is an example of making pie chart using d3.js https://bl.ocks.org/mbostock/3887235
here in this example .csv file is used.
age,population
<5,2704659
5-13,4499890
14-17,2159981
18-24,3853788
25-44,14106543
45-64,8819342
≥65,612463
I want to use json file.
[
{"age": "<5",
"population": 2704659
},
{"age": "5-13",
"population": 4499890
},
{"age": "14-17",
"population": 2159981
},
{"age": "18-24",
"population": 3853788
},
{"age": "25-44",
"population": 14106543
},
{"age": "45-64",
"population": 8819342
},
{"age": ">=65",
"population": 612463
}
]
what code I need to change in the source file?
I have used
d3.json("data.json", function(error, data) {
But it not worked for me.
Look at this pie chart : https://jsfiddle.net/reko91/qkHK6/1942/
Data is like so :
var data = [{"label":"Category A", "value":20},
{"label":"Category B", "value":50},
{"label":"Category C", "value":30}];
Makes the container using the data :
var vis = d3.select('#chart')
.append("svg:svg")
.data([data])
Makes a variable pie :
var pie = d3.layout.pie().value(function(d) {
return d.value;
});
Then uses this variable :
var arcs = vis.selectAll("g.slice").data(pie).enter().append("svg:g").attr("class", "slice");
Which in turn gets used to create the slices :
arcs.append("svg:path")
.attr("fill", function(d, i) {
return color(i);
})
.attr("d", function(d) {
// log the result of the arc generator to show how cool it is :)
console.log(arc(d));
return arc(d);
});
There you go, pie chart made via json :)
This is just an example, obviously can't implement the exact changes unless you show us your code
I want to plot a graph between place and time. Y-axis will show 5 countries (USA, UK, Canada, France, Germany) and X-axis will show the time. The data is in pairs of (date, place). I am trying to display it by replacing the numeric values of Y-Y-axis with strings but no luck. Any simple working example will be helpful.
The value axis' labelFunction would be perfect for this task. With it, you can define a custom function that would be called for each label, which in turn could replace the number with a string. I.e.:
"valueAxes": [{
// other value axis settings
// ...
"labelFunction": function(value) {
var labels = {
"1": "USA",
"2": "UK",
"3": "Canada",
"4": "France",
"5": "Germany"
};
return labels[value] || "";
}
}]
Another option that you have is to disable value axis labels altogether ("labelsEnabled": false) and using guides to place country labels at specific values. I.e.:
"valueAxes": [{
"labelsEnabled": false,
"guides": [{
"value": 1,
"label": "USA"
}, {
"value": 2,
"label": "UK"
}, {
"value": 3,
"label": "Canada"
}, {
"value": 4,
"label": "France"
}, {
"value": 5,
"label": "Germany"
}]
}]
Whichever works for your purposes better, or seems easier.
I'm new to D3 and struggling understand the nest function. I'm trying to get it working to produce a bar chart that will have three different bars for the years '2013', '2014' and '2015' and the length of each bar to be the number of entries for that year.
I've looked at lots of examples, but I'm missing some of the steps. I'd like to know how to view / troubleshoot what nest does to my data (listing keys and values etc.) And I'd also like to know how to utilise the data in a simple bar chart (what data do I call and what do I return for 'height' etc.)
I have made a fiddle here http://jsfiddle.net/hellococomo/zz81pwkm/4/ but can't figure out why I can't get any height on the bars. I'd really appreciate any help.
This is my example code:
var fruit = [
{"name": "Apple", "year": 2013, "win": "1"},
{"name": "Banana", "year": 2013, "win": "1"},
{"name": "Orange", "year": 2013, "win": "1"},
{"name": "Grapefruit", "year": 2013, "win": "0"},
{"name": "Grape", "year": 2014, "win": "0"},
{"name": "Pineapple", "year": 2014, "win": "1"},
{"name": "Melon", "year": 2014, "win": "1"},
{"name": "Grape", "year": 2014, "win": "1"},
{"name": "Pineapple", "year": 2014, "win": "1"},
{"name": "Pineapple", "year": 2015, "win": "1"},
];
data = d3.nest()
.key(function(d){ return d.year }) // `GROUP BY date`
.rollup(function(values){
// `values` is all the rows of a particular date
var counts = {}, keys = ['name', 'win']
keys.forEach(function(key){
counts[key] = d3.sum(values, function(d){ return d[key] })
})
return counts
})
.entries(fruit)
var svg =
d3.select('svg g')
.selectAll('rect')
.data(data)
.enter();
svg.append('rect')
.attr('x', function(d, i) {return i * 60 })
.attr('y', 50)
.attr('width', 50)
.attr('height', function(d) { return d['win'] })
.style('fill', 'steelblue');
Check this out: http://jsfiddle.net/yojm65nk/7/
.rollup(function(values){
// `values` is all the rows of a particular date
var counts = {}; var keys = ['name', 'win']
values.forEach(function(d){
for (var i = 0; i<keys.length; i++) {
counts[keys[i]] = d3.sum(values, function(d){ return d[keys[i]] })
}
Basically in your nest function, especially in your roll up you need to iterate through the data to expose your data variables. Once you have that you can draw you bar graph accordingly.
If you log the value of each of the Objects in your data (for example, using the Console in Chrome), you'll see that the Objects do not have a "win" property.
{"key":"2013","values":{"name":0,"win":3}}
As a result, the height of the <rect>s is not being set correctly (all of them are being set to null).
However, you can also see that you can access the "win" property of your data through the "values" Object:
.attr('height', function(d) { return d.values.win }) // <---- access .values first!
which will set the "height" according to the "wins" value in fruit.
It is possible to have groups in amcharts axis?
Check the example in highcharts : example
Kind of... it's not an official feature but you can fake it.
You can have a graph for the label, with a valueField which is always zero.
You'll also need to offset the category axis so the labels don't hide each other.
Here's an example : http://jsfiddle.net/amcharts/XY2cD/
// each data provider has a label property
dataProvider :
[{ ... ,
"label": 0
}, ... ],
// the first graph in each 'cluster' is for the label
"graphs": [
{
"type": "column",
"fillAlphas": 0, // hide this column
"lineAlpha": 0, // hide this column
"title": "my sub group name",
"valueField": "label", // this is the field that's always zero
"showAllValueLabels": true, // even though the field is zero - the label will be shown
"labelText": "\n[[title]]" // start this with a newline so it's below the axis
}, ... ],
"categoryAxis": {
"labelOffset": 15
}
(not my fiddle, I just found it online)