Skip to content

Instantly share code, notes, and snippets.

@alfmoh

alfmoh/.block

Last active May 13, 2019 18:04
Show Gist options

  • Select an option

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

Select an option

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

Revisions

  1. alfmoh revised this gist May 13, 2019. No changes.
  2. alfmoh revised this gist May 13, 2019. 1 changed file with 7 additions and 5 deletions.
    12 changes: 7 additions & 5 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -25,16 +25,13 @@
    const scale = d3.scaleLinear()
    .domain(dataset)
    .range([10,50]);
    const xAxis = d3.axisBottom(scale);
    svg.append("g")
    .call(xAxis)
    .attr("transform","translate(10,450)")


    const colorScale = d3.scaleQuantile()
    .domain(dataset)
    .range(["red","blue"])

    const g = svg.selectAll("a")
    const g = svg.selectAll("g")
    .data(dataset)
    .enter()
    .append("g")
    @@ -48,6 +45,11 @@
    .duration(1000)
    .attr("r",(d,i)=>d*5)
    .style("fill","pink")

    const xAxis = d3.axisBottom(scale);
    svg.append("g")
    .call(xAxis)
    .attr("transform","translate(10,450)")

    g.transition()
    .delay(d=>d*200)
  3. alfmoh revised this gist May 13, 2019. 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
    @@ -28,7 +28,7 @@
    const xAxis = d3.axisBottom(scale);
    svg.append("g")
    .call(xAxis)
    .attr("transform","translate(0,450)")
    .attr("transform","translate(10,450)")

    const colorScale = d3.scaleQuantile()
    .domain(dataset)
  4. alfmoh revised this gist May 12, 2019. 1 changed file with 11 additions and 0 deletions.
    11 changes: 11 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -4,6 +4,11 @@
    <script src="https://d3js.org/d3.v4.min.js"></script>
    <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }

    .text {
    font: italic 15px sans-serif;
    }

    </style>
    </head>

    @@ -49,6 +54,12 @@
    .duration(1000)
    .attr("transform",(d,i)=>`translate(${scale(d)},${i*50})`)

    g.append("text")
    .text(d=>d)
    .style("fill","white")
    .attr("class","text")
    .attr("transform",(d,i)=>`translate(${-i*2},0)`)

    // g.transition()
    // // .delay(d=>d*20)
    // .duration(1000)
  5. alfmoh revised this gist May 12, 2019. No changes.
  6. alfmoh revised this gist May 12, 2019. 1 changed file with 42 additions and 14 deletions.
    56 changes: 42 additions & 14 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -29,25 +29,53 @@
    .domain(dataset)
    .range(["red","blue"])

    svg.selectAll("circle")
    const g = svg.selectAll("a")
    .data(dataset)
    .enter()
    .append("circle")
    .attr("r",1)
    .attr("cy",500)
    .attr("cx",(d,i)=>scale(d))
    .transition()
    .append("g")
    .attr("transform",d=>`translate(${scale(d)},500)`)

    const circle = g.append("circle")
    .attr("r",5)
    .style("fill",d=>colorScale(d))
    .transition()
    .delay(d=>d*200)
    .duration(1000)
    .attr("r",(d,i)=>d)
    .attr("cx",(d,i)=>scale(d))
    .attr("cy",(d,i)=>i*50)
    .style("fill",d=>colorScale(d))
    .transition()
    // .delay(d=>d*20)
    .duration(1000)
    .attr("r",(d,i)=>d*5)
    .attr("r",(d,i)=>d*5)
    .style("fill","pink")

    g.transition()
    .delay(d=>d*200)
    .duration(1000)
    .attr("transform",(d,i)=>`translate(${scale(d)},${i*50})`)

    // g.transition()
    // // .delay(d=>d*20)
    // .duration(1000)





    // svg.selectAll("circle")
    // .data(dataset)
    // .enter()
    // .append("circle")
    // .attr("r",1)
    // .attr("cy",500)
    // .attr("cx",(d,i)=>scale(d))
    // .transition()
    // .delay(d=>d*200)
    // .duration(1000)
    // .attr("r",(d,i)=>d)
    // .attr("cx",(d,i)=>scale(d))
    // .attr("cy",(d,i)=>i*50)
    // .style("fill",d=>colorScale(d))
    // .transition()
    // // .delay(d=>d*20)
    // .duration(1000)
    // .attr("r",(d,i)=>d*5)
    // .style("fill","pink")

    </script>
    </body>
  7. alfmoh revised this gist May 11, 2019. 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
    @@ -20,6 +20,10 @@
    const scale = d3.scaleLinear()
    .domain(dataset)
    .range([10,50]);
    const xAxis = d3.axisBottom(scale);
    svg.append("g")
    .call(xAxis)
    .attr("transform","translate(0,450)")

    const colorScale = d3.scaleQuantile()
    .domain(dataset)
  8. alfmoh revised this gist May 10, 2019. No changes.
  9. alfmoh revised this gist May 10, 2019. No changes.
  10. alfmoh revised this gist May 10, 2019. No changes.
  11. alfmoh revised this gist May 10, 2019. 1 changed file with 6 additions and 0 deletions.
    6 changes: 6 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -33,11 +33,17 @@
    .attr("cy",500)
    .attr("cx",(d,i)=>scale(d))
    .transition()
    .delay(d=>d*200)
    .duration(1000)
    .attr("r",(d,i)=>d)
    .attr("cx",(d,i)=>scale(d))
    .attr("cy",(d,i)=>i*50)
    .style("fill",d=>colorScale(d))
    .transition()
    // .delay(d=>d*20)
    .duration(1000)
    .attr("r",(d,i)=>d*5)
    .style("fill","pink")

    </script>
    </body>
  12. alfmoh revised this gist May 10, 2019. 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
    @@ -31,6 +31,7 @@
    .append("circle")
    .attr("r",1)
    .attr("cy",500)
    .attr("cx",(d,i)=>scale(d))
    .transition()
    .duration(1000)
    .attr("r",(d,i)=>d)
  13. alfmoh created this gist May 10, 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)
    42 changes: 42 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,42 @@
    <!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>
    <script>
    console.clear();
    // Feel free to change or delete any of the code you see in this editor!
    var svg = d3.select("body").append("svg")
    .attr("width", 960)
    .attr("height", 500)

    const dataset = [1,2,3,9,5,15];

    const scale = d3.scaleLinear()
    .domain(dataset)
    .range([10,50]);

    const colorScale = d3.scaleQuantile()
    .domain(dataset)
    .range(["red","blue"])

    svg.selectAll("circle")
    .data(dataset)
    .enter()
    .append("circle")
    .attr("r",1)
    .attr("cy",500)
    .transition()
    .duration(1000)
    .attr("r",(d,i)=>d)
    .attr("cx",(d,i)=>scale(d))
    .attr("cy",(d,i)=>i*50)
    .style("fill",d=>colorScale(d))

    </script>
    </body>