Skip to content

Instantly share code, notes, and snippets.

@JackHowa

JackHowa/d3-notes.txt

Created June 24, 2018 23:37
Show Gist options
  • Save JackHowa/57ccead2fd6f7d2f40a49cf1990c4b2b to your computer and use it in GitHub Desktop.
Save JackHowa/57ccead2fd6f7d2f40a49cf1990c4b2b to your computer and use it in GitHub Desktop.
Download ZIP
this is notes about the d3 portion of the fcc code camp
Raw
d3-notes.txt
d3 on fcc won't let be me
@JackHowa
Copy link
Author

https://learn.freecodecamp.org/data-visualization/data-visualization-with-d3/change-the-color-of-an-svg-element

  • fill attribute is what makes up the elements
<body>
  <script>
    const dataset = [12, 31, 22, 17, 25, 18, 29, 14, 9];
    
    const w = 500;
    const h = 100;
    
    const svg = d3.select("body")
                  .append("svg")
                  .attr("width", w)
                  .attr("height", h);
    
    svg.selectAll("rect")
       .data(dataset)
       .enter()
       .append("rect")
       .attr("x", (d, i) => i * 30)
       .attr("y", (d, i) => h - 3 * d)
       .attr("width", 25)
       .attr("height", (d, i) => 3 * d)
       .attr('fill', 'navy')
  </script>
</body>

@JackHowa
Copy link
Author

https://learn.freecodecamp.org/data-visualization/data-visualization-with-d3/add-labels-to-d3-elements

  • Not sure why d returns itself but ok, guess it could be anything
  • Weird have to subtract to go HIGHER

screen shot 2018-06-25 at 22 24 55

<body>
  <script>
    const dataset = [12, 31, 22, 17, 25, 18, 29, 14, 9];
    
    const w = 500;
    const h = 100;
    
    const svg = d3.select("body")
                  .append("svg")
                  .attr("width", w)
                  .attr("height", h);
    
    svg.selectAll("rect")
       .data(dataset)
       .enter()
       .append("rect")
       .attr("x", (d, i) => i * 30)
       .attr("y", (d, i) => h - 3 * d)
       .attr("width", 25)
       .attr("height", (d, i) => 3 * d)
       .attr("fill", "navy");
    
    svg.selectAll("text")
       .data(dataset)
       .enter()
       .append('text')
       .attr('x', (d, i) => i * 30)
       /* three units higher is subtraction */
       .attr('y', (d, i) => h - (3 * d) - 3) 
       .text(d => d) /* returns d data value */ 
  </script>
<body>

@JackHowa
Copy link
Author

https://learn.freecodecamp.org/data-visualization/data-visualization-with-d3/style-d3-labels

  • even text has a fill color property


screen shot 2018-06-25 at 22 28 53

<body>
  <script>
    const dataset = [12, 31, 22, 17, 25, 18, 29, 14, 9];
    
    const w = 500;
    const h = 100;
    
    const svg = d3.select("body")
                  .append("svg")
                  .attr("width", w)
                  .attr("height", h);
    
    svg.selectAll("rect")
       .data(dataset)
       .enter()
       .append("rect")
       .attr("x", (d, i) => i * 30)
       .attr("y", (d, i) => h - 3 * d)
       .attr("width", 25)
       .attr("height", (d, i) => d * 3)
       .attr("fill", "navy");
    
    svg.selectAll("text")
       .data(dataset)
       .enter()
       .append("text")
       .text((d) => d)
       .attr("x", (d, i) => i * 30)
       .attr("y", (d, i) => h - (3 * d) - 3)
       .style('font-size', '25px')
       .style('fill', 'red')
  </script>
</body>

@JackHowa
Copy link
Author

JackHowa commented Jun 26, 2018 •
edited
Loading

https://learn.freecodecamp.org/data-visualization/data-visualization-with-d3/add-a-hover-effect-to-a-d3-element

  • add a class via attr

screen shot 2018-06-25 at 22 32 48

<style>
  .bar:hover {
    fill: brown;
  }
</style>
<body>
  <script>
    const dataset = [12, 31, 22, 17, 25, 18, 29, 14, 9];
    
    const w = 500;
    const h = 100;
    
    const svg = d3.select("body")
                  .append("svg")
                  .attr("width", w)
                  .attr("height", h);
    
    svg.selectAll("rect")
       .data(dataset)
       .enter()
       .append("rect")
       .attr("x", (d, i) => i * 30)
       .attr("y", (d, i) => h - 3 * d)
       .attr("width", 25)
       .attr("height", (d, i) => 3 * d)
       .attr("fill", "navy")
       .attr('class', 'bar')
           
    svg.selectAll("text")
       .data(dataset)
       .enter()
       .append("text")
       .text((d) => d)
       .attr("x", (d, i) => i * 30)
       .attr("y", (d, i) => h - (3 * d) - 3);
       
  </script>
</body>

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment