Skip to content

Instantly share code, notes, and snippets.

@alfmoh

alfmoh/.block

Last active May 14, 2019 15:12
Show Gist options
  • Save alfmoh/47c443cd8894f76be0ee6fc935b1c9a8 to your computer and use it in GitHub Desktop.
Save alfmoh/47c443cd8894f76be0ee6fc935b1c9a8 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

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

    .bar {
    shape-rendering: cripEdges;
    fill:purple;
    }

    </style>
    </head>

    @@ -30,16 +36,20 @@
    // .style("fill","#FE9922")
    // .style("stroke", "#9A8B7A")
    // .style("stroke-width", "1px")
    // const xAxis = d3.axisBottom(scale)

    // svg.append("g")
    // .call(xAxis)
    // .attr("transform",`translate(-45,450)`)


    svg.selectAll("rect")
    svg.selectAll("rect.bar")
    .data(data)
    .enter()
    .append("rect")
    .classed("bar",true)
    .attr("width",d=>scale(d))
    .attr("height",45)
    .attr("height",48)
    .attr("x",(d,i)=>5)
    .attr("y",(d,i)=>50*i)
    .style("fill","grey")
    </script>
    </body>
  2. alfmoh revised this gist May 14, 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 @@
    // .style("stroke", "#9A8B7A")
    // .style("stroke-width", "1px")


    svg.selectAll("rect")
    .data(data)
    .enter()
  3. alfmoh revised this gist May 14, 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
    @@ -36,7 +36,7 @@
    .enter()
    .append("rect")
    .attr("width",d=>scale(d))
    .attr("height",40)
    .attr("height",45)
    .attr("x",(d,i)=>5)
    .attr("y",(d,i)=>50*i)
    .style("fill","grey")
  4. alfmoh revised this gist May 14, 2019. 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
    @@ -17,7 +17,7 @@
    const data = [239,453,514,432,122,512,291,301,300];
    const scale = d3.scaleLinear()
    .domain([0,514])
    .range([50,400])
    .range([50,500])

    // svg.selectAll("rect")
    // .data(data)
    @@ -35,7 +35,7 @@
    .data(data)
    .enter()
    .append("rect")
    .attr("width",d=>d)
    .attr("width",d=>scale(d))
    .attr("height",40)
    .attr("x",(d,i)=>5)
    .attr("y",(d,i)=>50*i)
  5. alfmoh created this gist May 14, 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)
    44 changes: 44 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,44 @@
    <!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>
    // 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 data = [239,453,514,432,122,512,291,301,300];
    const scale = d3.scaleLinear()
    .domain([0,514])
    .range([50,400])

    // svg.selectAll("rect")
    // .data(data)
    // .enter()
    // .append("rect")
    // .attr("width",50)
    // .attr("height",d=>scale(d))
    // .attr("y",d=>scale(500-d))
    // .attr("x",(d,i)=>60 * i)
    // .style("fill","#FE9922")
    // .style("stroke", "#9A8B7A")
    // .style("stroke-width", "1px")

    svg.selectAll("rect")
    .data(data)
    .enter()
    .append("rect")
    .attr("width",d=>d)
    .attr("height",40)
    .attr("x",(d,i)=>5)
    .attr("y",(d,i)=>50*i)
    .style("fill","grey")
    </script>
    </body>