Published
Edited
Apr 29, 2022
1 star
{
var svg = d3.select(DOM.svg(width, height))
.style("background", "#FCF9F4");
yield svg.node();
var sc = d3.scaleLinear().domain( [0,10] ).range( [0,200] );
// default
svg.append("g")
.attr("transform", "translate(50,30)")
.call(d3.axisBottom(sc));
// formatted, some hidden labels
svg.append("g")
.attr( "transform", "translate( 50, 80 )" )
.call( d3.axisBottom(sc).tickFormat( d3.format( ".1f" ) ) )
.selectAll( "text" )
.filter( (d,i) => i % 2 != 0 ).attr( "visibility", "hidden" );
// minor and major tick marks
svg.append("g")
.attr( "transform", "translate(50, 130)" )
.call( d3.axisBottom(sc).tickSize(3).tickFormat( () => "" ) );
svg.append("g")
.attr( "transform", "translate(50, 130)" )
.call( d3.axisBottom(sc).ticks(2) )
.append( "text" ).text( "Toes" )
.attr( "x", sc(5) ).attr( "y" , 35 )
.attr( "font-size", 12 ).attr( "fill", "black" );
// custom
var g = svg.append("g")
.attr("transform", "translate(50, 190)")
.call( d3.axisBottom(sc).tickPadding( 5 ) );
// hide axis line
g.select( ".domain" )
.attr( "visibility", "hidden" );
// color ticks and labels
g.selectAll( ".tick" ).select("line")
.attr("stroke", "#E1D5C0")
.attr("stroke-width", 1.5);
g.selectAll("text")
.attr("font-size", 16)
.attr("fill", "#E1D5C0");
}
cost = d3.text("https://raw.githubusercontent.com/janert/d3-for-the-impatient/master/examples/cost.csv").then( res => {
return d3.csvParseRows( res, d => [ +d[0], +d[1] ] );
})
import {slider} from "@jashkenas/inputs"
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.
