Skip to content

Instantly share code, notes, and snippets.

@alfmoh

alfmoh/.block

Last active May 13, 2019 20:31
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save alfmoh/4181f1cde04de782671b7a184d4a8cb0 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save alfmoh/4181f1cde04de782671b7a184d4a8cb0 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. alfmoh revised this gist May 13, 2019. No changes.
  2. alfmoh created this gist May 13, 2019.
    1 change: 1 addition & 0 deletions .block
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1 @@
    license: mit
    1 change: 1 addition & 0 deletions README.md
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1 @@
    Built with [blockbuilder.org](http://blockbuilder.org)
    110 changes: 110 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,110 @@
    <!DOCTYPE html>
    <head>
    <meta charset="utf-8">
    <script src="https://d3js.org/d3.v4.min.js"></script>
    <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
    </style>
    </head>

    <body>
    <button class="rand">Randomize </button>
    <!-- <input type="button" value="Randomize" class="rand" /> -->
    <script>
    console.clear();
    // Feel free to change or delete any of the code you see in this editor!
    const w = 960;
    const h = 500;
    const padding = 40;

    var svg = d3.select("body").append("svg")
    .attr("width", w)
    .attr("height", h)

    var dataset = [];

    function createData() {
    dataset = [];
    const numDataPoints = 50;
    const maxRange = Math.random() * 1000;

    for(let i=0; i < numDataPoints; i++) {
    let newNum1 = Math.floor(Math.random() * maxRange);
    let newNum2 = Math.floor(Math.random() * maxRange);

    dataset.push([newNum1,newNum2])
    }
    return dataset;
    }

    var xScale;
    var yScale;
    var xAxis;
    var yAxis;

    function createScaling() {
    xScale = d3.scaleLinear()
    .domain([0,d3.max(dataset,d=>d[0])])
    .range([padding,w-padding]);

    yScale = d3.scaleLinear()
    .domain([0,d3.max(dataset,d=>d[1])])
    .range([h-padding,padding]);

    xAxis = d3.axisBottom()
    .scale(xScale)
    yAxis = d3.axisLeft()
    .scale(yScale)
    }

    createData();

    createScaling();


    svg.append("g")
    .attr("id","circles")
    .selectAll("circle")
    .data(dataset)
    .enter()
    .append("circle")
    .attr("r",2)
    .attr("cx",d=>xScale(d[0]))
    .attr("cy",d=>yScale(d[1]))

    svg.append("g")
    .attr("id","x")
    .attr("transform",`translate(0,${h-padding+5})`)
    .call(xAxis)

    svg.append("g")
    .attr("id","y")
    .attr("transform",`translate(${padding},0)`)
    .call(yAxis)

    d3.select(".rand")
    .on("click",()=>{
    createData();
    createScaling();

    svg.selectAll("circle")
    .data(dataset)
    .transition()
    .duration(1000)
    .attr("r",2)
    .attr("cx",d=>xScale(d[0]))
    .attr("cy",d=>yScale(d[1]))

    svg.select("#x")
    .transition()
    .duration(1000)
    .call(xAxis)

    svg.select("#y")
    .transition()
    .duration(1000)
    .call(yAxis)
    })

    </script>
    </body>