freeCodeCamp/dynamically-change-the-height-of-each-bar.english.md at dd6011b2cc9b0e0ea5bc404f90f094ee5220d376

Files

Randell Dawson dd6011b2cc fix(curriculum): Convert blockquote elements to triple backtick syntax for Data Visualization (#35995 )

* fix: convert data visualization

* fix: reverted to blockquote

* fix: changed js to json

Co-Authored-By: Oliver Eyton-Williams <ojeytonwilliams@gmail.com>

* fix: cleaned up code

Co-Authored-By: Oliver Eyton-Williams <ojeytonwilliams@gmail.com>

2019-05-14 07:04:05 -05:00

3.5 KiB

Raw Blame History

id, title, challengeType

id	title	challengeType
587d7fa9367417b2b2512bcf	Dynamically Change the Height of Each Bar	6

Description

The height of each bar can be set to the value of the data point in the array, similar to how the x value was set dynamically.

selection.attr("property", (d, i) => {
  /* 
  * d is the data point value
  * i is the index of the data point in the array
  */
})

Instructions

Change the callback function for the height attribute to return the data value times 3. Note
Remember that multiplying all data points by the same constant scales the data (like zooming in). It helps to see the differences between bar values in this example.

Tests

tests:
  - text: The first <code>rect</code> should have a <code>height</code> of 36.
    testString: assert($('rect').eq(0).attr('height') == '36', 'The first <code>rect</code> should have a <code>height</code> of 36.');
  - text: The second <code>rect</code> should have a <code>height</code> of 93.
    testString: assert($('rect').eq(1).attr('height') == '93', 'The second <code>rect</code> should have a <code>height</code> of 93.');
  - text: The third <code>rect</code> should have a <code>height</code> of 66.
    testString: assert($('rect').eq(2).attr('height') == '66', 'The third <code>rect</code> should have a <code>height</code> of 66.');
  - text: The fourth <code>rect</code> should have a <code>height</code> of 51.
    testString: assert($('rect').eq(3).attr('height') == '51', 'The fourth <code>rect</code> should have a <code>height</code> of 51.');
  - text: The fifth <code>rect</code> should have a <code>height</code> of 75.
    testString: assert($('rect').eq(4).attr('height') == '75', 'The fifth <code>rect</code> should have a <code>height</code> of 75.');
  - text: The sixth <code>rect</code> should have a <code>height</code> of 54.
    testString: assert($('rect').eq(5).attr('height') == '54', 'The sixth <code>rect</code> should have a <code>height</code> of 54.');
  - text: The seventh <code>rect</code> should have a <code>height</code> of 87.
    testString: assert($('rect').eq(6).attr('height') == '87', 'The seventh <code>rect</code> should have a <code>height</code> of 87.');
  - text: The eighth <code>rect</code> should have a <code>height</code> of 42.
    testString: assert($('rect').eq(7).attr('height') == '42', 'The eighth <code>rect</code> should have a <code>height</code> of 42.');
  - text: The ninth <code>rect</code> should have a <code>height</code> of 27.
    testString: assert($('rect').eq(8).attr('height') == '27', 'The ninth <code>rect</code> should have a <code>height</code> of 27.');

Challenge Seed

<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", 0)
       .attr("width", 25)
       .attr("height", (d, i) => {
         // Add your code below this line



         // Add your code above this line
       });
  </script>
</body>

Solution

// solution required

3.5 KiB Raw Blame History