diff --git a/altair/examples/cyperpunk_style_plot.py b/altair/examples/cyperpunk_style_plot.py new file mode 100644 index 000000000..d8a66e19f --- /dev/null +++ b/altair/examples/cyperpunk_style_plot.py @@ -0,0 +1,62 @@ +""" +Cyberpunk Style Plot +-------------------- +Inspired by `this chart `_ by `@d_haitz `_. This example shows how to layer line plots of varying size to create a neon glow effect. +""" +# category: case studies +import altair as alt +import pandas as pd + +df = pd.DataFrame({'A': [1, 3, 9, 5, 2, 1, 1], + 'B': [4, 5, 5, 7, 9, 8, 6]}) + +base = alt.Chart( + df.reset_index().melt(id_vars='index') +).encode( + x=alt.X('index:Q'), + y=alt.Y('value:Q'), + color=alt.Color('variable:N', + scale=alt.Scale(range=['#08F7FE', '#FE53BB'])) +) + +# draw lines and circles +chart = base.mark_circle(size=100, opacity=1) +chart += base.mark_line(size=2.5) + +# make it glow +n_lines = 10 +diff_linewidth = 1.25 +alpha_value = 0.3 / n_lines + +for n in range(n_lines): + line_width = 5 + (diff_linewidth * n) + chart += base.mark_line(opacity=alpha_value, + size=line_width) + +# fill area underneath lines +chart += base.mark_area(opacity=0.1) + +chart.configure_axis( + title=None, + ticks=False, + domain=False, + gridColor='#2A3459', + labelColor='#D3D3D3', + labelFontSize=14, + labelPadding=10, + labelSeparation=40 +).configure_legend( + title=None, + labelColor='#D3D3D3', + labelFontSize=14, + orient='top-right', + symbolType='stroke', + symbolStrokeWidth=3, + symbolSize=600 +).configure_view( + strokeWidth=0 +).properties( + background='#212946', + width=600, + height=350 +) diff --git a/altair/examples/faceted_bullet_chart.py b/altair/examples/faceted_bullet_chart.py new file mode 100644 index 000000000..7514eea1c --- /dev/null +++ b/altair/examples/faceted_bullet_chart.py @@ -0,0 +1,79 @@ +""" +Faceted Bullet Chart +-------------------- +This example shows how to facet and layer bar charts to create a bullet chart. +""" +# category: other charts +import altair as alt + +source = {'values': [ + {'title': 'Revenue', 'subtitle': 'US$, in thousands', + 'ranges': [150, 225, 300], 'measures': [220, 270], 'markers': [250] + }, + {'title': 'Profit', 'subtitle': '%', + 'ranges': [20, 25, 30], 'measures': [21, 23], 'markers': [26] + }, + {'title': 'Order Size', 'subtitle': 'US$, average', + 'ranges': [350, 500, 600], 'measures': [100, 320], 'markers': [550] + }, + {'title': 'New Customers', 'subtitle': 'count', + 'ranges': [1400, 2000, 2500], 'measures': [1000, 1650], 'markers': [2100] + }, + {'title': 'Satisfaction', 'subtitle': 'out of 5', + 'ranges': [3.5, 4.25, 5], 'measures': [3.2, 4.7], 'markers': [4.4] + } +]} + +base = alt.Chart(source) + +chart = base.mark_bar( +).encode( + x=alt.X('ranges[2]:Q', scale=alt.Scale(nice=False)), + color=alt.value('#eee') +) + +chart += base.mark_bar( +).encode( + x='ranges[1]:Q', + color=alt.value('#ddd') +) + +chart += base.mark_bar( +).encode( + x='ranges[0]:Q', + color=alt.value('#ccc') +) + +chart += base.mark_bar( +).encode( + x='measures[1]:Q', + color=alt.value('lightsteelblue'), + size=alt.value(10), + opacity=alt.value(1) +) + +chart += base.mark_bar( +).encode( + x='measures[0]:Q', + color=alt.value('steelblue'), + size=alt.value(10) +) + +chart += base.mark_tick( +).encode( + x='markers[0]:Q', + color=alt.value('black') +) + +chart.facet( + row=alt.Row('title:N', title=None, + header=alt.Header(labelAngle=0, labelAlign='left', title=None)) +).resolve_scale( + x='independent' +).configure_facet( + spacing=10 +).configure_axis( + title=None +).configure_tick( + thickness=2 +) diff --git a/altair/examples/weekly_weather_plot.py b/altair/examples/weekly_weather_plot.py new file mode 100644 index 000000000..2ac3afd06 --- /dev/null +++ b/altair/examples/weekly_weather_plot.py @@ -0,0 +1,96 @@ +""" +Weekly Weather Plot +------------------- +Inspired by this `Vega-Lite example `_ by `@melissatdiamond `_. This example shows how to layer bar charts to plot weekly weather data. +""" +# category: case studies +import altair as alt +from vega_datasets import data + +source = data.weather() + +base = alt.Chart(source).encode( + x=alt.X('id:O', + axis=alt.Axis( + domain=False, + ticks=False, + labels=False, + title=None, + titlePadding=25, + orient='top' + ) + ), +) + +chart = base.mark_bar( + style='box' +).encode( + y=alt.Y('record.low:Q', + scale=alt.Scale(domain=[10, 70]), + axis=alt.Axis(title='Temperature (F)') + ), + y2='record.high:Q', + size=alt.value(20), + color=alt.value('#ccc') +) + +chart += base.mark_bar( + style='box' +).encode( + y='normal.low:Q', + y2='normal.high:Q', + size=alt.value(20), + color=alt.value('#999') +) + +chart += base.mark_bar( + style='box' +).encode( + y='actual.low:Q', + y2='actual.high:Q', + size=alt.value(12), + color=alt.value('#000') +) + +chart += base.mark_bar( + style='box' +).encode( + y='forecast.low.low:Q', + y2='forecast.low.high:Q', + size=alt.value(12), + color=alt.value('#000') +) + +chart += base.mark_bar( + style='box' +).encode( + y='forecast.low.high:Q', + y2='forecast.high.high:Q', + size=alt.value(3), + color=alt.value('#000') +) + +chart += base.mark_bar( + style='box' +).encode( + y='forecast.high.low:Q', + y2='forecast.high.high:Q', + size=alt.value(12), + color=alt.value('#000') +) + +chart += base.mark_text( + align='center', + baseline='bottom', +).encode( + text='day:N', + y=alt.value(-5) +) + +chart.properties( + title=['Weekly Weather', 'Observations and Predictions'], + width=250, + height=200 +).configure_title( + frame='group' +)