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
Related
What I have now is
But I want to change the colors of Legends, and achieve like below as it should match the colors of the bars.
Despite trying chart.legend.backround.fill and chart.legend.data with fill property, I am unable to change the colors
Thank you #Samuel
I have solved my problem!
Chart.legend.data = [{
"name": "Normal",
"fill": "#28a745"
}, {
"name": "Underweight",
"fill": "#ffc107"
}];
Was missing!
The Code Pen can be found Here
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
D3 newbie.
How I adjust the spacing between bars in vega-lite bar chart and override the default? binSpacing I think only works on histograms. See code below.
I'll want to adjust colour of text and font family too... But am having trouble finding it in the docs.
{
"$schema": "https://vega.github.io/schema/vega-lite/v2.json",
"width": 1200,
"height": 900,
"data": {
"url": "data/seattle-weather.csv"
},
"mark": "bar",
"encoding": {
"x": {
"aggregate": "count",
"type": "quantitative"
},
"size": {
"value": 40
},
"y": {
"field": "date",
"type": "temporal",
"timeUnit": "month",
"axis": {
"title": "Regions"
}
},
"color": {
"field": "weather",
"type": "nominal",
"scale": {
"domain": [
"0-20 days",
"21-27 days",
">28 days"
],
"range": [
"red",
"orange",
"green"
]
},
"legend": {
"title": "Case Ageing"
}
}
}
}
I can understand your confusion. It seems there are three questions:
How do I change bin width for histograms? This is documented here. If you have trouble with a reproducible example, I will be happy to help.
How do I adjust the spacing of the bars? This is controlled by padding, paddingInner and paddingOuter all documented at the encoding level and at the config level. You might be having trouble since you are setting size manually with "size": {"value": 40}, but I am guessing this is a remnant from experimenting. Here is a working spec from this gist. You can play with paddingOuter, paddingInner, or add padding to apply to both inner and outer.
How do I change font styling? See this gist.
I'm trying to trying to remove a small gap when I have a pie chart with a 100% slice.
I've tried to give it a outlineThickness of 0 but there is still a very small gap.
Here is an example.
var chart = AmCharts.makeChart( "chartdiv", {
"type": "pie",
"theme": "light",
"dataProvider": [ {
"country": "Lithuania",
"litres": 10
}],
"outlineThickness": 0,
"outlineAlpha": 1,
"valueField": "litres",
"titleField": "country",
"balloon":{
"fixedPosition":true
},
"export": {
"enabled": true
}
} );
The only way to work around this in current version is to apply the same color to outline as the slice itself. You can use outlineColor for that:
https://jsfiddle.net/s083cdpk/1/
Please note that this should be applies only if there's only one slice, as the same color will be applied to all slices if there are more.
This options should be used:
"outlineThickness": 1,
"outlineAlpha": 1,
"outlineColor": undefined
Example
I 'm trying to generate svg maps from the GEOFLA shapefiles.
Using 'bbox' bounds mode with manually setting the bbox values works well :
{
"layers": [{
"id": "depts",
"src": "data/DEPARTEMENTS/DEPARTEMENT.shp",
"filter": {"CODE_REG": "24"},
"simplify": {
"method": "distance",
"tolerance": 8
},
"attributes": "all"
}],
"bounds": {
"mode": "bbox",
"data": [-4.5, 42, 8, 48],
},
"export": {
"width": 600,
"ratio": 0.8
}
}
But when setting the bounds mode to 'polygons', then i get an empty svg map :
{
"layers": [{
"id": "depts",
"src": "data/DEPARTEMENTS/DEPARTEMENT.shp",
"filter": {"CODE_REG": "24"},
"simplify": {
"method": "distance",
"tolerance": 8
},
"attributes": "all"
}],
"bounds": {
"mode": "polygons",
"data": {
"layer": "depts"
},
"padding": 0.06
},
"export": {
"width": 600,
"ratio": 0.8
}
}
I had a look in kartograph files and i noticed that the "get_features" method in "map.py" return a Polygon which coordinates doesn't intersect with the features geometry previouly extracted from the shapefile.
Then, each feature are throw away in the "get_features" method of the "maplayer.py" file when checking if feature geometry intersects with the "layer.map.view_poly" property.
I had a similar problem using GEOFLA file projection.
The solution I've found is basically to change my shapefile projection using QGIS. My idea was to use the projection of the shapefile given in installation guide which worked for me.
Get example shape file from kartograph installation page
Load this vector layer in QGIS Add your GEOFLASH layer in QGIS
Right-click on GEOFLASH layer and "Save as..." menu
In the save window, give a new name for your layer (eg : DEPARTEMENT_WGS84.shp)
Click CSR button and select the test layer projection (WGS 84 / EPSG:4326)
Click OK
Check the new shape file has correct projection :
cat DEPARTEMENT_WGS84.prj
GEOGCS["GCS_WGS_1984",DATUM["D_WGS_1984",SPHEROID["WGS_1984",6378137,298.257223563]],PRIMEM["Greenwich",0],UNIT["Degree",0.017453292519943295]]
Now your script should work fine using new shape file.