31:T49a,coloredByState = { const width = 500; const height = 300; const projection = d3.geoMercator(); projection .scale(1) .translate([0, 0]); // https://github.com/d3/d3-geo#projections var path = d3.geoPath().projection(projection); const svg = d3.select(DOM.svg(width, height)) .style("width", width) .style("height", height); const map = {} map.type = "FeatureCollection" map.features = us.features.filter(function(d) { return (!(removeStates.indexOf(d.properties.STATEFP)+1)) }) var color = d3.scaleLinear().range([0,1]).domain([0,48]); var palette = d3.interpolatePlasma; // https://github.com/d3/d3-scale-chromatic const g = svg.append("g") .attr("transform", "translate(0,40)"); var scale = scalingMagic(map.features,width,height) projection .scale(scale[0]) .translate(scale[1]); svg.append("g") .selectAll("path") .data(map.features) .enter().append("path") .attr("fill", d => palette(color(+d.properties.STATEFP))) .attr("d", path) .attr("stroke", d => palette(color(+d.properties.STATEFP))) .append("title") .text(d => d.properties.STATEFP); return svg.node(); }32:Tc7a,GotoStateMap = { const width = 500; const height = 300; const projection = d3.geoMercator(); projection .scale(1) .translate([0, 0]); // https://github.com/d3/d3-geo#projections var path = d3.geoPath().projection(projection); const svg = d3.select(DOM.svg(width, height)) .style("width", width) .style("height", height); const map = {} map.type = "FeatureCollection" const stateValues = {} var zoom = d3.zoom() .scaleExtent([1, 8]); stateValues["Pennsylvania"] = 42 stateValues["Ohio"] = 39 stateValues["New York"] = 36 map.features = us.features.filter(function(d) { return (!(removeStates.indexOf(d.properties.STATEFP)+1)) }) var color = d3.scaleLinear().range([0,1]).domain([0,48]); var palette = d3.interpolatePlasma; // https://github.com/d3/d3-scale-chromatic var scale = scalingMagic(map.features,width,height) projection .scale(scale[0]) .translate(scale[1]); const g = svg.append("g"); g.append("rect") .attr("x",0) .attr("y",0) .attr("width",width) .attr("height",height) .attr("fill","white") .on("click", function(e) { svg.select("g").transition().duration(2000) .attr("transform", "translate(0,0)scale(1)") }) g .selectAll("path") .data(map.features) .enter().append("path") .attr("id", d => "state_"+d.properties.STATEFP) .attr("fill", d => palette(color(+d.properties.STATEFP))) .attr("d", path) .attr("stroke", "black") .on("click", function(e) { window.something = e.properties.STATEFP; var vertices = []; map.features.filter(function(d) { return (d.properties.STATEFP==e.properties.STATEFP)}) .forEach(function(d) { if (d.geometry.type=="Polygon") { d.geometry.coordinates.forEach(function(e) { e.forEach(function(f) { vertices.push(f);}) }) } else if (d.geometry.type=="MultiPolygon") { d.geometry.coordinates[0].forEach(function(e) { e.forEach(function(f) { vertices.push(f);}) }) } }) var xmin = 10000000000; var ymin = 10000000000; var xmax = -10000000000; var ymax = -10000000000; vertices.forEach(function(d) { if (xmin>d[0]) xmin = d[0]; if (ymin>d[1]) ymin = d[1]; if (xmax d.properties.STATEFP); yield svg.node(); }33:T4a8,selectedState = { while(true){ const width = 500; const height = 300; const projection = d3.geoMercator(); projection .scale(1) .translate([0, 0]); // https://github.com/d3/d3-geo#projections var path = d3.geoPath().projection(projection); const svg = d3.select(DOM.svg(width, height)) .style("width", width) .style("height", height); const map = {} map.type = "FeatureCollection" map.features = us.features.filter(function(d) { return (d.properties.STATEFP==window.something) }) var color = d3.scaleLinear().range([0,1]).domain([0,48]); var palette = d3.interpolatePlasma; // https://github.com/d3/d3-scale-chromatic const g = svg.append("g") .attr("transform", "translate(0,40)"); var scale = scalingMagic(map.features,width,height) projection .scale(scale[0]) .translate(scale[1]); svg.append("g") .selectAll("path") .data(map.features) .enter().append("path") .attr("fill", d => palette(color(+d.properties.STATEFP))) .attr("d", path) .attr("stroke", "black") .append("title") .text(d => d.properties.STATEFP); yield Promises.tick(1000, svg.node()); yield svg.node(); } }34:T604,EPAMapforState = { while(true){ const width = 500; const height = 300; const projection = d3.geoMercator(); projection .scale(1) .translate([0, 0]); // https://github.com/d3/d3-geo#projections var path = d3.geoPath().projection(projection); const svg = d3.select(DOM.svg(width, height)) .style("width", width) .style("height", height); const map = {} map.type = "FeatureCollection" map.features = us.features.filter(function(d) { return (d.properties.STATEFP==window.something) }) var mapData = []; mapData = EPAData.filter(function(d) { return (d.fips.slice(0, -3)==window.something) }) var mapDataObject = {} mapData.forEach(function(d) { mapDataObject[d.fips.slice(2, 5)]=+d.A_Diesel }) var color = d3.scaleLinear().range([0,1]).domain(d3.extent(mapData,function(d) { return +d.A_Diesel})); var palette = d3.interpolatePlasma; // https://github.com/d3/d3-scale-chromatic const g = svg.append("g") .attr("transform", "translate(0,40)"); var scale = scalingMagic(map.features,width,height) projection .scale(scale[0]) .translate(scale[1]); svg.append("g") .selectAll("path") .data(map.features) .enter().append("path") .attr("fill", d => palette(color(mapDataObject[d.properties.COUNTYFP]))) .attr("d", path) .attr("stroke", "black") .append("title") .text(d => d.properties.STATEFP); yield Promises.tick(1000, svg.node()); yield svg.node(); } }35:Ta85,AmountScale = { while(true){ const height = 300; const width = 800; const svg = d3.select(DOM.svg(width, height)); var nodes = []; EPAData.filter(function(d) { return (d.fips.slice(0, -3)==window.something) }).forEach(function(d,i) { nodes.push({ year:+d.A_Diesel, index:i, history:+d.A_Diesel, }) }) var margin = {top: 20, right: 20, bottom: 60, left: 20} var x = d3.scaleLinear().rangeRound([50, width-50]).domain(d3.extent(nodes,function(d) { return d.year})); var palette = d3.interpolatePlasma; // https://github.com/d3/d3-scale-chromatic const simulation = d3.forceSimulation() .force("x", d3.forceX(function(d) { return x(+d.year); }).strength(1)) .force("y", d3.forceY(height / 2)) .force("collide", d3.forceCollide(4)); simulation .nodes(nodes) .on("tick", ticked); var color = d3.scaleLinear().range([0,1]); svg.append("g").attr("transform", "translate(0," + (height-margin.bottom) + ")") .call(d3.axisBottom(x)) svg.append("g").attr("transform", "translate("+ (width/2) +"," + (height-10) + ")").append("text") .style("text-anchor", "middle") .text("Diesel Amounts"); // Update the data with circleData! const newCircles = svg.selectAll("circle.timelinepips").data(nodes); color.domain(d3.extent(nodes,function(d) { return d.year})) // Nothing happens at this point because the data is not entered yet // So let's enter the data and use it to position (cx,cy) and size (r) the circles newCircles.enter().append("circle") .attr("id","timelinepips") .attr("class",function(d) { return (d.year==1934) ? "point" : "timelinepips"; }) .attr("cx", function(d) { return x(d.year); }) .attr("cy", function(d) { return height/2; }) .attr("r", function(d) { return 4; }) .style("stroke", "black") .style("stroke-width", function(d) { return (d.year==1934) ? "2px" : "0px"; }) .style("fill", function(d) { return palette(color(d.year)); }) .append("title") .text(function(d) { return d.history }) svg.selectAll("circle.timelinepips") .on("mouseover", function() { d3.select(this).style("stroke-width","1px") }) .on("mouseout", function() { d3.select(this).style("stroke-width","0px") }) function ticked() { svg.selectAll("circle#timelinepips") .attr("cx", function(d) { return d.x; }) .attr("cy", function(d) { return d.y; }) } yield Promises.tick(3000, svg.node()); yield svg.node(); } }36:T63c,function scalingMagic(shapefile,width,height) { //////////////////////////////////////////////////////////////// /// Map Scaling Magic //////////////////////////////////////////////////////////////// var vertices = []; const projection = d3.geoMercator(); projection .scale(1) .translate([0, 0]); // https://github.com/d3/d3-geo#projections shapefile.forEach(function(d) { if (d.geometry.type=="Polygon") { d.geometry.coordinates.forEach(function(e) { e.forEach(function(f) { vertices.push(f);}) }) } else if (d.geometry.type=="MultiPolygon") { d.geometry.coordinates[0].forEach(function(e) { e.forEach(function(f) { vertices.push(f);}) }) } }) var xmin = 10000000000; var ymin = 10000000000; var xmax = -10000000000; var ymax = -10000000000; vertices.forEach(function(d) { if (xmin>d[0]) xmin = d[0]; if (ymin>d[1]) ymin = d[1]; if (xmax\n.tooltip {\n position: relative;\n display: inline-block;\n border-bottom: 1px dotted black;\n}\n\n.tooltip .tooltiptext {\n visibility: hidden;\n width: 220px;\n background-color: white;\n color: black;\n text-align: center;\n border-radius: 6px;\n padding: 5px 0;\n border: 1px solid black;\n /* Position the tooltip */\n position: absolute;\n z-index: 1;\n}\n\n.tooltip:hover .tooltiptext {\n visibility: visible;\n}\n\nFor our case, this will be by county. Typically this done by downloading a \n

shapefile.\n \n

\n\n

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":39,"value":"html`This repository provides a convenient mechanism for generating TopoJSON files from the Census Bureau’s cartographic boundary shapefiles, 2015 edition.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2,"value":"us = {\n let values = await d3.json(\"https://gist.githubusercontent.com/dudaspm/89da9e990236d2bc73a3a6ee00c18bb6/raw/055b78a9d016873c36e28872ab6a4d85d0be858e/usCounties.json\");\n return values;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":178,"value":"html`\n\nTo simplify the map, this will be limited to just the \n

contiguous United States.\n \n The Contiguous United States does not include Alaska, Hawaii, or any other territories under the control of the United States. \n\n

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":172,"value":"removeStates = {\n const statesToBeRemoved = [];\n // remove Alaska (\"02\")\n statesToBeRemoved.push(\"02\");\n // remove Puerto Rico (\"72\")\n statesToBeRemoved.push(\"72\");\n // remove Hawaii (\"15\")\n statesToBeRemoved.push(\"15\");\n return statesToBeRemoved\n \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":64,"value":"md`### Preview - nation`","pinned":false,"hidden":false,"mode":"ojs"},{"id":66,"value":"nationMap = {\n const width = 500;\n const height = 300;\n const projection = d3.geoMercator();\n \n projection\n .scale(1)\n .translate([0, 0]); // https://github.com/d3/d3-geo#projections\n var path = d3.geoPath().projection(projection);\n\n const svg = d3.select(DOM.svg(width, height))\n .style(\"width\", width)\n .style(\"height\", height);\n const map = {}\n map.type = \"FeatureCollection\"\n \n map.features = us.features.filter(function(d) { return (!(removeStates.indexOf(d.properties.STATEFP)+1)) })\n console.log(map);\n const g = svg.append(\"g\")\n .attr(\"transform\", \"translate(0,40)\");\n var scale = scalingMagic(map.features,width,height)\n\n projection\n .scale(scale[0])\n .translate(scale[1]); \n \n svg.append(\"g\")\n .selectAll(\"path\")\n .data(map.features)\n .enter().append(\"path\")\n .attr(\"fill\", \"white\")\n .attr(\"d\", path)\n .attr(\"stroke\", \"black\")\n .append(\"title\")\n .text(d => d.properties.STATEFP);\n\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":181,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":200,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":313,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":412,"value":"md`## Data from the USEPA`","pinned":false,"hidden":false,"mode":"ojs"},{"id":404,"value":"html`USEPA Environmental Quality Index (EQI) - Air, Water, Land, Built, and Sociodemographic Domains Non-Transformed Variables Dataset as Input for the USEPA EQI, by County for the United States. \n

\nOriginal source can be found here. `","pinned":false,"hidden":false,"mode":"ojs"},{"id":55,"value":"EPAData = {\n let values = await d3.csv(\"https://gist.githubusercontent.com/dudaspm/57951a2fa648fa23b4197768bbac2907/raw/ef63f7bf27d7dbcfffafe5deebe3b28f2ce5ddf0/data_EPA_county.csv\");\n return values;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":421,"value":"html`\nSample of Data\n\n\n\n\n\n\n\n\n\n\n\n\n

fips (Federal Information Processing Standard)	State	County	(Air) Diesel
${EPAData[0].fips}	${EPAData[0].COUNTY_NAME}	${EPAData[0].STATE}	${EPAData[0].A_Diesel}
${EPAData[100].fips}	${EPAData[100].COUNTY_NAME}	${EPAData[100].STATE}	${EPAData[100].A_Diesel}
${EPAData[1000].fips}	${EPAData[1000].COUNTY_NAME}	${EPAData[1000].STATE}	${EPAData[1000].A_Diesel}
${EPAData[3000].fips}	${EPAData[3000].COUNTY_NAME}	${EPAData[3000].STATE}	${EPAData[3000].A_Diesel}

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":431,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":449,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":45,"value":"md`## Libraries used in this demo:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"topojson = require(\"topojson-client@3\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"d3 = require(\"https://d3js.org/d3.v5.min.js\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":73,"value":"$36","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W37","stdlib":"1","titling":"auto"}