def update_output(value):
mapUpdate = []
setDate(value)
ctg = [
"{}+".format(mark, marks[i + 1]) for i, mark in enumerate(marks[:-1])
] + ["{}+".format(marks[-1])]
colorbar = dlx.categorical_colorbar(
categories=["0+", "5+", "10+", "15+", "20+", "25+", "30+", "35+"],
colorscale=colorscale,
width=300,
height=30,
position="bottomleft")
options = dict(hoverStyle=dict(weight=5, color='#666', dashArray=''),
zoomToBoundsOnClick=True)
geojson = dlx.geojson(data,
id="geojson",
defaultOptions=options,
style=get_style2)
info = html.Div(children=get_info(),
id="info",
className="info",
style={
"position": "absolute",
"top": "10px",
"right": "10px",
"z-index": "1000",
"background": "white"
})
mapUpdate = [dl.TileLayer(), geojson, colorbar, info]
return mapUpdate
def get_map_panel_zip_layout():
classes = [0, 100, 500, 1000, 2000, 5000, 10000, 20000]
colorscale = [
"#FFEDA0",
"#FED976",
"#FEB24C",
"#FD8D3C",
"#FC4E2A",
"#E31A1C",
"#BD0026",
"#800026",
]
style = {
"weight": 2,
"opacity": 1,
"color": "white",
"dashArray": 3,
"fillOpacity": 0.7,
}
ctg = ["{}+".format(cls, classes[i + 1]) for i, cls in enumerate(classes[:-1])] + [
"{}+".format(classes[-1])
]
colorbar = dlx.categorical_colorbar(
categories=ctg,
colorscale=colorscale,
width=400,
height=30,
position="bottomright",
)
ns = Namespace("dlx", "choropleth")
zip_geojson = dl.GeoJSON(
data=None, # url to geojson file
options=dict(style=ns("style")), # how to style each polygon
zoomToBounds=False, # when true, zooms to bounds when data changes (e.g. on load)
zoomToBoundsOnClick=True, # when true, zooms to bounds of feature (e.g. polygon) on click
hoverStyle=arrow_function(
dict(weight=5, color="#666", dashArray="")
), # style applied on hover
hideout=dict(
colorscale=colorscale, classes=classes, style=style, colorProp="Amount"
),
id="zips-geojson",
)
stl_center = [38.648, -90.253]
city_map_style = {"height": "100vh", "margin": "none", "display": "block"}
city_map = html.Div(
dl.Map(
children=[get_base_toner_tile_layer(), zip_geojson, colorbar],
zoom=12,
center=stl_center,
),
style=city_map_style,
id="map",
)
map_panel_style = {"width": "100%", "height": "100vh", "display": "block"}
map_panel = html.Div(id="map-panel", children=city_map, style=map_panel_style)
return map_panel
def get_colorbar():
colorbar = dlx.categorical_colorbar(
id="colorbar",
categories=bootstrap_stuff.fundraising_ctg,
colorscale=bootstrap_stuff.fundraising_colorscale,
width=400,
height=30,
position="bottomright",
)
return colorbar
def build_color_bar(classes,
color_scale,
width=550,
height=30,
position='bottomleft'):
ctg = [
'{:,}+'.format(cls, classes[i + 1])
for i, cls in enumerate(classes[:-1])
] + ['{:,}+'.format(classes[-1])]
color_bar = dlx.categorical_colorbar(categories=ctg,
colorscale=color_scale,
height=height,
position=position,
style=COLOR_BOX_STYLE_1,
width=width)
return color_bar
def build_risks_geojson_and_colorbar(opacity_level=0.75):
"""
This function creates the main attributes specific to the choropleth map.
It simply takes as input an opacity level, which defaults to 0.75, for coloring the departments.
It returns:
- a dl.GeoJSON object that allows to displays the departments' boundaries and respective risk score categories;
- a colorbar object that distinguishes, as shades of yellow and red, 8 categories of risk score from 0 to 1.
"""
# First step is to prepare the choropleth map by building the color scale corresponding to score risks
# To define 8 risk levels between 0 and 1, we need to choose 9 floats that will serve as borders
classes = np.linspace(0, 1, 9)
# We choose 8 shades of yellow and red to define our color scale
colorscale = ['#FFEDA0', '#FED976', '#FEB24C', '#FD8D3C', '#FC4E2A', '#E31A1C', '#BD0026', '#800026']
# We create a 'categories' object of the right format, then plug it into the Dash Leaflet
# function instantiating the colorbar
ctg = ["{}+".format(round(cls, 2)) for i, cls in enumerate(classes[:-1])]
colorbar = dlx.categorical_colorbar(categories=ctg, colorscale=colorscale, width=500, height=30,
position="bottomleft")
# We define the style of department delimitations on the map
# (opacity and color of borders, opacity of color backgrounds...)
scale_style = dict(weight=2, opacity=0.9, color='white', dashArray='3', fillOpacity=opacity_level)
# We finally instantiate the dl.GeoJSON object that will be attributed to the "Niveaux de Risque" map
geojson = dl.GeoJSON(data=departments,
id='geojson_risks',
zoomToBoundsOnClick=True,
hoverStyle=dict(weight=3,
color='#666',
dashArray=''),
hideout=dict(colorscale=colorscale,
classes=classes,
style=scale_style,
color_prop='score'),
options=dict(style=dlx.choropleth.style))
return geojson, colorbar
def get_colorbar(stretch_range, colormap):
"""Creates a colorbar component for a dash_leaflet.Map.
Args:
stretch_range: list of lower and upper limit for colorbar.
colormap: string of color palette (like "virdis", "greens", etc.)
Returns:
dash_leaflet.Colobar component.
"""
ctg = [
f'{cmap["value"]:.3f}+'
for cmap in get_colormap(stretch_range=stretch_range,
colormap=colormap,
num_values=N_COLORBAR_ROWS)
]
return dlx.categorical_colorbar(categories=ctg,
colorscale=colormap,
width=20,
height=100,
position="bottomright")
"https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500&display=swap"])
app.title = "Data visualization"
##options
quantiles = cases_per_city["cases"].quantile([0,.25,.5,.75, 0.9])
quantiles = [int(n) for n in quantiles.values]
classes = quantiles
colorscale = ['#FED976', '#FEB24C', '#FD8D3C', '#FC4E2A', '#800026']
style = dict(weight=2, opacity=1, color='white', dashArray='3', fillOpacity = 0.7)
# Create colorbar.
ctg = ["{}+".format(cls, classes[i + 1]) for i, cls in enumerate(classes[:-1])] + ["{}+".format(classes[-1])]
colorbar = dlx.categorical_colorbar(categories=ctg, colorscale=colorscale, width=300, height=30, position="bottomleft")
ns = Namespace("dlx", "choropleth")
### Define layouts
geojson = dl.GeoJSON(
data = json_data,
options=dict(style=ns("style")),
zoomToBoundsOnClick = False,
hoverStyle=arrow_function(dict(weight=2, color='#666', dashArray='', fillOpacity=0.2)), # style applied on hover
hideout=dict(colorscale=colorscale, classes=classes, style=style, colorProp = "cases"),
id = "geojson")
cont = dbc.Card(
# Utilized by the hover callback to display the building name.
def get_info(feature=None):
header = [html.H2("Building")]
if not feature:
return header + ["Hover over a building"]
return header + [html.B(feature["properties"]["name"]), html.Br()]
# Create colorbar.
ctg = ["{}+".format(mark, marks[i + 1])
for i, mark in enumerate(marks[:-1])] + ["{}+".format(marks[-1])]
colorbar = dlx.categorical_colorbar(
categories=["0+", "5+", "10+", "15+", "20+", "25+", "30+", "35+"],
colorscale=colorscale,
width=300,
height=30,
position="bottomleft")
# Create geojson.
options = dict(hoverStyle=dict(weight=5, color='#666', dashArray=''),
zoomToBoundsOnClick=True)
geojson = dlx.geojson(data,
id="geojson",
defaultOptions=options,
style=get_style)
# Create info control.
info = html.Div(children=get_info(),
id="info",
className="info",
style={
"position": "absolute",
color='black',
dashArray='3',
fillOpacity=0.1)
#def get_style_text(width: str = '30%', fontSize: int = 20):
# return dict(width = width, display='inline-block') - probably delete>
# Create color bar legend
marks = [20, 40, 60, 80]
colorscale = ['#EFF3FF', '#BDD7E7', '#6BAED6', '#3182BD', '#08519C']
ctg = ["{}+".format(mark, marks[i + 1])
for i, mark in enumerate(marks[:-1])] + ["{}+".format(marks[-1])]
color_bar = dlx.categorical_colorbar(categories=ctg,
colorscale=colorscale,
width=300,
height=30,
position="bottomleft",
className='legend')
# Parse river coords from rivers file
river_coords = [
river['geometry']['coordinates'] for river in rivers['features']
]
coords_list = []
# Switch lat/lon, and append river coords to coords_list
for coords in river_coords:
points = []
for point in coords:
rev_point = point[::-1]
points.append(rev_point)
coords_list.append(points)
marks = [-70, -50, -25, 0, 25, 50, 70]
colorScale = ["#2166ac", "#67a9cf", "#d1e5f0", "#f7f7f7", "#fddbc7", "#ef8a62", "#b2182b"]
options = dict(hoverStyle = dict(weight = 5, color = '#666', dashArray = ''), zoomToBoundsOnClick = False)
#################################################################################################################
#################################################################################################################
#Convert data to work with dash
#Convert data to geojson
geojson = dlx.geojson(data, id = "geojson", defaultOptions = options, style = get_style)
# Create colorbar.
ctg = ["{}".format(mark, marks[i + 1]) for i, mark in enumerate(marks[:-1])] + ["{}".format(marks[-1])]
colorbar = dlx.categorical_colorbar(categories = ctg,
colorscale = colorScale,
opacity = .6,
width = 300,
height = 30,
position = "bottomright")
#define option to show text
#################################################################################################################
#################################################################################################################
#specify css
external_stylesheets = ['assets/style.css']
#start dash application
app = dash.Dash(__name__,prevent_initial_callbacks = True, external_stylesheets = external_stylesheets)
colorscale = [
'#FFEDA0', '#FED976', '#FEB24C', '#FD8D3C', '#FC4E2A', '#E31A1C',
'#BD0026', '#800026'
]
style = dict(weight=2,
opacity=1,
color='white',
dashArray='3',
fillOpacity=0.7)
# Create colorbar.
ctg = [
"{}+".format(cls, classes[i + 1]) for i, cls in enumerate(classes[:-1])
] + ["{}+".format(classes[-1])]
nbd_colorbar = dlx.categorical_colorbar(id="outline_colorbar",
categories=ctg,
colorscale=colorscale,
width=300,
height=30,
position="bottomright")
with open('assets/us-states.json') as f:
us_states = json.loads(f.read())
# Create info control.
info = html.Div(children=get_info(),
id="info",
className="info",
style={
"position": "absolute",
"bottom": "80px",
"right": "10px",
"z-index": "1000"
})
except:
import utils
ANGLE_COLOR_MAP = utils.ANGLE_COLOR_MAP
## Define the legend
MARKS = [
"0° - 4°", "4° - 8°", "8° - 12°", "12° - 16°",
"16°+", "Crosswalk", "Blocked"
]
COLORSCALE = list(ANGLE_COLOR_MAP.values())[0:5] + ['yellow', 'red']
COLORBAR = dlx.categorical_colorbar(categories=MARKS,
colorscale=COLORSCALE,
width=520,
height=30,
position="bottomleft",
style={
'font-size': '12pt',
'background-color': 'lightgrey'
})
with open('app/brighton_addresses', 'r') as addr_file:
ADDRESS_LIST = [html.Option(value=addr) for addr in addr_file]
## start the app
app = dash.Dash(__name__, external_stylesheets=[
dbc.themes.BOOTSTRAP,
])
server = app.server
# TODO: style constants!
