How to use the d3-format.format function in d3-format

To help you get started, we’ve selected a few d3-format examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github rrag / react-stockcharts / docs / lib / charts / LineAndScatterChart.jsx View on Github external
d.AAPLClose}
						stroke="#ff7f0e"
						strokeDasharray="Dot" />
					 d.AAPLClose}
						marker={SquareMarker}
						markerProps={{ width: 6, stroke: "#ff7f0e", fill: "#ff7f0e" }} />
					 d.GEClose}
						stroke="#2ca02c" />
					 d.GEClose}
						marker={TriangleMarker}
						markerProps={{ width: 8, stroke: "#2ca02c", fill: "#2ca02c" }} />
github interpretable-ml / iml / src / javascript / visualizers / simple-list / simple-list.js View on Github external
draw(explanation) {

    let scale = scaleLinear().domain([0,max(explanation.features.map(x=>Math.abs(x.effect)))]).range([0,100]);
    window.scale = scale;
    console.log("sdf", [0,extent(explanation.features.map(x=>x.effect))[1]])
    let fmt = format('.2');
    let incomingItems = select(this.container).selectAll('.element').data(reverse(sortBy(explanation.features, 'effect')))
      .enter().append('div');
    incomingItems.append('div').classed('simple-list-label', true).text(x => `${x.name} (${fmt(x.effect)})`)
    incomingItems.append('div')
      .classed('simple-list-padding', true)
      .style('width', x=> (x.effect > 0 ? 100 : 100 + scale(x.effect))+"px");
    incomingItems.append('div')
      .classed('simple-list-value', true)
      .style('width', x=>{ let v = Math.abs(scale(x.effect)); console.log(v); return v+"px";})
      .style('background', x=> x.effect > 0 ? '#00a' : '#a00');
  }
}
github CartoDB / airship / packages / components / src / components / as-gauge-widget / as-gauge-widget.tsx View on Github external
private getFormattedValue() {
    return (this.format && this.value !== 0) ? d3Format(this.format)(this.value) : this.value;
  }
github ProofSuite / amp-client / src / components / OHLCV / Chart.js View on Github external
id={0}
              height={chartHeight}
              yExtents={[d => [d.high, d.low], ema20.accessor(), ema50.accessor()]}
              padding={{ top: 10, bottom: 20 }}
            >
              
              
              
              

               d.close >= d.open ? theme.GREEN3 : theme.RED2 }
                opacity={1}
                stroke={d => d.close >= d.open ? theme.GREEN3 : theme.RED2 }
                widthRatio={0.8}
                wickStroke={d => d.close >= d.open ? theme.GREEN3 : theme.RED2 }
              />

              {line.active && (
                <div>
                  
                  
                  
                  
                </div>
github rrag / react-stockcharts / docs / lib / charts / CandleStickChartWithMA.js View on Github external
/&gt;
				
				 d.volume, smaVolume50.accessor()]}
					height={150} origin={(w, h) =&gt; [0, h - 150]}
				&gt;
					

					
					

					 d.volume} fill={d =&gt; d.close &gt; d.open ? "#6BA583" : "red"} /&gt;
					
					
					 d.volume} fill="#9B0A47" /&gt;
				
				
			
		);
	}
}
github sourcecred / sourcecred / src / explorer / TimelineExplorer.js View on Github external
}));
            }}
          &gt;
            {showWeightConfig
              ? "Hide weight configuration"
              : "Show weight configuration"}
          
          {analyzeButton}
        
        {showWeightConfig &amp;&amp; (
          <div style="{{marginTop:">
            <span>Upload/Download weights:</span>
            {weightFileManager}
            <span>α</span>
            {alphaSlider}
            <span>{format(".2f")(this.state.alpha)}</span>
            {weightConfig}
          </div>
        )}
      
    );
  }
github sghall / resonance / docs / src / routes / reduxExamples / webpackSunburst / components / index.js View on Github external
import { easeQuad } from 'd3-ease';
import { format } from 'd3-format';
import { connect } from 'react-redux';
import Slider from 'material-ui/Slider';
import { RadioButton, RadioButtonGroup } from 'material-ui/RadioButton';
import Paper from 'material-ui/Paper';
import Surface from 'docs/src/components/Surface';
import MarkdownElement from 'docs/src/components/MarkdownElement';
import formatBytes from 'docs/src/utils/formatBytes';
import Sunburst from './Sunburst';
import { getNodes, getScales, updateScales, changeDataSet } from '../module';
import { VIEW, TRBL, DIMS } from '../module/constants';
import { x, y, getScaleInterpolators } from '../module/scales';
import description from '../description.md';

const percentFormat = format('.2%');

export class Example extends Component {
  state = {
    duration: 750,
    activeSize: this.props.size,
    activePath: 'Click on an arc...',
  }

  componentWillMount() {
    const { xScale, yScale } = this.props;

    x.range(xScale.range()).domain(xScale.domain());
    y.range(yScale.range()).domain(yScale.domain());
  }

  componentWillReceiveProps(next) {
github hashicorp / nomad / ui / app / components / line-chart.js View on Github external
xFormat(timeseries) {
    return timeseries ? d3TimeFormat.timeFormat('%b') : d3Format.format(',');
  },