Pasé un par de horas tratando de entender por qué mi gráfico, que se supone que se parece a esto, en cambio, tiene un aspecto muy diferente, como puede ver según el código a continuación. Para su información, es uno de los desafíos de la FCC en la visualización de datos. ¿Qué error estoy cometiendo aquí?

const svg_width = 1000;
const svg_height = 750;
const margin = {
  'top':40,
  'bottom':40,
  'left':60,
  'right': 60,
}

var svg = d3.select("#chart-container")
.append("svg")
.attr("width", svg_width)
.attr("height", svg_height)
.style("border", "solid")

d3.json("https://raw.githubusercontent.com/FreeCodeCamp/ProjectReferenceData/master/GDP-data.json", function (data) {
  var dataset = data.data
  var parseDates = d3.timeParse("%Y-%m-%d")
  
  var xScale = d3.scaleTime()
  .domain([d3.min(dataset, (d) => parseDates(d[0])),
          d3.max(dataset, (d) => parseDates(d[0]))])
  .range([margin.left, svg_width - margin.right])
  
  var xAxis = d3.axisBottom()
  .scale(xScale)
  .tickSizeOuter(0)
  
  svg.append("g")
  .attr("transform", ("translate(0," + (svg_height- margin.bottom)+")"))
  .call(xAxis.ticks(d3.timeYear).ticks(10))
  
  var yScale = d3.scaleLinear()
  .domain([d3.min(dataset, (d) => d[1]), 
          d3.max(dataset, (d) => d[1])])
  .range([svg_height - margin.bottom, margin.bottom])
  
  var yAxis = d3.axisLeft()
  .scale(yScale)
  .tickSizeOuter(0)
  
  svg.append("g")
  .call(yAxis)
  .attr("transform", "translate (60, 0)")
  
  svg.selectAll("rect")
  .data(dataset)
  .enter()
  .append("rect")
  .attr("x", (d) => xScale(parseDates(d[0])))
  .attr("y", (d) => (svg_height - margin.top) - yScale(d[1]))
  .attr("width", 1)
  .attr("height", (d) => yScale(d[1]))
  .attr("fill", "green")
});
<script src="https://d3js.org/d3.v4.min.js" charset="utf-8"></script>
<div id="chart-container"></div>
1
Mike 24 ene. 2021 a las 18:04

1 respuesta

La mejor respuesta

Cuando dibuja sus barras, sus cálculos de height y y se invierten.

const svg_width = 1000;
const svg_height = 750;
const margin = {
  'top':40,
  'bottom':40,
  'left':60,
  'right': 60,
}

var svg = d3.select("#chart-container")
.append("svg")
.attr("width", svg_width)
.attr("height", svg_height)
.style("border", "solid")

d3.json("https://raw.githubusercontent.com/FreeCodeCamp/ProjectReferenceData/master/GDP-data.json", function (data) {
  var dataset = data.data
  var parseDates = d3.timeParse("%Y-%m-%d")
  
  var xScale = d3.scaleTime()
  .domain([d3.min(dataset, (d) => parseDates(d[0])),
          d3.max(dataset, (d) => parseDates(d[0]))])
  .range([margin.left, svg_width - margin.right])
  
  var xAxis = d3.axisBottom()
  .scale(xScale)
  .tickSizeOuter(0)
  
  svg.append("g")
  .attr("transform", ("translate(0," + (svg_height- margin.bottom)+")"))
  .call(xAxis.ticks(d3.timeYear).ticks(10))
  
  var yScale = d3.scaleLinear()
  .domain([d3.min(dataset, (d) => d[1]), 
          d3.max(dataset, (d) => d[1])])
  .range([svg_height - margin.bottom, margin.bottom])
  
  var yAxis = d3.axisLeft()
  .scale(yScale)
  .tickSizeOuter(0)
  
  svg.append("g")
  .call(yAxis)
  .attr("transform", "translate (60, 0)")
  
  svg.selectAll("rect")
  .data(dataset)
  .enter()
  .append("rect")
  .attr("x", (d) => xScale(parseDates(d[0])))
  .attr("y", (d) => yScale(d[1]))
  .attr("width", 1)
  .attr("height", (d) => (svg_height - margin.top) - yScale(d[1]))
  .attr("fill", "green")
});
<script src="https://d3js.org/d3.v4.min.js" charset="utf-8"></script>
<div id="chart-container"></div>
1
Mark 24 ene. 2021 a las 15:42