First steps with Observable / Qi FANG

Qi FANG

front-end

Workspace

Public

Edited

Jul 10, 2023

1 fork

viewof dummyInput = Inputs.range([0, 100], {label: "Amount", step: 1})

xCoord = d3.scaleUtc()

.domain([new Date("2023-01-01"), new Date("2023-12-31")])

.range([40, 500]);

xCoord(new Date("2023-03-01"))

{

const arc = d3.arc()

.innerRadius(0)

.outerRadius(100)

.startAngle(0)

.endAngle(Math.PI / 2);

const svg = d3.create('svg');

return svg.node()

}

{

const ard = d3.arc()

.innerRadius(80)

.outerRadius(100)

.startAngle(-Math.PI/2)

.endAngle(Math.PI / 2);

const svg = d3.create('svg').attr('width', 220).attr('height', 220);

svg.append('path').attr('d', ard).style('fill', 'green').attr("transform", `translate(50, 100)`);

return svg.node()

}

config = {

return {

startAngle: -135,

endAngle: 135,

radius: 88,

bgCircleStroke: 8,

valueCircleStroke: 16,

width: 200,

height: 200,

margin: 12,

min: 0,

max: 200,

centerRadius: 8

}

function degreeToRadian(angle) {

return angle * Math.PI / 180;

}

valueScale = d3.scaleLinear([config.min, config.max], [degreeToRadian(config.startAngle), degreeToRadian(config.endAngle)])

valueScale(0) * 180 / Math.PI

viewof realValue = Inputs.range([0, 200], {label: "实时值", step: 5, value: 80})

// {

// pointer.data([40])

// triggerPointerTransition(190, 300)

// }

{

const svg = html`<svg></svg>`

const svgSelection = d3.select(svg).attr('width', config.width).attr('height', config.height);

const bgCircle = d3.arc()

.startAngle(config.startAngle * Math.PI / 180)

.endAngle(config.endAngle * Math.PI/180)

.innerRadius(config.radius - config.bgCircleStroke / 2)

.outerRadius(config.radius + config.bgCircleStroke / 2)

.cornerRadius(config.bgCircleStroke);

svgSelection.append('path').attr('d', bgCircle).style("fill", "#DBE8E4").attr('transform', `translate(100, 100)`);

const valueCirleGroup = svgSelection.append('g');

const valueCircle = d3.arc()

.startAngle(valueScale(0))

.endAngle(valueScale(realValue))

.innerRadius(config.radius - config.valueCircleStroke / 2)

.outerRadius(config.radius + config.valueCircleStroke / 2)

.cornerRadius(config.valueCircleStroke);

const circleGradient = appendGradient(svg);

valueCirleGroup

.append('path')

.attr('d', valueCircle)

// .attr('filter', "url(#filterRing)")

.style('filter', 'drop-shadow( 3px 3px 2px rgba(0, 0, 0, .2))')

.attr('fill', `url(#${circleGradient.attr('id')})`)

.attr('stroke', "none")

.attr('transform', `translate(100, 100)`)

// const centerPoint = d3.arc()

// .startAngle(0)

// .endAngle(2*Math.PI)

// .innerRadius(0)

// .outerRadius(config.centerRadius)

const centerPoint = svgSelection.append('circle');

centerPoint

.attr('id', 'center-point')

.attr('cx', config.radius + config.margin)

.attr('cy', config.radius + config.margin)

.attr('r', config.centerRadius)

// .attr('filter', "url(#filterCenter)")

.style('filter', 'drop-shadow( 3px 3px 2px rgba(0, 0, 0, 0.2))')

.attr('fill', '#333');

// const degree = valueScale(realValue) * 180/ Math.PI;

// const degree = - 135

mutable pointer = svgSelection

.insert('g', "#center-point")

.selectAll('path')

.data([realValue])

.join("path")

.attr('d', pointerString)

.attr('fill', '#ff4242')

.attr('transform', d => `rotate(${valueScale(d) * 180/ Math.PI}, 100, 100) translate(61, 40)`)

const innerRadius = config.radius - config.valueCircleStroke / 2 - 2

const TICK_LEN =4 ;

const BIG_TICK_LEN = 10;

svgSelection.append('g')

.attr('id', 'tick-group')

.attr('transform', `translate(100, 100)`)

.selectAll()

.data(ticks)

.join('line')

.attr("x1", angle => innerRadius * Math.cos(angle))

.attr("y1", angle => innerRadius * Math.sin(angle))

.attr("x2", angle => (innerRadius - TICK_LEN) * Math.cos(angle))

.attr("y2", angle => (innerRadius - TICK_LEN) * Math.sin(angle))

.attr('stroke', '#00C1B2')

.attr('stroke-width', 1)

svgSelection.append('g')

.attr('id', 'big-tick-group')

.attr('transform', `translate(100, 100)`)

.selectAll()

.data(bigTicks)

.join('line')

.attr("x1", angle => (innerRadius) * Math.cos(angle))

.attr("y1", angle => (innerRadius) * Math.sin(angle))

.attr("x2", angle => (innerRadius - 10) * Math.cos(angle))

.attr("y2", angle => (innerRadius - 10) * Math.sin(angle))

.attr('stroke-width', 2)

.attr('stroke', '#00C1B2')

const filterDefsGroup = svgSelection.append('defs')

filterDefsGroup.node().appendChild(filterRing)

filterDefsGroup.node().appendChild(filterCenter)

return svg

}

function appendGradient(svg) {

const id = 'gradient-test'

const gradient = d3.select(svg).append('linearGradient'); // this is a selection

gradient.attr('id', id)

.attr("gradientUnits", "userSpaceOnUse")

.attr('x1', config.margin)

.attr('y1', config.height - config.margin)

// .attr('x2', config.margin + 2 * config.radius)

.attr('x2', config.width * 1.5)

.attr('y2', config.margin)

.selectAll('stop')

.data([0,1])

.join('stop')

.attr('offset', d => d)

.attr('stop-color', d => d === 0? '#00C1B2' : '#6DFAB7')

return gradient

}

pointerString = "M39.0003 77.1836L33.3791 61.7256L39.0004 0.816238L44.6217 61.7256Z"

d3.ticks(0,1,10)

// ticks = d3.ticks(config.min, config.max, 60).map(valueScale).map(d => d -Math.PI/2

ticks= getTicks(config.min, config.max, 60).map(valueScale).map(d => d -Math.PI/2)

// bigTicks = d3.ticks(config.min, config.max, 6).map(valueScale).map(d => d -Math.PI/2)

bigTicks = getTicks(config.min, config.max, 6).map(valueScale).map(d => d -Math.PI/2)

function getTicks(start, end, count) {

const step = (end- start) / count;

let arr = []

for ( let i=0; i<=count; i++) {

arr.push(start + i * step)

}

return arr;

}

function createCreateRotateTween(target) {

const nextAngle = valueScale(target) * 180/ Math.PI

console.log(target)

return function createRotateTween(d) {

console.log('initial data: ', d);

const currentAngle = valueScale(d) * 180/ Math.PI

const interpolate = d3.interpolate(currentAngle, nextAngle);

return function(t) {

const val = `rotate(${interpolate(t)}, 100, 100) translate(61, 40)`

console.log(val, "currenAngle", currentAngle, "nextAngle", nextAngle)

return val

}

mutable pointer = null;

function triggerPointerTransition(target, duration = 700) {

pointer.transition().duration(duration).ease(d3.easeCubicIn)

.attrTween('transform', createCreateRotateTween(target))

}

filterCenter = svg`<filter id="filterCenter" width="24.516" height="24.516" x="45.742" y="44.234" color-interpolation-filters="sRGB"

filterUnits="userSpaceOnUse">

</filter>`

filterRing = svg`<filter id="filterRing" width="200" height="200" x="0" y="0" color-interpolation-filters="sRGB"

filterUnits="userSpaceOnUse">

</filter>`

filterShalow = svg`<filter id="shadow" x="0" y="0" width="200%" height="200%">

</filter>`

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