Skip to content

Instantly share code, notes, and snippets.

@higgyCodes

higgyCodes/_.md

Last active August 19, 2016 18:44
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save higgyCodes/1ff40b27c9f431ca3f01d08b171b1ccb to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save higgyCodes/1ff40b27c9f431ca3f01d08b171b1ccb to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. higgyCodes revised this gist Aug 19, 2016. 1 changed file with 20 additions and 55 deletions.
    75 changes: 20 additions & 55 deletions inlet.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1,61 +1,26 @@
    var margin = {top: 20, right: 20, bottom: 30, left: 40},
    width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;
    var dataset = [ 5, 10, 13, 19, 21, 25, 22, 18, 15, 13, 11, 12, 15, 20, 18, 17, 16, 18, 23, 25 ];

    var x = d3.scale.ordinal()
    .rangeRoundBands([0, width], 0.1);

    var y = d3.scale.linear()
    .range([height, 0]);
    var w = 500;
    var h = 100;
    var barPadding = 0.3

    var xAxis = d3.svg.axis()
    .scale(x)
    .orient("bottom");

    var yAxis = d3.svg.axis()
    .scale(y)
    .orient("left")
    .ticks(10, "%");
    svg = d3.select("svg")
    .attr("width", w)
    .attr("height", h);

    var svg = d3.select("body").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
    .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");


    d3.tsv("data.tsv", type, function(error, data) {
    if (error) throw error;

    x.domain(data.map(function(d) { return d.letter; }));
    y.domain([0, d3.max(data, function(d) { return d.frequency; })]);

    svg.append("g")
    .attr("class", "x axis")
    .attr("transform", "translate(0," + height + ")")
    .call(xAxis);

    svg.append("g")
    .attr("class", "y axis")
    .call(yAxis)
    .append("text")
    .attr("transform", "rotate(-90)")
    .attr("y", 6)
    .attr("dy", ".71em")
    .style("text-anchor", "end")
    .text("Frequency");

    svg.selectAll(".bar")
    .data(data)
    .enter().append("rect")
    .attr("class", "bar")
    .attr("x", function(d) { return x(d.letter); })
    .attr("width", x.rangeBand())
    .attr("y", function(d) { return y(d.frequency); })
    .attr("height", function(d) { return height - y(d.frequency); });
    });

    function type(d) {
    d.frequency = +d.frequency;
    return d;
    }
    svg.selectAll("rect")
    .data(dataset)
    .enter()
    .append("rect")
    .attr ("x", function (d, i) {
    return i * (w/ dataset.length - barPadding)
    })
    .attr("y", function(d) {return h - d})
    .attr("width", 20)
    .attr("height", function(d){
    return d
    })
    .append("rect")
  2. higgyCodes revised this gist Aug 19, 2016. No changes.
  3. higgyCodes revised this gist Aug 19, 2016. 3 changed files with 91 additions and 29 deletions.
    2 changes: 1 addition & 1 deletion config.json
    View file
    Original file line number Diff line number Diff line change
    @@ -1 +1 @@
    {"description":"Bar Chart","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"_.md":{"default":true,"vim":false,"emacs":false,"fontSize":12},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12},"babel.js":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"fullscreen":false,"play":true,"loop":false,"restart":false,"autoinit":true,"pause":true,"loop_type":"pingpong","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01,"ajax-caching":true,"thumbnail":"http://i.imgur.com/V8XYWiB.png"}
    {"description":"Bar Chart","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"_.md":{"default":true,"vim":false,"emacs":false,"fontSize":12},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12},"babel.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"data.tsv":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"fullscreen":false,"play":true,"loop":false,"restart":false,"autoinit":true,"pause":true,"loop_type":"pingpong","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01,"ajax-caching":true,"thumbnail":"http://i.imgur.com/V8XYWiB.png"}
    29 changes: 29 additions & 0 deletions data.tsv
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,29 @@
    data.tsv#

    letter frequency
    A .08167
    B .01492
    C .02782
    D .04253
    E .12702
    F .02288
    G .02015
    H .06094
    I .06966
    J .00153
    K .00772
    L .04025
    M .02406
    N .06749
    O .07507
    P .01929
    Q .00095
    R .05987
    S .06327
    T .09056
    U .02758
    V .00978
    W .02360
    X .00150
    Y .01974
    Z .00074
    89 changes: 61 additions & 28 deletions inlet.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1,28 +1,61 @@
    // MATCH DATA TO MANIPULATE
    var matchData = {
    matched: 6,
    userAtts: 15,
    jobAtts: 10
    };


    //COLORS
    var colors = {
    blue:"#19B5FE",
    white:"#FFFFFF",
    pink:"#EC407A",
    orange: "#FFD54F",
    green: "#3FC380",
    blueGrey: "#607D8B"
    }

    //COLOR CHOICES

    // Gradient Range
    var gradientSize = 0.5
    var svg = d3.select("svg");
    var fullGroup = svg.append("g");
    var dartBoard = fullGroup.append("g");
    var blob = fullGroup.append("g")

    var yAxis = d3.svg.axis().scale(y)
    var margin = {top: 20, right: 20, bottom: 30, left: 40},
    width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;

    var x = d3.scale.ordinal()
    .rangeRoundBands([0, width], 0.1);

    var y = d3.scale.linear()
    .range([height, 0]);

    var xAxis = d3.svg.axis()
    .scale(x)
    .orient("bottom");

    var yAxis = d3.svg.axis()
    .scale(y)
    .orient("left")
    .ticks(10, "%");

    var svg = d3.select("body").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
    .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");


    d3.tsv("data.tsv", type, function(error, data) {
    if (error) throw error;

    x.domain(data.map(function(d) { return d.letter; }));
    y.domain([0, d3.max(data, function(d) { return d.frequency; })]);

    svg.append("g")
    .attr("class", "x axis")
    .attr("transform", "translate(0," + height + ")")
    .call(xAxis);

    svg.append("g")
    .attr("class", "y axis")
    .call(yAxis)
    .append("text")
    .attr("transform", "rotate(-90)")
    .attr("y", 6)
    .attr("dy", ".71em")
    .style("text-anchor", "end")
    .text("Frequency");

    svg.selectAll(".bar")
    .data(data)
    .enter().append("rect")
    .attr("class", "bar")
    .attr("x", function(d) { return x(d.letter); })
    .attr("width", x.rangeBand())
    .attr("y", function(d) { return y(d.frequency); })
    .attr("height", function(d) { return height - y(d.frequency); });
    });

    function type(d) {
    d.frequency = +d.frequency;
    return d;
    }
  4. higgyCodes revised this gist Aug 18, 2016. 2 changed files with 13 additions and 112 deletions.
    2 changes: 1 addition & 1 deletion config.json
    View file
    Original file line number Diff line number Diff line change
    @@ -1 +1 @@
    {"description":"Third Iteration","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"_.md":{"default":true,"vim":false,"emacs":false,"fontSize":12},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12},"babel.js":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"fullscreen":false,"play":true,"loop":false,"restart":false,"autoinit":true,"pause":true,"loop_type":"pingpong","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01,"ajax-caching":true,"thumbnail":"http://i.imgur.com/V8XYWiB.png"}
    {"description":"Bar Chart","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"_.md":{"default":true,"vim":false,"emacs":false,"fontSize":12},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12},"babel.js":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"fullscreen":false,"play":true,"loop":false,"restart":false,"autoinit":true,"pause":true,"loop_type":"pingpong","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01,"ajax-caching":true,"thumbnail":"http://i.imgur.com/V8XYWiB.png"}
    123 changes: 12 additions & 111 deletions inlet.js
    View file
    Original file line number Diff line number Diff line change
    @@ -8,120 +8,21 @@

    //COLORS
    var colors = {
    blue:"#19B5FE",
    white:"#FFFFFF",
    pink:"#EC407A",
    orange: "#FFD54F",
    green: "#3FC380",
    blueGrey: "#607D8B"
    blue:"#19B5FE",
    white:"#FFFFFF",
    pink:"#EC407A",
    orange: "#FFD54F",
    green: "#3FC380",
    blueGrey: "#607D8B"
    }

    //COLOR CHOICES

    var background = colors["blueGrey"]
    var innerColorOne = colors["blue"]
    var innerColorTwo = colors["pink"];

    // Gradient Range
    var gradientSize = 0.5


    var height = 400;
    var width = 400;

    var bullSize = 150;
    var startPoint = 0

    function matchRatio(gradientSize, side) {
    var size = (side === "min" ? -gradientSize : gradientSize) / 20
    var ratio = matchData.matched / matchData.jobAtts;

    if (ratio === 0 || ratio === 1) {
    return ratio
    }

    return ratio + size
    }


    function attsRatio(side) {
    var ratio = matchData.jobAtts / matchData.userAtts;
    return (ratio > 1) ? 1 : ratio
    }

    function findDiff(size, blobRadius) {
    var matched = matchData.matched;
    var jobAtts = matchData.jobAtts;
    var score = 1 - matched / jobAtts;
    return (blobRadius * score) + (bullSize * score)
    }


    var blobAtts = function() {
    var atts = {"r": 40, "color" : "#EC407A"}
    var blobRadius = bullSize * attsRatio()
    atts.cx = startPoint;
    atts.cy = startPoint;
    atts.r = blobRadius;
    return atts
    }

    var svg = d3.select("svg");
    var fullGroup = svg.append("g");
    var dartBoard = fullGroup.append("g");
    var blob = fullGroup.append("g")


    var gradient = svg.append("defs")
    .append("linearGradient")
    .attr("id", "gradient")


    gradient.append("stop")
    .attr("offset", matchRatio(gradientSize, 'min'))
    .attr("stop-color", innerColorOne)
    .attr("stop-opacity", 1);

    gradient.append("stop")
    .attr("offset", matchRatio(gradientSize, 'max'))
    .attr("stop-color", innerColorTwo)
    .attr("stop-opacity", 1);

    var bullseye = dartBoard.selectAll("circle")
    .data([5], function(d, i) { return d; });


    bullseye.enter().append("circle")
    .attr("cy", startPoint)
    .attr("cx", startPoint)
    .attr("r", function(d) {
    return bullSize })
    .style("fill", background)
    .style("opacity", 1)

    bullseye.exit().remove();

    var userData = blob.selectAll('circle')
    .data([attsRatio()], function(d, i) { return d; });
    userData.enter().append("circle")
    .attr(blobAtts())
    .style("fill", "url(#gradient)")
    .style("opacity", 1)
    // .style("stroke", "black")
    // .style("stroke-width", 5)
    userData.exit().remove();


    function randomAngle() {
    return Math.random() * 360
    }

    function findScale(height, width) {
    return (height < width ? height : width) / 320;
    }

    function findAnchor(height, width) {
    return findScale(height, width) * 160
    }

    fullGroup.attr("transform", "translate(250, 250)")
    var svg = d3.select("svg");
    var fullGroup = svg.append("g");
    var dartBoard = fullGroup.append("g");
    var blob = fullGroup.append("g")

    var yAxis = d3.svg.axis().scale(y)
  5. higgyCodes revised this gist Aug 18, 2016. 1 changed file with 1 addition and 0 deletions.
    1 change: 1 addition & 0 deletions _.md
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1 @@
    [ <a href="http://tributary.io/inlet/1ff40b27c9f431ca3f01d08b171b1ccb">Launch: Third Iteration</a> ] 1ff40b27c9f431ca3f01d08b171b1ccb by pathiggins13<br>[ <a href="http://tributary.io/inlet/25acfca1b8fe378771d2fb3d199772ba">Launch: Second Iteration</a> ] 25acfca1b8fe378771d2fb3d199772ba by pathiggins13<br>[ <a href="http://tributary.io/inlet/8957096ee14b1cc864c5b294d72533dd">Launch: Dartboard</a> ] 8957096ee14b1cc864c5b294d72533dd by pathiggins13<br>[ <a href="http://tributary.io/inlet/9bc89344a07ed622faa473fa1be9a421">Launch: Dartboard</a> ] 9bc89344a07ed622faa473fa1be9a421 by pathiggins13<br>
  6. higgyCodes created this gist Aug 18, 2016.
    1 change: 1 addition & 0 deletions config.json
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1 @@
    {"description":"Third Iteration","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"_.md":{"default":true,"vim":false,"emacs":false,"fontSize":12},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12},"babel.js":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"fullscreen":false,"play":true,"loop":false,"restart":false,"autoinit":true,"pause":true,"loop_type":"pingpong","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01,"ajax-caching":true,"thumbnail":"http://i.imgur.com/V8XYWiB.png"}
    127 changes: 127 additions & 0 deletions inlet.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,127 @@
    // MATCH DATA TO MANIPULATE
    var matchData = {
    matched: 6,
    userAtts: 15,
    jobAtts: 10
    };


    //COLORS
    var colors = {
    blue:"#19B5FE",
    white:"#FFFFFF",
    pink:"#EC407A",
    orange: "#FFD54F",
    green: "#3FC380",
    blueGrey: "#607D8B"
    }

    //COLOR CHOICES

    var background = colors["blueGrey"]
    var innerColorOne = colors["blue"]
    var innerColorTwo = colors["pink"];

    // Gradient Range
    var gradientSize = 0.5


    var height = 400;
    var width = 400;

    var bullSize = 150;
    var startPoint = 0

    function matchRatio(gradientSize, side) {
    var size = (side === "min" ? -gradientSize : gradientSize) / 20
    var ratio = matchData.matched / matchData.jobAtts;

    if (ratio === 0 || ratio === 1) {
    return ratio
    }

    return ratio + size
    }


    function attsRatio(side) {
    var ratio = matchData.jobAtts / matchData.userAtts;
    return (ratio > 1) ? 1 : ratio
    }

    function findDiff(size, blobRadius) {
    var matched = matchData.matched;
    var jobAtts = matchData.jobAtts;
    var score = 1 - matched / jobAtts;
    return (blobRadius * score) + (bullSize * score)
    }


    var blobAtts = function() {
    var atts = {"r": 40, "color" : "#EC407A"}
    var blobRadius = bullSize * attsRatio()
    atts.cx = startPoint;
    atts.cy = startPoint;
    atts.r = blobRadius;
    return atts
    }

    var svg = d3.select("svg");
    var fullGroup = svg.append("g");
    var dartBoard = fullGroup.append("g");
    var blob = fullGroup.append("g")


    var gradient = svg.append("defs")
    .append("linearGradient")
    .attr("id", "gradient")


    gradient.append("stop")
    .attr("offset", matchRatio(gradientSize, 'min'))
    .attr("stop-color", innerColorOne)
    .attr("stop-opacity", 1);

    gradient.append("stop")
    .attr("offset", matchRatio(gradientSize, 'max'))
    .attr("stop-color", innerColorTwo)
    .attr("stop-opacity", 1);

    var bullseye = dartBoard.selectAll("circle")
    .data([5], function(d, i) { return d; });


    bullseye.enter().append("circle")
    .attr("cy", startPoint)
    .attr("cx", startPoint)
    .attr("r", function(d) {
    return bullSize })
    .style("fill", background)
    .style("opacity", 1)

    bullseye.exit().remove();

    var userData = blob.selectAll('circle')
    .data([attsRatio()], function(d, i) { return d; });
    userData.enter().append("circle")
    .attr(blobAtts())
    .style("fill", "url(#gradient)")
    .style("opacity", 1)
    // .style("stroke", "black")
    // .style("stroke-width", 5)
    userData.exit().remove();


    function randomAngle() {
    return Math.random() * 360
    }

    function findScale(height, width) {
    return (height < width ? height : width) / 320;
    }

    function findAnchor(height, width) {
    return findScale(height, width) * 160
    }

    fullGroup.attr("transform", "translate(250, 250)")