Maps drawn with d3 Ridgeline Plot / Gordon Tu

Gordon Tu

Trying to get good at Three and D3 @tu_yukun

Workspace

Public

Edited

Jan 28, 2022

Fork of Maps drawn with d3 Ridgeline Plot

1 star

colorScale1 = d3.scaleSequential().domain(d3.range(8))

.interpolator(d3.interpolateRgbBasis(['#1B3A65','#066cc1','#0999e2', '#85e0cd','#45d0b2','#669944',

'#B6BA71',

'#F0BA5C','#72B8A0']))

chart = {

const svg = d3.select(DOM.svg(width, height));

// svg.attr("style", `background-color:${backgroundColor}`);

const areaGradient = svg.append("defs")

.append("linearGradient")

.attr("id","areaGradient")

.attr("x1", "0%").attr("y1", "0%")

.attr("x2", "0%").attr("y2", "100%");

areaGradient.append("stop")

.attr("offset", "0%")

.attr("stop-color", '#14979c')

.attr("stop-opacity", 1);

areaGradient.append("stop")

.attr("offset", "25%")

.attr("stop-color", '#64a99a')

.attr("stop-opacity", 1);

areaGradient.append("stop")

.attr("offset", "65%")

.attr("stop-color", '#92bb98')

.attr("stop-opacity", 1);

areaGradient.append("stop")

.attr("offset", "100%")

.attr("stop-color", '#bacd95')

.attr("stop-opacity", 1)

svg.append('rect')

.attr('x', 0)

.attr('y', 0)

.attr('width', width)

.attr('height', height)

.attr('stroke', 'none')

.attr('fill', 'url(#areaGradient)')

// .attr('fill', 'white')

let g = svg.append("g").attr("transform", `translate(${(width - w) / 2},0)`);

let nbColor = 12;

let linearGradient = svg

.append("linearGradient")

.attr("id", "Gradient2")

.attr('gradientUnits', "userSpaceOnUse")

.attr("x1", "0")

.attr("x2", "0")

.attr("y1", 0)

.attr("y2", -overlap * y.step());

// linearGradient

// .selectAll("stop")

// .data(d3.range(nbColor))

// .join("stop")

// .attr("offset", (d, i) => `${i / (nbColor - 1)}`)

// .attr("stop-color", (d, i) =>

// interpolator(invertColor ? 1 - i / (nbColor - 1) : i / (nbColor - 1))

// // );

// '#235E8D', // 0

// '#94942e',

// '#1F99BE', //

// '#33B5CB',

// '#45d0b2',

// '#4AB5AA',

// '#76B177',

// '#B6BA71',

// '#F0BA5C',

// '#EF8060',

linearGradient

// .selectAll("stop")

// .data([

// {offset: "0%", color: "#EF8060"}, // 最下面

// {offset: "2%", color: "#F0BA5C"},

// // {offset: "12.5%", color: "#F0BA5C"},

// {offset: "15%", color: "#ccd358"},

// {offset: "27.5%", color: "#76B177"},

// {offset: "30%", color: "#45d0b2"},

// {offset: "50.5%", color: "#33B5CB"},

// {offset: "70%", color: "#1F99BE"},

// {offset: "80.5%", color: "#94942e"},

// {offset: "100%", color: "#235E8D"} ])

// .enter().append("stop")

// .attr("offset", function(d) { return d.offset; })

// .attr("stop-color", function(d) { return d.color; });

.selectAll("stop")

.data(d3.range(nbColor))

.join("stop")

.attr("offset", (d, i) => `${i / (nbColor - 1)}`)

.attr("stop-color", (d, i) =>

colorScale1(invertColor ? 1 - i / (nbColor - 1) : i / (nbColor - 1))

);

linearGradient.append("stop")

.attr("offset", "95%")

.attr("stop-color", "#87BE93")

.attr("stop-opacity", 1);

// # zoom function

svg

.append("rect")

.attr("fill", "none")

.attr("pointer-events", "all")

.attr("width", width)

.attr("height", height)

.call(

.zoom()

.scaleExtent([1 / 10, 8])

.on("zoom", zoom)

);

function zoom({ transform }, d) {

g.attr("transform", transform);

}

const serie = g

.append("g")

.selectAll("g")

.data(data)

.enter()

.append("g")

.attr("transform", (d, i) => {

return `translate(0,${y(i)})`;

});

serie

.append("path")

.attr("fill", "#dddddd")

.attr("opacity", 1)

.attr("d", (d, i) => area2(d));

//# gradient fill

serie

.append("path")

.attr("fill", "url(#Gradient2)")

.attr("opacity", opacity)

.attr("d", (d, i) => area(d));

//# shorten the flat area lines

serie

.append("path")

.attr("fill", "none")

.attr("stroke", "#cccccc")

.attr("stroke-width", 1)

.attr("opacity", showline ? 1 : 0)

.attr("d", d => line2(d));

//# THE top path line

serie

.append("path")

.attr("fill", "none")

.attr("stroke-width", 1)

.attr("stroke", lineColor)

.attr("opacity", showline ? 1 : 0)

.attr("d", d => line(d));

return svg.node();

}

