Skip to content

Add a date_option (format string) parameter to the choropleth timeline slider #2003

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Oct 18, 2024
Merged

Add a date_option (format string) parameter to the choropleth timeline slider #2003

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
28 changes: 21 additions & 7 deletions folium/plugins/time_slider_choropleth.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,8 @@ class TimeSliderChoropleth(JSCSSMixin, Layer):
styledict: dict
A dictionary where the keys are the geojson feature ids and the values are
dicts of `{time: style_options_dict}`
date_options: str, default "ddd MMM DD YYYY"
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

later on it's called date_format, why not call it that here as well?

Copy link
Collaborator Author

@hansthen hansthen Oct 17, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

To be consistent with the other plugins. timestamped_geojson and timeline also use date_options. I would prefer date_format for the other plugins as well, but I don't think it is worth the effort.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

That makes sense 👍

A format string to render the currently active time in the control.
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

should we specify what formatting language is being used here? Like, what fields like MMM DD are available?

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If you feel strongly about it, I can add a link to the formatting library used. However, I don't think it is necessary. The time string formatting language is fairly intuitive (and fairly universal). Also, I would like the documentation to be consistent between the different plugins.

highlight: bool, default False
Whether to show a visual effect on mouse hover and click.
name : string, default None
Expand All @@ -44,6 +46,11 @@ class TimeSliderChoropleth(JSCSSMixin, Layer):
let styledict = {{ this.styledict|tojson }};
let current_timestamp = timestamps[{{ this.init_timestamp }}];

function formatDate(date) {
var newdate = new moment(date);
return newdate.format({{this.date_format|tojson}});
}

let slider_body = d3.select("body").insert("div", "div.folium-map")
.attr("id", "slider_{{ this.get_name() }}");
$("#slider_{{ this.get_name() }}").hide();
Expand All @@ -64,7 +71,7 @@ class TimeSliderChoropleth(JSCSSMixin, Layer):
.attr("step", "1")
.style('align', 'center');

let datestring = new Date(parseInt(current_timestamp)*1000).toDateString();
let datestring = formatDate(parseInt(current_timestamp)*1000);
d3.select("#slider_{{ this.get_name() }} > output").text(datestring);

let fill_map = function(){
Expand All @@ -84,7 +91,7 @@ class TimeSliderChoropleth(JSCSSMixin, Layer):

d3.select("#slider_{{ this.get_name() }} > input").on("input", function() {
current_timestamp = timestamps[this.value];
var datestring = new Date(parseInt(current_timestamp)*1000).toDateString();
let datestring = formatDate(parseInt(current_timestamp)*1000);
d3.select("#slider_{{ this.get_name() }} > output").text(datestring);
fill_map();
});
Expand Down Expand Up @@ -155,12 +162,19 @@ class TimeSliderChoropleth(JSCSSMixin, Layer):
"""
)

default_js = [("d3v4", "https://d3js.org/d3.v4.min.js")]
default_js = [
("d3v4", "https://d3js.org/d3.v4.min.js"),
(
"moment",
"https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js",
),
]

def __init__(
self,
data,
styledict,
date_options: str = "ddd MMM DD YYYY",
highlight: bool = False,
name=None,
overlay=True,
Expand All @@ -173,21 +187,21 @@ def __init__(
):
super().__init__(name=name, overlay=overlay, control=control, show=show)
self.data = GeoJson.process_data(GeoJson({}), data)
self.date_format = date_options
self.highlight = highlight

self.stroke_opacity = stroke_opacity
self.stroke_width = stroke_width
self.stroke_color = stroke_color

if not isinstance(styledict, dict):
raise ValueError(
f"styledict must be a dictionary, got {styledict!r}"
) # noqa
raise ValueError(f"styledict must be a dictionary, got {styledict!r}")

for val in styledict.values():
if not isinstance(val, dict):
raise ValueError(
f"Each item in styledict must be a dictionary, got {val!r}"
) # noqa
)

# Make set of timestamps.
timestamps_set = set()
Expand Down
Loading