The avatar for @spattana
Sumant Pattanaik
Public
Edited
Nov 24, 2023
3 forks
7 stars
6
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: Introducing
WebGL Volume Rendering
Color from Wavelength, Correlated Temperature and HTML color pickerColor Solids: RGB and HSL2D 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…
Data Visualization using D3 and Observable Plot
Ray Tracing
Insert cell
md`# WebGL Volume Rendering`
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
ctx = myCanvas.getContext('2d')
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
MAX_SAMPLE_STEPS = Math.max(volume.width,volume.height,volume.nSlices)
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
transferFunctionData = DefaultTransferFunction //anotherTransferFunction //DefaultTransferFunction //
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
pseudoColorCode = `
vec3 color(float f)
{
float g=f*6.;
return vec3(
max(0.,(3.-abs(g-4.)-abs(g-5.))/2.),
max(0.,(4.-abs(g-2.)-abs(g-4.))/2.),
max(0.,(3.-abs(g-1.)-abs(g-2.))/2.)
);
}
`
Insert cell
Insert cell
Insert cell
Width
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
md`<b>3D Point Plot</b>`
Insert cell
Insert cell
scatterPlotRenderer = createRenderer()
Insert cell
Insert cell
scatterPlotCamera=createVolCamera()
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
{
const data = await FileAttachment("C60Large.vol").arrayBuffer();
return new Uint8Array(data);
}
Insert cell
Insert cell
requireScript(await FileAttachment("nifti-reader.js").url())
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
import {rangeSlider} from "@mootari/range-slider"
Insert cell
import {slider} from "@jashkenas/inputs"
Insert cell
import {radio} from "@jashkenas/inputs"
Insert cell
THREE = {
const THREE = (window.THREE =
await require("three@0.130.0/build/three.min.js"));
await require("three@0.130.0/examples/js/controls/OrbitControls.js").catch(
() => {}
);
return THREE;
}
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