Skip to content

Commit

Permalink
update doc
Browse files Browse the repository at this point in the history
  • Loading branch information
neocarto committed Dec 20, 2024
1 parent ef2c8e6 commit 9fed8bb
Show file tree
Hide file tree
Showing 19 changed files with 388 additions and 199 deletions.
53 changes: 36 additions & 17 deletions docs/examples/bubble.html
Original file line number Diff line number Diff line change
@@ -1,24 +1,43 @@
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Tangerine">
<meta charset="UTF-8" />
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Tangerine"
/>
</head>

<script src="https://cdn.jsdelivr.net/npm/d3@7"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]" charset="utf-8"></script>
<script
src="https://cdn.jsdelivr.net/npm/[email protected]"
charset="utf-8"
></script>

<script>

let geojson = "./world.json"
d3.json(geojson).then(data => {
let svg = geoviz.create({projection: d3.geoEqualEarth()})
svg.outline()
svg.graticule({stroke: "white", strokeWidth: 0.4})
svg.path({datum: data, fill: "white", fillOpacity:0.4})
svg.circle({data: data, r: "pop", fill: "#f07d75", tip:d => `${d.properties.NAMEen}
${d.properties.pop / 1000} thousands inh.`})
svg.legend.circles_nested({pos:[50, 250], data: data.features.map(d => d.properties.pop), title: "Word Population" })
svg.header({fontSize: 30, text: "A World Map With Bubbles", fill: "#267A8A", fontWeight: "bold", fontFamily: "Tangerine"})
document.body.appendChild(svg.render())
})

let geojson = "./world.json";
d3.json(geojson).then((data) => {
let svg = geoviz.create({ projection: "EqualEarth", zoomable: true });
svg.outline();
svg.graticule({ stroke: "white", strokeWidth: 0.4 });
svg.path({ datum: data, fill: "white", fillOpacity: 0.4 });
svg.circle({
data: data,
r: "pop",
fill: "#f07d75",
tip: (d) => `${d.properties.NAMEen}
${d.properties.pop / 1000} thousands inh.`,
});
svg.legend.circles_nested({
pos: [50, 250],
data: data.features.map((d) => d.properties.pop),
title: "Word Population",
});
svg.header({
fontSize: 30,
text: "A World Map With Bubbles",
fill: "#267A8A",
fontWeight: "bold",
fontFamily: "Tangerine",
});
document.body.appendChild(svg.render());
});
</script>
66 changes: 42 additions & 24 deletions docs/examples/choropleth.html
Original file line number Diff line number Diff line change
@@ -1,32 +1,50 @@
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Tangerine">
<meta charset="UTF-8" />
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Tangerine"
/>
</head>

<script src="https://cdn.jsdelivr.net/npm/d3@7"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]" charset="utf-8"></script>
<script
src="https://cdn.jsdelivr.net/npm/[email protected]"
charset="utf-8"
></script>

<script>

