The avatar for @spattana
Sumant Pattanaik
Published
Edited
Mar 29, 2021
1 star
Data Visualization Using D3 and Ploty.js
Introduction to Observable and PlotlyJSUseful Javascript Array functions.Plotly.Js: Getting Started with Old FaithfulUseful D3 Functions for Data handlingPlotly Color UsageGeoVisualizationGapminder data in PlotlySample US Wind Data VizPlotlyJS GeoVisualizationHCL color modelHSV and HSL Color ModelsColor Blind SimulatorColorBlindLibD3: IntroducingWebGL Volume RenderingColor from Wavelength, Correlated Temperature and HTML color picker
Color Solids: RGB and HSL
2D Vector Field Visualization1D Dataviz in PlotlyStock Market Performance of Presidents Trump, Obama, W. Bush, Clinton, H.W. Bush, Reagan During their first term.SVG cheat sheetScales and AxesFetch Covid-19 data
Also listed in…
CAP 6737
Insert cell
md`# Color Solids: RGB and HSL`
Insert cell
Insert cell
Insert cell
maxDistances = [13, 50]
Insert cell
{
const drawCube = regl(colorCubeRenderable);

const refresh = (angles=[0,0]) => {
const views = [
computeViewMatrix(angles, dimensions[0].center, dimensions[0].radius),
computeViewMatrix(angles, dimensions[1].center, dimensions[1].radius),
];
const eyes = [
computeEye(angles, dimensions[0].center, dimensions[0].radius),
computeEye(angles, dimensions[1].center, dimensions[1].radius)
];
regl.clear({
color: [0,0,0,1],
depth: 1
});
drawCube({viewMatrix: views[+solidOption], eye: eyes[+solidOption]});
}
refresh();
cameraControl(myCanvas,refresh);
return `render loop`
}
Insert cell
Insert cell
Insert cell
d3.extent(colorPositions[1],d=>d[2])
Insert cell
getScDimensions({positions: colorPositions[1]})
Insert cell
colors = [
rgbcolors,
hslcolors.map(d=>Object.values(hsl2rgb(d)))
]
Insert cell
Insert cell
hslcolors = d3.cross(d3.range(0,360, 30), list, d3.range(0,1.1,.1)).filter(([h,s,l])=>((l>=0.5 && s <= 2*(1-l)))||(l<0.5 && s <= 2*l))
Insert cell
Insert cell
Insert cell
Insert cell
regl = createRegl({canvas: myCanvas})
Insert cell
canvasHeight = 500
Insert cell
canvasWidth = 900
Insert cell
Insert cell
colorPositions[1]
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
import {cube} from "@spattana/general-obj2sc"
Insert cell
import {getScDimensions} from "@spattana/obj-parser-obj2sc"
Insert cell
import {cameraControl, computeEye, computeViewMatrix, computePerspectiveMatrix} from "@spattana/skybox-from-cubemap-and-hemisphere-lighting"
Insert cell
import {slider, radio, checkbox, select} from "@jashkenas/inputs"
Insert cell
glMatrix = require('https://bundle.run/gl-matrix@3.3.0')
Insert cell
createRegl = require("regl")
Insert cell
d3 = require ("d3@v5","d3-array@2")
Insert cell

One platform to build and deploy the best data apps

Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.
Learn more