The avatar for @mattberger
Matthew Berger
Published unlisted
Edited
Oct 14, 2020
3
Insert cell
Insert cell
Insert cell
main_plot = {
let svg = d3.create('svg').attr('width', width).attr('height', full_size)
let g = svg.append('g').attr('transform', `translate(${pad},${pad})`)
// Diagonal plots: first create group elements from the nested country time series data structure (or stacked time series)
// * Assign a `transform` attribute for each group element that will appropriately position the plot
// append a rectangle to each group that will function as each plot's border -> useful for debugging
// nested data join: this will correspond to each type of energy, for each country
// * Path elements should be created from this data join - 1 path element for each line/area mark
// * You should use the .values Array of data produced by nesting as the sequence of data items for the mark
// axes and labels for diagonal plot
// Correlation plots: first perform data join on Array of country pairs
// * Create group elements for positioning the plots
// Create a background rectangle for each group element -> useful for debugging
// Nested data join
// * Here you will derive a new Array within the `data` call, given the country pairing.
// * The returned Array should have all of the information necessary for creating heatmap rectangles.
// create legend for energy
return svg.node()
}
Insert cell
viewof plot_vis = drawdom(main_plot,5)
Insert cell
plot_vis
Insert cell
Insert cell
line = d3.line()
Insert cell
Insert cell
area = d3.area()
Insert cell
Insert cell
Insert cell
country_domain = []
Insert cell
Insert cell
all_country_pairs = {}
Insert cell
Insert cell
energy_domain = []
Insert cell
Insert cell
year_ext = []
Insert cell
Insert cell
country_scale_x = d3.scaleBand()
Insert cell
Insert cell
country_scale_y = d3.scaleBand()
Insert cell
Insert cell
time_scale_x = d3.scaleTime()
Insert cell
Insert cell
amount_scale_y = d3.scaleLinear()
Insert cell
Insert cell
corr_x = d3.scaleBand()
Insert cell
Insert cell
corr_y = d3.scaleBand()
Insert cell
Insert cell
correlation_scale = (d) => {
return d3.hcl(0,0,0)
}
Insert cell
Insert cell
energy_colors = {}
Insert cell
Insert cell
full_size = 800
Insert cell
pad = 50
Insert cell
plot_width = full_size-2*pad
Insert cell
plot_height = full_size-2*pad
Insert cell
Insert cell
Insert cell
derive_correlation_data = (country_a,country_b) => {
let all_corrs = []
return all_corrs
}
Insert cell
Insert cell
Insert cell
country_time_series = d3.nest()
Insert cell
Insert cell
country_stacked_series = {}
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell

Purpose-built for displays of data

Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
Learn more