The avatar for @bumbeishvili
David B.
Data viz engineer | twitter.com/dbumbeishvili
Published
Edited
Feb 28, 2019
1 fork
8 stars
Work Utils
Svg Shadow and GradientCurved Edges - Compact Vertical with height offset for mid pointCurved Edges - Compact VerticalGenerate and download QR codes in BatchOracle's sample hr data as JSONNetwork Data VisualizationDate.prototype.toLocaleStringLegend SnippetsSVG MarkersNetwork Chart, Multiple Links, with shader arrowsPolygon Over MapboxSVG extreme valuesRect & line intersectionCurved Edges Horizontal (d3 v3,v4,v5,v6)Area & Line chartDrag ScalingReading local JSON fileClient side hashingHorizontal collapsible d3.flextree (d3.v6)Vertical collapsible d3.flextree (d3.v6)Apply color palette to htmlRewind Geojson Onlinestroke-dasharray animationsForeignObject typical usageCanvas Data ViewerEstimations Hour ExtractorColor InterpolationsChart Template - minimal stylingd3.v5 Org Chart - last updated at Jun 2022Svg Drop Shadows PlaygroundCurved Edges Vertical (d3 v3,v4,v5,v6, v7)D3 TemplateVertical collapsible tree3D Pie Chart 😈HullsD3 Lasso selectionD3 PatternifierHello Plot.lyD3 often googledFile Size SimulationD3 Format & ParseD3JS - Boilerplates - Interactive partPulseNamed Colors
Inchlib
Crow's Foot notations generator
Also listed in…
Visualizations
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
{
inchlibDrawing;
const objectId = clusteredData.data.nodes[Object.keys(clusteredData.data.nodes)[0]].objects[0];
return inchlibObj.get_features_for_object(objectId);

}
Insert cell
Insert cell
{
return;
inchlibDrawing;
const nodeId = Object.keys(clusteredData.data.nodes)[0].replace('inchlibContainer#','');
inchlibObj.highlight_cluster(nodeId);
return nodeId;
}
Insert cell
Insert cell
{
return;
inchlibDrawing;
const nodeId = Object.keys(clusteredData.data.nodes)[0].replace('inchlibContainer#','');
inchlibObj.highlight_column_cluster(nodeId);
return nodeId;
}
Insert cell
Insert cell
inchlibObj ={
inchlibContainerHTML;
document.querySelector('#inchlibContainer').innnerHTML=''
window.inchlib="";

const obj = new inchlibLibrary({ //instantiate InCHlib
target: "inchlibContainer", //ID of a target HTML element
//metadata: true, //turn on the metadata
//count_column:true,
//column_metadata: true, ERROR//turn on the column metadata
max_height: 1600, //set maximum height of visualization in pixels
width: 700, //set width of visualization in pixels
heatmap_part_width:0.5,
//heatmap_colors: "Greens", //set color scale for clustered data
//metadata_colors: "Reds", //set color scale for metadata
// count_column_colors: 'Reds',
draw_row_ids:true,
//min_row_height:50,
//heatmap_font_color: 'green'
});
obj.add_color_scale("WhBk",
{"start": {"r":255, "g": 255, "b": 255},
"middle": {"r": 236, "g": 158, "b": 56},
"end": {"r": 0, "g": 0, "b": 0}
})
return obj;
}
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
clusteredData = {
return JSON.parse(JSON.stringify(dataObj[selectedData]))
}
Insert cell
dataObj = ({
exampleData,
dataSample,
dendrogramsData,
exampleMetaData,
missingData,
compressedData,
eraFragments
})
Insert cell
Insert cell
inchlibDrawing = {
inchlibContainerHTML;
window.inchlib=inchlibObj;
inchlibObj.events.row_onclick = function(object_ids, evt){
console.log('clicked ',object_ids,evt)
};
inchlibObj.events.row_onmouseout = function(object_ids, evt){
console.log('mouseout ',object_ids,evt)
};
inchlibObj.events.row_onmouseover = function(object_ids, evt){
console.log('mouseove ',object_ids,evt)
};
inchlibObj.read_data(clusteredData);
inchlibObj.draw()
}
Insert cell
Insert cell
Insert cell
Insert cell
inchlibLibrary = {
kinetic;
jquery;
await requireScript('https://gist.githubusercontent.com/bumbeishvili/cfd78d8250d0765826e813726bc5f9de/raw/be74559171d6436a50d0f001d0313a98a9b6b3fc/inchlib-1.2.0.min.js');
return window.InCHlib;
}
Insert cell
inchlibLibraryNew = {
kinetic;
jquery;
await requireScript('https://gist.githubusercontent.com/bumbeishvili/83c9fe7d26f53afcea94c24a180e28ad/raw/77c95626a956bd383ccec65ed3b2ba732cca7633/inchlib_dev.js');
return window.InCHlib;
}
Insert cell
Konva = require('konva@0.9.5');
Insert cell
kinetic = require('kinetic@v5.1.9')
Insert cell
jquery = require('jquery@2.1.0')
Insert cell
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