let geojson = "./world.json"
d3.json(geojson).then(data => {
let svg = geoviz.create({projection: d3.geoEqualEarth()})
svg.outline()
svg.graticule({stroke: "red", strokeWidth: 0.4})
let choro = geoviz.tool.choro(data.features.map((d) => d.properties.gdppc), {method: "quantile", colors: "PinkYl"})
svg.path({data: data, fill: d => choro.colorize(d.properties.gdppc), stroke: "white", strokeWidth:0.5, tip:d => `${d.properties.NAMEen}
${d.properties.gdppc} $ per inh.`})
svg.legend.choro_horizontal({
pos: [410, 390],
title: "GDP per capita",
title_fontSize: 18,
subtitle_text: "($ per inh.)",
note_text: "Source: worldbank, 2020",
values_round: 0,
...choro
let geojson = "./world.json";
d3.json(geojson).then((data) => {
let svg = geoviz.create({ projection: "EqualEarth" });
svg.plot({ type: "outline" });
svg.plot({
type: "graticule",
stroke: "white",
step: 30,
strokeWidth: 1.2,
});
svg.plot({
type: "choro",
data: data,
var: "gdppc",
strokeWidth: 0.3,
tip: true,
leg_type: "horizontal",
leg_title: "GDP per capita",
leg_subtitle: "($ per inh.)",
leg_note: "Source: worldbank, 2020",
leg_pos: [410, 370],
leg_values_round: 0,
leg_missing_text: "Missing values",
});
svg.plot({
type: "header",
fontSize: 30,
text: "A Choropleth World Map",
fill: "#267A8A",
fontWeight: "bold",
fontFamily: "Tangerine",
});
document.body.appendChild(svg.render());
});
svg.header({fontSize: 30, text: "A Choropleth World Map", fill: "#267A8A", fontWeight: "bold", fontFamily: "Tangerine"})
document.body.appendChild(svg.render())
})

</script>
68 changes: 50 additions & 18 deletions docs/examples/dorling.html
Original file line number Diff line number Diff line change
@@ -1,25 +1,57 @@
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Tangerine">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Pacifico">
</head>
<meta charset="UTF-8" />
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Tangerine"
/>
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Pacifico"
/>
</head>

<script src="https://cdn.jsdelivr.net/npm/d3@7"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]" charset="utf-8"></script>
<script
src="https://cdn.jsdelivr.net/npm/[email protected]"
charset="utf-8"
></script>

<script>
let geojson = "./world.json";

let geojson = "./world.json"

d3.json(geojson).then(data => {
let svg = geoviz.create({ margin: [30, 100, -45, -100], projection: d3.geoEquirectangular() })
let centroids = geoviz.tool.centroid(data)
let dots = geoviz.tool.dodge(centroids, { projection: svg.projection, r: "pop", k:100, iteration: 300 })
svg.circle({data: dots, coords:"svg", r: "pop", fill: "black", k: 100})
let scale = d3.scaleSqrt([0, d3.max(data.features.map((d) => +d.properties.pop))], [0, 100 * 0.6] )
svg.text({ data: dots, coords:"svg", fill: "white", text: "ISO3", fontFamily: "Pacifico", fontSize: (d) => scale(d.properties.pop) })
svg.header({fontSize: 60, text: "A Dorling Cartogram World Map", fill: "black", fontWeight: "bold", fontFamily: "Tangerine", background_opacity:0})
document.body.appendChild(svg.render())
})

d3.json(geojson).then((data) => {
let svg = geoviz.create({
margin: [30, 100, -45, -100],
projection: "Equirectangular",
});
let centroids = geoviz.tool.centroid(data);
let dots = geoviz.tool.dodge(centroids, {
projection: svg.projection,
r: "pop",
k: 100,
iteration: 300,
});
svg.circle({ data: dots, coords: "svg", r: "pop", fill: "black", k: 100 });
let scale = d3.scaleSqrt(
[0, d3.max(data.features.map((d) => +d.properties.pop))],
[0, 100 * 0.6]
);
svg.text({
data: dots,
coords: "svg",
fill: "white",
text: "ISO3",
fontFamily: "Pacifico",
fontSize: (d) => scale(d.properties.pop),
});
svg.header({
fontSize: 60,
text: "A Dorling Cartogram World Map",
fill: "black",
fontWeight: "bold",
fontFamily: "Tangerine",
background_opacity: 0,
});
document.body.appendChild(svg.render());
});
</script>
45 changes: 45 additions & 0 deletions docs/examples/globe.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,45 @@
<head>
<meta charset="UTF-8" />
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Tangerine"
/>
</head>

<script src="https://cdn.jsdelivr.net/npm/d3@7"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<script
src="https://cdn.jsdelivr.net/npm/[email protected]"
charset="utf-8"
></script>

<script>
let geojson = "./world.json";
d3.json(geojson).then((data) => {
let svg = geoviz.create({
projection: "Orthographic.rotate([-30,-30])",
zoomable: "versor",
width: 500,
});
svg.outline();
svg.graticule({ stroke: "white", strokeWidth: 0.4 });
svg.path({ datum: data, fill: "white", fillOpacity: 0.4 });
svg.plot({
type: "prop",
data: data,
var: "pop",
k: 40,
fill: "#f07d75",
tip: "$NAMEen",
legend: false,
});
svg.header({
fontSize: 30,
text: "A Globe",
fill: "#267A8A",
fontWeight: "bold",
fontFamily: "Tangerine",
});
document.body.appendChild(svg.render());
});
</script>
16 changes: 9 additions & 7 deletions docs/examples/index.html
Original file line number Diff line number Diff line change
@@ -1,10 +1,12 @@
<b>GEOVIZ JavaScript Library Examples</b>
<hr/>
<hr />
<ul>
<li><a href = "simple.html">A simple map</a></li>
<li><a href = "choropleth.html">Choropleth</a></li>
<li><a href = "typo.html">Typology</a></li>
<li><a href = "bubble.html">Bubbles</a></li>
<li><a href = "dorling.html">Dorling Cartogram</a></li>
<li><a href = "tiles.html">Mercator tiles</a></li>
<li><a href="simple.html">A simple map</a></li>
<li><a href="choropleth.html">Choropleth</a></li>
<li><a href="typo.html">Typology</a></li>
<li><a href="bubble.html">Bubbles</a></li>
<li><a href="dorling.html">Dorling Cartogram</a></li>
<li><a href="tiles.html">Mercator tiles</a></li>
<li><a href="globe.html">A globe</a></li>
<li><a href="reactive.html">A reactive map</a></li>
</ul>
66 changes: 66 additions & 0 deletions docs/examples/reactive.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,66 @@
<script src="https://cdn.jsdelivr.net/npm/d3@7"></script>
<script
src="https://cdn.jsdelivr.net/npm/[email protected]"
charset="utf-8"
></script>

<div>
<input type="range" id="size" name="volume" min="10" max="100" value="50" />
<label for="size" id="labelsize">Radius max (50)</label>
</div>
<div>
<input type="checkbox" id="dodge" name="dodge" />
<label for="dodge">Dodge circles</label>
</div>

<script>
let geojson = "./world.json";

d3.json(geojson).then((data) => {
// The map
let svg = geoviz.create({
projection: "polar",
width: 700,
zoomable: true,
});
svg.plot({ type: "outline" });
svg.plot({ type: "graticule", stroke: "white", strokeWidth: 0.4 });
svg.plot({
type: "path",
datum: data,
fill: "white",
fillOpacity: 0.3,
});

const slider = document.getElementById("size");
const dodge = document.getElementById("dodge");
const drawCircles = () => {
return svg.plot({
id: "bubbles", // <- You need to define an id. Try to remove it....
type: "prop",
symbol: "circle",
data: data,
var: "pop",
fill: "#F13C47",
dodge: dodge.checked,
k: +slider.value,
leg_title: "Population",
tip: true,
});
};
drawCircles();

slider.addEventListener("input", function () {
document.getElementById(
"labelsize"
).innerHTML = `Radius max (${slider.value})`;
drawCircles();
});

dodge.addEventListener("click", function () {
drawCircles();
});

document.body.appendChild(svg.render());
});
</script>
46 changes: 30 additions & 16 deletions docs/examples/simple.html
Original file line number Diff line number Diff line change
@@ -1,23 +1,37 @@
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Tangerine">
<meta charset="UTF-8" />
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Tangerine"
/>
</head>

<script src="https://cdn.jsdelivr.net/npm/d3@7"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]" charset="utf-8"></script>
<script
src="https://cdn.jsdelivr.net/npm/[email protected]"
charset="utf-8"
></script>

