Issue with Line plot

New To Observable
1

Apologies if this is an existing question. Been stuck on this for a couple of weeks.

I want to do a simple line graph of monthly London house prices over time (1995-2020).
But its either showing multiple line within the graph or it’s looking like a bar chart? Unsure on how to solve it

My notebook is attched.

Monthly Housing Prices in London

Any help will be much appreciated :slight_smile:

2

Could you please Publish your notebook (either listed or unlisted)? It looks like it is private at the moment.

3

It’s been published now thank you

4

I dug through the data and ultimately figured out that the problem is that every month has multiple data points, across a couple dozen areas in London. The messy plots you had before were a result of every point on the x-axis having multiple values.

I made a notebook documenting my exploration of the data, stream of conciousness style. The last chart in there is something closer to what I expect you want: Monthly Housing Prices in London / Michael Cooper / Observable.

1 Like
5

Thank you very much! Honeslty life-saver and the notes are helpful too! Will help with future visuals too.

6

To highlight the solution from @mythmon’s notebook, the quick fix is to specify the z channel when you have multiple series, e.g.:

Plot.plot({
  marks: [
    Plot.lineY(housing_in_london_monthly_variables, {
      x: "date",
      y: "average_price",
      z: "area"
    })
  ]
})

(I also dropped the sort, which isn’t hurting but doesn’t seem necessary since this dataset appears to already be sorted.)

If you want to plot the average price across the entire dataset, you can use the group transform to group by date and then compute the mean per group:

Plot.plot({
  marks: [
    Plot.lineY(
      housing_in_london_monthly_variables,
      Plot.groupX({ y: "mean" }, { x: "date", y: "average_price" })
    )
  ]
})

You can also do min/max envelope (or percentiles) using the group transform:

Plot.plot({
  marks: [
    Plot.areaY(
      housing_in_london_monthly_variables,
      Plot.groupX({ y1: "min", y2: "max" }, { x: "date", y: "average_price", fill: "#ccc" })
    ),
    Plot.lineY(
      housing_in_london_monthly_variables,
      Plot.groupX({ y: "mean" }, { x: "date", y: "average_price" })
    )
  ]
})
1 Like
7

I think this notebook should be published to all, it’s a great tutorial!

I’d suggest adding an option to switch the y axis from a linear to a log type. It can be relevant since we’re comparing money value across time and space. And it might be visually helpful by uncluttering the lower part of that very skewed distribution.

1 Like
8

Thanks for the feedback! I’ve incorporated the group transform and log scale options to the last two charts, and added a bit more context to the top of the notebook. With those changes, I’ve published the notebook.

2 Likes