Commit 65574642 authored by Dorian Goepp's avatar Dorian Goepp
Browse files

make intended valence plot dashed (and alter its legend)

parent 33ceab30
......@@ -21,7 +21,7 @@ export function Separators(props) {
export function Backgrounds(props) {
let elements = [];
const overflow = props.yLayout.domain.padding/2;
const colours = ["none", "#ebebec"]; // "#f9f9f9", "#f5f5f6" -> background colour, "#edecec" -> latest value
const colours = ["none", "#ebebec"]
const colour = d3.scaleOrdinal()
.domain([0, colours.length-1])
.range(colours);
......@@ -199,12 +199,10 @@ export function Plots(props) {
cx={props.xScale(point.x)} cy={props.yScale(point.y)} r="4" />
});
const lineClass = "line " + name;
// The whole curve (line and markers)
return (
<g key={"plot" + name}>
<path className={lineClass} d={line(data)} stroke={colour} />
<path className={"line " + name} d={line(data)} stroke={colour} />
{markers}
</g>);
});
......@@ -221,16 +219,26 @@ export function Legend(props) {
const names = Object.keys(props.data);
const yScale = index => props.yOffset + index * em * 1.2;
const line = d3.line()
.x(d => props.xOffset*d.x)
.y(d => yScale(d.y*2 + 1))
.curve(d3.curveLinear); // don't apply smoothing to the line
return (
<g transform={"translate(0," + props.yOffset + ")"}>
{names.map((name, index) => (
<text key={"legend" + name} x={props.xOffset} y={yScale(index)}
textAnchor="end" dominantBaseline="middle"
{names.map((name, index) => {
const data = [{x: 0, y: index}, {x: 1, y: index}];
return [
<text key={"legend" + name} x={0} y={yScale(index*2)}
textAnchor="start" dominantBaseline="middle"
className="interaction-trace legend" style={{ fill: props.colour(name)}}>
{name}
</text>
))}
</text>,
<path key={"line" + name} className={"line " + name}
d={line(data)} stroke={props.colour(name)} />
]})}
</g>
);
}
\ No newline at end of file
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment