<commit_before><script src="./d3.v4.min.js"></script>
<script src="./d3-geo.v1.min.js"></script>
<script src="./dist/geo-time-series.js"></script>

<body>
  <div id='page'>
    <h1>Major Hourly Trends in New York City Taxi Dropoffs</h1>
    <h2>midnight to midnight</h2>
    <div id='container'>
      <div id='legend'></div>
      <div id='map'></div>
    </div>
    <h3>via multi-dimensional clustering</h3>
    <p>checkout <a href='https://github.com/aaronpdennis/geo-time-series'><span id='github-link'>geo-time-series</span></a> on GitHub</p>
  </div>
</body>

<style>

#page {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

body {
  font-family: Garamond, Georgia, serif;
  color: #555;
}

h1 {
  font-size: 2em;
  margin: 0;
}

h2 {
  font-size: 1.5em;
  font-style: italic;
  color: #aaa;
  font-weight: lighter;
  margin: 0;
}

h3 {
  font-size: 1em;
  font-weight: normal;
  margin: 0;
}

p {
  margin: 0;
}


#container {
  margin: auto;
  width: 70%;
  height: 80%;
  display: flex;
  flex-direction: row;
  align-items: center;
}

#map {
  width: 85%;
  height: 100%;
}

#legend {
  padding-right: 0.4em;
  width: 15%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  flex-wrap: wrap;
  align-items: flex-end;
}

#github-link {
  font-style: monospace;
}

</style>

<script>

var parameters = {
  file: './data/taxis.geojson',
  dateFormat: 'hour_%H',
  clusters: 5,
  mapContext: './data/nyc_water.geojson',
  projection: d3.geoAlbers()
        .rotate([73.9, -40.75])
        .center([0, 0])
        .scale(135000),
  contextFile: './data/nyc_water.geojson'
}

d3.json(parameters.file, function(data) {

  d3.json(parameters.contextFile, function(contextData) {


    timeSeries = new TimeSeries({
      data: data,
      dateFormat: parameters.dateFormat,
      clusters: parameters.clusters,
      preclustered: false
    });

    // Legend
    timeSeries.constructLegend('legend');

    // Clustered features
    var geojson = timeSeries.getGeoJSON();

    var featureFill = function(d) { return d.color; },
        featureOpacity = function(d) { return d.residual_error; },
        mapContext = parameters.mapContext,
        mapRotation = parameters.mapRotation,
        mapScale = parameters.mapScale;

    // Render a map
    var mapContainer = d3.select('#map');

    var width = parseInt(mapContainer.style('width')),
        height = parseInt(mapContainer.style('height'));

    // get the greater of width or height
    var plotSize = width <= height ?
        width :
        height;

    plotSize -= plotSize / parameters.clusters;

    var width = parseInt(mapContainer.style('width')),
        height = parseInt(mapContainer.style('height'));

    var svg = mapContainer.append("svg")
      .attr("width", width)
      .attr("height", height)
      .style('z-index', '-1')
      .attr('id', 'svg');

    var path = d3.geoPath().projection(parameters.projection.translate([width / 2, height / 2]));

    svg.append('g').append('rect')
      .attr('height', height)
      .attr('width', width)
      .attr('fill', '#fff');

    svg.append('g').selectAll("path")
      .data(contextData.features)
      .enter()
      .append("path")
      .attr("d", path)
      .attr('stroke-width', 0)
      .attr("fill", "#eee");

    svg.append('g').selectAll("path")
      .data(geojson.features)
      .enter()
      .append("path")
      .attr("d", path)
      .attr('stroke', '#fff')
      .attr('stroke-width', 0.5)
      .attr("fill", featureFill)
      .attr('opacity', featureOpacity);

  });
});

</script><commit_msg>example page responsive<commit_after><script src="./d3.v4.min.js"></script>
<script src="./d3-geo.v1.min.js"></script>
<script src="./dist/geo-time-series.js"></script>

<body>
  <div id='container'>
    <div id='context'>
      <p><strong>Major hourly trends in New York City taxi dropoffs</strong>, midnight to midnight, <em>via multi-dimensional clustering.</em></p>
      <p>Checkout <a href='https://github.com/aaronpdennis/geo-time-series'>geo-time-series</a> on GitHub.</p>
    </div>
    <div id='visual'>
      <div id='legend'></div>
      <div id='map'></div>
    </div>
  </div>
</body>

<style>

body {
  font-family: Helvetica, sans-serif;
}

#container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-wrap: wrap;
}

#context {
  width: 20em;
}

#visual {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: auto;
  height: auto;
}

#map {
  height: 100%;
  max-height: 50em;
  width: 50em;
  margin-left: 1em;
}

#legend {
  width: auto;
  height: 100%;
  max-height: 50em;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex-wrap: wrap;
  align-items: flex-end;
}

p {
  font-family: Helvetica, sans-serif;
  font-size: 1.2em;
  line-height: 1.5;
}

</style>

<script>

var parameters = {
  file: './data/taxis.geojson',
  dateFormat: 'hour_%H',
  clusters: 5,
  mapContext: './data/nyc_water.geojson',
  projection: d3.geoAlbers()
        .rotate([73.9, -40.75])
        .center([0, 0])
        .scale(135000),
  contextFile: './data/nyc_water.geojson'
}

d3.json(parameters.file, function(data) {

  d3.json(parameters.contextFile, function(contextData) {


    timeSeries = new TimeSeries({
      data: data,
      dateFormat: parameters.dateFormat,
      clusters: parameters.clusters,
      preclustered: false
    });

    // Legend
    timeSeries.constructLegend('legend');

    // Clustered features
    var geojson = timeSeries.getGeoJSON();

    var featureFill = function(d) { return d.color; },
        featureOpacity = function(d) { return d.residual_error; },
        mapContext = parameters.mapContext,
        mapRotation = parameters.mapRotation,
        mapScale = parameters.mapScale;

    // Render a map
    var mapContainer = d3.select('#map');

    var width = parseInt(mapContainer.style('width')),
        height = parseInt(mapContainer.style('height'));

    var plotSize = width <= height ?
        width :
        height;

    plotSize -= plotSize / parameters.clusters;

    var width = parseInt(mapContainer.style('width')),
        height = parseInt(mapContainer.style('height'));

    var svg = mapContainer.append("svg")
      .attr("width", width)
      .attr("height", height)
      .style('z-index', '-1')
      .attr('id', 'svg');

    var path = d3.geoPath().projection(parameters.projection.translate([width / 2, height / 2]));

    svg.append('g').append('rect')
      .attr('height', height)
      .attr('width', width)
      .attr('fill', '#fff');

    svg.append('g').selectAll("path")
      .data(contextData.features)
      .enter()
      .append("path")
      .attr("d", path)
      .attr("fill", "#eee");

    svg.append('g').selectAll("path")
      .data(geojson.features)
      .enter()
      .append("path")
      .attr("d", path)
      .attr('stroke', '#fff')
      .attr('stroke-width', 0.5)
      .attr("fill", featureFill)
      .attr('opacity', featureOpacity);

  });
});

</script>
{'fraction_non_alphanumeric': 0.1776463963963964, 'fraction_numerical': 0.018018018018018018, 'mean_word_length': 2.859315589353612, 'pattern_counts': {'":': 0, '<': 69, '<?xml version=': 0, '>': 67, 'https://': 2, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '4244417', 'n_tokens_mistral': 2594, 'n_tokens_neox': 2461, 'n_words': 499}