EPFL Interactive Coursebook
Home Page: https://epfl-interactive-coursebook.herokuapp.com
License: Apache License 2.0
I currently work at Novo Nordisk where I create solutions to automate the generation of clinical trial documents required for submission to regulatory authorities.
I am also the author of the Icelandic Bahá’í Web Library.
I’m interested in...
![dependabot[bot] avatar](https://avatars.githubusercontent.com/in/29110?v=4 "dependabot[bot]")
Render ingoing and outgoing neighbours of the current set of nodes in a passive color (like gray), with lower opacity.
It might be helpful to add in- and outgoing neighbors to the course object
{
...
ingoing: ["COM-480", ...],
outgoing: ["COM-481", ...]
}
We need to add a method in the API to query outgoing and ingoing neighbors of the current selection.
Hovering over a data marker displays the coordinate: (x, y) = (year, registrations)
Make edges appear as directed, with arrow tips
One example:
http://bl.ocks.org/fancellu/2c782394602a93921faff74e594d1bb1
Axes with tickmarks and descriptive labels
Content from Lecture 5.2 (Interactive D3) can help us to create the axes.
We need to use d3-scale to scale the axes according to the data. Do we want the scale of the y-axis to be same for all courses so that they are easily comparable? Downside of this is that it might be hard to read a chart with very few registrations per year.
Display minimal meta information about a course when hovering over it (id, name, credits, in-/out-degree). Might be nice to use a tooltip for that: https://vuetifyjs.com/en/components/tooltips/
Add a tooltip info icon in the top corner, to notify the user about not obvious actions - such as double clicking a node
Currently, CourseDetails is a child of CourseList and CourseViz. It is preferable to not make it a child component, but rather keep it at the same level as the other. That way, it is possible to make a tab for a selected course and enable the user to close and open each tab, like in a browser.
Highlight a node's neighborhood (or connected component) when hovering over it
This bug has something to do with Vue/Vuetify and after much debugging I couldn't figure out why this is happening. The courseTooltip data property (which controls the tooltip's visibility) is set to false after the property has just been set to true when hovering from one node to another quickly.
This feature will make the tool more useful by allowing the user to explicitly select which courses he/she wants to see. This can be helpful in many instances. For example when a student only wants an overview of completed courses and its outgoing neighbors to see which courses depend on those courses and he/she is prepared to enroll in.
This could simply be in the form of a widget like an autocomplete input box.
https://vuetifyjs.com/en/components/autocompletes/
Something like:
<v-autocomplete
v-model="courses"
:items="filteredCourses"
label="Search courses..."
multiple
chips
cache-items
hide-no-data
hide-details
...
</v-autocomplete>
We would have to create a new data property filteredCourses to keep track of the courses that match the dropdown filters, and then only allow for these courses to be searched for in the autocomplete. This of course requires that we change the API and add function(s).
Slots will help us with customizing how the selected items appear vs. selectable items
We need to disable the drag functionality on click, and instead enable drag on CTRL + CLICK, see #7
Small scrollbar is for some reason added on mobile, it is probably related to margin/padding settings
Enable user to toggle the display of (ingoing/outgoing) neighborhood of the current selection (on by default), see #4
Make the sidebar with filtering widgets expandable, to enable more space for the main content.
The following components might help:
https://vuetifyjs.com/en/components/toolbars/
https://vuetifyjs.com/en/components/navigation-drawers/
This is especially important for mobile viewing.
When the window is resized, the width and height remain unchanged and that is not nice UX.
Depending on the viewport size, not all nodes might fit so the user should be able to travel around.
Also, some nodes might be hard to inspect, if they are small or if they are in a crowd. So it would be nice to enable zooming.
Example: https://observablehq.com/@d3/drag-zoom?collection=@d3/d3-drag
Add a descriptive title, perhaps it might contain the course id so it will be dynamic and not always the same.
This requires computing the height of the SVG container explicitly, and providing a min height in case the computed height is small, which will happen on small screens.
We also want to programmatically scroll when the user opens the legend
This revealed another problem though, the arrowtips have a fixed position, and that doesn't work well with the different node sizes. We need to figure out how to fix that
Originally posted by @valentinoli in #22 (comment)
Display page with detailed info about a course when selecting it on the graph (as in the list view)
We need to disable the drag functionality on click, and instead enable drag on CTRL + CLICK for instance, see #8
Enable user to toggle the edges on/off
I think we should do something about this
Display meta info about the graph, such as total counts of nodes and edges, node degree or centrality summary. Where? Perhaps in the corner of the SVG in a fixed position.
Render marker as a simple red shape?
The default coloring is that entering nodes are colored green, updated orange and exiting red. We might want to enable the user to choose how nodes are colored.
This can be done in many ways.
One idea:
Allow customization of the entering, updating and exiting colors.
Second idea:
Allow coloring nodes by course properties, like
section, semester (qualitative color map)
credits, registrations (sequential color map)
Touch interface is detected only after the first touch. So if a user's first touch is clicking on a node in the graph, then the touch interface experience isn't triggered
Enable user to select how node sizes are determined: number of credits (default), popularity, in-degree, out-degree, etc.
Note: Some nodes might disappear if the parameter value is zero (radius will be zero) so we should always apply a smoothing technique
There is a bug with the graph tooltip positioning. It is always positioned on the right but it overflows the container if it is too far on the right. We should probably position in to the left if the node is on the right side of the screen.
The tooltip flickers when you drag a node
Green: new courses after filter applied
Orange: courses which are still there from the last filter
Gray: neighborhood
I don't know how to explain this in fewer and more concise words for the user
Harvest relationships from the recommended field of each course, which tells which other courses are recommended (but not required) for preparation.
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
Django
The Web framework for perfectionists with deadlines.
Laravel
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft
Open source projects and samples from Microsoft.
Google
Google ❤️ Open Source for everyone.
Alibaba
Alibaba Open Source for everyone
D3
Data-Driven Documents codes.
Tencent
China tencent open source team.