The L*a*b* color space with a range of ±100 for a* and b* values and a value of 60 for Lightness.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import * as React from "react"; | |
import { ChartRenderer } from "./ChartRenderer"; | |
export const Chart = () => { | |
const [highlight, updateHighlight] = React.useState("A"); | |
const spec = { | |
$schema: "https://vega.github.io/schema/vega/v5.json", | |
width: 400, | |
height: 200, |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import * as React from "react"; | |
import * as vega from "vega"; | |
// Note the added prop "handleClick" | |
export const Chart = ({ spec, handleClick }) => { | |
const chartContainer = React.useRef(null); | |
React.useEffect( | |
() => { | |
const createView = async () => { | |
try { |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import * as React from "react"; | |
import * as vega from "vega"; | |
export const Chart = ({ spec, handleClick }) => { | |
const chartContainer = React.useRef(); | |
React.useEffect(() => { | |
const createView = async () => { | |
try { | |
const view = new vega.View(vega.parse(spec), { | |
logLevel: vega.Warn, |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import * as React from "react"; | |
import { ChartRenderer } from "./ChartRenderer"; | |
export const Bars = () => { | |
// These specs were copy/pasted from the Bar Chart example | |
// from the Vega Documentation | |
// https://vega.github.io/vega/examples/bar-chart/ | |
const spec = { | |
$schema: "https://vega.github.io/schema/vega/v5.json", | |
width: 400, |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import * as React from "react"; | |
// Don't forget to import the module vega! | |
import * as vega from "vega"; | |
// Note the new props "specs" | |
export const ChartRenderer = ({ spec }) => { | |
const chartContainer = React.useRef(null); | |
// This is the hook that will be called after |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
license: mit |
This is a horizontal stacked bar chart using d3.layout.stack() function and data about the republican primary election. This chart is part of a dataviz project about the US 2016 primary election.
This is a scatterplot using two ordinal scales and the RangePoints() function, with data showing the country of origin of films in competition at the Cannes film festival since 2006.
Choropleth map using two diverging continuous color scale. The colors are interpolated using the L*a*b color space. The map shows the outcome of San Francisco ballot proposition J (Nov. 2015).
NewerOlder