ChatGPT pie chart quiz 2

D3.js Pie Chart with Button


Edward Ross
Can you please help me create a web page that displays a pie chart using D3.js to show the chemical composition of Ethanol with one of the labels as a question mark, and the answer to the question mark only appears when a button is clicked?

Certainly! Here's an example code that you can use as a starting point.

HTML Code:

html
Copy code
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Ethanol Chemical Composition</title>
  <script src="https://d3js.org/d3.v6.min.js"></script>
  <style>
    #chart {
      height: 400px;
      width: 400px;
    }

    .hidden {
      display: none;
    }
  </style>
</head>
<body>
  <h1>Ethanol Chemical Composition</h1>
  <div id="chart"></div>
  <button id="reveal">Reveal</button>
  <p id="answer" class="hidden">The question mark label represents oxygen (O).</p>

  <script src="script.js"></script>
</body>
</html>
In the HTML code above, we have included the D3.js library and created a container for the pie chart. We have also added a button that will reveal the answer to the question mark label when clicked. The answer is initially hidden using the .hidden class.

JavaScript Code (in script.js file):

javascript
Copy code
// Define the data
const data = [
  { name: 'Carbon (C)', value: 2 },
  { name: 'Hydrogen (H)', value: 6 },
  { name: 'Question Mark (?)', value: 1 },
  { name: 'Oxygen (O)', value: 1 }
];

// Set up the SVG element and its dimensions
const svg = d3.select('#chart')
  .append('svg')
  .attr('width', 400)
  .attr('height', 400);

// Set up the pie chart
const pie = d3.pie()
  .value(d => d.value);

// Define the colors to use for each segment
const colors = d3.scaleOrdinal()
  .domain(data.map(d => d.name))
  .range(d3.schemeSet2);

// Add the pie chart segments
const segments = svg.selectAll('path')
  .data(pie(data))
  .enter()
  .append('path')
  .attr('d', d3.arc()
    .innerRadius(0)
    .outerRadius(150)
  )
  .attr('fill', d => colors(d.data.name));

// Add labels to the pie chart
const labels = svg.selectAll('text')
  .data(pie(data))
  .enter()
  .append('text')
  .text(d => d.data.name)
  .attr('transform', d => `translate(${d3.arc().centroid(d)})`)
  .style('text-anchor', 'middle');

// Add event listener to reveal the answer
const revealButton = document.getElementById('reveal');
revealButton.addEventListener('click', () => {
  const answer = document.getElementById('answer');
  answer.classList.remove('hidden');
});
In the JavaScript code above, we define the data for the pie chart and set up the SVG element and its dimensions. We also set up the pie chart using D3's pie() function and define the colors to use for each segment.

We then add the pie chart segments and labels using D3's selectAll(), data(), and enter() methods. We use d3.arc() to define the size and shape of each segment, and d3.arc().centroid() to position each label at the center of its respective segment.

Finally, we add an event listener to the reveal button that removes the .hidden class from the answer paragraph when clicked.

You can customize this code to suit your needs, including changing the data to


ChatGPT Feb 13 Version. Free Research Preview. Our goal is to make AI systems more natural and safe to interact with. Your feedback will help us improve.