From 967719280b15d4cf25cb39e6d0c3ca8d3a0e9188 Mon Sep 17 00:00:00 2001 From: Cameron DeCoster Date: Wed, 20 May 2026 14:21:10 -0600 Subject: [PATCH] docs: Revert D3 call signature changes --- .../2015-07-11-choropleth-north-america.html | 71 +++++++++-------- .../2015-07-11-choropleth-world-robinson.html | 39 +++++----- .../2015-08-10-countrygdp-choropleth-map.html | 77 +++++++++---------- ...2015-08-11-US-pop-by-state-choropleth.html | 53 +++++++------ .../2016-08-04-florida-counties.html | 65 ++++++++-------- 5 files changed, 150 insertions(+), 155 deletions(-) diff --git a/_posts/plotly_js/maps/choropleth-maps/2015-07-11-choropleth-north-america.html b/_posts/plotly_js/maps/choropleth-maps/2015-07-11-choropleth-north-america.html index 773cb1254..2568e1e4d 100755 --- a/_posts/plotly_js/maps/choropleth-maps/2015-07-11-choropleth-north-america.html +++ b/_posts/plotly_js/maps/choropleth-maps/2015-07-11-choropleth-north-america.html @@ -7,43 +7,42 @@ arrangement: horizontal --- -d3.csv('https://raw.githubusercontent.com/plotly/datasets/master/2011_us_ag_exports.csv') - .then((rows) => { - const unpack = (rows, key) => rows.map((row) => row[key]); +d3.csv('https://raw.githubusercontent.com/plotly/datasets/master/2011_us_ag_exports.csv', (err, rows) => { + const unpack = (rows, key) => rows.map((row) => row[key]); - const data = [{ - type: 'choropleth', - locationmode: 'USA-states', - locations: unpack(rows, 'code'), - z: unpack(rows, 'total exports'), - text: unpack(rows, 'state'), - zmin: 0, - zmax: 17000, - colorscale: [ - [0, 'rgb(242,240,247)'], [0.2, 'rgb(218,218,235)'], - [0.4, 'rgb(188,189,220)'], [0.6, 'rgb(158,154,200)'], - [0.8, 'rgb(117,107,177)'], [1, 'rgb(84,39,143)'] - ], - colorbar: { - title: {text: 'Millions USD'}, - thickness: 0.2 - }, - marker: { - line:{ - color: 'rgb(255,255,255)', - width: 2 - } + const data = [{ + type: 'choropleth', + locationmode: 'USA-states', + locations: unpack(rows, 'code'), + z: unpack(rows, 'total exports'), + text: unpack(rows, 'state'), + zmin: 0, + zmax: 17000, + colorscale: [ + [0, 'rgb(242,240,247)'], [0.2, 'rgb(218,218,235)'], + [0.4, 'rgb(188,189,220)'], [0.6, 'rgb(158,154,200)'], + [0.8, 'rgb(117,107,177)'], [1, 'rgb(84,39,143)'] + ], + colorbar: { + title: {text: 'Millions USD'}, + thickness: 0.2 + }, + marker: { + line:{ + color: 'rgb(255,255,255)', + width: 2 } - }]; + } + }]; - const layout = { - title: {text: '2011 US Agriculture Exports by State'}, - geo:{ - scope: 'usa', - showlakes: true, - lakecolor: 'rgb(255,255,255)' - } - }; + const layout = { + title: {text: '2011 US Agriculture Exports by State'}, + geo:{ + scope: 'usa', + showlakes: true, + lakecolor: 'rgb(255,255,255)' + } + }; - Plotly.newPlot("myDiv", data, layout, {showLink: false}); - }); + Plotly.newPlot("myDiv", data, layout, {showLink: false}); +}); diff --git a/_posts/plotly_js/maps/choropleth-maps/2015-07-11-choropleth-world-robinson.html b/_posts/plotly_js/maps/choropleth-maps/2015-07-11-choropleth-world-robinson.html index b85d00c66..07b25c214 100755 --- a/_posts/plotly_js/maps/choropleth-maps/2015-07-11-choropleth-world-robinson.html +++ b/_posts/plotly_js/maps/choropleth-maps/2015-07-11-choropleth-world-robinson.html @@ -7,27 +7,26 @@ arrangement: horizontal --- -d3.csv('https://raw.githubusercontent.com/plotly/datasets/master/2010_alcohol_consumption_by_country.csv') - .then((rows) => { - const unpack = (rows, key) => rows.map((row) => row[key]); +d3.csv('https://raw.githubusercontent.com/plotly/datasets/master/2010_alcohol_consumption_by_country.csv', (err, rows) => { + const unpack = (rows, key) => rows.map((row) => row[key]); - const data = [{ - type: 'choropleth', - locationmode: 'country names', - locations: unpack(rows, 'location'), - z: unpack(rows, 'alcohol'), - text: unpack(rows, 'location'), - autocolorscale: true - }]; + const data = [{ + type: 'choropleth', + locationmode: 'country names', + locations: unpack(rows, 'location'), + z: unpack(rows, 'alcohol'), + text: unpack(rows, 'location'), + autocolorscale: true + }]; - const layout = { - title: {text: 'Pure alcohol consumption
among adults (age 15+) in 2010'}, - geo: { - projection: { - type: 'robinson' - } + const layout = { + title: {text: 'Pure alcohol consumption
among adults (age 15+) in 2010'}, + geo: { + projection: { + type: 'robinson' } - }; + } + }; - Plotly.newPlot("myDiv", data, layout, {showLink: false}); - }); + Plotly.newPlot("myDiv", data, layout, {showLink: false}); +}); diff --git a/_posts/plotly_js/maps/choropleth-maps/2015-08-10-countrygdp-choropleth-map.html b/_posts/plotly_js/maps/choropleth-maps/2015-08-10-countrygdp-choropleth-map.html index b504b4d80..dde9a565c 100644 --- a/_posts/plotly_js/maps/choropleth-maps/2015-08-10-countrygdp-choropleth-map.html +++ b/_posts/plotly_js/maps/choropleth-maps/2015-08-10-countrygdp-choropleth-map.html @@ -7,47 +7,46 @@ arrangement: horizontal --- -d3.csv('https://raw.githubusercontent.com/plotly/datasets/master/2014_world_gdp_with_codes.csv') - .then((rows) => { - const unpack = (rows, key) => rows.map((row) => row[key]); +d3.csv('https://raw.githubusercontent.com/plotly/datasets/master/2014_world_gdp_with_codes.csv', (err, rows) => { + const unpack = (rows, key) => rows.map((row) => row[key]); - const data = [{ - type: 'choropleth', - locations: unpack(rows, 'CODE'), - z: unpack(rows, 'GDP (BILLIONS)'), - text: unpack(rows, 'COUNTRY'), - colorscale: [ - [0,'rgb(5, 10, 172)'],[0.35,'rgb(40, 60, 190)'], - [0.5,'rgb(70, 100, 245)'], [0.6,'rgb(90, 120, 245)'], - [0.7,'rgb(106, 137, 247)'],[1,'rgb(220, 220, 220)']], - autocolorscale: false, - reversescale: true, - marker: { - line: { - color: 'rgb(180,180,180)', - width: 0.5 - } - }, - tick0: 0, - zmin: 0, - dtick: 1000, - colorbar: { - tickmode: 'linear', - tickprefix: '$', - title: {text: 'GDP
Billions US$'} + const data = [{ + type: 'choropleth', + locations: unpack(rows, 'CODE'), + z: unpack(rows, 'GDP (BILLIONS)'), + text: unpack(rows, 'COUNTRY'), + colorscale: [ + [0,'rgb(5, 10, 172)'],[0.35,'rgb(40, 60, 190)'], + [0.5,'rgb(70, 100, 245)'], [0.6,'rgb(90, 120, 245)'], + [0.7,'rgb(106, 137, 247)'],[1,'rgb(220, 220, 220)']], + autocolorscale: false, + reversescale: true, + marker: { + line: { + color: 'rgb(180,180,180)', + width: 0.5 } - }]; + }, + tick0: 0, + zmin: 0, + dtick: 1000, + colorbar: { + tickmode: 'linear', + tickprefix: '$', + title: {text: 'GDP
Billions US$'} + } + }]; - const layout = { - title: {text: '2014 Global GDP
Source: CIA World Factbook'}, - geo:{ - showframe: false, - showcoastlines: false, - projection:{ - type: 'mercator' - } + const layout = { + title: {text: '2014 Global GDP
Source: CIA World Factbook'}, + geo:{ + showframe: false, + showcoastlines: false, + projection:{ + type: 'mercator' } - }; + } + }; - Plotly.newPlot("myDiv", data, layout, {showLink: false}); - }); + Plotly.newPlot("myDiv", data, layout, {showLink: false}); +}); diff --git a/_posts/plotly_js/maps/choropleth-maps/2015-08-11-US-pop-by-state-choropleth.html b/_posts/plotly_js/maps/choropleth-maps/2015-08-11-US-pop-by-state-choropleth.html index 042752fe2..798840157 100644 --- a/_posts/plotly_js/maps/choropleth-maps/2015-08-11-US-pop-by-state-choropleth.html +++ b/_posts/plotly_js/maps/choropleth-maps/2015-08-11-US-pop-by-state-choropleth.html @@ -7,33 +7,32 @@ arrangement: horizontal --- -d3.csv('https://raw.githubusercontent.com/plotly/datasets/master/2014_usa_states.csv') - .then((rows) => { - const unpack = (rows, key) => rows.map((row) => row[key]); +d3.csv('https://raw.githubusercontent.com/plotly/datasets/master/2014_usa_states.csv', (err, rows) => { + const unpack = (rows, key) => rows.map((row) => row[key]); - const data = [{ - type: 'choropleth', - locationmode: 'USA-states', - locations: unpack(rows, 'Postal'), - z: unpack(rows, 'Population'), - text: unpack(rows, 'State'), - autocolorscale: true - }]; + const data = [{ + type: 'choropleth', + locationmode: 'USA-states', + locations: unpack(rows, 'Postal'), + z: unpack(rows, 'Population'), + text: unpack(rows, 'State'), + autocolorscale: true + }]; - const layout = { - title: {text: '2014 US Population by State'}, - geo:{ - scope: 'usa', - countrycolor: 'rgb(255, 255, 255)', - showland: true, - landcolor: 'rgb(217, 217, 217)', - showlakes: true, - lakecolor: 'rgb(255, 255, 255)', - subunitcolor: 'rgb(255, 255, 255)', - lonaxis: {}, - lataxis: {} - } - }; + const layout = { + title: {text: '2014 US Population by State'}, + geo:{ + scope: 'usa', + countrycolor: 'rgb(255, 255, 255)', + showland: true, + landcolor: 'rgb(217, 217, 217)', + showlakes: true, + lakecolor: 'rgb(255, 255, 255)', + subunitcolor: 'rgb(255, 255, 255)', + lonaxis: {}, + lataxis: {} + } + }; - Plotly.newPlot("myDiv", data, layout, {showLink: false}); - }); + Plotly.newPlot("myDiv", data, layout, {showLink: false}); +}); diff --git a/_posts/plotly_js/maps/choropleth-maps/2016-08-04-florida-counties.html b/_posts/plotly_js/maps/choropleth-maps/2016-08-04-florida-counties.html index d2f23b79b..cb9135503 100644 --- a/_posts/plotly_js/maps/choropleth-maps/2016-08-04-florida-counties.html +++ b/_posts/plotly_js/maps/choropleth-maps/2016-08-04-florida-counties.html @@ -7,39 +7,38 @@ arrangement: horizontal --- -Promise.all([ - d3.json('https://raw.githubusercontent.com/plotly/datasets/master/florida-red-data.json'), - d3.json('https://raw.githubusercontent.com/plotly/datasets/master/florida-blue-data.json') -]).then(([redjson, bluejson]) => { - Plotly.newPlot('myDiv', [{ - type: 'scattermap', - lat: [46], - lon: [-74] - }], { - title: {text: "Florida Counties"}, - height: 600, - width: 600, - map: { - center: { - lat: 28, - lon: -84 - }, - style: 'light', - zoom: 4.8, - layers: [ - { - sourcetype: 'geojson', - source: redjson, - type: 'fill', - color: 'rgba(163,22,19,0.8)' +d3.json('https://raw.githubusercontent.com/plotly/datasets/master/florida-red-data.json', (redjson) => { + d3.json('https://raw.githubusercontent.com/plotly/datasets/master/florida-blue-data.json', (bluejson) => { + Plotly.newPlot('myDiv', [{ + type: 'scattermap', + lat: [46], + lon: [-74] + }], { + title: {text: "Florida Counties"}, + height: 600, + width: 600, + map: { + center: { + lat: 28, + lon: -84 }, - { - sourcetype: 'geojson', - source: bluejson, - type: 'fill', - color: 'rgba(40,0,113,0.8)' - }, - ] - } + style: 'light', + zoom: 4.8, + layers: [ + { + sourcetype: 'geojson', + source: redjson, + type: 'fill', + color: 'rgba(163,22,19,0.8)' + }, + { + sourcetype: 'geojson', + source: bluejson, + type: 'fill', + color: 'rgba(40,0,113,0.8)' + }, + ] + } + }); }); });