I have a linear-gradient legend for my map. The x-axis values are calculated based on the minimum
and maximum values from the underlying data. I adapted this legend from this website:
https://www.visualcinnamon.com/2016/05/smooth-color-legend-d3-svg-gradient.html
The legend shows up when user selects a "field condition" from the dropdownlist. However, when
user selects a "state" from a dropdownlist, all the tick marks' text disappear. Same thing when user
selects a "county" from another dropdownlist. I haven't had luck trying to figure this out.
I'm calculating the tick mark values (shows as text) as follows:
var dataRange = getDataRange();
var min = parseFloat(dataRange[0].toFixed(3));
var max = parseFloat(dataRange[1].toFixed(3));
var legendW = 160, legendH = 20;
//create tick marks
var legendX = d3.scaleLinear()
.domain([min, max])
.range([0, legendW]);
var axis = d3.axisBottom(legendX);
d3.select("#svgLegend")
.attr("class", "axis")
.attr("width", legendW)
.attr("height", legendH * 2)
.append("g")
.attr("id", "g-legend")
.attr("transform", "translate(2," + legendH + ")") //margin.left; height/2
.call(axis);
For working example, please see: http://realtimeceap.brc.tamus.edu
I just glanced at the code on the page you referenced the working example at and think I figured out the issue.
Here's the line that taking out the ticks from the legend SVG:
d3.selectAll("text").remove();
which is a part of the onChange function for $("#stateSelect").
Line number: 279 to be more specific (in index.html file)
I think you want to take out all the texts from the mainSVG i.e. with the id: svgMap2.
Changing the above selection will fix the issue. (for eg. if you have a class for the texts to be removed, use d3.selectAll('text.<classname>').
Hope this helps.
I figured out why it's "disappearing". The Web is a stateless medium. So, every time I changed selection from the dropdownlist, the svg refreshes and losses its current state. So I needed to re-create my legend for the state and county dropdownlists. But also, for the county dropdownlist, since there is a Zoom function, it meant that everytime I zoom to another county, I loss my map state again. So I moved the recreate legend function into the zoomedIn method (that is, AFTER the zoom state). It works now.
Related
I am adding a list of markers to my chart based of certain conditions, these conditions are varying and therefore I will need to have markers that look different:
(using the setGridStrokeXStyle function doesn't seem to have an effect. What is the correct way to accomplish this?)
Markers.map((marker) => {
const chartMarker = chart.addChartMarkerXY()
.setPosition({ x: new Date(marker.x) - startDate, y: marker.y });
chartMarker
.setResultTableVisibility(UIVisibilityModes.always)
.setResultTable((table) => table
.setContent([
['Type']
])
)
.setGridStrokeXVisibility(UIVisibilityModes.whenDragged)
.setGridStrokeYVisibility(UIVisibilityModes.whenDragged)
.setTickMarkerXVisibility(UIVisibilityModes.whenDragged)
.setTickMarkerYVisibility(UIVisibilityModes.whenDragged)
.setDraggingMode(UIDraggingModes.notDraggable)
.setGridStrokeXStyle(new SolidLine({ fillStyle: new SolidFill({ color: ColorHEX("#FF69B4"), thickness: 2 }) })); //This doesn't seem to change the marker's appearance.
console.log("style", chartMarker.getGridStrokeXStyle());
});
The reason why in your code snippet the setGridStrokeXStyle is seemingly not having an effect is because the X grid stroke is not visible.
I have highlighted which element the "X grid stroke" is in the below picture with red to make sure:
As per why this is not visible in your example code, it is due to this method call which makes it so it is only displayed when the Chart Marker is being dragged.
.setGridStrokeXVisibility(UIVisibilityModes.whenDragged)
Furthermore, this other method call makes it so that the Chart Marker can not be dragged, which results in the X grid stroke never being visible.
.setDraggingMode(UIDraggingModes.notDraggable)
Here are some examples of styling different parts of the Chart Marker properly:
I have object TextLayer with white text color string. Then I animate text color selection (second character changes color white -> blue).
How can I get this selection and color programmatically?
Seems like you can't reach the selection start and end values by scripting. But you can add expression controller effect and get the values from that one.
The code below asumes you have one comp in your project with an text layer called "my text layer".
Add an expression controller for color to that layer. Add the expression text.animator("Animator 1").property.fillColor to that effect.
You can do the same thing with the values from your selection.
var preExpression = true;
var currentTime = 5; // in seconds
// get the sourceText? works!
var val = app.project.item(1).layer("my text layer").property("ADBE Text Properties").property("ADBE Text Document").valueAtTime(currentTime, preExpression);
// get the Text Percent Start? Wont work!
var sel = app.project.item(1).layer("my text layer").property("ADBE Text Properties").property("ADBE Text Animators").property("ADBE Text Animator").property("ADBE Text Selectors").property("ADBE Text Selector").property("ADBE Text Percent Start").valueAtTime(currentTime, preExpression);
// add an expression controller for color and get the color from that one? works!
var col = app.project.item(1).layer("my text layer").property("ADBE Effect Parade").property("ADBE Color Control").property("ADBE Color Control-0001").valueAtTime(currentTime, false);
$.writeln(val);
$.writeln(sel);
$.writeln(col);
Take a look into the After Effects Scripting Guide. Use redefinery's rd_GimmePropPath script to get the match names of properties.
I'm working with dc.js and I'm about to create a world map.
How can I add the countries' names upon the geochoropleth map ?
I create a crude example of this approach here: http://jsfiddle.net/djmartin_umich/9VJHe/
1) First I attained the json file containing the centroids of all of the states: https://bitbucket.org/john2x/d3test/src/2ce4dd511244/d3/examples/data/us-state-centroids.json. For the purposes of this example, I copied the json to the jsfiddle.
var labels = {"type":"FeatureCollection","features":[
{"type":"Feature","id":"01","geometry":{"type":"Point","coordinates":[-86.766233,33.001471]},"properties":{"name":"Alabama","population":4447100}},
{"type":"Feature","id":"02","geometry":{"type":"Point","coordinates":[-148.716968,61.288254]},"properties":{"name":"Alaska","population":626932}},
2) Then I added a svg element to the chart that would contain all of the labels:
var labelG = d3.select("svg")
.append("svg:g")
.attr("id", "labelG")
.attr("class", "Title");
3) Next I added a svg text element for every state in the labels json:
labelG.selectAll("text")
.data(labels.features)
.enter().append("svg:text")
4) Then I positioned the text elements using the coordinates of the centroid. To accomplish this you should use the projection from the chart to translate the coordinates to relative x and y values.
.attr("x", function(d){return project(d.geometry.coordinates)[0];})
.attr("y", function(d){return project(d.geometry.coordinates)[1];})
.attr("dx", "-1em");
Here is the final result:
You'll notice two problems:
There isn't enough room to display all of the names in the northeast states
The labels aren't centered very well
Both of these problems could be resolved by changing the labels json by manually moving the coordinates.
Note, I used this question as a basis for my answer: https://groups.google.com/forum/#!topic/d3-js/uAWkwnuNQ3Q
I'm drawing a line chart with javafx categoryaxis. e.g. I have 100 points on the plot. As such, all of my tick labels are squished together, resulting in 100 bunched-up ellipses. All I want to do is render every tenth label. I've looked through the documentation but there doesn't seem to be any way to turn individual tick labels visible or invisible, or how to change the setting of the tick unit on a CategoryAxis.
or I have to redraw xAxis?
just got an idea, add number of invisible char into the categoryaxis, so that each xaxis is still 'unique'
if (i%5 == 0)
str = DateFormat.getDateInstance(DateFormat.DEFAULT).format(date);
else {
str = invisible;
invisible += (char)29;
}
In a given instance of google maps...
Is there a way to turn off the other instances of the maps which tile to the right and left of the initial central map?
I've seen ways to restrict the pan ability of the map ... but it uses lat + lng to determine when to re-center the map ... and thus the usage falls apart at different zoom levels.
For example: https://google-developers.appspot.com/maps/documentation/javascript/examples/map-simple
If on zooms all the way out, you can see how the map of the globe is tiled along the x-axis.
I would like a single instance of the map.
You could add an observer to the zoom_changed event, and set the minZoom if more than 90 degrees of map is shown. The second statement recursively reduces the zoom to an acceptable limit before the limit is known.
var zoomObserver = function () {
width = Math.abs(map.getBounds().getNorthEast().lat() -
map.getBounds().getSouthWest().lat());
if (width > 90){
var opt = { minZoom: map.getZoom()};
map.setOptions(opt);
}
if (width > 179){
map.setZoom(map.getZoom() + 1);
}
};
google.maps.event.addListener(map,'zoom_changed', zoomObserver );
This simple solution works for most use cases, doesn't take into account doubling the width of the map through resizing the browser window, so you may need to add the observer to another event in that case.