import {chart, config, globals} from "@maxwalts/interactive-chart"
{
// One option for config is to clear the default config with `.length = 0` or `.pop()` and then push entire
// objects. This approach only works for config options that are iterable (i.e. `lines` is a list of line objects)
config.lines.length = 0;
config.lines.push(
{
label: 'S',
id: '2',
labelSize: "14px",
point1: [12, 10.5],
point2: [14, 11.0],
color: globals.colors.supplyRed,
width: 4,
moveX: true,
moveY: true,
drawOriginLine: true
})
config.lines.push(
{
label: 'D',
id: '1', // new attribute ID. This must be a string without spaces or other special characters.
labelSize: "14px",
point1: [10, 10],
point2: [1, 1],
color: globals.colors.demandBlue,
width: 4,
moveX: true,
moveY: false,
drawOriginLine: true
},
)
/* one option for config is drilling down to the target attribute and editing it directly */
d3.select('#givenLine_1').style('stroke-width', 8)
config.lines[1].width = 8; // this changes the second line we just defined.
config.header.title = "Supply and Demand";
config.intersectionPoints.pop()
config.intersectionPoints.push(
{
label: "Equilibrium",
labels: ["D", "S"],
isPrimary: true,
drawHorizontalDropline: true,
drawVerticalDropline: true,
verticalLabelOffset: [0, 0],
verticalLabelColor: 'black',
labelFormat: ".0f", // format according to 'd3-format' spec https://github.com/d3/d3-format
horizontalLabelOffset: [0, 0],
horizontalLabelColor: 'black',
drawVerticalMeasureLine: true,
drawHorizontalMeasureLine: false
})
// Example of changing Axis config
config.xAxisScale.title.html = `<p class="axisTitle"> <b> Quantity </b></p><p>(millions of bottles per week)</p>`;
config.xAxisScale.domain = [0,20];
/// config.yAxisScale.domain = [0,10];
config.xAxisScale.tickValues = [0, 10, 20];
config.xAxisScale.tickFormat = [0, 10, 20];
config.yAxisScale.tickValues =[0, 10, 20];
config.yAxisScale.tickFormat = [1, 10, 20];
}
config.xAxisScale
chart
/*--- other important notes ---*/
{
// console log an element to see all its attribites
console.log("lines", config.lines);
// you can add your own attributes.
// look at the entire DOM tree
console.log(chart)
// you can also select elements and their attributes with d3.select
console.log(d3.select("#givenLine_2").attr('y1')) // selecting an id
const title = d3.select('text.headerTitle') // selecting with a element & class name
// title.style('color', 'yellow')
}
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.
