K-Means Centroid Deviation

Added all of the Farmers' Markets data into the kMeans Library by @emilbayes, thank you!

Exploring the idea of using the areas around the centroids to exaggerate that cluster when it deviates from the rest of the clusters. This originates from the question "Which features in each cluster differentiate it from the rest?"

forked from susielu's block: K-Means Centroid Deviation

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <link href='https://fonts.googleapis.com/css?family=Lato:300,900' rel='stylesheet' type='text/css'>

svg {
      background-color: white;
      font-family: 'Lato';
   }

line {
     stroke: black;
     stroke-width: .5px;
     opacity: .3
   }

text {
     font-size: 11px;
     font-weight: 900;
   }

.graph-legend text {
     font-weight: normal;
   }

text.title {
     font-size: 24px;
   }

text.mini-title {
     font-size: 20px;
     font-weight: normal;
   }

text.subtitle {
     font-size: 16px;
     font-weight: normal;
   }

.legendCells text.count {
     text-anchor: middle;
     font-size: 10px;
   }

.legendCells text:not(.count) {
     font-weight: normal;
   }

rect {
     opacity: .5;
   }

.buttons rect {
     fill: blue;
     cursor: pointer;
   }

.buttons:hover {
     cursor: pointer;
   }

.buttons text {
     text-anchor: middle;
     fill: white;
     font-weight: 300;
     font-size: 16px;
     pointer-events: none;
     cursor: pointer;
   }

path.area {
    opacity: .3;
   }

path.line {
     fill: none;
   }

line.centroid {
     stroke: black;
     stroke-width: 3px;
   }

path.line, line.centroid {
     stroke-width: 2px;
     stroke-dasharray: 1, 3;
   }

</style>
</head>
<body>
    <svg width="960" height="500">
      <text class="title" x=30 y=40>K-Means Clustering</text>
      <text class="mini-title" x=30 y=70>Farmers' Markets</text>
      <text class="mini-title" x=30 y=97>By Goods</text>
      <text class="subtitle" x=297 y=40>Farmers' Markets per Cluster</text>
      <text class="subtitle" x=30 y=225>Yes</text>
      <text class="subtitle" x=30 y=350>No</text>
      <g transform="translate(550, 40)" class="graph-legend">
        <text>Close to another cluster's score for this good</text>
        <line x1=0 x2=210 y1=13 y2=13 />
        <line x1=160 x2=160 y1=13 y2=40 />
        <circle cx=160 cy=40 r=2 />

<g transform="translate(120,120)">
          <line x1=0 x2=197 y1=-15 y2=-15 />
          <line x1=110 x2=110 y1=-15 y2=-60 />
          <circle cx=110 cy=-60 r=2 />
          <text >Far from other cluster scores for this good</text>
        </g>

<g transform="translate(255,55)">
          <line x1=-5 x2=-15 y1=-5 y2=-5 />
          <text >Cluster centroid</text>
        </g>
        <line class="centroid" x1=60 x2=235 y1=50 y2=50 />
        <path transform="translate(-160, -130)" class="area" stroke="#aaa" fill="#aaa" d="M220,177.34313376907926C220,177.34313376907926,236.66666666666666,169.9255145054399,245,167.0046437685483C253.33333333333334,164.0837730316567,261.6666666666667,161.23221844223664,270,159.81790934772965C278.3333333333333,158.40360025322266,286.6666666666667,155.15774549733788,295,158.51878920150634C303.3333333333333,161.8798329056748,311.6666666666667,180.38701321932143,320,179.98417157274045C328.3333333333333,179.58132992615947,336.6666666666667,160.20826282804072,345,156.10173932202045C353.3333333333333,151.99521581600018,361.6666666666667,157.82667409186635,370,155.34503053661888C378.3333333333333,152.8633869813714,395,141.2118779905356,395,141.2118779905356L395,218.7881220094644C395,218.7881220094644,378.3333333333333,207.1366130186286,370,204.65496946338112C361.6666666666667,202.17332590813365,353.3333333333333,208.00478418399982,345,203.89826067797955C336.6666666666667,199.79173717195928,328.3333333333333,180.41867007384053,320,180.01582842725955C311.6666666666667,179.61298678067857,303.3333333333333,198.1201670943252,295,201.48121079849366C286.6666666666667,204.84225450266212,278.3333333333333,201.59639974677734,270,200.18209065227035C261.6666666666667,198.76778155776336,253.33333333333334,195.9162269683433,245,192.9953562314517C236.66666666666666,190.0744854945601,220,182.65686623092074,220,182.65686623092074Z"></path>
      </g>
      <g class="connectors" />
    </svg>
    <script src="https://d3js.org/d3.v4.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3-legend/2.9.0/d3-legend.min.js"></script>
    <script src="kMeans.js"></script>
    <script src="clustering.js"></script>
</body>
</html>

https://d3js.org/d3.v4.js

https://cdnjs.cloudflare.com/ajax/libs/d3-legend/2.9.0/d3-legend.min.js