Pack and unpack tabular dataLocation InputForeignObject exporting issueConvert observable code to normal JavascriptPersistent Select InputContinent SelectorInputs in gridGroupBy we deserve 🦇Matrix InputFetcher usageComments on notebooksData driven range slidersObservableHQ built in datasetsUtils UsageStylesFetcherUtils
Instant Data Visualizer
function visualize(data,params){
InjectDcCss;
tltp;
const columns = Object.keys(data[0])
.filter((c,i)=>{
const nested = d3.nest().key(d=>d).entries(data.map(d=>d[c]));
return nested.length<30
})
var view = html`${container(columns)}`
var cr = crossfilter(data);
var charts = [];
const dcConfigs = columns.map((d,i)=>{
return {
selector:'selector'+i,
group:d
}
})
dcConfigs.forEach(config=>{
var chart = dc.rowChart(view.querySelector('#'+config.selector))
charts.push(chart);
var dimension = cr.dimension(data => {
if(typeof data[config.group] =='boolean'){
if(data[config.group]){
return "true"
}else{
return "false";
}
}
return (data[config.group] && typeof data[config.group] !='object' && data[config.group].trim())||'N\\A'
})
var group = dimension.group().reduceCount(d=>1)
console.log(dimension)
chart
.width(width/3)
.height(450)
.elasticX(true)
.dimension(dimension)
.group(group)
chart.xAxis()
.ticks(5)
})
dc.renderAll() ;
return view
}
tltp = {
setInterval(function(d){
d3.selectAll('svg')
.select('g')
.selectAll('g')
.attr('title',function(d){
const result = d3.select(this).select('title').node();
return result&& result.innerHTML;
})
.nodes()
.forEach(function(d){(tippy(d))})
},1000)
d3.selectAll('h5').nodes().forEach(function(d){(tippy(d))});
return "tooltip"
}
function container(columns) {
return `
<h1>Stats</h1>
<div>
<div>
${columns
.map((c, i) => {
return `<div id="selector${i}" style="display:inline-block;width:30%">
<h5 title="${c}"> ${c}</h5>
</div>`;
})
.join('')}
</div>
</div>
<hr style="clear:both;">
`;
}
data = load(dataUrl)
reducedData = data.map(d=>{
var result = {};
columns.forEach(c=>{
result[c] = d[c];
})
return result;
})
columns = Object.keys(data[0])
.filter((c,i)=>{
const nested = d3.nest().key(d=>d).entries(data.map(d=>d[c]));
return nested.length<30
})
dcConfigs =
columns.map((d,i)=>{
return {
selector:'selector'+i,
group:d
}
})
testUrl = "https://beta.observablehq.com/@bumbeishvili/instant-data-visualizer?data=https://raw.githubusercontent.com/emeeks/data_visualization_survey/master/data/cleaned_survey_results_2018.tsv&skip=Experience,(Buckets)"
params = new URLSearchParams(html`<a href>`.search)
dataUrl = params.get("data")||"https://raw.githubusercontent.com/emeeks/data_visualization_survey/master/data/cleaned_survey_results_2018.tsv"
skip = params.get("skip")
tippy = require("https://unpkg.com/tippy.js@2.5.4/dist/tippy.all.min.js")
d3 = require('d3@v5')
dc = require('dc@3.1.9')
crossfilter = await require("crossfilter2@1.4.6")
InjectDcCss = {
var div = DOM.element('div');
div.innerHTML = '<link rel="stylesheet" type="text/css" href="https://unpkg.com/dc@3.0.0-beta.1/dc.css">'
return div;
}
windowCrossfilter = {
window.crossfilter = crossfilter;
return "window-crossfilter";
}
import {load} from "@bumbeishvili/fetcher"
function limit(string,number){
var points = '';
var diff = 0;
if(number < string.length){
points='...';
diff=3;
}
string = string.slice(0,number-diff);
return string + points;
}
inputUrl = document.referrer.split('?')[0]
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.
