praveenuics · June 19, 2020 21:42 · Jun 19, 2020
diff --git a/.block b/.block
@@ -0,0 +1 @@
+license: mit
diff --git a/README.md b/README.md
@@ -0,0 +1 @@
+Built with [blockbuilder.org](http://blockbuilder.org)
diff --git a/index.html b/index.html
@@ -0,0 +1,248 @@
+<svg width='800' height='400'></svg>
+<div id='tooltip' style='position:absolute;background-color:lightgray;padding:5px'></div>
+<script src="http://d3js.org/d3.v4.min.js"></script>
+<script>
+
+  var jsonData = [
+  {
+    "name": "California",
+    "show": true,
+    "color": "red",
+    "currentPopulation": 37253956,
+    "history": [
+      {
+        "year": 1910,
+        "population": 2377549
+      },
+      {
+        "year": 1920,
+        "population": 3426861
+      },
+      {
+        "year": 1930,
+        "population": 5677251
+      },
+      {
+        "year": 1940,
+        "population": 6907387
+      },
+      {
+        "year": 1950,
+        "population": 10586223
+      },
+      {
+        "year": 1960,
+        "population": 15717204
+      },
+      {
+        "year": 1970,
+        "population": 19953134
+      },
+      {
+        "year": 1980,
+        "population": 23667902
+      },
+      {
+        "year": 1990,
+        "population": 29760021
+      },
+      {
+        "year": 2000,
+        "population": 33871648
+      },
+      {
+        "year": 2010,
+        "population": 37253956
+      }
+    ]
+  },
+  {
+    "name": "Michigan",
+    "show": true,
+    "color": "blue",
+    "currentPopulation": 9883640,
+    "history": [
+      {
+        "year": 1910,
+        "population": 2810173
+      },
+      {
+        "year": 1920,
+        "population": 3668412
+      },
+      {
+        "year": 1930,
+        "population": 4842325
+      },
+      {
+        "year": 1940,
+        "population": 5256106
+      },
+      {
+        "year": 1950,
+        "population": 6371766
+      },
+      {
+        "year": 1960,
+        "population": 7823194
+      },
+      {
+        "year": 1970,
+        "population": 8875083
+      },
+      {
+        "year": 1980,
+        "population": 9262078
+      },
+      {
+        "year": 1990,
+        "population": 9295297
+      },
+      {
+        "year": 2000,
+        "population": 9938444
+      },
+      {
+        "year": 2010,
+        "population": 9883640
+      }
+    ]
+  },
+  {
+    "name": "Texas",
+    "show": true,
+    "color": "green",
+    "currentPopulation": 25145561,
+    "history": [
+      {
+        "year": 1910,
+        "population": 3896542
+      },
+      {
+        "year": 1920,
+        "population": 4663228
+      },
+      {
+        "year": 1930,
+        "population": 5824715
+      },
+      {
+        "year": 1940,
+        "population": 6414824
+      },
+      {
+        "year": 1950,
+        "population": 7711194
+      },
+      {
+        "year": 1960,
+        "population": 9579677
+      },
+      {
+        "year": 1970,
+        "population": 11196730
+      },
+      {
+        "year": 1980,
+        "population": 14229191
+      },
+      {
+        "year": 1990,
+        "population": 16986510
+      },
+      {
+        "year": 2000,
+        "population": 20851820
+      },
+      {
+        "year": 2010,
+        "population": 25145561
+      }
+    ]
+  }
+];
+
+// Define margins, dimensions, and some line colors
+const margin = {top: 40, right: 120, bottom: 30, left: 40};
+const width = 800 - margin.left - margin.right;
+const height = 400 - margin.top - margin.bottom;
+
+// Define the scales and tell D3 how to draw the line
+const x = d3.scaleLinear().domain([1910, 2010]).range([0, width]);     
+const y = d3.scaleLinear().domain([0, 40000000]).range([height, 0]);
+const line = d3.line().x(d => x(d.year)).y(d => y(d.population));
+
+const chart = d3.select('svg').append('g')
+  .attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');
+
+const tooltip = d3.select('#tooltip');
+const tooltipLine = chart.append('line');
+
+// Add the axes and a title
+const xAxis = d3.axisBottom(x).tickFormat(d3.format('.4'));
+const yAxis = d3.axisLeft(y).tickFormat(d3.format('.2s'));
+chart.append('g').call(yAxis); 
+chart.append('g').attr('transform', 'translate(0,' + height + ')').call(xAxis);
+chart.append('text').html('State Population Over Time').attr('x', 200);
+
+// Load the data and draw a chart
+let states, tipBox;
+jsonData.forEach(d => {
+  states = d;
+
+  chart.selectAll()
+    .data(states).enter()
+    .append('path')
+    .attr('fill', 'none')
+    .attr('stroke', d => d.color)
+    .attr('stroke-width', 2)
+    .datum(d => d.history)
+    .attr('d', line);
+
+  chart.selectAll()
+    .data(states).enter()
+    .append('text')
+    .html(d => d.name)
+    .attr('fill', d => d.color)
+    .attr('alignment-baseline', 'middle')
+    .attr('x', width)
+    .attr('dx', '.5em')
+    .attr('y', d => y(d.currentPopulation)); 
+
+  tipBox = chart.append('rect')
+    .attr('width', width)
+    .attr('height', height)
+    .attr('opacity', 0)
+    .on('mousemove', drawTooltip)
+    .on('mouseout', removeTooltip);
+})
+
+function removeTooltip() {
+  if (tooltip) tooltip.style('display', 'none');
+  if (tooltipLine) tooltipLine.attr('stroke', 'none');
+}
+
+function drawTooltip() {
+  const year = Math.floor((x.invert(d3.mouse(tipBox.node())[0]) + 5) / 10) * 10;
+
+  states.sort((a, b) => {
+    return b.history.find(h => h.year == year).population - a.history.find(h => h.year == year).population;
+  })  
+
+  tooltipLine.attr('stroke', 'black')
+    .attr('x1', x(year))
+    .attr('x2', x(year))
+    .attr('y1', 0)
+    .attr('y2', height);
+
+  tooltip.html(year)
+    .style('display', 'block')
+    .style('left', d3.event.pageX + 20)
+    .style('top', d3.event.pageY - 20)
+    .selectAll()
+    .data(states).enter()
+    .append('div')
+    .style('color', d => d.color)
+    .html(d => d.name + ': ' + d.history.find(h => h.year == year).population);
+}
+</script>
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		Built with [blockbuilder.org](http://blockbuilder.org)
No results found