gridviz.js: logo prototyping! 😎 / Joe Davies

Joe Davies

Data Visualization & GIS at Eurostat. Exploring new ways of making maps.

Workspace

Public

Edited

Nov 9, 2023

Fork of bertin.js: official logo 😎

•

1 fork

6 stars

Type JavaScript, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.

width = Math.sqrt(3) * size

textures = require("textures")

getlogo = (size, lastest = true) => {

const height = size * 2;

const width = Math.sqrt(3) * size;

const hexagon = hex(size);

const col1 = backgroundColor;

const col2 = fontColor;

const colborder = borderColor;

const mapcol = col1;

const svg = d3

.create("svg")

.attr("width", width)

.attr("viewBox", [0, 0, width, height])

.style("background-color", "none");

let defs = svg.append("defs");

// hatching

const spacing = size / 40;

const pattern = defs

.append("pattern")

.attr("id", "hatch")

.attr("patternUnits", "userSpaceOnUse")

.attr("width", spacing)

.attr("height", spacing)

.attr("patternTransform", "scale(2) rotate(0)");

// white lines

// pattern

// .append("line")

// .attr("x1", 0)

// .attr("y1", 0)

// .attr("x2", 0)

// .attr("y1", spacing)

// .attr("stroke", col2)

// .attr("stroke-linejoin", "butt")

// .attr("stroke-width", size / 150)

// .attr("stroke-opacity", 0.25);

//border

svg

.append("path")

.attr("d", (d) => d3.line().curve(d3.curveLinearClosed)(hexagon))

.attr("stroke", "none")

.attr("fill", colborder);

//background

svg

.append("path")

.attr("d", (d) => d3.line().curve(d3.curveLinearClosed)(hexagon))

.attr("stroke", "none")

.attr("fill", backgroundColor)

.attr(

"transform",

`translate(${width / 2}, ${height / 2}) scale(0.95) translate(${

-width / 2

}, ${-height / 2}) `

);

// halo line

if (haloLine) {

svg

.append("path")

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

d3.line().curve(d3.curveCardinalClosed.tension(0.2))(hexagon)

)

.attr("stroke", haloColor)

.attr("fill", "none")

.attr("stroke-width", size / 50)

.attr(

"transform",

`translate(${width / 2}, ${height / 2}) scale(0.65) translate(${

-width / 2

}, ${-height / 2}) `

);

}

// dashed line

if (dashedLine) {

svg

.append("path")

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

d3.line().curve(d3.curveCardinalClosed.tension(0.5))(hexagon)

)

.attr("stroke", gridColor)

.attr("fill", "none")

.attr("stroke-width", size / 200)

.attr("stroke-dasharray", size / 40)

.attr(

"transform",

`translate(${width / 2}, ${height / 2}) scale(0.82) translate(${

-width / 2

}, ${-height / 2}) `

);

}

svg

.append("path")

.attr("d", (d) => d3.line().curve(d3.curveLinearClosed)(hexagon))

.attr("stroke", "none")

.attr("fill", "url('#hatch')")

.attr(

"transform",

`translate(${width / 2}, ${height / 2}) scale(0.95) translate(${

-width / 2

}, ${-height / 2}) `

);

if (backgroundType == "globe") {

// Map

let projection = proj;

const sphere = { type: "Sphere" };

const [[x0, y0], [x1, y1]] = d3

.geoPath(projection.fitWidth(height, sphere))

.bounds(sphere);

const dy = Math.ceil(y1 - y0),

l = Math.min(Math.ceil(x1 - x0), dy);

projection

.scale((0.5 * (projection.scale() * (l - 1))) / l)

.precision(0.2)

.translate([width / 2, height / 2]);

const path = geoCurvePath(d3.curveBasisClosed, projection);

svg

.append("g")

.append("path")

.datum(sphere)

.attr("fill", globeColor)

.attr("stroke", gridColor)

.attr("d", path);

svg

.append("clipPath")

.attr("id", "sphere")

.append("path")

.datum({ type: "Sphere" })

.attr("d", path);

svg

.append("g")

.append("path")

.datum(d3.geoGraticule().step([graticuleStep, graticuleStep]))

.attr("d", d3.geoPath(projection))

.style("fill", "none")

.style("stroke", gridColor)

.style("stroke-width", size / 300)

.style("stroke-dasharray", [size / 50, size / 120]);

const worldtopo = topojson.topology({ world: world });

let w = topojson.presimplify(worldtopo);

let min_weight = topojson.quantile(w, 0.1);

w = topojson.simplify(w, min_weight);

const land_simplified = topojson.merge(w, w.objects.world.geometries);

// continents

// svg

// .append("path")

// .datum(land_simplified)

// .attr("stroke", "none")

// .attr("fill", mapcol)

// .attr("d", path)

// .attr("clip-path", "url(#sphere");

} else {

// grid using textures.js

let grid = textures

.lines()

.orientation("vertical", "horizontal")

.thicker()

.stroke(borderColor);

let radius = 150;

svg.call(grid);

// circle background

// svg

// .append("circle")

// .attr("cx", width / 2)

// .attr("cy", height / 2)

// .attr("r", radius)

// .style("fill", grid.url());

//rect background

svg

.append("rect")

.attr("x", 20)

.attr("y", height / 3.5)

.attr("width", width - 40)

.attr("height", height / 2.3)

.style("fill", grid.url());

// CROSS SECTION

svg

.append("rect")

.attr("width", width - 40)

.attr("fill", fontShadowColor)

.attr("height", 80)

.attr("x", 20)

.attr("y", height / 2.5);

}

// Texts

//shadow

svg

.append("text")

.attr("x", fontX)

.attr("y", fontY)

.attr("text-anchor", "middle")

.attr("dominant-baseline", "middle")

.style("font-family", "Roboto")

.attr("font-size", `${fontSize1}px`)

.attr("textLength", titleWidth1)

.attr("font-weight", "bold")

.attr("fill", fontShadowColor)

.attr("stroke", fontShadowColor)

.attr("strokeLinejoin", "round")

.attr("stroke-width", `${fontShadow}px`)

.text("gridviz");

svg

.append("text")

.attr("x", fontX)

.attr("y", fontY)

.attr("text-anchor", "middle")

.attr("dominant-baseline", "middle")

.style("font-family", "Roboto")

.attr("font-size", `${fontSize1}px`)

.attr("textLength", titleWidth1)

.attr("font-weight", "bold")

.attr("fill", fontColor)

.text("gridviz");

// package version

if (lastest && showVersion) {

//shadow

// svg

// .append("text")

// .attr("x", versionX)

// .attr("y", versionY)

// .attr("text-anchor", "middle")

// .attr("dominant-baseline", "middle")

// .style("font-family", "Roboto")

// .attr("font-size", `${height / 27}px`)

// .attr("font-weight", "bold")

// .attr("fill", fontShadowColor)

// .attr("stroke", fontShadowColor)

// .attr("strokeLinejoin", "round")

// .attr("stroke-width", `${fontShadow}px`)

// .attr("fill", versionColor)

// .text(lastpatch);

svg

.append("text")

.attr("x", versionX)

.attr("y", versionY)

.attr("text-anchor", "middle")

.attr("dominant-baseline", "middle")

.style("font-family", "Roboto")

.attr("font-size", `${height / 27}px`)

.attr("font-weight", "bold")

.attr("fill", versionColor)

.text(lastpatch);

}

return svg.node();

}

lastpatch = d3

.json(

"https://raw.githubusercontent.com/eurostat/gridviz/master/package.json"

)

.then((d) => d.version)

Purpose-built for displays of data

Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.

Learn more