freeCodeCamp/create-a-bar-for-each-data-point-in-the-set.english.md at 1f2b66a432a24cc06c0ce74762e467777885a807

Files

Prayag 17be165d66 Add solution d3challenges (#38222 )

* added solutions to data visualization with D3

* Update add-a-tooltip-to-a-d3-element.english.md

* Update add-attributes-to-the-circle-elements.english.md

* Update add-axes-to-a-visualization.english.md

* Update add-document-elements-with-d3.english.md

* Update add-inline-styling-to-elements.english.md

* Update add-labels-to-scatter-plot-circles.english.md

* Update change-styles-based-on-data.english.md

* Update change-the-color-of-an-svg-element.english.md

* Update change-the-presentation-of-a-bar-chart.english.md

* Update create-a-bar-for-each-data-point-in-the-set.english.md

* Update create-a-linear-scale-with-d3.english.md

* Update create-a-scatterplot-with-svg-circles.english.md

* Update display-shapes-with-svg.english.md

* Update dynamically-change-the-height-of-each-bar.english.md

* Update dynamically-set-the-coordinates-for-each-bar.english.md

* Update invert-svg-elements.english.md

* Update learn-about-svg-in-d3.english.md

* Update select-a-group-of-elements-with-d3.english.md

* Update set-a-domain-and-a-range-on-a-scale.english.md

* Update style-d3-labels.english.md

* Update work-with-dynamic-data-in-d3.english.md

* Update use-a-pre-defined-scale-to-place-elements.english.md

* Update use-dynamic-scales.english.md

* Update use-the-d3.max-and-d3.min-functions-to-find-minimum-and-maximum-values-in-a-dataset.english.md

* Update work-with-data-in-d3.english.md

2020-04-24 06:34:53 -05:00

2.9 KiB

Raw Blame History

id, title, challengeType, forumTopicId

id	title	challengeType	forumTopicId
587d7fa8367417b2b2512bcd	Create a Bar for Each Data Point in the Set	6	301482

Description

The last challenge added only one rectangle to the svg element to represent a bar. Here, you'll combine what you've learned so far about data(), enter(), and SVG shapes to create and append a rectangle for each data point in dataset. A previous challenge showed the format for how to create and append a div for each item in dataset:

d3.select("body").selectAll("div")
  .data(dataset)
  .enter()
  .append("div")

There are a few differences working with rect elements instead of divs. The rects must be appended to an svg element, not directly to the body. Also, you need to tell D3 where to place each rect within the svg area. The bar placement will be covered in the next challenge.

Instructions

Use the data(), enter(), and append() methods to create and append a rect for each item in dataset. The bars should display all on top of each other, this will be fixed in the next challenge.

Tests

tests:
  - text: Your document should have 9 <code>rect</code> elements.
    testString: assert($('rect').length == 9);
  - text: Your code should use the <code>data()</code> method.
    testString: assert(code.match(/\.data/g));
  - text: Your code should use the <code>enter()</code> method.
    testString: assert(code.match(/\.enter/g));
  - text: Your code should use the <code>append()</code> method.
    testString: assert(code.match(/\.append/g));

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")
       // Add your code below this line



       // Add your code above this line
       .attr("x", 0)
       .attr("y", 0)
       .attr("width", 25)
       .attr("height", 100);
  </script>
</body>

Solution

<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", 0)
       .attr("y", 0)
       .attr("width", 25)
       .attr("height", 100);
  </script>
</body>

2.9 KiB Raw Blame History