curve = location.curve || d3.curveCardinal

y.step()

data = getMatrix(

dataRaw,

nbLine,

location.value,

location.longitude,

location.latitude,

location.group,

)

locations = [

// {

// name: "New Zealand elevation",

// type: "json",

// url:

// "https://gist.githubusercontent.com/Zechasault/e4ca8cb4301baa889badb0d3e26d8538/raw/71b70b0af985e4be2dde997ded3dbeb9ca7264cf/newZ",

// longitude: d => d.b,

// latitude: d => d.a,

// value: d => d.c,

// group: (a, b) => Math.max(a, b),

// nbLine: 100,

// width: 500,

// overlap: 6,

// projection: d3.geoMercator(),

// colors: "Elevation",

// title: "Height (m)"

// },

// {

// name: "France elevation",

// type: "csv",

// url:

// "https://gist.githubusercontent.com/Zechasault/2cf39fbedf4fb232f4c9f2205cadd9f4/raw/a6f95b9196d20c9df0731ba59f7dfddea6889c59/franceDataByCity",

// longitude: d => d["Longitude en degre"],

// latitude: d => d["latitude en degre"],

// value: d => parseInt(d["Altitude maximale"]),

// group: (a, b) => Math.max(a, b),

// nbLine: 100,

// width: 600,

// overlap: 10,

// projection: d3.geoMercator(),

// colors: "Elevation",

// title: "Height (m)"

// },

// {

// name: "France population (2012)",

// type: "csv",

// url:

// "https://gist.githubusercontent.com/Zechasault/2cf39fbedf4fb232f4c9f2205cadd9f4/raw/a6f95b9196d20c9df0731ba59f7dfddea6889c59/franceDataByCity",

// longitude: d => d["Longitude en degre"],

// latitude: d => d["latitude en degre"],

// value: d => parseInt(d["Population en 2012"]),

// nbLine: 100,

// width: 600,

// overlap: 30,

// projection: d3.geoMercator(),

// colors: "YlOrRd",

// title: "Inhabitant"

// },

// {

// name: "Corsica elevation",

// type: "json",

// url:

// "https://gist.githubusercontent.com/Zechasault/bf81cd3db44a21ab7eee77714c3b5775/raw/88abac60f0b3749fd47a74fed39288c0e451139b/corseElevation",

// longitude: d => d.location.lng,

// latitude: d => d.location.lat,

// value: d => (d.elevation < 0 ? 0 : d.elevation),

// group: (a, b) => Math.max(a, b),

// nbLine: 85,

// width: 400,

// overlap: 10,

// projection: d3.geoMercator(),

// colors: "Elevation",

// title: "Height (m)"

// },

// {

// name: "Japan elevation",

// type: "json",

// url:

// "https://gist.githubusercontent.com/Zechasault/9779b6869bacb52bae1935a980cde9d1/raw/c89a78ea1cdf78eb1295769260233604cd9c690d/japon",

// longitude: d => d.location.lng,

// latitude: d => d.location.lat,

// value: d => d.elevation,

// group: (a, b) => Math.max(a, b),

// nbLine: 100,

// width: 600,

// overlap: 5,

// projection: d3.geoMercator(),

// colors: "Elevation",

// title: "Height (m)"

// },

// {

// name: "South America elevation",

// type: "csv",

// url:

// "https://raw.githubusercontent.com/Zechasault/elevationData/master/south-america.csv",

// longitude: d => d.b,

// latitude: d => d.a,

// value: d => (d.c <= 0 ? undefined : parseInt(d.c)),

// group: (a, b) => Math.max(a, b),

// nbLine: 250,

// overlap: 11,

// projection: d3.geoMercator(),

// colors: "Elevation",

// title: "Height (m)"

// },

// {

// name: "World population mercator (2020)",

// type: "csv",

// url: await FileAttachment("worldcities.csv").url(), //https://simplemaps.com/data/world-cities

// longitude: d => d.lng,

// latitude: d => d.lat,

// value: d => parseInt(d.population),

// nbLine: 400,

// width: 900,

// overlap: 20,

// projection: d3.geoMercator(),

// colors: "YlOrRd",

// title: "Inhabitant"

// },

// {

// name: "World population Orthographic (2020)",

// type: "csv",

// url: await FileAttachment("worldcities.csv").url(), //https://simplemaps.com/data/world-cities

// longitude: d => d.lng,

// latitude: d => d.lat,

// value: d => parseInt(d.population),

// nbLine: 400,

// width: 700,

// overlap: 20,

// projection: d3.geoOrthographic(),

// colors: "YlOrRd",

// title: "Inhabitant"

// },

// {

// name: "Us population (2020)",

// type: "csv",

// url: await FileAttachment("uscities.csv").url(), //https://simplemaps.com/data/us-cities

// longitude: d => d.lng,

// latitude: d => d.lat,

// value: d => parseInt(d.population),

// nbLine: 120,

// width: 900,

// overlap: 20,

// projection: d3.geoAlbersUsa(),

// colors: "YlOrRd",

// curve: d3.curveStep,

// title: "Inhabitant"

// },

// {

// name: "JDZ elevation",

// type: "csv",

// // url: d3.csvParse(await FileAttachment("coords@1.csv").text())

// url: await FileAttachment("coords@1.csv").url(),

// longitude: d => +d.x,

// latitude: d => +d.y,

// value: d => +d.Merged,

// nbLine: 100,

// overlap: 5,

// projection: d3.geoMercator(),

// colors: "Elevation",

// title: "Height (m)"

// },

{

type: "csv",

// url: d3.csvParse(await FileAttachment("coords@1.csv").text())

url: await FileAttachment("less_dense.csv").url(),

longitude: d => +d.x,

latitude: d => +d.y,

value: d => +d.sichuan_ra,

nbLine: 400,

overlap: 5,

projection: d3.geoMercator(),

colors: "Elevation",

title: "Height (m)"

{

type: "csv",

// url: d3.csvParse(await FileAttachment("coords@1.csv").text())

url: await FileAttachment("basin.csv").url(),

longitude: d => +d.x,

latitude: d => +d.y,

value: d => +d.output_SRT,

nbLine: 400,

overlap: 5,

projection: d3.geoMercator(),

colors: "Elevation",

title: "Height (m)"

{

type: "csv",

// url: d3.csvParse(await FileAttachment("coords@1.csv").text())

url: await FileAttachment("line25@1.csv").url(),

longitude: d => +d.x,

latitude: d => +d.y,

value: d => +d.elevation,

nbLine: 400,

overlap: 5,

projection: d3.geoMercator(),

colors: "Elevation",

title: "Height (m)"

]

d3.json("https://api.jawg.io/elevations?locations=48.856578,2.351828&access-token=imkKUQxJDeA7jytK2BaOqTh8Skn8UcRxrtY1J9f1tCB3LceniagtgXBLtsCusbWo")

basin = {

const data = d3.csvParse(await FileAttachment("basin.csv").text(), d => ({

a: +d.x,

b: +d.y,

c: +d.output_SRT,

})

)

return data

}

FileAttachment("basin.csv").csv()

FileAttachment("line25@1.csv").csv()

One platform to build and deploy the best data apps

Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.

Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.

Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.

Learn more