I would like to compare multiple conditions of an altair (ultimately vega-lite) layered plot. The perfect solution would be to facet/trellis the plot so I can see the different conditions side by side. Unfortunately I cannot figure out how to give the command to plot the different conditions.
Here is my attempt to implement my idea based on the example for layered plots:
(https://github.com/ellisonbg/altair/blob/master/altair/notebooks/07-LayeredCharts.ipynb)
import pandas as pd
import numpy as np
data = pd.DataFrame({'x':np.random.rand(10), 'y':np.random.rand(10), 'z':['a', 'b']*5})
chart = LayeredChart(data)
chart += Chart().mark_line().encode(x='x:Q', y='y:Q', column='z:Q')
chart += Chart().mark_point().encode(x='x:Q', y='y:Q', column='z:Q')
chart
When compared with the example I added the column 'z' with the two conditions, and the two column statements in the Chart definitions.
This solution generates seemingly good Vega-lite code, but no plot. Alternatively I tried "chart = LayeredChart(data).encode(column='z:Q')" but I then got the error 'LayeredChart' object has no attribute 'encode'
I am wondering whether it is possible to facet (trellis) layered plots at all and whether it will be possible in future Vega-Lite releases.
I am using jupyter with Anaconda
Layering is only experimentally supported in the current release of Vega-Lite and Altair, and I believe you've hit one of the unsupported aspects. This should be addressed in the Vega-Lite 2.0 release (and associated Altair release) later this spring.
Related
Is there a way to add labels to the state maps? For example, to have the percentages directly on the individual states instead of only being able to see them via the tool tip?
I'm not sure if Altair has this option or if I will need to look into other packages (plotly, folium etc.) and do some layering to get those results.
import altair as alt
from vega_datasets import data
states = alt.topo_feature(data.us_10m.url, 'states')
variable_list = ['Percentage', 'State Name', 'state_id']
alt.Chart(states).mark_geoshape(stroke='white', width=0.01).encode(
color=alt.Color('Percentage:Q', title='Positive NFB', legend=alt.Legend(format=".0%"), scale=alt.Scale(scheme='yellowgreenblue', domain=[0, 1])),
tooltip=['State Name:N', alt.Tooltip('Percentage:Q', format='.0%')]).properties(title="Percentage of People in Households with Positive NFB"
).transform_lookup(
lookup='id',
from_=alt.LookupData(states_positive_NFB, 'state_id', variable_list)
).properties(
width=500,
height=300
).project(
type='albersUsa'
)
Altair has no built-in features for displaying labels on geographic regions. That said, if you have a dataframe with columns containing latitudes, longitudes, and text that you would like to display, you can do so with a mark_text() and latitude/longitude encodings; you can find an example of this in Altair's documentation: https://altair-viz.github.io/gallery/london_tube.html
If what you want is a visualization tool that has built-in functionality for computing centroids of geographic regions and drawing labels at those points, Altair is probably not what you're looking for.
I have a map with an older topojson format that once worked with Vega-Lite. Now we only see a purple square in this editor gist.
I've rebuilt the map with the same code but updated topojson in the vega editor and saved as a gist here.
With the new vega release, it seems like I need my topojson files to be formatted differently, with the arcs first, like the mapshaper.org export output. Why is this? It's broken several existing web maps, and took me a few hours to figure out. Seems like I can fix it with a workflow change, but I am curious.
Topojson data follows the left-hand rule for projected data (clockwise orientation for outer rings and counter- clockwise for interior rings), where the data in your topojson file is structured according the right-hand rule (counter-clockwise for outer rings and clockwise for interior rings). The order of your polygons seems negligible, but it defines which part is ‘inside’ and ‘outside’ the polgygons.
You can do two things:
Do not use a geographic projection, but the cartesian-like identity projection.
Force your source data into the right order.
Example for 1:
"projection": {"type": "identity", "reflectY": true},
see Vega Editor
Example for 2:
Use MapShaper or Python to force your data in the right order. Here an example using Python
import topojson as tp
import geopandas as gpd
gdf = gpd.read_file('https://raw.githubusercontent.com/nycehs/NeighborhoodReports/master/visualizations/json/UHF42.topo_old.json')
tp.Topology(gdf).to_json('UHF42.topo_new.json')
see Vega Editor
I wrote a bit about it before for Altair and Python Topojson
https://mattijn.github.io/topojson/example/settings-tuning.html#winding_order
https://altair-viz.github.io/user_guide/data.html#winding-order
And Mike Bostock for D3
https://bl.ocks.org/mbostock/a7bdfeb041e850799a8d3dce4d8c50c8
I am currently trying to adapt an excel dashboard I created a few years back into spotfire. The data previously fit onto one page, but this year the number of metrics has doubled and I thought it would be a good opportunity to try spotfire.
The current dashboard has a number of scatter plot charts showing the values from a range of cells (rank 1-5). Overlaid is another scatter plot that shows the groups results.
I have found it easy enough to run the scatter plot in Excel based on a range of data, but as of right now I am stumped on how to choose a range of values for my spotfire scatters.
Here is an example (in excel) of what I am trying to accomplish. The data example is how my data is currently setup.
Would you have any tips on how I may be able to produce a similar chart in Spotfire?
You can create a Document.Properties with all the values you want. Then create a slider in a text area with this document properties. You will be able to select a range of values with this slider.
To use your range in a scatter plot, on the axis you want, right click and custom expression then write something like $(my_docproperty).
Hope it will a solution to your problem !
I am trying to show machine states over time. Part of this is to reproduce/automate a report that used to be done by hand. It consists of coloring 2minute 'time slices' in Excel based on what the machine is doing.
(Sorry, not enough reputation to post a picture, but it is a classic heatmap where the state drives the color. Some non DC-JS fiddle: http://jsfiddle.net/ww6Lbnc5/4/)
I was able to generate most of what I want in the following jsfiddle:
http://jsfiddle.net/hwhfxz2t/14/
See fiddle for code.
The total state duration (for selected time frame) is shown in the pieChart, followed by the individual state lines and then the heatmap that people are used to. (the ZOOM and date selection buttons do not work in the fiddle but are there to select specific data ranges or zoom in if you like).
The line charts uses the original representation of the states, which consists of a time the state is entered and a duration.
In order to make the heat map work, I had to (I think) take the original data and convert it into individual minute chunks and mark them with a state. So for instance the original data specifying:
RUN state starting 14:30 for 300 seconds
becomes:
14:30=RUN, 14:31=RUN, 14:32=RUN, 14:33=RUN and 14:34=RUN
The code in lines 233-297 loops through the original data and generates a new one that does this. In cases where there is more than one state within a given minute, the last state survives.
This works okay but it seems that this code is exactly what is normally done in group().reduce(add,remove,init). But in this case I need to add multiple timeslots depending on the duration of a state.
Also, because it is now using a different crossfilter, maps do not update each other.
Here are my questions related to this:
Can I display a heatmap without supplying information for all individual
'cells'? (i.e. straddle cells based on a value, similar to rowspan in a table)
Can I add multiple values at once inside group().reduce()?
Is there an easy way to invert the yAxis so 0 is at the top?
When clicking a row in the heatmap, it selects a column and vice-versa?
I'm not sure if this should be in the crossfilter group. If so please ignore my rambling. If someone knows how to keep the charts linked by grouping better, please let me know.
--Nico
Concerning Question 3:
DC.js heatmaps currently do not support custom order functions on axis but there is a pull request that has been merged into the developing branch and should be accessible to the public soon.
You could manually edit the dc.js file to set the sorting in heatmaps to a custom function. In the latest (2.0.0-beta10) version it is the following line:
rowValues.sort(d3.ascending);
and accordingly
colValues.sort(d3.ascending);
I would like to highlight a single value on an axis; similar to the way that stock charts display the live price on the axis.
You could use an annotation tool to show a textbox with the value and a color line tool if you also want to have vertical/horizontal line highlighting the value. However, both tools are only available with the Pro version, and these are two features that would be quite easy to achieve with custom drawing techniques at OnAfterDraw event.
Yeray Alonso
Steema Support Central