<script>

let geojson = "./world.json"
d3.json(geojson).then(data => {
let svg = geoviz.create({projection: d3.geoEqualEarth()})
svg.outline({fill: "#267A8A"})
svg.graticule({stroke: "white", strokeWidth: 0.4})
svg.path({data: data, fill: "#F8D993", stroke: "#ada9a6", strokeWidth:0.5, tip:d => d.properties.NAMEen})
svg.header({fontSize: 30, text: "A Simple World Map", fill: "#267A8A", fontWeight: "bold", fontFamily: "Tangerine"})
document.body.appendChild(svg.render())
})



let geojson = "./world.json";
d3.json(geojson).then((data) => {
let svg = geoviz.create({ projection: "EqualEarth" });
svg.outline({ fill: "#267A8A" });
svg.graticule({ stroke: "white", strokeWidth: 0.4 });
svg.path({
data: data,
fill: "#F8D993",
stroke: "#ada9a6",
strokeWidth: 0.5,
tip: "$NAMEen",
});
svg.header({
fontSize: 30,
text: "A Simple World Map",
fill: "#267A8A",
fontWeight: "bold",
fontFamily: "Tangerine",
});
document.body.appendChild(svg.render());
});
</script>
Loading

0 comments on commit 9fed8bb

Please sign in to comment.