Giter Club home page Giter Club logo

d3graphtheory's Introduction

D3 Graph Theory

Click to see the action

Donate

In mathematics, graph theory is the study of graphs, which are mathematical structures used to model pairwise relations between objects. A graph in this context is made up of vertices, nodes, or points which are connected by edges, arcs, or lines. -- Wikipedia

D3 Graph Theory is a front-end project aimed at anyone who wants to learn graph theory. It provides a quick and interactive introduction to the subject. The visuals used in the project makes it an effective learning tool.

Topics Covered So Far

The whole content is broken in several units. So far these units have been added.

Table Of Contents
1. Vertices and Edges 2. Order and Size of a Graph 3. Degree of a Vertex
4. Degree Sequence of a Graph 5. Graphic Sequence 6. Havel-Hakimi Algorithm
7. Pigeonhole Principle 8. Regular Graph 9. Complete Graph
10. Bipartite Graph 11. Complete Bipartite Graph 12. Walk
13. Open vs Closed Walks 14. Connectivity 15. Eulerian Circuit
16. Eulerian Trail 17. Graph Coloring 18. k-Colorable Graph
19. Chromatic Number 20. Trees 21. Rooted Trees
22. Spanning Tree of a Graph

The project is still expanding. New topics are added from time to time.

Upcoming Topics

These topics are planned to be added.

  • Planar Graphs
  • Chromatic Number
  • Trees
  • Rooted Trees
  • Spanning Tree
  • Prim's Algorithm
  • Kruskal's Algorithm

So, keep checking for updates. 😄

Attributions

This project is built with the help of following libraries and projects.

License

Copyright (c) 2017 Avinash Pandey. Licensed under MIT License.

d3graphtheory's People

Contributors

gitter-badger avatar micahstubbs avatar mrpandey avatar mskmoorthy avatar timthelion avatar vickychenglau avatar xavierlowmiller avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

d3graphtheory's Issues

💡show symbols inline with text

it might be nice to show the symbols used in the graphic inline with the text. you could think of this as a legend, but in context, right next to the text.

I made a quick design of what this page could look like, with the symbols inline:

vertex-shape-design

Terminology for programming

I feel like mathematical conventions are not so useful for programming. Maybe provide some API that can be more useful for practical tasks around graphs, or at least show how this math looks like in code. For example:

  • order - graph.nodes.len
  • size - graph.edges.len

  • degree - node.edges.len
  • minimum degree - min([n.edges.len for n in graph.nodes])
  • maximum degree - max([n.edges.len for n in graph.nodes])

  • degree sequence - sorted([n.edges.len for n in graph.nodes], reverse=True)
  • sum of vertices degree is twice the size of graph - graph.edges.len*2 == sum([n.edges.len for n in graph.nodes])

Consistent terms for structured knowledge

Though "Dot"+"Edge" and RAND Node-Link are usable, it is better to describe graph systems as "Concepts related to Concepts by Concepts" where all structured knowledge and all structured associative knowledge is abstracted (as is type "class" representations of the knowledge)

Feedback on UI

Hi, first off thanks for making this, it's very cool :)

I had a lot of difficulty with the UI during the course, and I thought you might want to hear about some ideas to improve. I'm not sure if your goal for this project is to teach as many people as possible, or just to play around with D3 but if the goal is to teach, then I think fixing the below issues would help reach a wider audience.

  1. Clicking on graph edges is very difficult because they are so thin. It requires a precise motion that is hard on a trackpad and hard for people that don't use computers all the time. It's very frustrating if you click near an edge, and instead it just creates a new vertex that you don't want.

  2. It's preferable to not require right-clicking in an interface. I know my parents who are an 'average Joe' user don't understand what right clicking is and would be unable to do the course for that reason. Better would be either a "trashcan" area where you can drag a node that you don't want, or clicking a node to select it and then pressing a key like X to delete it.

  3. On the challenges, when you complete one it automatically and rapidly advances to the next level. This is no good because after finishing, you want to look at your progress and understand what you made. Even worse, if you then click back to the previous level, your progress is gone so you can't review the old solution either. It should require pressing 'Next' to go to the next level, and it should store your solution in local storage or something so you can look back at it.

  4. The spring layout of D3 is very distracting when it bounces around rapidly, especially at the start of a level. Could the vertices be initialized to their proper positions? Or, it would be better to hide the canvas for the first couple seconds until the nodes have settled down.

  5. Because the graph is colorful and moving, it draws attention away from the text a lot, which makes it hard to read the text instead of just poking at the graph. If there's important text to read before you start playing, then the graph should only appear after the user has scrolled through the text or pressed a button at the bottom.

