New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
dmn-elex-usa-choropleth
Advanced tools
dmn-elex-usa-choropleth - npm Package Compare versions
Comparing version 1.3.0 to 1.4.0
| { | ||
| "name": "dmn-elex-usa-choropleth", | ||
| "version": "1.3.0", | ||
| "version": "1.4.0", | ||
| "description": "", | ||
@@ -5,0 +5,0 @@ "author": "", |
@@ -8,5 +8,124 @@ import * as d3 from "d3"; | ||
| const scaleRatio = 1.3; | ||
| const fontSize = d3.scaleThreshold() | ||
| .domain([370, 425, 500, 600, 700]) | ||
| .range(['7px','8px','9px','10px','11px', '12px']); | ||
| // eslint-disable-next-line no-unused-vars | ||
| const offsets = { | ||
| dc: { | ||
| fips: '11', | ||
| text: 'DC', | ||
| x1: 0.239, | ||
| y1: 0.548, | ||
| x2: 0.169, | ||
| y2: 0.462, | ||
| rectX: 0.17, | ||
| rectY: 0.48, | ||
| }, | ||
| md: { | ||
| fips: '24', | ||
| text: 'MD', | ||
| x1: 0.225, | ||
| y1: 0.55, | ||
| x2: 0.169, | ||
| y2: 0.5, | ||
| rectX: 0.17, | ||
| rectY: 0.517, | ||
| }, | ||
| de: { | ||
| fips: '10', | ||
| text: 'DE', | ||
| x1: 0.221, | ||
| y1: 0.56, | ||
| x2: 0.169, | ||
| y2: 0.537, | ||
| rectX: 0.17, | ||
| rectY: 0.554, | ||
| }, | ||
| nj: { | ||
| fips: '34', | ||
| text: 'NJ', | ||
| x1: 0.21, | ||
| y1: 0.595, | ||
| x2: 0.169, | ||
| y2: 0.575, | ||
| rectX: 0.17, | ||
| rectY: 0.591, | ||
| }, | ||
| ct: { | ||
| fips: '09', | ||
| text: 'CT', | ||
| x1: 0.195, | ||
| y1: 0.645, | ||
| x2: 0.149, | ||
| y2: 0.625, | ||
| rectX: 0.15, | ||
| rectY: 0.64, | ||
| }, | ||
| ri: { | ||
| fips: '44', | ||
| text: 'RI', | ||
| x1: 0.179, | ||
| y1: 0.647, | ||
| x2: 0.149, | ||
| y2: 0.66, | ||
| rectX: 0.15, | ||
| rectY: 0.677, | ||
| } | ||
| }; | ||
| function calculateScaledPosition(overallWidth, offsetPct) { | ||
| var scaleWidth = overallWidth * scaleRatio; | ||
| return (scaleWidth * (1 - offsetPct)) - ((scaleWidth - overallWidth) / 2); | ||
| } | ||
| function addStateBox(stateSlug, g, canvasHeight, canvasWidth) { | ||
| //adding small state callouts | ||
| const boxRatio = 1.5; | ||
| const boxHeight = canvasHeight * 0.033; | ||
| const boxWidth = boxHeight * boxRatio; | ||
| g.append("line") | ||
| .attr("x1", calculateScaledPosition(canvasWidth, offsets[stateSlug].x1)) | ||
| .attr("y1", calculateScaledPosition(canvasHeight, offsets[stateSlug].y1)) | ||
| .attr("x2", calculateScaledPosition(canvasWidth, offsets[stateSlug].x2)) | ||
| .attr("y2", calculateScaledPosition(canvasHeight, offsets[stateSlug].y2)); | ||
| g.append("rect") | ||
| .attr("class", $(`#${offsets[stateSlug].fips}state`).attr('class')) | ||
| .attr("x", calculateScaledPosition(canvasWidth, offsets[stateSlug].rectX)) | ||
| .attr("y", calculateScaledPosition(canvasHeight, offsets[stateSlug].rectY)) | ||
| .attr("width", boxWidth) | ||
| .attr("height", boxHeight); | ||
| var dctext = g.append("text") | ||
| .attr("class", $(`#${offsets[stateSlug].fips}state`).attr('class')) | ||
| .attr('id', `${stateSlug}text`) | ||
| .style("font-size", fontSize(canvasWidth)) | ||
| .text(offsets[stateSlug].text); | ||
| dctext.attr('x', function(){ | ||
| var textWidth = $(`#${stateSlug}text`).width()+1; | ||
| var boxX = calculateScaledPosition(canvasWidth, offsets[stateSlug].rectX); | ||
| var center = boxWidth/2; | ||
| var textCenter = textWidth/2; | ||
| return boxX + (center-textCenter); | ||
| }) | ||
| .attr("y", function(){ | ||
| var textHeight = $(`#${stateSlug}text`).height(); | ||
| var boxY = calculateScaledPosition(canvasHeight, offsets[stateSlug].rectY); | ||
| var center = boxHeight/2; | ||
| var textCenter = textHeight/2; | ||
| return boxY + center+textCenter/2; | ||
| }); | ||
| } | ||
| // This is the chart function that will be exported | ||
| export default () => ({ | ||
| // Develop the reusable function for you chart in this init function. | ||
@@ -28,3 +147,3 @@ // cf. https://bost.ocks.org/mike/chart/ | ||
| height = width * mapRatio; | ||
| } else{ | ||
| } else { | ||
| height = bbox.height; | ||
@@ -34,11 +153,9 @@ width = height/mapRatio; | ||
| var fontSize = d3.scaleThreshold() | ||
| .domain([370, 425, 500, 600, 700]) | ||
| .range(['7px','8px','9px','10px','11px', '12px']); | ||
| var states_geo = topojson.feature(geoData, geoData.objects.states); | ||
| var scaleWidth = width * scaleRatio; | ||
| var projection = d3.geoAlbersUsa() | ||
| .scale(width) | ||
| .translate([width/2, height/2]); | ||
| .scale(scaleWidth) | ||
| .translate([(width/2), (height/2)]); | ||
@@ -69,221 +186,8 @@ var path = d3.geoPath() | ||
| //adding small state callouts | ||
| var boxRatio = 1.5; | ||
| var boxHeight = height*0.033; | ||
| var boxWidth = boxHeight*boxRatio; | ||
| //add DC | ||
| g.append("line") | ||
| .attr("x1", width-width*0.239) | ||
| .attr("y1", height-height*0.548) | ||
| .attr("x2", width-width*0.169) | ||
| .attr("y2", height-height*0.462); | ||
| g.append("rect") | ||
| .attr("class", $('#11state').attr('class')) | ||
| .attr("x", width-width*0.17) | ||
| .attr("y", height-height*0.48) | ||
| .attr("width", boxWidth) | ||
| .attr("height", boxHeight); | ||
| var dctext = g.append("text") | ||
| .attr("class", $('#11state').attr('class')) | ||
| .attr('id', 'dctext') | ||
| .style("font-size", fontSize(width)) | ||
| .text("DC"); | ||
| dctext.attr('x', function(){ | ||
| var textWidth = $('#dctext').width()+1; | ||
| var boxX = width-width*0.17; | ||
| var center = boxWidth/2; | ||
| var textCenter = textWidth/2; | ||
| return boxX + (center-textCenter); | ||
| }) | ||
| .attr("y", function(){ | ||
| var textHeight = $('#dctext').height(); | ||
| var boxY = height-height*0.48; | ||
| var center = boxHeight/2; | ||
| var textCenter = textHeight/2; | ||
| return boxY + center+textCenter/2; | ||
| }); | ||
| //add MD | ||
| g.append("line") | ||
| .attr("x1", width-width*0.225) | ||
| .attr("y1", height-height*0.55) | ||
| .attr("x2", width-width*0.169) | ||
| .attr("y2", height-height*0.5); | ||
| g.append("rect") | ||
| .attr("class", $('#24state').attr('class')) | ||
| .attr("x", width-width*0.17) | ||
| .attr("y", height-height*0.517) | ||
| .attr("width", boxWidth) | ||
| .attr("height", boxHeight); | ||
| var mdtext = g.append("text") | ||
| .attr("class", $('#24state').attr('class')) | ||
| .attr('id', 'mdtext') | ||
| .style("font-size", fontSize(width)) | ||
| .text("MD"); | ||
| mdtext.attr('x', function(){ | ||
| var textWidth = $('#mdtext').width()+1; | ||
| var boxX = width-width*0.17; | ||
| var center = boxWidth/2; | ||
| var textCenter = textWidth/2; | ||
| return boxX + (center-textCenter); | ||
| }) | ||
| .attr("y", function(){ | ||
| var textHeight = $('#mdtext').height(); | ||
| var boxY = height-height*0.517; | ||
| var center = boxHeight/2; | ||
| var textCenter = textHeight/2; | ||
| return boxY + center+textCenter/2; | ||
| }); | ||
| //add DE | ||
| g.append("line") | ||
| .attr("x1", width-width*0.221) | ||
| .attr("y1", height-height*0.56) | ||
| .attr("x2", width-width*0.169) | ||
| .attr("y2", height-height*0.537); | ||
| g.append("rect") | ||
| .attr("class", $('#10state').attr('class')) | ||
| .attr("x", width-width*0.17) | ||
| .attr("y", height-height*0.554) | ||
| .attr("width", boxWidth) | ||
| .attr("height", boxHeight); | ||
| var detext = g.append("text") | ||
| .attr("class", $('#10state').attr('class')) | ||
| .attr('id', 'detext') | ||
| .style("font-size", fontSize(width)) | ||
| .text("DE"); | ||
| detext.attr('x', function(){ | ||
| var textWidth = $('#detext').width()+1; | ||
| var boxX = width-width*0.17; | ||
| var center = boxWidth/2; | ||
| var textCenter = textWidth/2; | ||
| return boxX + (center-textCenter); | ||
| }) | ||
| .attr("y", function(){ | ||
| var textHeight = $('#detext').height(); | ||
| var boxY = height-height*0.554; | ||
| var center = boxHeight/2; | ||
| var textCenter = textHeight/2; | ||
| return boxY + center+textCenter/2; | ||
| }); | ||
| //add NJ | ||
| g.append("line") | ||
| .attr("x1", width-width*0.21) | ||
| .attr("y1", height-height*0.595) | ||
| .attr("x2", width-width*0.169) | ||
| .attr("y2", height-height*0.575); | ||
| g.append("rect") | ||
| .attr("class", $('#34state').attr('class')) | ||
| .attr("x", width-width*0.17) | ||
| .attr("y", height-height*0.591) | ||
| .attr("width", boxWidth) | ||
| .attr("height", boxHeight); | ||
| var njtext = g.append("text") | ||
| .attr("class", $('#34state').attr('class')) | ||
| .attr('id', 'njtext') | ||
| .style("font-size", fontSize(width)) | ||
| .text("NJ"); | ||
| njtext.attr('x', function(){ | ||
| var textWidth = $('#njtext').width()+1; | ||
| var boxX = width-width*0.17; | ||
| var center = boxWidth/2; | ||
| var textCenter = textWidth/2; | ||
| return boxX + (center-textCenter); | ||
| }) | ||
| .attr("y", function(){ | ||
| var textHeight = $('#njtext').height(); | ||
| var boxY = height-height*0.591; | ||
| var center = boxHeight/2; | ||
| var textCenter = textHeight/2; | ||
| return boxY + center+textCenter/2; | ||
| }); | ||
| //add CT | ||
| g.append("line") | ||
| .attr("x1", width-width*0.195) | ||
| .attr("y1", height-height*0.645) | ||
| .attr("x2", width-width*0.149) | ||
| .attr("y2", height-height*0.625); | ||
| g.append("rect") | ||
| .attr("class", $('#09state').attr('class')) | ||
| .attr("x", width-width*0.15) | ||
| .attr("y", height-height*0.64) | ||
| .attr("width", boxWidth) | ||
| .attr("height", boxHeight); | ||
| var cttext = g.append("text") | ||
| .attr("class", $('#09state').attr('class')) | ||
| .attr('id', 'cttext') | ||
| .style("font-size", fontSize(width)) | ||
| .text("CT"); | ||
| cttext.attr('x', function(){ | ||
| var textWidth = $('#cttext').width()+1; | ||
| var boxX = width-width*0.15; | ||
| var center = boxWidth/2; | ||
| var textCenter = textWidth/2; | ||
| return boxX + (center-textCenter); | ||
| }) | ||
| .attr("y", function(){ | ||
| var textHeight = $('#njtext').height(); | ||
| var boxY = height-height*0.64; | ||
| var center = boxHeight/2; | ||
| var textCenter = textHeight/2; | ||
| return boxY + center+textCenter/2; | ||
| }); | ||
| //add RI | ||
| g.append("line") | ||
| .attr("x1", width-width*0.179) | ||
| .attr("y1", height-height*0.647) | ||
| .attr("x2", width-width*0.149) | ||
| .attr("y2", height-height*0.66); | ||
| g.append("rect") | ||
| .attr("class", $('#44state').attr('class')) | ||
| .attr("x", width-width*0.15) | ||
| .attr("y", height-height*0.677) | ||
| .attr("width", boxWidth) | ||
| .attr("height", boxHeight); | ||
| var ritext = g.append("text") | ||
| .attr("class", $('#44state').attr('class')) | ||
| .attr('id', 'ritext') | ||
| .style("font-size", fontSize(width)) | ||
| .text("RI"); | ||
| ritext.attr('x', function(){ | ||
| var textWidth = $('#ritext').width()+1; | ||
| var boxX = width-width*0.15; | ||
| var center = boxWidth/2; | ||
| var textCenter = textWidth/2; | ||
| return boxX + (center-textCenter); | ||
| }) | ||
| .attr("y", function(){ | ||
| var textHeight = $('#njtext').height(); | ||
| var boxY = height-height*0.677; | ||
| var center = boxHeight/2; | ||
| var textCenter = textHeight/2; | ||
| return boxY + center+textCenter/2; | ||
| }); | ||
| addStateBox('dc', g, height, width); | ||
| addStateBox('md', g, height, width); | ||
| addStateBox('de', g, height, width); | ||
| addStateBox('nj', g, height, width); | ||
| addStateBox('ct', g, height, width); | ||
| addStateBox('ri', g, height, width); | ||
| }); | ||
@@ -290,0 +194,0 @@ } |
Sorry, the diff of this file is too big to display
Sorry, the diff of this file is too big to display
No alert changes
Worsened metrics
- Total package byte prevSize
- decreased by-0.82%
4356714
- Lines of code
- decreased by-0.3%
59988
No dependency changes