Skip to content

Instantly share code, notes, and snippets.

@curran

curran/.block

Last active April 27, 2022 09:46
Download ZIP

Revisions

  1. curran revised this gist Feb 9, 2018. 1 changed file with 2 additions and 2 deletions.
    4 changes: 2 additions & 2 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -1,8 +1,8 @@
    <!DOCTYPE html>
    <head>
    <meta charset="utf-8">
    <script src="https://unpkg.com/d3@4"></script>
    <script src="https://unpkg.com/d3-component@3"></script>
    <script src="https://unpkg.com/d3@4.10.0/build/d3.js"></script>
    <script src="https://unpkg.com/d3-component@3.0"></script>
    <script src="https://unpkg.com/redux@3/dist/redux.min.js"></script>
    <script src="https://unpkg.com/d3-tip@0.7.1"></script>
    <link rel="stylesheet" href="https://unpkg.com/bootstrap@4.0.0-alpha.6/dist/css/bootstrap.min.css">
  2. curran revised this gist Sep 23, 2017. 1 changed file with 2 additions and 0 deletions.
    2 changes: 2 additions & 0 deletions README.md
    View file
    Original file line number Diff line number Diff line change
    @@ -1,5 +1,7 @@
    This example demonstrates usage of a new library called [d3-component](https://github.com/curran/d3-component) and [Redux](http://redux.js.org/) to create a scatter plot with menus for X, Y, and color, and some animations. It's an experiment to see how things play out when pairing D3 directly with Redux, without React in the middle.

    The data shown here comes from the [UCI Machine Learning Repository: Auto MPG Data Set](https://archive.ics.uci.edu/ml/datasets/auto+mpg).

    Built with [blockbuilder.org](http://blockbuilder.org)

    forked from <a href='http://bl.ocks.org/curran/'>curran</a>'s block: <a href='http://bl.ocks.org/curran/685fa8300650c4324d571c6b0ecc55de'>Spinner with d3-component</a>
  3. curran revised this gist Mar 25, 2017. 1 changed file with 39 additions and 40 deletions.
    79 changes: 39 additions & 40 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -2,7 +2,7 @@
    <head>
    <meta charset="utf-8">
    <script src="https://unpkg.com/d3@4"></script>
    <script src="https://unpkg.com/d3-component@2.2"></script>
    <script src="https://unpkg.com/d3-component@3"></script>
    <script src="https://unpkg.com/redux@3/dist/redux.min.js"></script>
    <script src="https://unpkg.com/d3-tip@0.7.1"></script>
    <link rel="stylesheet" href="https://unpkg.com/bootstrap@4.0.0-alpha.6/dist/css/bootstrap.min.css">
    @@ -32,7 +32,7 @@
    // This stateless component renders a static "wheel" made of circles,
    // and rotates it depending on the value of props.angle.
    var wheel = d3.component("g")
    .create(function (){
    .create(function (selection){
    var minRadius = 4,
    maxRadius = 10,
    numDots = 10,
    @@ -45,32 +45,32 @@
    angle = d3.scaleLinear()
    .domain([0, numDots])
    .range([0, Math.PI * 2]);
    d3.select(this)
    selection
    .selectAll("circle").data(d3.range(numDots))
    .enter().append("circle")
    .attr("cx", function (d){ return Math.sin(angle(d)) * wheelRadius; })
    .attr("cy", function (d){ return Math.cos(angle(d)) * wheelRadius; })
    .attr("r", radius);
    })
    .render(function (d){
    d3.select(this).attr("transform", "rotate(" + d + ")");
    .render(function (selection, d){
    selection.attr("transform", "rotate(" + d + ")");
    });

    // This component with a local timer makes the wheel spin.
    var spinner = (function (){
    var timer = d3.local();
    return d3.component("g")
    .create(function (d){
    timer.set(this, d3.timer(function (elapsed){
    d3.select(this).call(wheel, elapsed * d.speed);
    }.bind(this)));
    .create(function (selection, d){
    timer.set(selection.node(), d3.timer(function (elapsed){
    selection.call(wheel, elapsed * d.speed);
    }));
    })
    .render(function (d){
    d3.select(this).attr("transform", "translate(" + d.x + "," + d.y + ")");
    .render(function (selection, d){
    selection.attr("transform", "translate(" + d.x + "," + d.y + ")");
    })
    .destroy(function(d){
    timer.get(this).stop();
    return d3.select(this)
    .destroy(function(selection, d){
    timer.get(selection.node()).stop();
    return selection
    .attr("fill-opacity", 1)
    .transition().duration(3000)
    .attr("transform", "translate(" + d.x + "," + d.y + ") scale(10)")
    @@ -81,24 +81,24 @@
    var axis = (function (){
    var axisLocal = d3.local();
    return d3.component("g")
    .create(function (d){
    axisLocal.set(this, d3["axis" + d.type]());
    d3.select(this)
    .create(function (selection, d){
    axisLocal.set(selection.node(), d3["axis" + d.type]());
    selection
    .attr("opacity", 0)
    .call(axisLocal.get(this)
    .call(axisLocal.get(selection.node())
    .scale(d.scale)
    .ticks(d.ticks || 10))
    .transition("opacity").duration(2000)
    .attr("opacity", 0.8);
    })
    .render(function (d){
    d3.select(this)
    .render(function (selection, d){
    selection
    .attr("transform", "translate(" + [
    d.translateX || 0,
    d.translateY || 0
    ] + ")")
    .transition("ticks").duration(3000)
    .call(axisLocal.get(this));
    .call(axisLocal.get(selection.node()));
    });
    }());

    @@ -110,7 +110,7 @@
    .range(d3.schemeCategory10);


    function render(d){
    function render(selection, d){
    var x = d.x,
    y = d.y,
    color = d.color,
    @@ -127,7 +127,7 @@
    colorScale
    .domain(d3.extent(d.data, function (d){ return d[color]; }));

    d3.select(this)
    selection
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")")
    .call(axis, [
    {
    @@ -143,7 +143,7 @@
    }
    ])

    var circles = d3.select(this).selectAll(".point").data(d.data);
    var circles = selection.selectAll(".point").data(d.data);
    circles.exit().remove();
    circles
    .enter().append("circle")
    @@ -197,8 +197,8 @@
    // either displays a spinner or text,
    // depending on the value of the `loading` state.
    var svg = d3.component("svg")
    .render(function (d){
    var svgSelection = d3.select(this)
    .render(function (selection, d){
    var svgSelection = selection
    .attr("width", d.width)
    .attr("height", d.height)
    .call(spinner, !d.loading ? [] : {
    @@ -212,18 +212,18 @@
    });

    var label = d3.component("label", "col-sm-2 col-form-label")
    .render(function (d){
    d3.select(this).text(d);
    .render(function (selection, d){
    selection.text(d);
    });

    var option = d3.component("option")
    .render(function (d){
    d3.select(this).text(d);
    .render(function (selection, d){
    selection.text(d);
    });

    var select = d3.component("select", "form-control")
    .render(function (d){
    d3.select(this)
    .render(function (selection, d){
    selection
    .call(option, d.columns)
    .property("value", d.value)
    .on("change", function (){
    @@ -234,17 +234,16 @@
    var rowComponent = d3.component("div", "row");
    var colSm10 = d3.component("div", "col-sm-10");
    var menu = d3.component("div", "col-sm-4")
    .render(function (d){
    var row = rowComponent(d3.select(this)).call(label, d.label);
    .render(function (selection, d){
    var row = rowComponent(selection).call(label, d.label);
    colSm10(row).call(select, d);
    });

    var menus = d3.component("div", "container-fluid")
    .create(function (){
    d3.select(this).style("opacity", 0);
    .create(function (selection){
    selection.style("opacity", 0);
    })
    .render(function (d){
    var selection = d3.select(this);
    .render(function (selection, d){
    rowComponent(selection).call(menu, [
    {
    label: "X",
    @@ -272,8 +271,8 @@
    });

    var app = d3.component("div")
    .render(function (d){
    d3.select(this).call(menus, d).call(svg, d);
    .render(function (selection, d){
    selection.call(menus, d).call(svg, d);
    });

    function loadData(actions){
  4. curran revised this gist Mar 14, 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
    @@ -2,7 +2,7 @@
    <head>
    <meta charset="utf-8">
    <script src="https://unpkg.com/d3@4"></script>
    <script src="https://unpkg.com/d3-component@2.1"></script>
    <script src="https://unpkg.com/d3-component@2.2"></script>
    <script src="https://unpkg.com/redux@3/dist/redux.min.js"></script>
    <script src="https://unpkg.com/d3-tip@0.7.1"></script>
    <link rel="stylesheet" href="https://unpkg.com/bootstrap@4.0.0-alpha.6/dist/css/bootstrap.min.css">
  5. curran revised this gist Mar 10, 2017. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion README.md
    View file
    Original file line number Diff line number Diff line change
    @@ -1,4 +1,4 @@
    This example demonstrates usage of [d3-component](https://github.com/curran/d3-component) and [Redux](http://redux.js.org/) to create a scatter plot with menus for X, Y, and color, and some animations. It's an experiment to see how things play out when pairing D3 directly with Redux, without React in the middle.
    This example demonstrates usage of a new library called [d3-component](https://github.com/curran/d3-component) and [Redux](http://redux.js.org/) to create a scatter plot with menus for X, Y, and color, and some animations. It's an experiment to see how things play out when pairing D3 directly with Redux, without React in the middle.

    Built with [blockbuilder.org](http://blockbuilder.org)

  6. curran revised this gist Mar 10, 2017. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion README.md
    View file
    Original file line number Diff line number Diff line change
    @@ -1,4 +1,4 @@
    This example demonstrates usage of [d3-component](https://github.com/curran/d3-component) and [Redux](http://redux.js.org/) to create a scatter plot with menus for X, Y, and color, and some animations.
    This example demonstrates usage of [d3-component](https://github.com/curran/d3-component) and [Redux](http://redux.js.org/) to create a scatter plot with menus for X, Y, and color, and some animations. It's an experiment to see how things play out when pairing D3 directly with Redux, without React in the middle.

    Built with [blockbuilder.org](http://blockbuilder.org)

  7. curran revised this gist Mar 10, 2017. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion README.md
    View file
    Original file line number Diff line number Diff line change
    @@ -1,4 +1,4 @@
    This example demonstrates usage of [d3-component](https://github.com/curran/d3-component) and [Redux](http://redux.js.org/) to create a scatter plot with menus for X and Y, and some animations.
    This example demonstrates usage of [d3-component](https://github.com/curran/d3-component) and [Redux](http://redux.js.org/) to create a scatter plot with menus for X, Y, and color, and some animations.

    Built with [blockbuilder.org](http://blockbuilder.org)

  8. Building blocks revised this gist Mar 10, 2017. 1 changed file with 0 additions and 0 deletions.
    Binary file modified thumbnail.png
    View file
    Loading
    Sorry, something went wrong. Reload?
    Sorry, we cannot display this file.
    Sorry, this file is invalid so it cannot be displayed.
  9. curran revised this gist Mar 10, 2017. 1 changed file with 4 additions and 3 deletions.
    7 changes: 4 additions & 3 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -124,6 +124,8 @@
    yScale
    .domain(d3.extent(d.data, function (d){ return d[y]; }))
    .range([innerHeight, 0]);
    colorScale
    .domain(d3.extent(d.data, function (d){ return d[color]; }));

    d3.select(this)
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")")
    @@ -287,7 +289,6 @@
    ordinalColumns = [
    "cylinders",
    "origin",
    "name",
    "year"
    ];

    @@ -311,9 +312,9 @@
    height: 500 - 38,
    loading: true,
    margin: {top: 12, right: 12, bottom: 40, left: 50},
    x: "displacement",
    x: "acceleration",
    y: "horsepower",
    color: "origin"
    color: "cylinders"
    };
    switch (action.type) {
    case "INGEST_DATA":
  10. curran revised this gist Mar 10, 2017. 1 changed file with 2 additions and 1 deletion.
    3 changes: 2 additions & 1 deletion .block
    View file
    Original file line number Diff line number Diff line change
    @@ -1 +1,2 @@
    license: mit
    license: mit
    border: no
  11. curran revised this gist Mar 10, 2017. No changes.
  12. curran revised this gist Mar 10, 2017. No changes.
  13. curran revised this gist Mar 10, 2017. 1 changed file with 28 additions and 21 deletions.
    49 changes: 28 additions & 21 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -238,28 +238,35 @@
    });

    var menus = d3.component("div", "container-fluid")
    .create(function (){
    d3.select(this).style("opacity", 0);
    })
    .render(function (d){
    rowComponent(d3.select(this))
    .call(menu, [
    {
    label: "X",
    value: d.x,
    action: d.setX,
    columns: d.numericColumns
    },
    {
    label: "Y",
    value: d.y,
    action: d.setY,
    columns: d.numericColumns
    },
    {
    label: "Color",
    value: d.color,
    action: d.setColor,
    columns: d.ordinalColumns
    }
    ], d);
    var selection = d3.select(this);
    rowComponent(selection).call(menu, [
    {
    label: "X",
    value: d.x,
    action: d.setX,
    columns: d.numericColumns
    },
    {
    label: "Y",
    value: d.y,
    action: d.setY,
    columns: d.numericColumns
    },
    {
    label: "Color",
    value: d.color,
    action: d.setColor,
    columns: d.ordinalColumns
    }
    ], d);
    if(!d.loading && selection.style("opacity") === "0"){
    selection.transition().duration(2000)
    .style("opacity", 1);
    }
    });

    var app = d3.component("div")
  14. curran revised this gist Mar 10, 2017. 1 changed file with 3 additions and 5 deletions.
    8 changes: 3 additions & 5 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -352,11 +352,9 @@
    function main(){
    var store = Redux.createStore(reducer),
    actions = actionsFromDispatch(store.dispatch);

    function renderApp(){
    d3.select("body").call(app, store.getState(), actions);
    }

    renderApp = function(){
    d3.select("body").call(app, store.getState(), actions);
    }
    renderApp();
    store.subscribe(renderApp);
    loadData(actions);
  15. curran revised this gist Mar 10, 2017. 1 changed file with 17 additions and 28 deletions.
    45 changes: 17 additions & 28 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -268,23 +268,21 @@
    });

    function loadData(actions){

    var numericColumns = [
    "acceleration",
    "cylinders",
    "displacement",
    "horsepower",
    "weight",
    "year",
    "mpg"
    ];

    var ordinalColumns = [
    "cylinders",
    "origin",
    "name",
    "year"
    ];
    "acceleration",
    "cylinders",
    "displacement",
    "horsepower",
    "weight",
    "year",
    "mpg"
    ],
    ordinalColumns = [
    "cylinders",
    "origin",
    "name",
    "year"
    ];

    setTimeout(function (){ // Show off the spinner for a few seconds ;)
    d3.csv("auto-mpg.csv", type, function (data){
    @@ -340,22 +338,13 @@
    });
    },
    setX: function (column){
    dispatch({
    type: "SET_X",
    column: column
    });
    dispatch({ type: "SET_X", column: column });
    },
    setY: function (column){
    dispatch({
    type: "SET_Y",
    column: column
    });
    dispatch({ type: "SET_Y", column: column });
    },
    setColor: function (column){
    dispatch({
    type: "SET_COLOR",
    column: column
    });
    dispatch({ type: "SET_COLOR", column: column });
    }
    };
    }
  16. curran revised this gist Mar 10, 2017. 1 changed file with 59 additions and 65 deletions.
    124 changes: 59 additions & 65 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -301,81 +301,75 @@
    }

    function reducer (state, action){
    var state = state || {
    width: 960,
    height: 500 - 38,
    loading: true,
    margin: {top: 12, right: 12, bottom: 40, left: 50},
    x: "displacement",
    y: "horsepower",
    color: "origin"
    };
    switch (action.type) {
    case "INGEST_DATA":
    return Object.assign({}, state, {
    loading: false,
    data: action.data,
    numericColumns: action.numericColumns,
    ordinalColumns: action.ordinalColumns
    });
    case "SET_X":
    return Object.assign({}, state, {
    x: action.column
    });
    case "SET_Y":
    return Object.assign({}, state, {
    y: action.column
    });
    case "SET_COLOR":
    return Object.assign({}, state, {
    color: action.column
    });
    default:
    return state;
    }
    var state = state || {
    width: 960,
    height: 500 - 38,
    loading: true,
    margin: {top: 12, right: 12, bottom: 40, left: 50},
    x: "displacement",
    y: "horsepower",
    color: "origin"
    };
    switch (action.type) {
    case "INGEST_DATA":
    return Object.assign({}, state, {
    loading: false,
    data: action.data,
    numericColumns: action.numericColumns,
    ordinalColumns: action.ordinalColumns
    });
    case "SET_X":
    return Object.assign({}, state, { x: action.column });
    case "SET_Y":
    return Object.assign({}, state, { y: action.column });
    case "SET_COLOR":
    return Object.assign({}, state, { color: action.column });
    default:
    return state;
    }
    }

    function actionsFromDispatch(dispatch){
    return {
    ingestData: function (data, numericColumns, ordinalColumns){
    dispatch({
    type: "INGEST_DATA",
    data: data,
    numericColumns: numericColumns,
    ordinalColumns: ordinalColumns
    });
    },
    setX: function (column){
    dispatch({
    type: "SET_X",
    column: column
    });
    },
    setY: function (column){
    dispatch({
    type: "SET_Y",
    column: column
    });
    },
    setColor: function (column){
    dispatch({
    type: "SET_COLOR",
    column: column
    });
    }
    };
    }

    function main(){

    var store = Redux.createStore(reducer),
    actions = {
    ingestData: function (data, numericColumns, ordinalColumns){
    store.dispatch({
    type: "INGEST_DATA",
    data: data,
    numericColumns: numericColumns,
    ordinalColumns: ordinalColumns
    });
    },
    setX: function (column){
    store.dispatch({
    type: "SET_X",
    column: column
    });
    },
    setY: function (column){
    store.dispatch({
    type: "SET_Y",
    column: column
    });
    },
    setColor: function (column){
    store.dispatch({
    type: "SET_COLOR",
    column: column
    });
    }
    };
    actions = actionsFromDispatch(store.dispatch);


    function renderApp(){
    d3.select("body")
    .call(app, store.getState(), actions);
    d3.select("body").call(app, store.getState(), actions);
    }

    renderApp();
    store.subscribe(renderApp);

    loadData(actions);
    }
    main();
  17. curran revised this gist Mar 10, 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
    @@ -174,7 +174,7 @@
    // Wish we could use D3 here for DOM manipulation..
    tip.html(function(d) {
    return [
    "<h3>" + d.year + " " + d.name + "</h3>",
    "<h4>" + d.year + " " + d.name + "</h4>",
    "<div><strong>" + state.x + ": </strong>",
    "<span>" + d[state.x] + "</span></div>",
    "<div><strong>" + state.y + ": </strong>",
  18. curran revised this gist Mar 10, 2017. 1 changed file with 2 additions and 2 deletions.
    4 changes: 2 additions & 2 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -147,8 +147,8 @@
    .enter().append("circle")
    .attr("class", "point")
    .attr("r", 0)
    .attr("cx", innerWidth / 2)
    .attr("cy", innerHeight / 2)
    .attr("cx", d.width / 2 - margin.left)
    .attr("cy", d.height / 2 - margin.top)
    .merge(circles)
    .on("mouseover", d.show)
    .on("mouseout", d.hide)
  19. curran revised this gist Mar 10, 2017. 1 changed file with 21 additions and 22 deletions.
    43 changes: 21 additions & 22 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -221,7 +221,6 @@

    var select = d3.component("select", "form-control")
    .render(function (d){
    //console.log(d.columns)
    d3.select(this)
    .call(option, d.columns)
    .property("value", d.value)
    @@ -240,27 +239,27 @@

    var menus = d3.component("div", "container-fluid")
    .render(function (d){
    var row = rowComponent(d3.select(this));
    row.call(menu, [
    {
    label: "X",
    value: d.x,
    action: d.setX,
    columns: d.numericColumns
    },
    {
    label: "Y",
    value: d.y,
    action: d.setY,
    columns: d.numericColumns
    },
    {
    label: "Color",
    value: d.color,
    action: d.setColor,
    columns: d.ordinalColumns
    }
    ], d);
    rowComponent(d3.select(this))
    .call(menu, [
    {
    label: "X",
    value: d.x,
    action: d.setX,
    columns: d.numericColumns
    },
    {
    label: "Y",
    value: d.y,
    action: d.setY,
    columns: d.numericColumns
    },
    {
    label: "Color",
    value: d.color,
    action: d.setColor,
    columns: d.ordinalColumns
    }
    ], d);
    });

    var app = d3.component("div")
  20. curran revised this gist Mar 10, 2017. 1 changed file with 1 addition and 2 deletions.
    3 changes: 1 addition & 2 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -240,8 +240,7 @@

    var menus = d3.component("div", "container-fluid")
    .render(function (d){
    var row = d3.select(this).selectAll("div").data([1]);
    row = row.merge(row.enter().append("div").attr("class", "row"));
    var row = rowComponent(d3.select(this));
    row.call(menu, [
    {
    label: "X",
  21. curran revised this gist Mar 10, 2017. 1 changed file with 4 additions and 12 deletions.
    16 changes: 4 additions & 12 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -231,16 +231,11 @@
    });

    var rowComponent = d3.component("div", "row");

    var colSm10 = d3.component("div", "col-sm-10");
    var menu = d3.component("div", "col-sm-4")
    .render(function (d){
    var row = rowComponent(d3.select(this));
    row.call(label, d.label)

    var col = row.selectAll("div").data([1]);
    col = col.merge(col.enter().append("div")
    .attr("class", "col-sm-10"));
    col.call(select, d);
    var row = rowComponent(d3.select(this)).call(label, d.label);
    colSm10(row).call(select, d);
    });

    var menus = d3.component("div", "container-fluid")
    @@ -271,10 +266,7 @@

    var app = d3.component("div")
    .render(function (d){
    console.log(d);
    d3.select(this)
    .call(menus, d)
    .call(svg, d);
    d3.select(this).call(menus, d).call(svg, d);
    });

    function loadData(actions){
  22. curran revised this gist Mar 10, 2017. 1 changed file with 4 additions and 7 deletions.
    11 changes: 4 additions & 7 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -2,7 +2,7 @@
    <head>
    <meta charset="utf-8">
    <script src="https://unpkg.com/d3@4"></script>
    <script src="https://unpkg.com/d3-component@2"></script>
    <script src="https://unpkg.com/d3-component@2.1"></script>
    <script src="https://unpkg.com/redux@3/dist/redux.min.js"></script>
    <script src="https://unpkg.com/d3-tip@0.7.1"></script>
    <link rel="stylesheet" href="https://unpkg.com/bootstrap@4.0.0-alpha.6/dist/css/bootstrap.min.css">
    @@ -164,6 +164,7 @@
    .render(render);
    }());

    // Leverage the d3-tip library for tooltips.
    var tooltip = (function (){
    var tip = d3.tip()
    .attr("class", "d3-tip")
    @@ -181,9 +182,7 @@
    "<div><strong>" + state.color + ": </strong>",
    "<span>" + d[state.color] + "</span></div>"
    ].join("");
    //"<strong>Frequency:</strong> <span style='color:red'>" + d.frequency + "</span>";
    });

    svgSelection.call(tip);
    return {
    show: tip.show,
    @@ -231,13 +230,11 @@
    })
    });

    var row = d3.component("div", "row");
    var rowComponent = d3.component("div", "row");

    var menu = d3.component("div", "col-sm-4")
    .render(function (d){
    var row = d3.select(this).selectAll("div").data([1]);
    row = row.merge(row.enter().append("div")
    .attr("class", "row"));
    var row = rowComponent(d3.select(this));
    row.call(label, d.label)

    var col = row.selectAll("div").data([1]);
  23. Building blocks revised this gist Mar 10, 2017. 1 changed file with 0 additions and 0 deletions.
    Binary file modified thumbnail.png
    View file
    Loading
    Sorry, something went wrong. Reload?
    Sorry, we cannot display this file.
    Sorry, this file is invalid so it cannot be displayed.
  24. curran revised this gist Mar 10, 2017. No changes.
  25. curran revised this gist Mar 10, 2017. 1 changed file with 8 additions and 2 deletions.
    10 changes: 8 additions & 2 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -170,10 +170,16 @@
    .offset([-10, 0]);
    return function (svgSelection, state){

    // Wish we could use D3 here for DOM manipulation..
    tip.html(function(d) {
    return [
    "<strong>" + state.x + ":</strong>",
    "<span>" + d[state.x] + "</span>"
    "<h3>" + d.year + " " + d.name + "</h3>",
    "<div><strong>" + state.x + ": </strong>",
    "<span>" + d[state.x] + "</span></div>",
    "<div><strong>" + state.y + ": </strong>",
    "<span>" + d[state.y] + "</span></div>",
    "<div><strong>" + state.color + ": </strong>",
    "<span>" + d[state.color] + "</span></div>"
    ].join("");
    //"<strong>Frequency:</strong> <span style='color:red'>" + d.frequency + "</span>";
    });
  26. curran revised this gist Mar 10, 2017. 1 changed file with 21 additions and 4 deletions.
    25 changes: 21 additions & 4 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -12,6 +12,17 @@
    stroke: currentColor;
    fill-opacity: 0.3;
    }

    /* Tooltip styles copied from
    http://bl.ocks.org/Caged/6476579 */
    .d3-tip {
    line-height: 1;
    padding: 12px;
    background: rgba(0, 0, 0, 0.8);
    color: #fff;
    border-radius: 2px;
    }

    </style>
    </head>
    <body>
    @@ -156,11 +167,17 @@
    var tooltip = (function (){
    var tip = d3.tip()
    .attr("class", "d3-tip")
    .offset([-10, 0])
    .html(function(d) {
    return "<strong>Frequency:</strong> <span style='color:red'>" + d.frequency + "</span>";
    .offset([-10, 0]);
    return function (svgSelection, state){

    tip.html(function(d) {
    return [
    "<strong>" + state.x + ":</strong>",
    "<span>" + d[state.x] + "</span>"
    ].join("");
    //"<strong>Frequency:</strong> <span style='color:red'>" + d.frequency + "</span>";
    });
    return function (svgSelection, d){
    svgSelection.call(tip);
    return {
    show: tip.show,
  27. curran revised this gist Mar 10, 2017. 1 changed file with 27 additions and 4 deletions.
    31 changes: 27 additions & 4 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -4,6 +4,7 @@
    <script src="https://unpkg.com/d3@4"></script>
    <script src="https://unpkg.com/d3-component@2"></script>
    <script src="https://unpkg.com/redux@3/dist/redux.min.js"></script>
    <script src="https://unpkg.com/d3-tip@0.7.1"></script>
    <link rel="stylesheet" href="https://unpkg.com/bootstrap@4.0.0-alpha.6/dist/css/bootstrap.min.css">
    <style>
    .point {
    @@ -77,7 +78,7 @@
    .scale(d.scale)
    .ticks(d.ticks || 10))
    .transition("opacity").duration(2000)
    .attr("opacity", 1);
    .attr("opacity", 0.8);
    })
    .render(function (d){
    d3.select(this)
    @@ -96,6 +97,8 @@
    yScale = d3.scaleLinear(),
    colorScale = d3.scaleOrdinal()
    .range(d3.schemeCategory10);


    function render(d){
    var x = d.x,
    y = d.y,
    @@ -136,6 +139,8 @@
    .attr("cx", innerWidth / 2)
    .attr("cy", innerHeight / 2)
    .merge(circles)
    .on("mouseover", d.show)
    .on("mouseout", d.hide)
    .transition()
    .duration(2000)
    .delay(function (d, i){ return i * 5; })
    @@ -148,20 +153,38 @@
    .render(render);
    }());

    var tooltip = (function (){
    var tip = d3.tip()
    .attr("class", "d3-tip")
    .offset([-10, 0])
    .html(function(d) {
    return "<strong>Frequency:</strong> <span style='color:red'>" + d.frequency + "</span>";
    });
    return function (svgSelection, d){
    svgSelection.call(tip);
    return {
    show: tip.show,
    hide: tip.hide
    };
    }
    }());

    // This component manages an svg element, and
    // either displays a spinner or text,
    // depending on the value of the `loading` state.
    var svg = d3.component("svg")
    .render(function (d){
    d3.select(this)
    var svgSelection = d3.select(this)
    .attr("width", d.width)
    .attr("height", d.height)
    .call(spinner, !d.loading ? [] : {
    x: d.width / 2,
    y: d.height / 2,
    speed: 0.2
    })
    .call(scatterPlot, d.loading ? [] : d);
    });
    var tipCallbacks = tooltip(svgSelection, d);
    svgSelection
    .call(scatterPlot, d.loading ? [] : d, tipCallbacks);
    });

    var label = d3.component("label", "col-sm-2 col-form-label")
  28. curran revised this gist Mar 10, 2017. No changes.
  29. curran revised this gist Mar 10, 2017. 1 changed file with 4 additions and 3 deletions.
    7 changes: 4 additions & 3 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -7,8 +7,9 @@
    <link rel="stylesheet" href="https://unpkg.com/bootstrap@4.0.0-alpha.6/dist/css/bootstrap.min.css">
    <style>
    .point {
    fill-opacity: 0.2;
    stroke: black;
    fill: currentColor;
    stroke: currentColor;
    fill-opacity: 0.3;
    }
    </style>
    </head>
    @@ -141,7 +142,7 @@
    .attr("r", 10)
    .attr("cx", function (d){ return xScale(d[x]); })
    .attr("cy", function (d){ return yScale(d[y]); })
    .attr("fill", function (d){ return colorScale(d[color]); })
    .attr("color", function (d){ return colorScale(d[color]); })
    }
    return d3.component("g")
    .render(render);
  30. curran revised this gist Mar 10, 2017. 1 changed file with 57 additions and 20 deletions.
    77 changes: 57 additions & 20 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -7,7 +7,7 @@
    <link rel="stylesheet" href="https://unpkg.com/bootstrap@4.0.0-alpha.6/dist/css/bootstrap.min.css">
    <style>
    .point {
    fill: rgba(0, 0, 0, 0.2);
    fill-opacity: 0.2;
    stroke: black;
    }
    </style>
    @@ -92,10 +92,13 @@
    // This component displays the visualization.
    var scatterPlot = (function (){
    var xScale = d3.scaleLinear(),
    yScale = d3.scaleLinear();
    yScale = d3.scaleLinear(),
    colorScale = d3.scaleOrdinal()
    .range(d3.schemeCategory10);
    function render(d){
    var x = d.x,
    y = d.y,
    color = d.color,
    margin = d.margin,
    innerWidth = d.width - margin.left - margin.right,
    innerHeight = d.height - margin.top - margin.bottom;
    @@ -137,7 +140,8 @@
    .delay(function (d, i){ return i * 5; })
    .attr("r", 10)
    .attr("cx", function (d){ return xScale(d[x]); })
    .attr("cy", function (d){ return yScale(d[y]); });
    .attr("cy", function (d){ return yScale(d[y]); })
    .attr("fill", function (d){ return colorScale(d[color]); })
    }
    return d3.component("g")
    .render(render);
    @@ -171,6 +175,7 @@

    var select = d3.component("select", "form-control")
    .render(function (d){
    //console.log(d.columns)
    d3.select(this)
    .call(option, d.columns)
    .property("value", d.value)
    @@ -179,7 +184,9 @@
    })
    });

    var menu = d3.component("div", "col-sm-6")
    var row = d3.component("div", "row");

    var menu = d3.component("div", "col-sm-4")
    .render(function (d){
    var row = d3.select(this).selectAll("div").data([1]);
    row = row.merge(row.enter().append("div")
    @@ -198,26 +205,36 @@
    row = row.merge(row.enter().append("div").attr("class", "row"));
    row.call(menu, [
    {
    label: "X Axis",
    label: "X",
    value: d.x,
    action: d.setX
    action: d.setX,
    columns: d.numericColumns
    },
    {
    label: "Y Axis",
    label: "Y",
    value: d.y,
    action: d.setY
    action: d.setY,
    columns: d.numericColumns
    },
    {
    label: "Color",
    value: d.color,
    action: d.setColor,
    columns: d.ordinalColumns
    }
    ], d);
    });

    var app = d3.component("div")
    .render(function (d){
    console.log(d);
    d3.select(this)
    .call(menus, d)
    .call(svg, d);
    });

    function loadData(actions){

    var numericColumns = [
    "acceleration",
    "cylinders",
    @@ -227,9 +244,17 @@
    "year",
    "mpg"
    ];

    var ordinalColumns = [
    "cylinders",
    "origin",
    "name",
    "year"
    ];

    setTimeout(function (){ // Show off the spinner for a few seconds ;)
    d3.csv("auto-mpg.csv", type, function (data){
    actions.ingestData(data, numericColumns)
    actions.ingestData(data, numericColumns, ordinalColumns)
    });
    }, 2000);

    @@ -249,14 +274,15 @@
    margin: {top: 12, right: 12, bottom: 40, left: 50},
    x: "displacement",
    y: "horsepower",
    columns: []
    color: "origin"
    };
    switch (action.type) {
    case "INGEST_DATA":
    return Object.assign({}, state, {
    loading: false,
    data: action.data,
    columns: action.columns
    numericColumns: action.numericColumns,
    ordinalColumns: action.ordinalColumns
    });
    case "SET_X":
    return Object.assign({}, state, {
    @@ -266,19 +292,25 @@
    return Object.assign({}, state, {
    y: action.column
    });
    case "SET_COLOR":
    return Object.assign({}, state, {
    color: action.column
    });
    default:
    return state;
    }
    }

    function main(){

    var store = Redux.createStore(reducer),
    actions = {
    ingestData: function (data, columns){
    ingestData: function (data, numericColumns, ordinalColumns){
    store.dispatch({
    type: "INGEST_DATA",
    data: data,
    columns:columns
    numericColumns: numericColumns,
    ordinalColumns: ordinalColumns
    });
    },
    setX: function (column){
    @@ -292,20 +324,25 @@
    type: "SET_Y",
    column: column
    });
    },
    setColor: function (column){
    store.dispatch({
    type: "SET_COLOR",
    column: column
    });
    }
    };

    renderApp();
    store.subscribe(renderApp);

    loadData(actions);




    function renderApp(){
    d3.select("body")
    .call(app, store.getState(), actions);
    }

    renderApp();
    store.subscribe(renderApp);

    loadData(actions);
    }
    main();
    </script>