Skip to content

Instantly share code, notes, and snippets.

@getflourish

getflourish/.block

Last active February 15, 2021 20:04
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save getflourish/8b3eeb3076bc3e20099de7f2ef9186b8 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save getflourish/8b3eeb3076bc3e20099de7f2ef9186b8 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. getflourish revised this gist May 6, 2017. No changes.
  2. getflourish revised this gist May 6, 2017. No changes.
  3. getflourish revised this gist May 6, 2017. 1 changed file with 4 additions and 4 deletions.
    8 changes: 4 additions & 4 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -40,7 +40,6 @@
    stroke-opacity: 0.4;
    stroke-width: 1.5px;
    stroke-dasharray: 1000;
    stroke-dashoffset: 0;
    }

    .node:hover {
    @@ -79,7 +78,8 @@
    }

    .line-enter-active, .line-leave-active {
    transition: all 1s;
    transition: all 2s;
    stroke-dashoffset: 0;
    }
    .line-enter, .line-leave-to /* .list-leave-active for <2.1.8 */ {
    stroke-dashoffset: 1000;
    @@ -131,7 +131,7 @@

    <!-- Links are represented as paths -->

    <path v-for="link in links" class="link" v-bind:key="link.d" v-bind:d="link.d" v-bind:style="link.style"></path>
    <path v-for="link in links" class="link" v-bind:key="link.id" v-bind:d="link.d" v-bind:style="link.style"></path>

    </transition-group>

    @@ -254,7 +254,7 @@

    return this.root.descendants().slice(1).map(function(d) {
    return {
    console.log(d)
    id: d.id,
    d: "M" + d.y + "," + d.x + "C" + (d.parent.y + 100) + "," + d.x + " " + (d.parent.y + 100) + "," + d.parent.x + " " + d.parent.y + "," + d.parent.x,

    // here we could of course calculate colors depending on data but for now all links share the same color from the settings object that we can manipulate using UI controls and v-model
  4. getflourish revised this gist May 6, 2017. 1 changed file with 1 addition and 0 deletions.
    1 change: 1 addition & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -254,6 +254,7 @@

    return this.root.descendants().slice(1).map(function(d) {
    return {
    console.log(d)
    d: "M" + d.y + "," + d.x + "C" + (d.parent.y + 100) + "," + d.x + " " + (d.parent.y + 100) + "," + d.parent.x + " " + d.parent.y + "," + d.parent.x,

    // here we could of course calculate colors depending on data but for now all links share the same color from the settings object that we can manipulate using UI controls and v-model
  5. getflourish revised this gist May 6, 2017. 1 changed file with 3 additions and 3 deletions.
    6 changes: 3 additions & 3 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -39,6 +39,8 @@
    stroke: #555;
    stroke-opacity: 0.4;
    stroke-width: 1.5px;
    stroke-dasharray: 1000;
    stroke-dashoffset: 0;
    }

    .node:hover {
    @@ -78,11 +80,9 @@

    .line-enter-active, .line-leave-active {
    transition: all 1s;
    stroke-dasharray: 1000;
    }
    .line-enter, .line-leave-to /* .list-leave-active for <2.1.8 */ {
    opacity: 0;
    stroke-dasharray: 0;
    stroke-dashoffset: 1000;
    }

    </style>
  6. getflourish revised this gist May 6, 2017. No changes.
  7. getflourish revised this gist May 6, 2017. 1 changed file with 13 additions and 4 deletions.
    17 changes: 13 additions & 4 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -75,6 +75,15 @@
    opacity: 0;
    transform: translateY(30px);
    }

    .line-enter-active, .line-leave-active {
    transition: all 1s;
    stroke-dasharray: 1000;
    }
    .line-enter, .line-leave-to /* .list-leave-active for <2.1.8 */ {
    opacity: 0;
    stroke-dasharray: 0;
    }

    </style>

    @@ -118,19 +127,19 @@

    <!-- In contrast to D3’s "select" methods, we define the graphical elements explicitely here and use the template syntax to loop through collections and bind properties such as "d" or "r" to those elements. -->

    <g>
    <transition-group tag="g" name="line" >

    <!-- Links are represented as paths -->

    <path v-for="link in links" class="link" v-bind:d="link.d" v-bind:style="link.style"></path>
    <path v-for="link in links" class="link" v-bind:key="link.d" v-bind:d="link.d" v-bind:style="link.style"></path>

    </g>
    </transition-group>


    <!-- We can now also use events to elements that will call respective methods on the Vue instance -->

    <transition-group tag="g" name="list">
    <g class="node" v-on:click="select(index, node)" v-for="(node, index) in nodes" v-bind:style="node.style" v-bind:class="[node.className, {'highlight': node.highlight}]">
    <g class="node" v-on:click="select(index, node)" v-for="(node, index) in nodes" v-bind:key="node.id" v-bind:style="node.style" v-bind:class="[node.className, {'highlight': node.highlight}]">

    <!-- Circles for each node -->

  8. getflourish revised this gist May 6, 2017. 1 changed file with 9 additions and 8 deletions.
    17 changes: 9 additions & 8 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -68,12 +68,13 @@
    display: block;
    }

    .appear-enter-active, .appear-leave-active {
    transition: opacity .5s;
    }
    .appear-enter, .appear-leave-to {
    opacity: 0;
    }
    .list-enter-active, .list-leave-active {
    transition: all 1s;
    }
    .list-enter, .list-leave-to /* .list-leave-active for <2.1.8 */ {
    opacity: 0;
    transform: translateY(30px);
    }

    </style>

    @@ -128,7 +129,7 @@

    <!-- We can now also use events to elements that will call respective methods on the Vue instance -->

    <transition-group tag="div" name="appear">
    <transition-group tag="g" name="list">
    <g class="node" v-on:click="select(index, node)" v-for="(node, index) in nodes" v-bind:style="node.style" v-bind:class="[node.className, {'highlight': node.highlight}]">

    <!-- Circles for each node -->
    @@ -140,7 +141,7 @@
    <text v-bind:dx="node.textpos.x" v-bind:dy="node.textpos.y" v-bind:style="node.textStyle">{{ node.text }}</text>

    </g>
    </transition>
    </transition-group>
    </svg>
    </div>

  9. getflourish revised this gist May 6, 2017. 1 changed file with 7 additions and 3 deletions.
    10 changes: 7 additions & 3 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -11,6 +11,10 @@
    height: 100%;
    font-family: monospace;
    }

    .node {
    opacity: 1;
    }

    .node circle {
    fill: #999;
    @@ -65,10 +69,10 @@
    }

    .appear-enter-active, .appear-leave-active {
    transition: opacity .5s
    transition: opacity .5s;
    }
    .appear-enter, .appear-leave-to {
    opacity: 0
    opacity: 0;
    }

    </style>
    @@ -124,7 +128,7 @@

    <!-- We can now also use events to elements that will call respective methods on the Vue instance -->

    <transition name="appear">
    <transition-group tag="div" name="appear">
    <g class="node" v-on:click="select(index, node)" v-for="(node, index) in nodes" v-bind:style="node.style" v-bind:class="[node.className, {'highlight': node.highlight}]">

    <!-- Circles for each node -->
  10. getflourish revised this gist May 6, 2017. 1 changed file with 7 additions and 0 deletions.
    7 changes: 7 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -63,6 +63,13 @@
    label {
    display: block;
    }

    .appear-enter-active, .appear-leave-active {
    transition: opacity .5s
    }
    .appear-enter, .appear-leave-to {
    opacity: 0
    }

    </style>

  11. getflourish revised this gist May 6, 2017. 1 changed file with 11 additions and 8 deletions.
    19 changes: 11 additions & 8 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -114,19 +114,22 @@

    </g>


    <!-- We can now also use events to elements that will call respective methods on the Vue instance -->

    <g class="node" v-on:click="select(index, node)" v-for="(node, index) in nodes" v-bind:style="node.style" v-bind:class="[node.className, {'highlight': node.highlight}]">
    <transition name="appear">
    <g class="node" v-on:click="select(index, node)" v-for="(node, index) in nodes" v-bind:style="node.style" v-bind:class="[node.className, {'highlight': node.highlight}]">

    <!-- Circles for each node -->

    <circle v-bind:r="node.r" v-bind:style="{'fill': index == selected ? '#ff0000' : '#bfbfbf'}"></circle>
    <!-- Circles for each node -->

    <!-- Finally, text labels -->

    <text v-bind:dx="node.textpos.x" v-bind:dy="node.textpos.y" v-bind:style="node.textStyle">{{ node.text }}</text>
    <circle v-bind:r="node.r" v-bind:style="{'fill': index == selected ? '#ff0000' : '#bfbfbf'}"></circle>

    </g>
    <!-- Finally, text labels -->

    <text v-bind:dx="node.textpos.x" v-bind:dy="node.textpos.y" v-bind:style="node.textStyle">{{ node.text }}</text>

    </g>
    </transition>
    </svg>
    </div>

  12. getflourish revised this gist May 6, 2017. 1 changed file with 4 additions and 0 deletions.
    4 changes: 4 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -59,6 +59,10 @@
    .controls > * + * {
    margin-top: 1rem;
    }

    label {
    display: block;
    }

    </style>

  13. getflourish revised this gist May 6, 2017. No changes.
  14. getflourish revised this gist May 6, 2017. 1 changed file with 8 additions and 11 deletions.
    19 changes: 8 additions & 11 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -88,6 +88,8 @@
    <label>Search…</label>
    <input type="text" v-model="search" />
    </div>

    <button v-on:click="add">Add node</button>

    <div>
    Selected: {{ selected }}
    @@ -237,19 +239,14 @@
    }
    },
    methods: {
    add: function () {
    this.csv.push({
    id: "flare.physics.Dummy",
    value: 0
    })
    },
    select: function(index, node) {
    this.selected = index;
    this.remove()
    },
    remove: function () {
    var that = this;
    this.csv = this.csv.filter(function (d) {
    if (d.id) {
    return d.id.indexOf(that.search) != -1
    }

    });

    }
    }
    });
  15. getflourish revised this gist May 6, 2017. No changes.
  16. getflourish revised this gist May 6, 2017. No changes.
  17. getflourish revised this gist May 6, 2017. No changes.
  18. getflourish revised this gist May 6, 2017. 1 changed file with 12 additions and 7 deletions.
    19 changes: 12 additions & 7 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -110,7 +110,7 @@

    <!-- We can now also use events to elements that will call respective methods on the Vue instance -->

    <g class="node" v-on:click="select(index)" v-for="(node, index) in nodes" v-bind:style="node.style" v-bind:class="[node.className, {'highlight': node.highlight}]">
    <g class="node" v-on:click="select(index, node)" v-for="(node, index) in nodes" v-bind:style="node.style" v-bind:class="[node.className, {'highlight': node.highlight}]">

    <!-- Circles for each node -->

    @@ -237,14 +237,19 @@
    }
    },
    methods: {
    select: function(id) {
    this.selected = id;
    this.remove(id)
    select: function(index, node) {
    this.selected = index;
    this.remove()
    },
    remove: function (node) {
    remove: function () {
    var that = this;
    this.csv = this.csv.filter(function (d) {
    return node.highlight == false
    })
    if (d.id) {
    return d.id.indexOf(that.search) != -1
    }

    });

    }
    }
    });
  19. getflourish revised this gist May 6, 2017. 1 changed file with 4 additions and 2 deletions.
    6 changes: 4 additions & 2 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -241,8 +241,10 @@
    this.selected = id;
    this.remove(id)
    },
    remove: function (id) {
    Vue.delete(this.csv, id)
    remove: function (node) {
    this.csv = this.csv.filter(function (d) {
    return node.highlight == false
    })
    }
    }
    });
  20. getflourish revised this gist May 6, 2017. No changes.
  21. getflourish revised this gist May 6, 2017. No changes.
  22. getflourish revised this gist May 6, 2017. No changes.
  23. getflourish revised this gist May 6, 2017. No changes.
  24. getflourish revised this gist May 6, 2017. No changes.
  25. getflourish revised this gist May 6, 2017. 1 changed file with 5 additions and 1 deletion.
    6 changes: 5 additions & 1 deletion index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -86,7 +86,7 @@

    <div>
    <label>Search…</label>
    <input type="text" v-model="search" autofocus />
    <input type="text" v-model="search" />
    </div>

    <div>
    @@ -239,6 +239,10 @@
    methods: {
    select: function(id) {
    this.selected = id;
    this.remove(id)
    },
    remove: function (id) {
    Vue.delete(this.csv, id)
    }
    }
    });
  26. getflourish revised this gist May 6, 2017. 1 changed file with 72 additions and 60 deletions.
    132 changes: 72 additions & 60 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -6,45 +6,59 @@

    <style>

    body {
    width: 100%;
    height: 100%;
    font-family: monospace;
    }

    .node circle {
    fill: #999;
    cursor: pointer;
    }

    .node text {
    font: 10px sans-serif;
    cursor: pointer;
    }

    .node--internal circle {
    fill: #555;
    }

    .node--internal text {
    text-shadow: 0 1px 0 #fff, 0 -1px 0 #fff, 1px 0 0 #fff, -1px 0 0 #fff;
    }

    .link {
    fill: none;
    stroke: #555;
    stroke-opacity: 0.4;
    stroke-width: 1.5px;
    }

    .node:hover {
    pointer-events: all;
    stroke: #ff0000;
    }
    body {
    width: 100%;
    height: 100%;
    font-family: monospace;
    }

    .node circle {
    fill: #999;
    cursor: pointer;
    }

    .node text {
    font: 10px sans-serif;
    cursor: pointer;
    }

    .node--internal circle {
    fill: #555;
    }

    .node--internal text {
    text-shadow: 0 1px 0 #fff, 0 -1px 0 #fff, 1px 0 0 #fff, -1px 0 0 #fff;
    }

    .link {
    fill: none;
    stroke: #555;
    stroke-opacity: 0.4;
    stroke-width: 1.5px;
    }

    .node:hover {
    pointer-events: all;
    stroke: #ff0000;
    }

    .node.highlight {
    fill: red;
    }

    .controls {
    position: fixed;
    top: 16px;
    left: 16px;
    background: #f8f8f8;
    padding: 0.5rem;
    display: flex;
    flex-direction: column;
    }

    .node.highlight {
    fill: red;
    }
    .controls > * + * {
    margin-top: 1rem;
    }

    </style>

    @@ -58,27 +72,26 @@

    <!-- UI controls that can are used to manipulate the display of the chart -->

    <div id="controls">
    <label>Width</label>
    <input type="range" v-model="settings.width" min="0" max="1000" />

    <br />

    <label>Stroke color</label>
    <input type="color" v-model="settings.strokeColor" />

    <br />

    <label>Value threshold</label>
    <input type="range" v-model="settings.valueThreshold" min="0" max="10000" />{{ settings.valueThreshold}}

    <br />

    <label>Search…</label>
    <input type="text" v-model="search" />
    <div class="controls">

    <div>
    <label>Chart width</label>
    <input type="range" v-model="settings.width" min="0" max="1000" />
    </div>

    <div>
    <label>Stroke color</label>
    <input type="color" v-model="settings.strokeColor" />
    </div>

    <div>
    <label>Search…</label>
    <input type="text" v-model="search" autofocus />
    </div>

    <br />
    Selected: {{ selected }}
    <div>
    Selected: {{ selected }}
    </div>
    </div>

    <!-- SVG that renders the chart based on the "width" and "height" setting from the Vue instance’s data object -->
    @@ -122,8 +135,7 @@
    settings: {
    strokeColor: "#19B5FF",
    width: 960,
    height: 2000,
    valueThreshold: 0,
    height: 2000
    }
    };
    },
  27. getflourish revised this gist May 6, 2017. 1 changed file with 6 additions and 4 deletions.
    10 changes: 6 additions & 4 deletions README.md
    View file
    Original file line number Diff line number Diff line change
    @@ -1,7 +1,9 @@
    A first experiment to use D3 together with Vue.js. In order to connect the user interface with the chart, the chart rendering is done by using Vue’s template syntax to bind attributes to the SVG elements.
    This is a re-write of [Cluster Dendrogram](https://bl.ocks.org/mbostock/4063570) with D3 + VueJS.

    This can be seen as a replacement for "d3.select" and the usual "enter, exit, update". With Vue, we can use computed properties to make sure that whenever data changes, the representation also updates.
    In order to connect the user interface with the chart, the chart rendering is done by using Vue’s template syntax to bind attributes to the SVG elements.

    The whole purpose of adding Vue is to benefit from it’s capabilities of building user interface components on top of data models. Of course, this can also be can be done through native JS or D3 events, but VueJS allows us to build reactive, re-usable components which might come in handy in more complex projects.
    This can be seen as a replacement for `d3.select` and the usual `enter`, `exit`, `update`. With Vue, we can use computed properties to make sure that whenever data changes, the representation also updates.

    Rewrite of https://bl.ocks.org/mbostock/4063570
    The whole purpose of adding Vue is to benefit from it’s capabilities of building user interface components on top of data models.

    Of course, this can also be can be done through native JS or D3 events, but VueJS allows us to build reactive, re-usable components which might come in handy in more complex projects.
  28. getflourish revised this gist May 6, 2017. 1 changed file with 6 additions and 2 deletions.
    8 changes: 6 additions & 2 deletions README.md
    View file
    Original file line number Diff line number Diff line change
    @@ -1,3 +1,7 @@
    A first experiment to use D3 together with Vue.js. In order to connect the user interface with the chart, all SVG chart rendering is done through Vue’s template syntax. This can be seen as a replacement for "d3.select" and the usual "enter, exit, update". With Vue, we can use computed properties to make sure that whenever data changes, the representation also updates.
    A first experiment to use D3 together with Vue.js. In order to connect the user interface with the chart, the chart rendering is done by using Vue’s template syntax to bind attributes to the SVG elements.

    The whole purpose of adding Vue is to benefit from it’s capabilities of building user interface components on top of data models. All of this can be done through native JS and D3, but Vue allows us to build re-usable components which might come in handy in more complex projects.
    This can be seen as a replacement for "d3.select" and the usual "enter, exit, update". With Vue, we can use computed properties to make sure that whenever data changes, the representation also updates.

    The whole purpose of adding Vue is to benefit from it’s capabilities of building user interface components on top of data models. Of course, this can also be can be done through native JS or D3 events, but VueJS allows us to build reactive, re-usable components which might come in handy in more complex projects.

    Rewrite of https://bl.ocks.org/mbostock/4063570
  29. getflourish revised this gist May 6, 2017. No changes.
  30. getflourish revised this gist May 6, 2017. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -118,7 +118,7 @@
    return {
    csv: null,
    selected: null,
    search: "Spring",
    search: "force",
    settings: {
    strokeColor: "#19B5FF",
    width: 960,