JavaScript | Python | Data Visualization | Web Development | Geology | Space | Analytics | IoT |
Learn, Build Stuff, and Figure Things Out
well_log_converted_to_d3_friendly = convertWellJSONToObj(well_log_json,curve_names_array,UWI)
data = well_log_converted_to_d3_friendly
well_log_converted_to_d3_friendly
well_curve_config_template = [
{"multipleLines":"yes","curveNames":["GR"],
"curveColors":["black","pink"],
"fill":[
{"curveName":"GR","fill":"yes","fillDirection":"left","cutoffs":[0,ShaleSiltCutOff,SiltSandCutOff],"fillColors":["gray","orange","yellow"],"curve2":""},
{"curveName":"RESD","fill":"no","fillDirection":"left","cutoffs":[],"fillColors":[],"curve2":""}
],
"data":well_log_converted_to_d3_friendly,
"width":200,
"height":400,
"margin":({top: 20, right: 3, bottom: 30, left: 30}),
"depth_curve_name":"DEPTH"}]
function CurveBox(well_curve_config_template){
//// Getting the variables out of the input json template
well_curve_config_template = well_curve_config_template[0]
let multipleLines = well_curve_config_template["multipleLines"]
let curveNames = well_curve_config_template["curveNames"]
let curveColors = well_curve_config_template["curveColors"]
let curveName = curveNames[0]
let curveColor = curveColors[0]
////
let data = well_curve_config_template["data"]
let width = well_curve_config_template["width"]
let height = well_curve_config_template["height"]
let margin = well_curve_config_template["margin"]
let depth_curve_name = well_curve_config_template["depth_curve_name"]
//// Calculate depth min and max
let depth_min
if(!depth_min){depth_min = d3.min(data, function(d) { return +d[depth_curve_name];});}
let depth_max
if(!depth_max){depth_max = d3.max(data, function(d) { return +d[depth_curve_name];});}
// Calculate x domain extent for one or more than one curve
let mins = []
let maxes = []
for (let i = 0; i < curveNames.length; i++) {
let min_this = d3.min(data, function(d) { return +d[curveNames[i]]})
let max_this = d3.max(data, function(d) { return +d[curveNames[i]]})
mins.push(min_this)
maxes.push(max_this)
}
let min_all_curves = d3.min(mins)
let max_all_curves = d3.max(maxes)
//// Calculate Axis & Scales
let x = d3.scaleLinear().domain([min_all_curves,max_all_curves]).nice().range([margin.left, width - margin.right])
let y = d3.scaleLinear().domain([depth_max, depth_min]).nice().range([height - margin.bottom, margin.top])
let xAxis = g => g.attr("transform", `translate(0,${height - margin.bottom})`).call(d3.axisBottom(x).ticks(width / 80).tickSizeOuter(0))
let yAxis = g => g.attr("transform", `translate(${margin.left},0)`).call(d3.axisLeft(y)).call(g => g.select(".domain").remove())
/////// All variables created above now they are applied below
/////// , some in for loops for multiple curves and areas
/////// attempt at function for color used in .....
function colors(data_array){
let color_array = []
for (let i =0;i<data_array.length;i++){
if (data[i][curveName] > 0){
color_array.push =("blue")
}
else {
color_array.push("green")
}
}
return color_array
}
//// START to make the firt SVG
const svg = d3.create("svg")
svg.attr("class","first")
svg.attr("width",width)
.attr("height",height);
svg.append("g")
.call(xAxis);
svg.append("g")
.call(yAxis);
/////// throw away code for single curve to plot that will be deleted soon
///// was here:
//// Code that assumes multiple curves are plotted in same curvebox
if(multipleLines == "yes"){
for (let k = 0; k < curveNames.length; k++) {
///// code that creates a line for each Curve in order provided and applies
///// the color in the color array in order provided
let another_line = d3.line().x(d => x(d[curveNames[k]])).y(d => y(d[depth_curve_name]));
svg.append("path")
.datum(data)
.attr("fill", "none")
.attr("stroke", curveColors[k])
.attr("stroke-width", 1.5)
.attr("stroke-linejoin", "round")
.attr("stroke-linecap", "round")
.attr("d", another_line);
}
// define the area filled under the curve
let two_curve_fill_flag = "no"
for (let i = 0; i < well_curve_config_template["fill"].length; i++) {
////
if (well_curve_config_template["fill"][i]["fill"] == "yes"){
let number_colors = well_curve_config_template["fill"][i]["fillColors"].length
let curveName1 = well_curve_config_template["fill"][i]["curveName"]
let threshold = -99999999
let fillColor = "gray"
console.log("got inside fill,",curveName1,'number_colors',number_colors)
//////
for (let j = 0; j < number_colors; j++) {
console.log("got to start of J loop",j)
let area1 = d3.area()
if (number_colors != 0){
threshold = well_curve_config_template["fill"][i]["cutoffs"][j]
fillColor = well_curve_config_template["fill"][i]["fillColors"][j]
}
if(well_curve_config_template["fill"][i]["fillDirection"] == "left"){
let startFromLeft = well_curve_config_template["margin"]["left"]
area1
.x1(d => x(d[curveName1]))
.x0(d => startFromLeft)
.defined(d => ((d[curveName1])>threshold))
.y(d => y(d[depth_curve_name]));
}
if(well_curve_config_template["fill"][i]["fillDirection"] == "right"){
let startFromRight = well_curve_config_template["margin"]["right"]
area1
.x0(d => x(d[curveName1]))
.x1(d => startFromRight)
.defined(d => ((d[curveName1])<threshold))
.y(d => y(d[depth_curve_name]));
}
if(well_curve_config_template["fill"][i]["fillDirection"] == "between"){
let between2Curve = well_curve_config_template["fill"][i]["curve2"]
area1
.x1(d => x(d[curveName1]))
.x0(d => x(d[between2Curve]))
.defined(d => ((d[curveName1])>threshold))
.y(d => y(d[depth_curve_name]));
}
svg.append("path")
.datum(data)
.attr("class", "area")
.attr("d", area1)
.attr("stroke", "none")
.attr("fill",fillColor)
.attr("fill-opacity",0.8);
/////
console.log("got to end of J loop",j)
}
}
}
}
return svg.node();
}
plot1 = CurveBox(well_curve_config_template)
plot2332 = CurveBox([{"multipleLines":"yes","curveNames":["PHID","PHIN"],"curveColors":["purple","orange"], "fill":[
{"curveName":"PHID","fill":"yes","fillDirection":"between","cutoffs":[0],"fillColors":["lightblue"],"curve2":"PHIN"},
{"curveName":"PHID","fill":"no","fillDirection":"left","cutoffs":[],"fillColors":[],"curve2":""}
],"data":well_log_converted_to_d3_friendly,"width":200,"height":400,"margin":({top: 20, right: 3, bottom: 30, left: 30}),"depth_curve_name":"DEPTH"}])
well_curve_config_template_PHID_PHIN = [{"multipleLines":"yes","curveNames":["PHID","PHIN"],"curveColors":["blue","orange"], "fill":[
{"curveName":"PHIN","fill":"yes","fillDirection":"left","cutoffs":[],"fillColors":[],"curve2":""},
{"curveName":"PHID","fill":"yes","fillDirection":"left","cutoffs":[],"fillColors":[],"curve2":""}
],"data":well_log_converted_to_d3_friendly,"width":200,"height":400,"margin":({top: 20, right: 3, bottom: 30, left: 30}),"depth_curve_name":"DEPTH"}]
test_plot = CurveBox( [
{"multipleLines":"yes","curveNames":["GR"],
"curveColors":["black","pink"],
"fill":[
{"curveName":"PHIN","fill":"yes","fillDirection":"left","cutoffs":[],"fillColors":[],"curve2":""},
{"curveName":"PHID","fill":"yes","fillDirection":"left","cutoffs":[],"fillColors":[],"curve2":""}
],
"data":well_log_converted_to_d3_friendly,
"width":200,
"height":400,
"margin":({top: 20, right: 3, bottom: 30, left: 30}),
"depth_curve_name":"DEPTH"}])
plot_PHID_PHIN_test = CurveBox([{"multipleLines":"yes","curveNames":["PHID","PHIN"],"curveColors":["blue","orange"], "fill":[
{"curveName":"PHIN","fill":"yes","fillDirection":"left","cutoffs":[],"fillColors":[],"curve2":""},
{"curveName":"PHID","fill":"yes","fillDirection":"left","cutoffs":[],"fillColors":[],"curve2":""}
],"data":well_log_converted_to_d3_friendly,"width":200,"height":400,"margin":({top: 20, right: 3, bottom: 30, left: 30}),"depth_curve_name":"DEPTH"}])
scwidth = screen.width
/ 7
well_curve_config_CAL = [{"multipleLines":"yes","curveNames":["CAL"],"curveColors":["black"],"curveName":"GR","curveColor":"yellow", "fill":[
{"curveName":"CAL","fill":"yes","fillDirection":"left","cutoffs":[200,320],"fillColors":["lightblue","gray"],"curve2":""},
{"curveName":"PHID","fill":"no","fillDirection":"left","cutoffs":[],"fillColors":[],"curve2":""}
],"data":well_log_converted_to_d3_friendly,"width":scwidth,"height":400,"margin":({top: 20, right: 3, bottom: 30, left: 30}),"depth_curve_name":"DEPTH"}]
well_curve_config_PHIs = [{"multipleLines":"yes","curveNames":["PHID","PHIN"],"curveColors":["purple","orange"], "fill":[
{"curveName":"PHID","fill":"yes","fillDirection":"between","cutoffs":[0],"fillColors":["lightgreen"],"curve2":"PHIN"},
{"curveName":"PHID","fill":"no","fillDirection":"left","cutoffs":[],"fillColors":[],"curve2":""}
],"data":well_log_converted_to_d3_friendly,"width":scwidth,"height":400,"margin":({top: 20, right: 3, bottom: 30, left: 30}),"depth_curve_name":"DEPTH"}]
plot_GR = CurveBox(well_curve_config_GR)
plot_RESD = CurveBox(well_curve_config_RESD)
plot_CAL = CurveBox(well_curve_config_CAL)
plot_PHIs = CurveBox(well_curve_config_PHIs)
first_grid = createAllCellsAndEmbed(grid,Cell,well_curve_plots_array,well_curve_plots_ids,width_curve_plot_grid)
wellio = require("wellio")
Files.buffer(file)
fetched = await fetch(fileUrltoWellLog)
well_as_string = await fetched.text()
well_json_01_01_095_19W4 = wellio.las2json(well_as_string)
function fromJSONofWEllGetThingsForPlotting(jsonWell){
let curve_names = Object.keys(jsonWell["CURVES"])
let uwi = jsonWell["WELL INFORMATION BLOCK"]["UWI"]["DATA"]
let well_log_curves_reformatted_for_d3 = convertWellJSONToObj(jsonWell,curve_names,uwi)
return {"well_log_curves_reformatted_for_d3":well_log_curves_reformatted_for_d3,"curve_names":curve_names,"uwi":uwi}
}
three_things_2 = fromJSONofWEllGetThingsForPlotting(well_json_01_01_095_19W4)
well_curve_config_template_new_well_01_01_095_19W4 = [{"multipleLines":"yes","curveNames":["GR"],"curveColors":["pink"], "fill":[
{"curveName":"GR","fill":"yes","fillDirection":"left","cutoffs":[0,65,95,109],"fillColors":["lightgreen","green","red","pink"],"curve2":""},
{"curveName":"PHID","fill":"yes","fillDirection":"left","cutoffs":[],"fillColors":[],"curve2":""}
],
"curveUnits":["units","units"] ,"data":well_log_curves_reformatted_for_d3_2,"width":200,"height":400,"margin":({top: 20, right: 3, bottom: 30, left: 30}),"depth_curve_name":"DEPTH"}]
plot_GR_new = CurveBox(well_curve_config_template_new_well_01_01_095_19W4)
function CurveBox2(well_curve_config_template){
well_curve_config_template = well_curve_config_template[0]
let div_id = "well_holder"
if(well_curve_config_template["divID"]){div_id = well_curve_config_template["divID"]}
let multipleLines = well_curve_config_template["multipleLines"]
let curveNames = well_curve_config_template["curveNames"]
let curveColors = well_curve_config_template["curveColors"]
let curveName = curveNames[0]
let curveColor = curveColors[0]
let curveUnits = "";
if(well_curve_config_template["curveUnits"]){curveUnits = well_curve_config_template["curveUnits"]}
////
let data = well_curve_config_template["data"]
let width = well_curve_config_template["width"]
let height = well_curve_config_template["height"]
let margin = well_curve_config_template["margin"]
let depth_curve_name = well_curve_config_template["depth_curve_name"]
//// Calculate depth min and max
let depth_min
if(!depth_min){depth_min = d3.min(data, function(d) { return +d[depth_curve_name];});}
let depth_max
if(!depth_max){depth_max = d3.max(data, function(d) { return +d[depth_curve_name];});}
// Calculate x domain extent for one or more than one curve
let mins = []
let maxes = []
for (let i = 0; i < curveNames.length; i++) {
let min_this = d3.min(data, function(d) { return +d[curveNames[i]]})
let max_this = d3.max(data, function(d) { return +d[curveNames[i]]})
mins.push(min_this)
maxes.push(max_this)
}
let min_all_curves = d3.min(mins)
let max_all_curves = d3.max(maxes)
//// Calculate Axis & Scales
let x = d3.scaleLinear().domain([min_all_curves,max_all_curves]).nice().range([margin.left, width - margin.right])
let y = d3.scaleLinear().domain([depth_max, depth_min]).nice().range([height - margin.bottom, margin.top])
let xAxis = g => g.attr("transform", `translate(0,${height - margin.bottom})`).call(d3.axisBottom(x).ticks(width / 80).tickSizeOuter(0))
let yAxis = g => g.attr("transform", `translate(${margin.left},0)`).call(d3.axisLeft(y)).call(g => g.select(".domain").remove())
/////// All variables created above now they are applied below
/////// , some in for loops for multiple curves and areas
/////// attempt at function for color used in .....
function colors(data_array){
let color_array = []
for (let i =0;i<data_array.length;i++){
if (data[i][curveName] > 0){
color_array.push =("blue")
}
else {
color_array.push("green")
}
}
return color_array
}
const svg = d3.select("#"+div_id).append("svg")
svg.attr("class","first")
svg.attr("width",width)
.attr("height",height);
svg.append("g")
.call(xAxis);
svg.append("g")
.call(yAxis);
/////// throw away code for single curve to plot that will be deleted soon
///// was here:
//// Code that assumes multiple curves are plotted in same curvebox
if(multipleLines == "yes"){
for (let k = 0; k < curveNames.length; k++) {
///// code that creates a line for each Curve in order provided and applies
///// the color in the color array in order provided
let another_line = d3.line().x(d => x(d[curveNames[k]])).y(d => y(d[depth_curve_name]));
let curveUnit = "";
if (curveUnits[k]){curveUnit = curveUnits[k]}
svg.append("path")
.datum(data)
.attr("fill", "none")
.attr("stroke", curveColors[k])
.attr("stroke-width", 1.5)
.attr("stroke-linejoin", "round")
.attr("stroke-linecap", "round")
.attr("d", another_line);
svg.append("text")
.attr("x", (width / 2))
.attr("y", 0 + (margin.top -10 ))
.attr("text-anchor", "middle")
.style("font-size", "16px")
.style("text-decoration", "underline")
.text(curveUnit);
}
// define the area filled under the curve
let two_curve_fill_flag = "no"
for (let i = 0; i < well_curve_config_template["fill"].length; i++) {
////
if (well_curve_config_template["fill"][i]["fill"] == "yes"){
let number_colors = well_curve_config_template["fill"][i]["fillColors"].length
let curveName1 = well_curve_config_template["fill"][i]["curveName"]
let threshold = -99999999
let fillColor = "gray"
//////
for (let j = 0; j < number_colors; j++) {
console.log("got to start of J loop",j)
let area1 = d3.area()
if (number_colors != 0){
threshold = well_curve_config_template["fill"][i]["cutoffs"][j]
fillColor = well_curve_config_template["fill"][i]["fillColors"][j]
}
if(well_curve_config_template["fill"][i]["fillDirection"] == "left"){
let startFromLeft = well_curve_config_template["margin"]["left"]
area1
.x1(d => x(d[curveName1]))
.x0(d => startFromLeft)
.defined(d => ((d[curveName1])>threshold))
.y(d => y(d[depth_curve_name]));
}
if(well_curve_config_template["fill"][i]["fillDirection"] == "right"){
let startFromRight = well_curve_config_template["margin"]["right"]
area1
.x0(d => x(d[curveName1]))
.x1(d => startFromRight)
.defined(d => ((d[curveName1])<threshold))
.y(d => y(d[depth_curve_name]));
}
if(well_curve_config_template["fill"][i]["fillDirection"] == "between"){
let between2Curve = well_curve_config_template["fill"][i]["curve2"]
area1
.x1(d => x(d[curveName1]))
.x0(d => x(d[between2Curve]))
.defined(d => ((d[curveName1])>threshold))
.y(d => y(d[depth_curve_name]));
}
svg.append("path")
.datum(data)
.attr("class", "area")
.attr("d", area1)
.attr("stroke", "none")
.attr("fill",fillColor)
.attr("fill-opacity",0.8);
}
}
}
}
return svg.node();
}
div_idC = "well_holder3"
function fileToJSON(afile) {
return wellio.las2json(afile)
}
function turnFilesIntoTextIntoWellioJSON(files_array){
//// For each well log file, turn into text, then convert text into wellio style JSON using wellio.js
let logs_in_json = []
for (let i = 0; i < files_array.length; i++) {
logs_in_json.push(fileToJSON(files_array[i]))
}
return logs_in_json
}
function multipleLogPlot(divIDstring,templates){
const noSVG = d3.select("#"+divIDstring).selectAll("svg").remove()
//let logs_in_json = turnFilesIntoTextIntoWellioJSON([log])
let new_templates = []
for (let i = 0; i < templates.length; i++) {
//let three_things2 = fromJSONofWEllGetThingsForPlotting(logs_in_json[i])
// let new_data =three_things2["well_log_curves_reformatted_for_d3"]
// template[0]["data"] = new_data
templates[i]["divID"] = divIDstring
new_templates.push(templates[i])
CurveBox2(templates[i])
}
return templates
}
plot2332_b = [{"multipleLines":"yes","curveNames":["PHID","PHIN"],"curveColors":["purple","orange"], "fill":[
{"curveName":"PHID","fill":"yes","fillDirection":"between","cutoffs":[0],"fillColors":["lightblue"],"curve2":"PHIN"},
{"curveName":"PHID","fill":"no","fillDirection":"left","cutoffs":[],"fillColors":[],"curve2":""}
],"data":well_log_converted_to_d3_friendly,"width":200,"height":400,"margin":({top: 20, right: 3, bottom: 30, left: 30}),"depth_curve_name":"DEPTH"}]
result = multipleLogPlot(div_idC,[well_curve_config_template_new_well_01_01_095_19W4,well_curve_config_template2,plot2332_b])
html `<div id="well_holder" style="width:1000px;height:500px;"></>`
logs2 = [await FileAttachment("00-11-18-079-03W5-0.LAS").text(),await FileAttachment("00-06-02-076-15W4-0.LAS").text(), await FileAttachment("00-11-22-068-14W4-0.LAS").text(),await FileAttachment("00-16-13-071-01W4-0.LAS").text(), await FileAttachment("00-10-35-081-15W4-0.LAS").text(),await FileAttachment("00-06-26-075-21W4-0.LAS").text(),await FileAttachment("00-16-29-073-05W5-0.LAS").text()]
template2 = [{"multipleLines":"yes","curveNames":["GR"],"curveColors":["pink"], "fill":[{"curveName":"GR","fill":"yes","fillDirection":"left","cutoffs":[0,ShaleSiltCutOff,SiltSandCutOff],"fillColors":["gray","orange","yellow"],"curve2":""},
{"curveName":"RESD","fill":"no","fillDirection":"left","cutoffs":[],"fillColors":[],"curve2":""}],"data":[],
"curveUnits":["units2","other units"],
"width":60,"height":500,"margin":({top: 20, right: 3, bottom: 30, left: 30}),"depth_curve_name":"DEPTH","divID":"well_holder2"}]
function putArrayOfLogsIntoSection(logs,divIDstring,template){
const noSVG = d3.select("#"+divIDstring).selectAll("svg").remove()
let logs_in_json = turnFilesIntoTextIntoWellioJSON(logs)
let new_templates = []
for (let i = 0; i < logs_in_json.length; i++) {
let three_things2 = fromJSONofWEllGetThingsForPlotting(logs_in_json[i])
let new_data =three_things2["well_log_curves_reformatted_for_d3"]
template[0]["data"] = new_data
template[0]["divID"] = divIDstring
new_templates.push(template)
CurveBox2(template)
}
return template
}
result2 = putArrayOfLogsIntoSection(logs2,div_id2,template2)
div_id2 = "well_holder2"
html `<div id="well_holder2" style="width:1000px;height:500px;"></>`
md `### What if the data came in from elsewhere and was just the data to be plotted?`
data2 = [{
"api_no_14": "7376",
"curve_type": "RHOB",
"curve_values": [2.2322, 2.2513, 2.2548, 2.2445, 2.2223, 2.2047, 2.198, 2.2088, 2.2248, 2.2399, 2.251, 2.255, 2.2526,2.2322, 2.2513, 2.2548, 2.2445, 2.2223, 2.2047, 2.198, 2.2088, 2.2248, 2.2399, 2.251, 2.255, 2.2526,2.2322, 2.2513, 2.2548, 2.2445, 2.2223, 2.2047, 2.198, 2.2088, 2.2248, 2.2399, 2.251, 2.255, 2.2526,2.2322, 2.2513, 2.2548, 2.2445, 2.2223, 2.2047, 2.198, 2.2088, 2.2248, 2.2399, 2.251, 2.255, 2.2526,2.2322, 2.2513, 2.2548, 2.2445, 2.2223, 2.2047, 2.198, 2.2088, 2.2248, 2.2399, 2.251, 2.255, 2.2526,2.2322, 2.2513, 2.2548, 2.2445, 2.2223, 2.2047, 2.198, 2.2088, 2.2248, 2.2399, 2.251, 2.255, 2.2526,2.2322, 2.2513, 2.2548, 2.2445, 2.2223, 2.2047, 2.198, 2.2088, 2.2248, 2.2399, 2.251, 2.255, 2.2526],
"linecolor": "rgb(205,0,0,1)",
"logscale": false,
"max_depth": "1607.3",
"min_depth": "1598.3",
"null_value": -999.25,
"step": 0.1,
"units": "g/cc",
"x_max": "3",
"x_min": "2",
}]
function createDepthArray(min,max,step){
// Returns an array of depth values from min to max, including both, with each being different by step value
let depth = []
min = parseFloat(min)
max = parseFloat(max)
step = parseFloat(step)
let number_of_points = ((max-min)/step) +1
let temp_depth = min
for (let i = 0; i < number_of_points; i++) {
temp_depth = (min+(i*step)).toFixed(3)
depth.push(temp_depth)
}
return depth
}
depthArray = createDepthArray(data2[0]["min_depth"],data2[0]["max_depth"],data2[0]["step"])
depthArray.length
data2[0].curve_values.length
function takeInArraysAndGetObjectOfCurveDataForPlotting(arraysOfCurvesAndNames,CurveName){
// [{"depth":[],"curveData":[]}]
let curveObj = []
// make sure the curve data arrays are the same lenght, if not add null values
// put them into object
let lengthOfCurve0 = arraysOfCurvesAndNames[0]["depth"].length
for (let i = 0; i < lengthOfCurve0; i++) {
let newObj = {"depth":0,"RHOB":0}
newObj["depth"] = arraysOfCurvesAndNames[0]["depth"][i]
newObj["RHOB"] = arraysOfCurvesAndNames[0][CurveName][i]
curveObj.push(newObj)
}
return curveObj
}
reformattedForWelliovizCurveData = takeInArraysAndGetObjectOfCurveDataForPlotting([{"depth":depthArray,"RHOB":data2[0].curve_values}],"RHOB")
template3 = [{"multipleLines":"yes","curveNames":["RHOB"],"curveColors":["pink"], "fill":[{"curveName":"RHOB","fill":"yes","fillDirection":"left","cutoffs":[0.21,2.23,2.24],"fillColors":["gray","orange","yellow"],"curve2":""},
{"curveName":"RESD","fill":"no","fillDirection":"left","cutoffs":[],"fillColors":[],"curve2":""}],
"curveUnits":["units2","other units"],
"data":[],"width":260,"height":500,"margin":({top: 40, right: 10, bottom: 30, left: 60}),"depth_curve_name":"depth","divID":"well_holder3"}]
template3[0]["data"] = reformattedForWelliovizCurveData
template3
plot_RHOB_Test = CurveBox2(template3)
html `<div id="well_holder3" style="width:1000px;height:500px;"></>`
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.