Published
Edited
Jun 9, 2019
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
parallel_coordinates = {
var margin = {top: 30, right: 10, bottom: 10, left: 10};
var width = 960 - margin.left - margin.right;
var height = 400 - margin.top - margin.bottom;

var x = d3.scalePoint().range([0, width]).padding(1),
y = {};

var line = d3.line().x(function(d) { return d[0]; }).y(function(d) { return d[1]; }),
axis = d3.axisLeft(),
background,
foreground;
var dimensions = null;
const svg = d3.select(DOM.svg(width + margin.left + margin.right, height+margin.top + margin.bottom));
const svg_adjusted = svg.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");

// Extract the list of dimensions and create a scale for each.
x.domain(dimensions = d3.keys(sample_data[0]).filter(function(d) {
return d != "name" && (y[d] = d3.scaleLinear()
.domain(d3.extent(sample_data, function(p) { return +p[d]; }))
.range([height, 0]));
}));
console.log(sample_data[0])

// Add grey background lines for context.
background = svg_adjusted.append("g")
.attr("class", "background")
.selectAll("path")
.data(sample_data)
.enter().append("path")
.attr("d", path);

// Add blue foreground lines for focus.
foreground = svg_adjusted.append("g")
.attr("class", "foreground")
.selectAll("path")
.data(sample_data)
.enter().append("path")
.attr("d", path);

// Add a group element for each dimension.
const g = svg_adjusted.selectAll(".dimension")
.data(dimensions)
.enter().append("g")
.attr("class", "dimension")
.attr("transform", function(d) { return "translate(" + x(d) + ")"; });

// Add an axis and title.
g.append("g")
.attr("class", "axis")
.each(function(d) { d3.select(this).call(axis.scale(y[d])); })
.append("text")
.style("text-anchor", "middle")
.attr("y", -9)
.text(function(d) { return d; });

// Add and store a brush for each axis.
g.append("g")
.attr("class", "brush")
.each(function(d) {
d3.select(this).call(y[d].brush = d3.brushY()
.extent([[-10,0], [10,height]])
.on("brush", brush)
.on("end", brush)
)
})
.selectAll("rect")
.attr("x", -8)
.attr("width", 16);

// Returns the path for a given data point.
function path(d) {
return line(dimensions.map(function(p) { return [x(p), y[p](d[p])]; }));
}
console.log(dimensions.map(function(p) { return [x(p), y[p](sample_data[0][p])]; }))
// Handles a brush event, toggling the display of foreground lines.
function brush() {
var actives = [];
svg.selectAll(".brush")
.filter(function(d) {
y[d].brushSelectionValue = d3.brushSelection(this);
return d3.brushSelection(this);
})
.each(function(d) {
// Get extents of brush along each active selection axis (the Y axes)
actives.push({
dimension: d,
extent: d3.brushSelection(this).map(y[d].invert)
});
});

var selected = [];
// Update foreground to only display selected values
foreground.style("display", function(d) {
let isActive = actives.every(function(active) {
let result = active.extent[1] <= d[active.dimension] && d[active.dimension] <= active.extent[0];
return result;
});
// Only render rows that are active across all selectors
if(isActive) selected.push(d);
return (isActive) ? null : "none";
});

}
return svg.node();
}
Insert cell
vl.selectMulti();
Insert cell
sample_data = [sample_data_[0], sample_data_[1]]
Insert cell
sample_data_ = {
var data = {}

var unique_words = chart_data.map(d => d.word).filter(function(item, i, ar){ return ar.indexOf(item) === i; });
var unique_decades = chart_data.map(d => d.decade).filter(function(item, i, ar){ return ar.indexOf(item) === i; });
var i
for (i = 0; i < unique_words.length; i++) {
var word = unique_words[i]
data[word] = {}
}
for (i = 0; i < chart_data.length; i++) {
var data_val = chart_data[i]
if (data_val['decade'] < 1900) {
data[data_val['word']][data_val['decade']] = data_val['rank'] == "OON"? 7:data_val['rank']
}
}
var data_arr = []
for (var key in data) {
var dict = data[key]
dict['name'] = key
data_arr.push(dict)
console.log(key)
}
return data_arr
}
Insert cell
md`TODO: explanation of this chart`
Insert cell
Insert cell
chart_data_labels = {
var top_k_points = chart_data.filter(d => d.rank < (top_k_labels + 1));
var unique_words = chart_data.map(d => d.word).filter(function(item, i, ar){ return ar.indexOf(item) === i; });
var data_ = []
var i = 0
for (i = 0; i < unique_words.length; i++) {
var points = top_k_points.filter(d => d.word == unique_words[i]);
function comp(a,b) {
if (a.decade < b.decade) {
return -1
}
if (a.decade > b.decade) {
return 1
}
return 0}

var last_rank = -1
var last_decade = -1
var j = 0
for (j = 0; j < points.length; j++) {
var point = points[j]
// if the rank has changed
if (point['rank'] != last_rank) {
data_.push(point)
}
// if we didn't log it for the last decade
if (point['decade'] != last_decade + 10) {
data_.push(point)
}
last_decade = point['decade']
last_rank = point['rank']
}
}
return data_
}
Insert cell
chart_data_filtered = chart_data.filter(d => d.rank != "OON")
Insert cell
chart_data_infill = {
var chart_data_ = []
var i = 0
for (i = 0; i < chart_data.length; i++) {
var data_i = chart_data[i]
var data_less = {word: data_i['word'], decade: data_i['decade'] - 2, cosine: data_i['cosine'], rank: data_i['rank']}
var data_more = {word: data_i['word'], decade: data_i['decade'] + 2, cosine: data_i['cosine'], rank: data_i['rank']}
chart_data_.push(data_i)
chart_data_.push(data_less)
chart_data_.push(data_more)

}

return chart_data_
}
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
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

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