Notebooks 2.0 is here.
idView = 'MX-DY6K5-K1YZ0-VLP6A' // Watershed
mapx.ask('view_add', {idView: idView}) // Watershed
view_attribute_table_url = mapx.ask('get_view_table_attribute_url', {idView: idView})
html`<a href="${view_attribute_table_url}" target="_blank">Attribute table for ${mxGetViewByiD(idView).data.title.en}</a>`
data = mapx.ask('get_view_table_attribute', {idView: idView})
o = mapx.ask('download_view_source_vector', {idView: idView})
basin_hectares = d3.rollup(data, v => d3.sum(v, d => d.hectares), d => d.mj_basin__);
basin_hectares_array = [...basin_hectares].sort( (a, b) => a[1] - b[1]);
html`<div id="chart" style="height: 300px;"></div>`
{
let chart_option = {
grid: {
left: '0%',
right: '0%',
top: '3%',
bottom: '0%',
containLabel: true
},
yAxis: {
data: basin_hectares_array.map(v => v[0])
},
xAxis: {
},
series: [{
data: basin_hectares_array.map(v => v[1]),
type: 'bar',
color: 'green'
}]
};
let chart = echarts.init(document.getElementById('chart'));
window.addEventListener('resize', function(event){
chart.resize();
});
chart.setOption(chart_option);
return chart;
}
d3 = require("d3-array")
echarts = require('https://unpkg.com/echarts@4.8.0/dist/echarts.js')
views = mapx.ask('get_views')
function mxGetViewByiD(id) {
let out = null;
views.forEach((view) => {
if (view.id === id) {
out = view;
return;
}
});
return out;
}
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.
