:orphan:
:html_theme.sidebar_secondary.remove:
.. This document is auto-generated by the altair-gallery extension. Do not modify directly.
.. _gallery_one_dot_per_zipcode:
One Dot Per Zipcode
-----------------------
This example shows a geographical plot with one dot per zipcode.
.. altair-plot::
:remove-code:
import altair as alt
from vega_datasets import data
# Since the data is more than 5,000 rows we'll import it from a URL
source = data.zipcodes.url
alt.Chart(source).transform_calculate(
"leading digit", alt.expr.substring(alt.datum.zip_code, 0, 1)
).mark_circle(size=3).encode(
longitude='longitude:Q',
latitude='latitude:Q',
color='leading digit:N',
tooltip='zip_code:N'
).project(
type='albersUsa'
).properties(
width=650,
height=400
)
# No channel encoding options are specified in this chart
# so the code is the same as for the method-based syntax.
.. tab-set::
.. tab-item:: Method syntax
:sync: method
.. code:: python
import altair as alt
from vega_datasets import data
# Since the data is more than 5,000 rows we'll import it from a URL
source = data.zipcodes.url
alt.Chart(source).transform_calculate(
"leading digit", alt.expr.substring(alt.datum.zip_code, 0, 1)
).mark_circle(size=3).encode(
longitude='longitude:Q',
latitude='latitude:Q',
color='leading digit:N',
tooltip='zip_code:N'
).project(
type='albersUsa'
).properties(
width=650,
height=400
)
.. tab-item:: Attribute syntax
:sync: attribute
.. code:: python
import altair as alt
from vega_datasets import data
# Since the data is more than 5,000 rows we'll import it from a URL
source = data.zipcodes.url
alt.Chart(source).transform_calculate(
"leading digit", alt.expr.substring(alt.datum.zip_code, 0, 1)
).mark_circle(size=3).encode(
longitude='longitude:Q',
latitude='latitude:Q',
color='leading digit:N',
tooltip='zip_code:N'
).project(
type='albersUsa'
).properties(
width=650,
height=400
)
# No channel encoding options are specified in this chart
# so the code is the same as for the method-based syntax.