11import React from 'react' ;
22import PropTypes from 'prop-types'
3- import { Runtime , Inspector } from '@observablehq/runtime' ;
3+ import { Runtime } from '@observablehq/runtime' ;
4+ import { Inspector } from "@observablehq/inspector" ;
5+ import { Library } from "@observablehq/stdlib" ;
6+
7+ const library = new Library ( ) ;
48
59function Chart ( props ) {
610 const [ chartRef , setChartRef ] = React . useState ( ) ;
@@ -16,21 +20,20 @@ function Chart(props) {
1620 main . variable ( ) . define ( 'translateXtoY' , function ( ) {
1721 return x => 50 * Math . sin ( ( Math . PI / 50 ) * x - ( 1 / 2 ) * Math . PI ) + 50 ;
1822 } ) ;
19- main . variable ( ) . define ( 'd3' , [ 'require' ] , function ( require ) {
20- return require ( 'https://d3js.org/d3.v5.min.js' ) ;
23+ main . variable ( ) . define ( 'd3' , [ ] , function ( ) {
24+ return Library . require ( 'https://d3js.org/d3.v5.min.js' ) ;
2125 } ) ;
2226
2327 // Define the HillChart class
24- main . variable ( ) . define ( 'HillChart' , [ 'd3' , 'DOM' , ' translateXtoY'] , function ( d3 , DOM , translateXtoY ) {
28+ main . variable ( ) . define ( 'HillChart' , [ 'd3' , 'translateXtoY' ] , function ( d3 , translateXtoY ) {
2529 return class HillChart {
2630 constructor ( chart_height , chart_width , items ) {
2731 this . chart_height = chart_height ;
2832 this . chart_width = chart_width ;
2933 this . items = items ;
30-
31- this . svg = d3 . select ( DOM . svg ( this . chart_width , this . chart_height ) ) . attr ( 'viewBox' , `-20 -20 ${ this . chart_width + 80 } ${ this . chart_height + 20 } ` ) ;
34+
35+ this . svg = d3 . select ( library . DOM . svg ( this . chart_width , this . chart_height ) ) . attr ( 'viewBox' , `-20 -20 ${ this . chart_width + 80 } ${ this . chart_height + 20 } ` ) ;
3236 }
33-
3437
3538 render ( ) {
3639 const xScale = d3
0 commit comments