Problem in the change and extended of year range in Gapminder visualization

Community Help
1

Hi, I´m very , very new and basic fan of d3js

I only want to put my data (json) in the visualization of @mbostock The Wealth & Health of Nations

Problem I found is in changing the year of the data, this should be in format d-m-y an begin 01-03-2020 to 01-04-2021
I don´t find the way to do that.

Please help me.

2

That example currently uses a year number rather than a Date, but I’ve updated it to use dates instead. You should be able to accommodate your data by forking the notebook and editing the parseSeries cell to specify how to parse your dates. For example if your dates are represented as a string "2021-04-01", you could say:

function parseSeries(series) {
  return series.map(([date, value]) => [new Date(date), value]);
}

If you are using a different format that is not ISO 8601 such as "01-04-2021", then you probably should use d3.utcFormat to convert the string to a Date.

2 Likes
3

Thank you very much. I really apreciate your help.

I can be able to upload my json with string like this "2021-04-01"

No errors found.
Problem is that the animation (play button) star in 1800 to 2009, so my animation doesn´t visible. my data starts 2020-03-01 to 2021-04-18
I only see a static circle.

Thanks in advance.

4

You’ll need to edit the code in the viewof date cell:

viewof date = Scrubber(d3.utcMonths(Date.UTC(1800, 0, 1), Date.UTC(2010, 0, 1)), {format: d => d.getUTCFullYear(), loop: false})

Instead of d3.utcMonths(Date.UTC(1800, 0, 1), Date.UTC(2010, 0, 1)), you’ll need to pass it whatever frequency of dates you want for your data.

5

Hello @mbostock

I tried to integrate the modification below to this line: import {Scrubber} from “@mbostock/scrubber” Also, I tried to integrate the {Scrubber} function, and tried to do the change but I did´nt succes, but I know that my level is beginer, beginer.

I really aprecite your help but I need to read and practice to understand all that you are teachme.
Thanks again.