Challenge 01 - Feb 03

Process of creating the visualization

1. Draw the sack using figma

2. Export as svg and copy the path 'd' variable.

3. Use d3 scales to size the sack, position the sack.

const margin = { top: 80, left: 50, bottom: 150, right: 50 };

const height = 1000;

const sackScaleX = d3
  .scaleSqrt()
  .domain([d3.min(valueOfLand, (d) => d["Land Value (Dollars)"]), d3.max(valueOfLand, (d) => d["Land Value (Dollars)"])])
  .range([1, 2]);

const sackScaleY = d3
  .scaleSqrt()
  .domain([d3.min(valueOfLand, (d) => d["Land Value (Dollars)"]), d3.max(valueOfLand, (d) => d["Land Value (Dollars)"])])
  .range([0.9, 1.13]);

const parseYear = d3.timeParse("%Y");

const formatYear = d3.timeFormat("%Y");

const yearScale = d3
  .scaleTime()
  .domain([parseYear(1875), parseYear(1899)])
  .range([margin.top, height - margin.bottom]);

const positionSackX = (value, widthValue) => {
  const sackSize = sackScaleX(value);
  return widthValue / 2 - sackSize - 45 * sackSize;
};

const positionSackY = (value) => {
  const sackSizeY = sackScaleY(value)*108/2;
  return sackSizeY
};

4. Finally visualize with code below

svg`<svg width="${width}" height="${height}" style="background-color: #E5D5C5;">
  <text x=${width/2} y=50 text-anchor="middle" style="font-family:sans-serif; font-size:1.2rem; font-weight:bold;">VALUE OF LAND OWNED BY GEORGIA NEGROES.</text>
  ${valueOfLand.map((d,i) => 
    svg`<g transform="translate(${positionSackX(d["Land Value (Dollars)"], width)}, ${(i*150)+sackScaleY(d["Land Value (Dollars)"])+100}) scale(${sackScaleX(d["Land Value (Dollars)"])}, ${sackScaleY(d["Land Value (Dollars)"])})">
      <path d=${sackPath} fill="#BE9A82" stroke="black"/>
      <text x=55 y=65 text-anchor="middle">$${d["Land Value (Dollars)"]}</text>
      <text x=55 y=115 text-anchor="middle">${d.Year}</text>
    </g>`
  )}
</svg>`

5. Fin.