Merge branch 'main' of https://github.com/microsoft/Data-Science-For-Beginners
Jasmine
4 years ago
commit
7427e53abe
@ -1,3 +0,0 @@
|
||||
|
||||
## 2. Data Collection
|
||||
[Back To Introduction](README.md)
|
||||
@ -1,3 +0,0 @@
|
||||
|
||||
## 3. Data Privacy
|
||||
[Back To Introduction](README.md)
|
||||
@ -1,3 +0,0 @@
|
||||
|
||||
## 4. Algorithm Fairness
|
||||
[Back To Introduction](README.md)
|
||||
@ -1,3 +0,0 @@
|
||||
|
||||
## 5. Societal Consequences
|
||||
[Back To Introduction](README.md)
|
||||
@ -1,3 +0,0 @@
|
||||
|
||||
## 6. Summary & Resources
|
||||
[Back To Introduction](README.md)
|
||||
|
After Width: | Height: | Size: 73 KiB |
File diff suppressed because one or more lines are too long
@ -1,8 +1,11 @@
|
||||
# Title
|
||||
# Lines, Scatters and Bars
|
||||
|
||||
## Instructions
|
||||
|
||||
In this lesson, you worked with line charts, scatterplots, and bar charts to show interesting facts about this dataset. In this assignment, dig deeper into the dataset to discover a fact about a given type of bird. For example, create a notebook visualizing all the interesting data you can uncover about Snow Geese. Use the three plots mentioned above to tell a story in your notebook.
|
||||
|
||||
## Rubric
|
||||
|
||||
Exemplary | Adequate | Needs Improvement
|
||||
--- | --- | -- |
|
||||
A notebook is presented with good annotations, solid storytelling, and attractive graphs | The notebook is missing one of these elements | The notebook is missing two of these elements
|
||||
@ -1,8 +1,10 @@
|
||||
# Title
|
||||
# Apply your skills
|
||||
|
||||
## Instructions
|
||||
|
||||
So far, you have worked with the Minnesota birds dataset to discover information about bird quantities and population density. Practice your application of these techniques by trying a different dataset, perhaps sourced from [Kaggle]. Build a notebook to tell a story about this dataset, and make sure to use histograms when discussing it.
|
||||
## Rubric
|
||||
|
||||
Exemplary | Adequate | Needs Improvement
|
||||
--- | --- | -- |
|
||||
A notebook is presented with annotations about this dataset, including it source, and uses at least 5 histograms to discover facts about the data. | A notebook is presented with incomplete annotations or bugs | A notebook is presented without annotations and includes bugs
|
||||
@ -1,8 +1,11 @@
|
||||
# Title
|
||||
# Try it in Excel
|
||||
|
||||
## Instructions
|
||||
|
||||
Did you know you can create donut, pie and waffle charts in Excel? Using a dataset of your choice, create these three charts right in an Excel spreadsheet
|
||||
|
||||
## Rubric
|
||||
|
||||
Exemplary | Adequate | Needs Improvement
|
||||
--- | --- | -- |
|
||||
| Exemplary | Adequate | Needs Improvement |
|
||||
| ------------------------------------------------------- | ------------------------------------------------- | ------------------------------------------------------ |
|
||||
| An Excel spreadsheet is presented with all three charts | An Excel spreadsheet is presented with two charts | An Excel spreadsheet is presented with only one charts |
|
||||
@ -1,8 +1,11 @@
|
||||
# Title
|
||||
# Dive into the beehive
|
||||
|
||||
## Instructions
|
||||
|
||||
In this lesson you started looking at a dataset around bees and their honey production over a period of time that saw losses in the bee colony population overall. Dig deeper into this dataset and build a notebook that can tell the story of the health of the bee population, state by state and year by year. Do you discover anything interesting about this dataset?
|
||||
|
||||
## Rubric
|
||||
|
||||
Exemplary | Adequate | Needs Improvement
|
||||
--- | --- | -- |
|
||||
| Exemplary | Adequate | Needs Improvement |
|
||||
| ------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------- | ---------------------------------------- |
|
||||
| A notebook is presented with a story annotated with at least three different charts showing aspects of the dataset, state over state and year over year | The notebook lacks one of these elements | The notebook lacks two of these elements |
|
||||
|
After Width: | Height: | Size: 54 KiB |
|
After Width: | Height: | Size: 203 KiB |
|
After Width: | Height: | Size: 22 KiB |
|
After Width: | Height: | Size: 25 KiB |
|
After Width: | Height: | Size: 51 KiB |
|
After Width: | Height: | Size: 100 KiB |
|
After Width: | Height: | Size: 106 KiB |
File diff suppressed because one or more lines are too long
@ -1,19 +1,158 @@
|
||||
# Making Meaningful Visualizations
|
||||
|
||||
## Pre-Lecture Quiz
|
||||
> "If you torture the data long enough, it will confess to anything" -- [Ronald Coase](https://en.wikiquote.org/wiki/Ronald_Coase)
|
||||
|
||||
One of the basic skills of a data scientist is the ability to create a meaningful data visualization that helps answer questions you might have. Prior to visualizing your data, you need to ensure that it has been cleaned and prepared, as you did in prior lessons. After that, you can start deciding how best to present the data.
|
||||
|
||||
In this lesson, you will review:
|
||||
|
||||
1. How to choose the right chart type
|
||||
2. How to avoid deceptive charting
|
||||
3. How to work with color
|
||||
4. How to style your charts for readability
|
||||
5. How to build animated or 3D charting solutions
|
||||
6. How to build a creative visualization
|
||||
|
||||
[Pre-lecture quiz]()
|
||||
## Pre-Lecture Quiz
|
||||
|
||||
## 🚀 Challenge
|
||||
## Choose the right chart type
|
||||
|
||||
In previous lessons, you experimented with building all kinds of interesting data visualizations using Matplotlib and Seaborn for charting. In general, you can select the [right kind of chart](https://chartio.com/learn/charts/how-to-select-a-data-vizualization/) for the question you are asking using this table:
|
||||
|
||||
|
||||
| You need to: | You should use: |
|
||||
| -------------------------- | ------------------------------- |
|
||||
| Show data trends over time | Line |
|
||||
| Compare categories | Bar, Pie |
|
||||
| Compare totals | Pie, Stacked Bar |
|
||||
| Show relationships | Scatter, Line, Facet, Dual Line |
|
||||
| Show distributions | Scatter, Histogram, Box |
|
||||
| Show proportions | Pie, Donut, Waffle |
|
||||
|
||||
> ✅ Depending on the makeup of your data, you might need to convert it from text to numeric to get a given chart to support it.
|
||||
## Avoid deception
|
||||
|
||||
Even if a data scientist is careful to choose the right chart for the right data, there are plenty of ways that data can be displayed in a way to prove a point, often at the cost of undermining the data itself. There are many examples of deceptive charts and infographics!
|
||||
|
||||
[](https://www.youtube.com/Low28hx4wyk "Deceptive charts")
|
||||
|
||||
> 🎥 Click the image above for a conference talk about deceptive charts
|
||||
|
||||
This chart reverses the X axis to show the opposite of the truth, based on date:
|
||||
|
||||
|
||||
|
||||
[This chart](https://media.firstcoastnews.com/assets/WTLV/images/170ae16f-4643-438f-b689-50d66ca6a8d8/170ae16f-4643-438f-b689-50d66ca6a8d8_1140x641.jpg) is even more deceptive, as the eye is drawn to the right to conclude that, over time, COVID cases have declined in the various counties. In fact, if you look closely at the dates, you find that they have been rearranged to give that deceptive downward trend.
|
||||
|
||||
|
||||
|
||||
This notorious example uses color AND a flipped Y axis to deceive: instead of concluding that gun deaths spiked after the passage of gun-friendly legislation, in fact the eye is fooled to think that the opposite is true:
|
||||
|
||||
|
||||
|
||||
This strange chart shows how proportion can be manipulated, to hilarious effect:
|
||||
|
||||
|
||||
|
||||
Comparing the incomparable is yet another shady trick. There is a [wonderful web site](https://tylervigen.com/spurious-correlations) all about 'spurious correlations' displaying 'facts' correlating things like the divorce rate in Maine and the consumption of margarine. A Reddit group also collects the [ugly uses](https://www.reddit.com/r/dataisugly/top/?t=all) of data.
|
||||
|
||||
It's important to understand how easily the eye can be fooled by deceptive charts. Even if the data scientist's intention is good, the choice of a bad type of chart, such as a pie chart showing too many categories, can be deceptive.
|
||||
|
||||
## Color
|
||||
|
||||
You saw in the 'Florida gun violence' chart above how color can provide an additional layer of meaning to charts, especially ones not designed using libraries such as Matplotlib and Seaborn which come with various vetted color libraries and palettes. If you are making a chart by hand, do a little study of [color theory](https://colormatters.com/color-and-design/basic-color-theory)
|
||||
|
||||
> ✅ Be aware, when designing charts, that accessibility is an important aspect of visualization. Some of your users might be color blind - does your chart display well for users with visual impairments?
|
||||
|
||||
Be careful when choosing colors for your chart, as color can convey meaning you might not intend. The 'pink ladies' in the 'height' chart above convey a distinctly 'feminine' ascribed meaning that adds to the bizarreness of the chart itself.
|
||||
|
||||
While [color meaning](https://colormatters.com/color-symbolism/the-meanings-of-colors) might be different in different parts of the world, and tend to change in meaning according to their shade. Generally speaking, color meanings include:
|
||||
|
||||
| Color | Meaning |
|
||||
| ------ | ------------------- |
|
||||
| red | power |
|
||||
| blue | trust, loyalty |
|
||||
| yellow | happiness, caution |
|
||||
| green | ecology, luck, envy |
|
||||
| purple | happiness |
|
||||
| orange | vibrance |
|
||||
|
||||
If you are tasked with building a chart with custom colors, ensure that your charts are both accessible and the color you choose coincides with the meaning you are trying to convey.
|
||||
## Styling your charts for readability
|
||||
|
||||
Charts are not meaningful if they are not readable! Take a moment to consider styling the width and height of your chart to scale well with your data. If one variable (such as all 50 states) need to be displayed, show them vertically on the Y axis if possible so as to avoid a horizontally-scrolling chart.
|
||||
|
||||
Label your axes, provide a legend if necessary, and offer tooltips for better comprehension of data.
|
||||
|
||||
If your data is textual and verbose on the X-axis, you can angle the text for better readability. [Matplotlib](https://matplotlib.org/stable/tutorials/toolkits/mplot3d.html) offers 3d plotting, if you data supports it. Sophisticated data visualizations can be produced using `mpl_toolkits.mplot3d`.
|
||||
|
||||
|
||||
## Animation and 3D chart display
|
||||
|
||||
Some of the best data visualizations today are animated. Shirley Wu has amazing ones done with D3, such as '[film flowers](http://bl.ocks.org/sxywu/raw/d612c6c653fb8b4d7ff3d422be164a5d/)', where each flower is a visualization of a movie. Another example for the Guardian is 'bussed out', an interactive experience combining visualizations with Greensock and D3 plus a scrollytelling article format to show how NYC handles its homeless problem by busing people out of the city.
|
||||
|
||||
|
||||
|
||||
While this lesson is insufficient to go into depth to teach these powerful visualization libraries, try your hand at D3 in a Vue.js app using a library to display a visualization of the book "Dangerous Liaisons" as an animated social network.
|
||||
|
||||
> "Les Liaisons Dangereuses" is an epistolary novel, or a novel presented as a series of letters. Written in 1782 by Choderlos de Laclos, it tells the story of the vicious, morally-bankrupt social maneuvers of two dueling protagonists of the French aristocracy in the late 18th century, the Vicomte de Valmont and the Marquise de Merteuil. Both meet their demise in the end but not without inflicting a great deal of social damage. The novel unfolds as a series of letters written to various people in their circles, plotting for revenge or simply to make trouble. Create a visualization of these letters to discover the major kingpins of the narrative, visually.
|
||||
|
||||
You will complete a web app that will display an animated view of this social network. It uses a library that was built to create a [visual of a network](https://github.com/emiliorizzo/vue-d3-network) using Vue.js and D3. When the app is running, you can pull the nodes around on the screen to shuffle the data around.
|
||||
|
||||
|
||||
## Project: Build a chart to show a network using D3.js
|
||||
|
||||
> This lesson folder includes a `solution` folder where you can find the completed project, for your reference.
|
||||
|
||||
1. Follow the instructions in the README.md file in the starter folder's root. Make sure you have NPM and Node.js running on your machine before installing your project's dependencies.
|
||||
|
||||
2. Open the `starter/src` folder. You'll discover an `assets` folder where you can find a .json file with all the letters from the novel, numbered, with a 'to' and 'from' annotation.
|
||||
|
||||
3. Complete the code in `components/Nodes.vue` to enable the visualization. Look for the method called `createLinks()` and add the following nested loop.
|
||||
|
||||
Loop through the .json object to capture the 'to' and 'from' data for the letters and build up the `links` object so that the visualization library can consume it:
|
||||
|
||||
```javascript
|
||||
//loop through letters
|
||||
let f = 0;
|
||||
let t = 0;
|
||||
for (var i = 0; i < letters.length; i++) {
|
||||
for (var j = 0; j < characters.length; j++) {
|
||||
|
||||
if (characters[j] == letters[i].from) {
|
||||
f = j;
|
||||
}
|
||||
if (characters[j] == letters[i].to) {
|
||||
t = j;
|
||||
}
|
||||
}
|
||||
this.links.push({ sid: f, tid: t });
|
||||
}
|
||||
```
|
||||
Run your app from the terminal (npm run serve) and enjoy the visualization!
|
||||
## 🚀 Challenge
|
||||
|
||||
Take a tour of the internet to discover deceptive visualizations. How does the author fool the user, and is it intentional? Try correcting the visualizations to show how they should look.
|
||||
## Post-Lecture Quiz
|
||||
|
||||
[Post-lecture quiz]()
|
||||
|
||||
## Review & Self Study
|
||||
|
||||
Here are some articles to read about deceptive data visualization:
|
||||
|
||||
https://gizmodo.com/how-to-lie-with-data-visualization-1563576606
|
||||
|
||||
http://ixd.prattsi.org/2017/12/visual-lies-usability-in-deceptive-data-visualizations/
|
||||
|
||||
Take a look at these interest visualizations for historical assets and artifacts:
|
||||
|
||||
https://handbook.pubpub.org/
|
||||
|
||||
Look through this article on how animation can enhance your visualizations
|
||||
|
||||
https://medium.com/@EvanSinar/use-animation-to-supercharge-data-visualization-cd905a882ad4
|
||||
## Assignment
|
||||
|
||||
[Assignment Title](assignment.md)
|
||||
[Build your own custom vis](assignment.md)
|
||||
|
||||
@ -1,8 +1,10 @@
|
||||
# Title
|
||||
# Build your own custom vis
|
||||
|
||||
## Instructions
|
||||
|
||||
Using the code sample in this project to create a social network, mock up data of your own social interactions. You could map your usage of social media or make a diagram of your family members. Create an interesting web app that shows a unique visualization of a social network.
|
||||
## Rubric
|
||||
|
||||
Exemplary | Adequate | Needs Improvement
|
||||
--- | --- | -- |
|
||||
A GitHub repo is presented with code that runs properly (try deploying it as a static web app) and has an annotated README explaining the project | The repo does not run properly or is not documented well | The repo does not run properly and is not documented well
|
||||
|
After Width: | Height: | Size: 88 KiB |
|
After Width: | Height: | Size: 440 KiB |
|
After Width: | Height: | Size: 83 KiB |
|
After Width: | Height: | Size: 44 KiB |
|
After Width: | Height: | Size: 126 KiB |
|
After Width: | Height: | Size: 404 KiB |
|
After Width: | Height: | Size: 252 KiB |
|
After Width: | Height: | Size: 273 KiB |
@ -0,0 +1,23 @@
|
||||
.DS_Store
|
||||
node_modules
|
||||
/dist
|
||||
|
||||
|
||||
# local env files
|
||||
.env.local
|
||||
.env.*.local
|
||||
|
||||
# Log files
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
pnpm-debug.log*
|
||||
|
||||
# Editor directories and files
|
||||
.idea
|
||||
.vscode
|
||||
*.suo
|
||||
*.ntvs*
|
||||
*.njsproj
|
||||
*.sln
|
||||
*.sw?
|
||||
@ -0,0 +1,26 @@
|
||||
# Dangerous Liaisons data visualization project
|
||||
|
||||
To get started, you need to ensure that you have NPM and Node running on your machine. Install the dependencies (npm install) and then run the project locally (npm run serve):
|
||||
|
||||
## Project setup
|
||||
```
|
||||
npm install
|
||||
```
|
||||
|
||||
### Compiles and hot-reloads for development
|
||||
```
|
||||
npm run serve
|
||||
```
|
||||
|
||||
### Compiles and minifies for production
|
||||
```
|
||||
npm run build
|
||||
```
|
||||
|
||||
### Lints and fixes files
|
||||
```
|
||||
npm run lint
|
||||
```
|
||||
|
||||
### Customize configuration
|
||||
See [Configuration Reference](https://cli.vuejs.org/config/).
|
||||
@ -0,0 +1,5 @@
|
||||
module.exports = {
|
||||
presets: [
|
||||
'@vue/cli-plugin-babel/preset'
|
||||
]
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,43 @@
|
||||
{
|
||||
"name": "liaisons",
|
||||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"serve": "vue-cli-service serve",
|
||||
"build": "vue-cli-service build",
|
||||
"lint": "vue-cli-service lint"
|
||||
},
|
||||
"dependencies": {
|
||||
"core-js": "^3.6.5",
|
||||
"vue": "^2.6.11",
|
||||
"vue-d3-network": "0.1.28"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@vue/cli-plugin-babel": "~4.5.0",
|
||||
"@vue/cli-plugin-eslint": "~4.5.0",
|
||||
"@vue/cli-service": "~4.5.0",
|
||||
"babel-eslint": "^10.1.0",
|
||||
"eslint": "^6.7.2",
|
||||
"eslint-plugin-vue": "^6.2.2",
|
||||
"vue-template-compiler": "^2.6.11"
|
||||
},
|
||||
"eslintConfig": {
|
||||
"root": true,
|
||||
"env": {
|
||||
"node": true
|
||||
},
|
||||
"extends": [
|
||||
"plugin:vue/essential",
|
||||
"eslint:recommended"
|
||||
],
|
||||
"parserOptions": {
|
||||
"parser": "babel-eslint"
|
||||
},
|
||||
"rules": {}
|
||||
},
|
||||
"browserslist": [
|
||||
"> 1%",
|
||||
"last 2 versions",
|
||||
"not dead"
|
||||
]
|
||||
}
|
||||
|
After Width: | Height: | Size: 6.5 KiB |
@ -0,0 +1,20 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
|
||||
<link rel="icon" href="<%= BASE_URL %>favicon.ico" />
|
||||
<title>Les Liaisons Dangereuses: Visualization</title>
|
||||
</head>
|
||||
<body>
|
||||
<noscript>
|
||||
<strong
|
||||
>We're sorry but this site doesn't work properly without JavaScript
|
||||
enabled. Please enable it to continue.</strong
|
||||
>
|
||||
</noscript>
|
||||
<div id="app"></div>
|
||||
<!-- built files will be auto injected -->
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,17 @@
|
||||
<template>
|
||||
<div id="app">
|
||||
<Nodes />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Nodes from "./components/Nodes";
|
||||
|
||||
export default {
|
||||
name: "App",
|
||||
components: {
|
||||
Nodes,
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,193 @@
|
||||
<template>
|
||||
<div class="hello">
|
||||
<d3-network :net-nodes="nodes" :net-links="links" :options="options" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import D3Network from "vue-d3-network";
|
||||
import letters from "../assets/letters.json";
|
||||
|
||||
export default {
|
||||
name: "Nodes",
|
||||
components: {
|
||||
D3Network,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
nodes: [],
|
||||
links: [
|
||||
/*{ sid: 1, tid: 2 },
|
||||
*/
|
||||
],
|
||||
nodeSize: 10,
|
||||
canvas: false,
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
createLinks(characters) {
|
||||
//loop through letters
|
||||
let f = 0;
|
||||
let t = 0;
|
||||
for (var i = 0; i < letters.length; i++) {
|
||||
for (var j = 0; j < characters.length; j++) {
|
||||
|
||||
if (characters[j] == letters[i].from) {
|
||||
f = j;
|
||||
}
|
||||
if (characters[j] == letters[i].to) {
|
||||
t = j;
|
||||
}
|
||||
}
|
||||
this.links.push({ sid: f, tid: t });
|
||||
}
|
||||
|
||||
},
|
||||
getCount(name) {
|
||||
var count = 0;
|
||||
for (var i = 0; i < letters.length; i++) {
|
||||
if (letters[i].to === name) {
|
||||
count++;
|
||||
}
|
||||
}
|
||||
return count;
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
options() {
|
||||
return {
|
||||
force: 3000,
|
||||
size: { w: 600, h: 600 },
|
||||
offset: {
|
||||
x: 0,
|
||||
y: 0,
|
||||
},
|
||||
nodeLabels: true,
|
||||
linkLabels: true,
|
||||
canvas: this.canvas,
|
||||
};
|
||||
},
|
||||
},
|
||||
|
||||
created() {
|
||||
let characters = [
|
||||
"Chevalier Danceny",
|
||||
"Marquise de Merteuil",
|
||||
"Cécile Volanges",
|
||||
"Présidente de Tourvel",
|
||||
"Azolan, chasseur",
|
||||
"Madame de Rosemonde",
|
||||
"Madame de Volanges",
|
||||
"Vicomte de Valmont",
|
||||
"Père Anselme",
|
||||
"...",
|
||||
"M. Bertrand",
|
||||
"Anonyme",
|
||||
"Sophie Carnay",
|
||||
"Maréchale de ***",
|
||||
"Le Comte de Gercourt",
|
||||
];
|
||||
|
||||
this.createLinks(characters);
|
||||
|
||||
for (var j = 0; j < characters.length; j++) {
|
||||
this.nodes.push({
|
||||
id: j,
|
||||
name: characters[j],
|
||||
_size: this.getCount(characters[j]) + 20,
|
||||
_color: "#" + Math.floor(Math.random() * 16777215).toString(16),
|
||||
});
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
@import url("https://fonts.googleapis.com/css?family=PT+Sans");
|
||||
canvas {
|
||||
left: 0;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
.net {
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
}
|
||||
.node {
|
||||
-webkit-transition: fill 0.5s ease;
|
||||
fill: #dcfaf3;
|
||||
transition: fill 0.5s ease;
|
||||
}
|
||||
.node.selected {
|
||||
stroke: #caa455;
|
||||
}
|
||||
.node.pinned {
|
||||
stroke: rgba(106, 37, 185, 0.6);
|
||||
}
|
||||
.link {
|
||||
stroke: rgba(18, 120, 98, 0.3);
|
||||
}
|
||||
.link,
|
||||
.node {
|
||||
stroke-linecap: round;
|
||||
}
|
||||
.link:hover,
|
||||
.node:hover {
|
||||
stroke: rgba(250, 197, 65, 0.6);
|
||||
stroke-width: 5px;
|
||||
}
|
||||
.link.selected {
|
||||
stroke: rgba(34, 30, 20, 0.6);
|
||||
}
|
||||
.curve {
|
||||
fill: none;
|
||||
}
|
||||
.link-label,
|
||||
.node-label {
|
||||
fill: black;
|
||||
}
|
||||
.link-label {
|
||||
-webkit-transform: translateY(-0.5em);
|
||||
text-anchor: middle;
|
||||
transform: translateY(-0.5em);
|
||||
}
|
||||
|
||||
body {
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
body,
|
||||
html {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
body {
|
||||
background-color: #fff;
|
||||
font-family: "PT Sans";
|
||||
}
|
||||
|
||||
#app {
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
max-width: 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.links {
|
||||
list-style: none;
|
||||
margin: 1em 5em 0 0;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
#app {
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
text-align: center;
|
||||
user-select: none;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,8 @@
|
||||
import Vue from "vue";
|
||||
import App from "./App.vue";
|
||||
|
||||
Vue.config.productionTip = false;
|
||||
|
||||
new Vue({
|
||||
render: h => h(App)
|
||||
}).$mount("#app");
|
||||
@ -0,0 +1,23 @@
|
||||
.DS_Store
|
||||
node_modules
|
||||
/dist
|
||||
|
||||
|
||||
# local env files
|
||||
.env.local
|
||||
.env.*.local
|
||||
|
||||
# Log files
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
pnpm-debug.log*
|
||||
|
||||
# Editor directories and files
|
||||
.idea
|
||||
.vscode
|
||||
*.suo
|
||||
*.ntvs*
|
||||
*.njsproj
|
||||
*.sln
|
||||
*.sw?
|
||||
@ -0,0 +1,26 @@
|
||||
# Dangerous Liaisons data visualization project
|
||||
|
||||
To get started, you need to ensure that you have NPM and Node running on your machine. Install the dependencies (npm install) and then run the project locally (npm run serve):
|
||||
|
||||
## Project setup
|
||||
```
|
||||
npm install
|
||||
```
|
||||
|
||||
### Compiles and hot-reloads for development
|
||||
```
|
||||
npm run serve
|
||||
```
|
||||
|
||||
### Compiles and minifies for production
|
||||
```
|
||||
npm run build
|
||||
```
|
||||
|
||||
### Lints and fixes files
|
||||
```
|
||||
npm run lint
|
||||
```
|
||||
|
||||
### Customize configuration
|
||||
See [Configuration Reference](https://cli.vuejs.org/config/).
|
||||
@ -0,0 +1,5 @@
|
||||
module.exports = {
|
||||
presets: [
|
||||
'@vue/cli-plugin-babel/preset'
|
||||
]
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,43 @@
|
||||
{
|
||||
"name": "liaisons",
|
||||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"serve": "vue-cli-service serve",
|
||||
"build": "vue-cli-service build",
|
||||
"lint": "vue-cli-service lint"
|
||||
},
|
||||
"dependencies": {
|
||||
"core-js": "^3.6.5",
|
||||
"vue": "^2.6.11",
|
||||
"vue-d3-network": "0.1.28"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@vue/cli-plugin-babel": "~4.5.0",
|
||||
"@vue/cli-plugin-eslint": "~4.5.0",
|
||||
"@vue/cli-service": "~4.5.0",
|
||||
"babel-eslint": "^10.1.0",
|
||||
"eslint": "^6.7.2",
|
||||
"eslint-plugin-vue": "^6.2.2",
|
||||
"vue-template-compiler": "^2.6.11"
|
||||
},
|
||||
"eslintConfig": {
|
||||
"root": true,
|
||||
"env": {
|
||||
"node": true
|
||||
},
|
||||
"extends": [
|
||||
"plugin:vue/essential",
|
||||
"eslint:recommended"
|
||||
],
|
||||
"parserOptions": {
|
||||
"parser": "babel-eslint"
|
||||
},
|
||||
"rules": {}
|
||||
},
|
||||
"browserslist": [
|
||||
"> 1%",
|
||||
"last 2 versions",
|
||||
"not dead"
|
||||
]
|
||||
}
|
||||
|
After Width: | Height: | Size: 6.5 KiB |
@ -0,0 +1,20 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
|
||||
<link rel="icon" href="<%= BASE_URL %>favicon.ico" />
|
||||
<title>Les Liaisons Dangereuses: Visualization</title>
|
||||
</head>
|
||||
<body>
|
||||
<noscript>
|
||||
<strong
|
||||
>We're sorry but this site doesn't work properly without JavaScript
|
||||
enabled. Please enable it to continue.</strong
|
||||
>
|
||||
</noscript>
|
||||
<div id="app"></div>
|
||||
<!-- built files will be auto injected -->
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,17 @@
|
||||
<template>
|
||||
<div id="app">
|
||||
<Nodes />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Nodes from "./components/Nodes";
|
||||
|
||||
export default {
|
||||
name: "App",
|
||||
components: {
|
||||
Nodes,
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,178 @@
|
||||
<template>
|
||||
<div class="hello">
|
||||
<d3-network :net-nodes="nodes" :net-links="links" :options="options" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import D3Network from "vue-d3-network";
|
||||
import letters from "../assets/letters.json";
|
||||
|
||||
export default {
|
||||
name: "Nodes",
|
||||
components: {
|
||||
D3Network,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
nodes: [],
|
||||
links: [
|
||||
/*{ sid: 1, tid: 2 },
|
||||
*/
|
||||
],
|
||||
nodeSize: 10,
|
||||
canvas: false,
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
createLinks(characters) {
|
||||
//complete this code
|
||||
},
|
||||
getCount(name) {
|
||||
var count = 0;
|
||||
for (var i = 0; i < letters.length; i++) {
|
||||
if (letters[i].to === name) {
|
||||
count++;
|
||||
}
|
||||
}
|
||||
return count;
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
options() {
|
||||
return {
|
||||
force: 3000,
|
||||
size: { w: 600, h: 600 },
|
||||
offset: {
|
||||
x: 0,
|
||||
y: 0,
|
||||
},
|
||||
nodeLabels: true,
|
||||
linkLabels: true,
|
||||
canvas: this.canvas,
|
||||
};
|
||||
},
|
||||
},
|
||||
|
||||
created() {
|
||||
let characters = [
|
||||
"Chevalier Danceny",
|
||||
"Marquise de Merteuil",
|
||||
"Cécile Volanges",
|
||||
"Présidente de Tourvel",
|
||||
"Azolan, chasseur",
|
||||
"Madame de Rosemonde",
|
||||
"Madame de Volanges",
|
||||
"Vicomte de Valmont",
|
||||
"Père Anselme",
|
||||
"...",
|
||||
"M. Bertrand",
|
||||
"Anonyme",
|
||||
"Sophie Carnay",
|
||||
"Maréchale de ***",
|
||||
"Le Comte de Gercourt",
|
||||
];
|
||||
|
||||
this.createLinks(characters);
|
||||
|
||||
for (var j = 0; j < characters.length; j++) {
|
||||
this.nodes.push({
|
||||
id: j,
|
||||
name: characters[j],
|
||||
_size: this.getCount(characters[j]) + 20,
|
||||
_color: "#" + Math.floor(Math.random() * 16777215).toString(16),
|
||||
});
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
@import url("https://fonts.googleapis.com/css?family=PT+Sans");
|
||||
canvas {
|
||||
left: 0;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
.net {
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
}
|
||||
.node {
|
||||
-webkit-transition: fill 0.5s ease;
|
||||
fill: #dcfaf3;
|
||||
transition: fill 0.5s ease;
|
||||
}
|
||||
.node.selected {
|
||||
stroke: #caa455;
|
||||
}
|
||||
.node.pinned {
|
||||
stroke: rgba(106, 37, 185, 0.6);
|
||||
}
|
||||
.link {
|
||||
stroke: rgba(18, 120, 98, 0.3);
|
||||
}
|
||||
.link,
|
||||
.node {
|
||||
stroke-linecap: round;
|
||||
}
|
||||
.link:hover,
|
||||
.node:hover {
|
||||
stroke: rgba(250, 197, 65, 0.6);
|
||||
stroke-width: 5px;
|
||||
}
|
||||
.link.selected {
|
||||
stroke: rgba(34, 30, 20, 0.6);
|
||||
}
|
||||
.curve {
|
||||
fill: none;
|
||||
}
|
||||
.link-label,
|
||||
.node-label {
|
||||
fill: black;
|
||||
}
|
||||
.link-label {
|
||||
-webkit-transform: translateY(-0.5em);
|
||||
text-anchor: middle;
|
||||
transform: translateY(-0.5em);
|
||||
}
|
||||
|
||||
body {
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
body,
|
||||
html {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
body {
|
||||
background-color: #fff;
|
||||
font-family: "PT Sans";
|
||||
}
|
||||
|
||||
#app {
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
max-width: 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.links {
|
||||
list-style: none;
|
||||
margin: 1em 5em 0 0;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
#app {
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
text-align: center;
|
||||
user-select: none;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,8 @@
|
||||
import Vue from "vue";
|
||||
import App from "./App.vue";
|
||||
|
||||
Vue.config.productionTip = false;
|
||||
|
||||
new Vue({
|
||||
render: h => h(App)
|
||||
}).$mount("#app");
|
||||
Loading…
Reference in new issue