Recreation of W.E.B. DuBois Visualizations

Challenge 05 - 2024

You can find here more information about the challenge.

Final Code

Tech Stack used: Svelte, D3, tailwindCSS

<script>
  import { scaleLinear, scaleOrdinal } from 'd3-scale';

  let height = 600;
  let margin = { top: 45, left: 50, right: 30, bottom: 10 };

  const yScale = scaleLinear()
    .domain([0, 100])
    .range([height - margin.bottom, margin.top]);

  const colorScale = scaleOrdinal()
    .domain(['black', 'brown', 'yellow'])
    .range(['black', '#422006', '#fcc404']);

  const valueColors = {
    black: 'white',
    brown: 'pink',
    yellow: 'black'
  };

  const data = [
    {
      color: 'yellow',
      value: 16,
      label: ['Yellow.', 'i.e. persons with', 'more white than', 'negro blood']
    },
    {
      color: 'black',
      value: 44,
      label: ['Black.', 'i.e. full-blooded', 'negroes.']
    },
    {
      color: 'brown',
      value: 40,
      label: [
        'Brown.',
        'i.e. persons with',
        'some white blood',
        'or descendants',
        'of light colored',
        'africans.'
      ]
    }
  ];

  let start = 0;
  const stackData = data
    .sort((a, b) => b.value - a.value)
    .map((item) => {
      const end = start + item.value;
      const processedItem = { ...item, start, end };
      start = end;
      return processedItem;
    });
</script>

<svelte:head>
  <link
    href="https://db.onlinewebfonts.com/c/9978aa0270ea28a500b0b8719a277b7e?family=SolidSans"
    rel="stylesheet" />
</svelte:head>

<div class="rounded-lg bg-[#e4d4c3] pb-12">
  <div
    class="mt-8 pt-6 text-center font-[SolidSans] text-4xl uppercase tracking-wider text-[#43382e]">
    Race Amalgamation in Georgia .
  </div>
  <div
    class="text-center text-lg font-extralight uppercase tracking-widest text-[#766552]">
    Based on a study of 40.000 individuals of negro descent
  </div>

  <svg viewBox="0 0 500 600">
    <g transform="translate({margin.left}, {margin.top})">
      {#each stackData as d}
        <rect
          stroke="black"
          stroke-width="0.5"
          x="200"
          y={yScale(0) - yScale(d.start)}
          width="200"
          height={yScale(d.start) - yScale(d.end)}
          fill={colorScale(d.color)} />
        <text
          x="300"
          y={yScale(0) -
            yScale(d.start) +
            (yScale(d.start) - yScale(d.end)) / 2}
          text-anchor="middle"
          alignment-baseline="middle"
          fill={valueColors[d.color]}
          >{d.value}
          <tspan
            class="italic"
            font-size="22px"
            alignment-baseline="middle"
            dy="2">
            %</tspan
          ></text>

        <text
          font-weight="500"
          class="text-xl tracking-wide"
          x={margin.left}
          y={yScale(0) - yScale(d.start) + 30}
          text-anchor="middle"
          alignment-baseline="middle"
          fill={'#43382e'}>{d.label[0].toUpperCase()}</text>

        {#each d.label.slice(1) as sentence, i}
          <text
            class="fill-[#766552]"
            font-weight="200"
            font-size="10px"
            x={margin.left}
            y={yScale(0) - yScale(d.start) + 50 + i * 12}
            text-anchor="start"
            alignment-baseline="middle">{sentence.toUpperCase()}</text>
        {/each}
      {/each}
    </g>
  </svg>
</div>