potential new topic suggestion: graph center?

Hi there, I really like this project you are working on xD! I think these tutorials and the concepts breakdowns would be quite helpful for graph theory new learners.

I see you are still expanding your list, and I'm just wondering do you maybe consider adding a new topic about graph center? I think it's an really interesting and useful concept(as well as the Floyd–Warshall algo comes along w/ it), and I'd love to help contribute if you think that sounds good :)

Mistake in the proof on pigeonhole principle page

Thanks for creating this, I like this interactive course!

There is a mistake in the proof at https://mrpandey.github.io/d3graphTheory/unit.html?pigeonhole

The argument goes like:

  1. if graph has vertex with degree 0 then ..
  2. if graph has vertex with degree n-1 then..

But the argument says nothing about graphs that don't have one of the vertices with such degrees.

To be correct, it should probably go something like this:

  1. if graph has vertex with degree 0 then we're choosing from degrees 0 .. n-2
  2. if graph doesn't have vertex with degree 0 then we're choosing from degrees 1..n-1

Typo

Hello,

"theory-content": "<p>A sequence of numbers is said to <b>graphic sequence<\/b> if we can construct a graph having the sequence as its degree sequence. <\/p><p> Okay, that was a bit confusing. So what's a graphic sequence again? <\/p><p> Let's say you have a list of numbers. Assign each number to an isolated vertex. Now, can you connect these vertices in a way that each vertex is adjacent to as many vertices as the number assigned to it? If yes, then the list of numbers is graphic. Otherwise not. Things will be clear in a while. <\/p><p> <b>Example 1:<\/b> The sequence \\((3,3,2,1,1,0)\\) is graphic. In the diagram, you can see the vertices have these numbers as their degrees. Notice that the sequence remains graphic even when you remove the \\(0\\). <\/p><div class=\"note\"> <span class=\"note-word\">Note:<\/span> A sequece containing only zeroes is always graphic. <\/div><p> <b>Example 2:<\/b> The sequence \\((4,3,2,1)\\) is not graphic. We need at least four other vertices to satisfy the degree of the vertex having \\(4\\) as its degree. But we have only three. <\/p><p> <b>Example 3:<\/b> The sequence \\((4,3,3,2,2,1)\\) is not graphic. Recall that sum of degrees is <b>twice<\/b> the number of edges. So sum of a graphic sequence must be even. This isn't the case here. <\/p><p> The following sequences are graphic. Try to draw a graph for each one of them. You can see the answer by clicking the link next to them. <\/p><p> \\((5,1,1,1,1,1)\\) <span class=\"graph-event-link\" id=\"prob0\"> Show solution<\/span> <\/p><p> \\((2,2,2,2,2)\\) <span class=\"graph-event-link\" id=\"prob1\"> Show solution<\/span> <\/p><p> \\((4,4,4,4,4,0)\\) <span class=\"graph-event-link\" id=\"prob2\"> Show solution<\/span> <\/p><p> \\((3,3,2,2,2)\\) <span class=\"graph-event-link\" id=\"prob3\"> Show solution<\/span> <\/p><p> \\((5,3,3,3,2,2)\\) <span class=\"graph-event-link\" id=\"prob4\"> Show solution<\/span> <\/p><div class=\"note\"> <span class=\"note-word\">Note:<\/span> A graph has a unique degree sequence. But more than one different graphs might be possible for the same graphic sequence. <\/div>",

Shouldn't that be

A sequence of numbers is said to be a graphic sequence if...

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.