Public
Edited
Nov 29, 2023
md`# 📑 Highcharts' Practice`
md`## Line Charts`
line_chart={
const figure=html`<div id='line' style='width:600px; height:650px;'>`;
const a=randi(5,25),b=randi(8,48);
Highcharts.chart(figure, {
chart:{type:'line',backgroundColor:'whitesmoke'},
xAxis:{title:{text:'x'}},yAxis:{title:{text:'y'}},
title:{text:'a,b,n =>>> '+[a,b,n]},
credits:{enabled:false},legend:{enabled:false},
plotOptions:{series:{lineWidth:10}},
series:make_data(n,a,b)});
return figure;}
function randi(min,max) {
return Math.floor(Math.random()*(max-min+1))+min;};
function randcol(i) {
const r=randi(10+i,250),g=randi(10+i,250),b=randi(10+i,250);
return 'rgb('+r+','+g+','+b+')';};
function arr(k,a,b) {
const d=.1**3,n=Math.ceil(2*Math.PI/d);
return Array(n).fill(k).map((k,t)=>
[Math.cos(d*t+k*Math.PI/6)+Math.cos(a*d*t)/2+Math.sin((a+b)*d*t)/3,
Math.sin(d*t+k*Math.PI/6)+Math.sin(a*d*t)/2+Math.cos((a+b)*d*t)/3]);};
function make_data(k,a,b) {
var series=[];
for (var i=1; i<2*k+1; i++) {
series.push({name:i,color:randcol(i),data:arr(i,a,b)});};
return series}
db_customers=Object.entries(tr_customers).slice(2,8).map(
el=>({'name':el[0],'low':d3.median(el[1]),'high':d3.mean(el[1])}))
url='https://raw.githubusercontent.com/OlgaBelitskaya/'
.concat('machine_learning_engineer_nd009/master/')
.concat('Machine_Learning_Engineer_ND_P3/customers.csv')
customers=d3.csv(url,d3.autoType)
tr_customers=Object.assign(...Object.keys(customers[0])
.map(key=>({[key]:customers.map(o=>o[key])})));
$=require('https://code.jquery.com/jquery-3.5.1.js')
import_css=function(src) {
$('head').append(`<link rel='stylesheet' href='${src}'>`)}
import_css('https://unpkg.com/highcharts@6.1.1/css/highcharts.css')
import_js=function(src,module_name) {
/*if (!$('head').find(`script[src='${src}']`)) {
$('head').append(`<script src='${src}'></script>`);
}*/
return new Promise(function(resolve,reject) {
function waiting(){
if (typeof module_name=='undefined') resolve();
if (eval(module_name)) resolve(eval(module_name));
setTimeout(waiting,30);};
require(src).then(function() {waiting();})
.catch(function() {waiting();}); }); }
Highcharts=import_js('https://unpkg.com/highcharts@6.1.1/highcharts.js',
'window.Highcharts')
d3=require('d3@6')
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.
