Published
Edited
Jul 7, 2020
1 fork
md`# Complexity Indexes 2`
file = FileAttachment("aggregates_final.csv")
dataset=parseLocalFile(file,',')
disney=dataset.filter(d => d.House === "Disney").filter(d => d.Category === "Animation")
disney_la = dataset.filter(d => d.House === "Disney").filter(d => d.Category === "Live Action")
disney_a_la = dataset.filter(d => d.House === "Disney").filter(d => d.Category === "Animation + Live Action")
indexes = [
{"Index": "Movie_len", "color": 0},
{"Index": "Avg_WordLen_Movie", "color": 1},
{"Index":"Avg_PhrLen_Movie", "color": 2},
{"Index":"Avg_WordLen_Phrase", "color": 3},
{"Index":"Num_Adjectives", "color": 4},
{"Index":"Num_Adverbs", "color": 5},
{"Index":"num_terms", "color":6},
{"Index":"cttr", "color":7},
{"Index":"coleman_liau_score", "color":8}
]
names_eng = {
return {
Movie_len: "Movie length",
Avg_WordLen_Movie: "Average word length per movie",
Avg_PhrLen_Movie: "Average phrase length per movie",
Avg_WordLen_Phrase: "Average word length per phrase",
Num_Adjectives: "Number of adjectives",
Num_Adverbs: "Number of adverbs",
num_terms: "Number of unique terms",
cttr: "Lexical diversity",
coleman_liau_score: "Coleman Liau complexity score"
}
}
names = {
return {
Movie_len: "Lunghezza film",
Avg_WordLen_Movie: "Lunghezza media delle parole per film",
Avg_PhrLen_Movie: "Lunghezza media delle frasi per film",
Avg_WordLen_Phrase: "Lunghezza media delle parole per frase",
Num_Adjectives: "Numero di aggettivi",
Num_Adverbs: "Numero di avverbi",
num_terms: "Numero di parole uniche",
cttr: "Diversità lessicale",
coleman_liau_score: "Indice di complessità Coleman Liau"
}
}
create_chart(indexes, disney, 'uno')
create_chart = (indexes, disney, label) => {
const data = indexes.map(d => ({
x: disney.map(f => f.Decade),
y: disney.map(f => f[d.Index]),
name: names[d.Index],
//opacity: 0.5,
line: {
shape: 'spline',
smoothing: 1.0,
color: color(d)
},
marker: {
color: color
},
mode: 'lines+markers'
}));
const cOptions = {
margin: {
l: 40,
t: 30,
r: 20,
b: 30,
pad: 5
},
width: actual_width/3,
height: actual_width/5,
yaxis: {
tickfont: {
size: 10
},
range: [0, 1],
hoverformat: '.2f'
}
};
// const layout = {
// title: `Complexity indexes`,
// width: width,
// height: (width / 3) * 2
// };
const layout = {
title: `${label}`,
showlegend: false,
paper_bgcolor: '#EDF5F6',
plot_bgcolor: '#EDF5F6',
...cOptions
};
const config = {
displayModeBar: false
}
const div = html`<div class='multiple'></div>`;
//const div = DOM.element('div');
Plotly.newPlot(div, data, layout, config);
return div;
}
html`<style>
div.multiples{
text-align: center;
display:flex;
margin:auto;
//rgin-right: 10%;
//margin-left:1%;
}
div.multiple {
margin:auto;
}
.legend {
margin: auto;
padding-left: 5px;
padding-right: 5px;
}
.legend div {
margin: auto;
}
</style>`
compl_line_chart = {
const div1 = create_chart(indexes, disney, 'Animation')
const div2 = create_chart(indexes, disney_la, 'Live action')
const div3 = create_chart(indexes, disney_a_la, 'Misto')
const div4 = html`<div class="legend justify-content-center col-8"></div>`;
div4.append(legend);
const wrapper = html`<div class="multiples justify-content-center"></div>`;
wrapper.append(div1);
wrapper.append(div2);
wrapper.append(div3);
const main_wrapper = DOM.element('div');
main_wrapper.append(wrapper);
main_wrapper.append(div4);
return main_wrapper;
}
color = {
const scale = d3.scaleOrdinal(d3.schemeCategory10);
return d => scale(d.Index);
}
md`# Appendice`
d3 = require('d3')
import {
parseLocalFile,
dataDescribe
} from "@rinziv/introduction-to-js-and-observable"
import { printTable } from '@uwdata/data-utilities'
Plotly = require("https://cdn.plot.ly/plotly-latest.min.js")
import { select, slider } from "@jashkenas/inputs"
actual_width = width*0.85
legend = swatches({
color: d3.scaleOrdinal(indexes.map(d => names[d['Index']]), d3.schemeCategory10)
})
import {swatches} from "@d3/color-legend"
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.
