Skip to content

Instantly share code, notes, and snippets.

@d3noob

d3noob/.block

Last active February 4, 2024 22:31
Download ZIP

Revisions

  1. d3noob revised this gist Nov 26, 2019. 3 changed files with 2 additions and 1 deletion.
    1 change: 1 addition & 0 deletions .block
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1 @@
    license: mit
    0 readme.md → README.md
    View file
    File renamed without changes.
    2 changes: 1 addition & 1 deletion index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -8,7 +8,7 @@
    <body>

    <!-- load the d3.js library -->
    <script src="//d3js.org/d3.v4.min.js"></script>
    <script src="https://d3js.org/d3.v4.min.js"></script>
    <script>

    // set the dimensions and margins of the graph
  2. Building blocks revised this gist Jul 21, 2016. 1 changed file with 0 additions and 0 deletions.
    Binary file added 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.
  3. d3noob created this gist Jul 20, 2016.
    71 changes: 71 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,71 @@
    <!DOCTYPE html>
    <meta charset="utf-8">
    <style> /* set the CSS */

    .bar { fill: steelblue; }

    </style>
    <body>

    <!-- load the d3.js library -->
    <script src="//d3js.org/d3.v4.min.js"></script>
    <script>

    // set the dimensions and margins of the graph
    var margin = {top: 20, right: 20, bottom: 30, left: 40},
    width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;

    // set the ranges
    var x = d3.scaleBand()
    .range([0, width])
    .padding(0.1);
    var y = d3.scaleLinear()
    .range([height, 0]);

    // append the svg object to the body of the page
    // append a 'group' element to 'svg'
    // moves the 'group' element to the top left margin
    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 + ")");

    // get the data
    d3.csv("sales.csv", function(error, data) {
    if (error) throw error;

    // format the data
    data.forEach(function(d) {
    d.sales = +d.sales;
    });

    // Scale the range of the data in the domains
    x.domain(data.map(function(d) { return d.salesperson; }));
    y.domain([0, d3.max(data, function(d) { return d.sales; })]);

    // append the rectangles for the bar chart
    svg.selectAll(".bar")
    .data(data)
    .enter().append("rect")
    .attr("class", "bar")
    .attr("x", function(d) { return x(d.salesperson); })
    .attr("width", x.bandwidth())
    .attr("y", function(d) { return y(d.sales); })
    .attr("height", function(d) { return height - y(d.sales); });

    // add the x Axis
    svg.append("g")
    .attr("transform", "translate(0," + height + ")")
    .call(d3.axisBottom(x));

    // add the y Axis
    svg.append("g")
    .call(d3.axisLeft(y));

    });

    </script>
    </body>
    3 changes: 3 additions & 0 deletions readme.md
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,3 @@
    This is a simple bar graph written using d3.js v4.

    This graph is part of the code samples for the update to the book [D3 Tips and Tricks](https://leanpub.com/d3-t-and-t-v4) to version 4 of d3.js.
    15 changes: 15 additions & 0 deletions sales.csv
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,15 @@
    salesperson,sales
    Bob,33
    Robin,12
    Anne,41
    Mark,16
    Joe,59
    Eve,38
    Karen,21
    Kirsty,25
    Chris,30
    Lisa,47
    Tom,5
    Stacy,20
    Charles,13
    Mary,29