Public
Edited
Oct 7, 2023
1 fork
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
c = import("https://esm.run/convex-dev/react")
Insert cell
origin = "https://dazzling-opossum-637.convex.cloud"
Insert cell
client = new c.ConvexReactClient(origin)
Insert cell
queryGenerator = (client, query, ...args) => {
const watch = client.watchQuery(query, ...args);
return Generators.observe((notify) =>
watch.onUpdate(() => notify(watch.localQueryResult()))
);
}
Insert cell
//clientMessages = queryGenerator(client, "messages:list")
Insert cell
sendMessage = client.mutation("messages:send")
Insert cell
sendMessage({author:'bob',body:'p'})
Insert cell
clientPoints = queryGenerator(client, "messages:getPoints", Object.assign({}, {}))
Insert cell
clientMessages = queryGenerator(client, "messages:get", Object.assign({}, {}))
Insert cell
Insert cell
c2 = await import("https://esm.run/convex/browser")
Insert cell
httpClient = new c2.ConvexHttpClient(origin)
Insert cell
Insert cell
clientMessages_http = httpClient.query("messages:get")
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
chart = {
d3.selectAll("#coup_droit").on("click", function () {
console.log('coup droit')
});

d3.selectAll("#revers").on("click", function () {
console.log('revers')
console.log(d3.selectAll("#joueurA").property("value"))
});
d3.selectAll("#point_joueurA").on("click", function () {
console.log({author:d3.selectAll("#joueurA").property("value"),body:"point"})
sendMessage({author:d3.selectAll("#joueurA").property("value"),body:"point"})
});
d3.selectAll("#point_joueurB").on("click", function () {
console.log({author:d3.selectAll("#joueurB").property("value"),body:"point"})
sendMessage({author:d3.selectAll("#joueurB").property("value"),body:"point"})
});
d3.selectAll("#service_joueurA").on("click", function () {
console.log({author:d3.selectAll("#joueurA").property("value"),body:"service"})
sendMessage({author:d3.selectAll("#joueurA").property("value"),body:"service"})
});
d3.selectAll("#service_joueurB").on("click", function () {
console.log({author:d3.selectAll("#joueurB").property("value"),body:"service"})
sendMessage({author:d3.selectAll("#joueurB").property("value"),body:"service"})
});

d3.selectAll("#coup_droit_joueurA").on("click", function () {
console.log({author:d3.selectAll("#joueurA").property("value"),body:"coup_droit"})
sendMessage({author:d3.selectAll("#joueurA").property("value"),body:"coup_droit"})
});
d3.selectAll("#coup_droit_joueurB").on("click", function () {
console.log({author:d3.selectAll("#joueurB").property("value"),body:"coup_droit"})
sendMessage({author:d3.selectAll("#joueurB").property("value"),body:"coup_droit"})
});
d3.selectAll("#revers_joueurA").on("click", function () {
console.log({author:d3.selectAll("#joueurA").property("value"),body:"revers"})
sendMessage({author:d3.selectAll("#joueurA").property("value"),body:"revers"})
});
d3.selectAll("#revers_joueurB").on("click", function () {
console.log({author:d3.selectAll("#joueurB").property("value"),body:"revers"})
sendMessage({author:d3.selectAll("#joueurB").property("value"),body:"revers"})
});

d3.selectAll("#D1_joueurA").on("click", function () {
console.log({author:d3.selectAll("#joueurA").property("value"),body:"D1"})
sendMessage({author:d3.selectAll("#joueurA").property("value"),body:"D1"})
});
d3.selectAll("#M1_joueurA").on("click", function () {
console.log({author:d3.selectAll("#joueurA").property("value"),body:"M1"})
sendMessage({author:d3.selectAll("#joueurA").property("value"),body:"M1"})
});
d3.selectAll("#G1_joueurA").on("click", function () {
console.log({author:d3.selectAll("#joueurA").property("value"),body:"G1"})
sendMessage({author:d3.selectAll("#joueurA").property("value"),body:"G1"})
});
d3.selectAll("#D2_joueurA").on("click", function () {
console.log({author:d3.selectAll("#joueurA").property("value"),body:"D2"})
sendMessage({author:d3.selectAll("#joueurA").property("value"),body:"D2"})
});
d3.selectAll("#M2_joueurA").on("click", function () {
console.log({author:d3.selectAll("#joueurA").property("value"),body:"M2"})
sendMessage({author:d3.selectAll("#joueurA").property("value"),body:"M2"})
});
d3.selectAll("#G2_joueurA").on("click", function () {
console.log({author:d3.selectAll("#joueurA").property("value"),body:"G2"})
sendMessage({author:d3.selectAll("#joueurA").property("value"),body:"G2"})
});
d3.selectAll("#D3_joueurA").on("click", function () {
console.log({author:d3.selectAll("#joueurA").property("value"),body:"D3"})
sendMessage({author:d3.selectAll("#joueurA").property("value"),body:"D3"})
});
d3.selectAll("#M3_joueurA").on("click", function () {
console.log({author:d3.selectAll("#joueurA").property("value"),body:"M3"})
sendMessage({author:d3.selectAll("#joueurA").property("value"),body:"M3"})
});
d3.selectAll("#G3_joueurA").on("click", function () {
console.log({author:d3.selectAll("#joueurA").property("value"),body:"G3"})
sendMessage({author:d3.selectAll("#joueurA").property("value"),body:"G3"})
});
d3.selectAll("#D1_joueurB").on("click", function () {
console.log({author:d3.selectAll("#joueurB").property("value"),body:"D1"})
sendMessage({author:d3.selectAll("#joueurB").property("value"),body:"D1"})
});
d3.selectAll("#M1_joueurB").on("click", function () {
console.log({author:d3.selectAll("#joueurB").property("value"),body:"M1"})
sendMessage({author:d3.selectAll("#joueurB").property("value"),body:"M1"})
});
d3.selectAll("#G1_joueurB").on("click", function () {
console.log({author:d3.selectAll("#joueurB").property("value"),body:"G1"})
sendMessage({author:d3.selectAll("#joueurB").property("value"),body:"G1"})
});
d3.selectAll("#D2_joueurB").on("click", function () {
console.log({author:d3.selectAll("#joueurB").property("value"),body:"D2"})
sendMessage({author:d3.selectAll("#joueurB").property("value"),body:"D2"})
});
d3.selectAll("#M2_joueurB").on("click", function () {
console.log({author:d3.selectAll("#joueurB").property("value"),body:"M2"})
sendMessage({author:d3.selectAll("#joueurB").property("value"),body:"M2"})
});
d3.selectAll("#G2_joueurB").on("click", function () {
console.log({author:d3.selectAll("#joueurB").property("value"),body:"G2"})
sendMessage({author:d3.selectAll("#joueurB").property("value"),body:"G2"})
});
d3.selectAll("#D3_joueurB").on("click", function () {
console.log({author:d3.selectAll("#joueurB").property("value"),body:"D3"})
sendMessage({author:d3.selectAll("#joueurB").property("value"),body:"D3"})
});
d3.selectAll("#M3_joueurB").on("click", function () {
console.log({author:d3.selectAll("#joueurB").property("value"),body:"M3"})
sendMessage({author:d3.selectAll("#joueurB").property("value"),body:"M3"})
});
d3.selectAll("#G3_joueurB").on("click", function () {
console.log({author:d3.selectAll("#joueurB").property("value"),body:"G3"})
sendMessage({author:d3.selectAll("#joueurB").property("value"),body:"G3"})
});

d3.selectAll("#filet_joueurA").on("click", function () {
console.log({author:d3.selectAll("#joueurA").property("value"),body:"filet"})
sendMessage({author:d3.selectAll("#joueurA").property("value"),body:"filet"})
});
d3.selectAll("#filet_joueurB").on("click", function () {
console.log({author:d3.selectAll("#joueurB").property("value"),body:"filet"})
sendMessage({author:d3.selectAll("#joueurB").property("value"),body:"filet"})
});
d3.selectAll("#dehors_joueurA").on("click", function () {
console.log({author:d3.selectAll("#joueurA").property("value"),body:"dehors"})
sendMessage({author:d3.selectAll("#joueurA").property("value"),body:"dehors"})
});
d3.selectAll("#dehors_joueurB").on("click", function () {
console.log({author:d3.selectAll("#joueurB").property("value"),body:"dehors"})
sendMessage({author:d3.selectAll("#joueurB").property("value"),body:"dehors"})
});

d3.selectAll("#point_joueurA2").on("click", function () {
console.log({author:d3.selectAll("#joueurA2").property("value"),body:"point"})
sendMessage({author:d3.selectAll("#joueurA2").property("value"),body:"point"})
});
d3.selectAll("#point_joueurB2").on("click", function () {
console.log({author:d3.selectAll("#joueurB2").property("value"),body:"point"})
sendMessage({author:d3.selectAll("#joueurB2").property("value"),body:"point"})
});
d3.selectAll("#service_joueurA2").on("click", function () {
console.log({author:d3.selectAll("#joueurA2").property("value"),body:"service"})
sendMessage({author:d3.selectAll("#joueurA2").property("value"),body:"service"})
});
d3.selectAll("#service_joueurB2").on("click", function () {
console.log({author:d3.selectAll("#joueurB2").property("value"),body:"service"})
sendMessage({author:d3.selectAll("#joueurB2").property("value"),body:"service"})
});

d3.selectAll("#coup_droit_joueurA2").on("click", function () {
console.log({author:d3.selectAll("#joueurA2").property("value"),body:"coup_droit"})
sendMessage({author:d3.selectAll("#joueurA2").property("value"),body:"coup_droit"})
});
d3.selectAll("#coup_droit_joueurB2").on("click", function () {
console.log({author:d3.selectAll("#joueurB2").property("value"),body:"coup_droit"})
sendMessage({author:d3.selectAll("#joueurB2").property("value"),body:"coup_droit"})
});
d3.selectAll("#revers_joueurA2").on("click", function () {
console.log({author:d3.selectAll("#joueurA2").property("value"),body:"revers"})
sendMessage({author:d3.selectAll("#joueurA2").property("value"),body:"revers"})
});
d3.selectAll("#revers_joueurB2").on("click", function () {
console.log({author:d3.selectAll("#joueurB2").property("value"),body:"revers"})
sendMessage({author:d3.selectAll("#joueurB2").property("value"),body:"revers"})
});

d3.selectAll("#D1_joueurA2").on("click", function () {
console.log({author:d3.selectAll("#joueurA2").property("value"),body:"D1"})
sendMessage({author:d3.selectAll("#joueurA2").property("value"),body:"D1"})
});
d3.selectAll("#M1_joueurA2").on("click", function () {
console.log({author:d3.selectAll("#joueurA2").property("value"),body:"M1"})
sendMessage({author:d3.selectAll("#joueurA2").property("value"),body:"M1"})
});
d3.selectAll("#G1_joueurA2").on("click", function () {
console.log({author:d3.selectAll("#joueurA2").property("value"),body:"G1"})
sendMessage({author:d3.selectAll("#joueurA2").property("value"),body:"G1"})
});
d3.selectAll("#D2_joueurA2").on("click", function () {
console.log({author:d3.selectAll("#joueurA2").property("value"),body:"D2"})
sendMessage({author:d3.selectAll("#joueurA2").property("value"),body:"D2"})
});
d3.selectAll("#M2_joueurA2").on("click", function () {
console.log({author:d3.selectAll("#joueurA2").property("value"),body:"M2"})
sendMessage({author:d3.selectAll("#joueurA2").property("value"),body:"M2"})
});
d3.selectAll("#G2_joueurA2").on("click", function () {
console.log({author:d3.selectAll("#joueurA2").property("value"),body:"G2"})
sendMessage({author:d3.selectAll("#joueurA2").property("value"),body:"G2"})
});
d3.selectAll("#D3_joueurA2").on("click", function () {
console.log({author:d3.selectAll("#joueurA2").property("value"),body:"D3"})
sendMessage({author:d3.selectAll("#joueurA2").property("value"),body:"D3"})
});
d3.selectAll("#M3_joueurA2").on("click", function () {
console.log({author:d3.selectAll("#joueurA2").property("value"),body:"M3"})
sendMessage({author:d3.selectAll("#joueurA2").property("value"),body:"M3"})
});
d3.selectAll("#G3_joueurA2").on("click", function () {
console.log({author:d3.selectAll("#joueurA2").property("value"),body:"G3"})
sendMessage({author:d3.selectAll("#joueurA2").property("value"),body:"G3"})
});
d3.selectAll("#D1_joueurB2").on("click", function () {
console.log({author:d3.selectAll("#joueurB2").property("value"),body:"D1"})
sendMessage({author:d3.selectAll("#joueurB2").property("value"),body:"D1"})
});
d3.selectAll("#M1_joueurB2").on("click", function () {
console.log({author:d3.selectAll("#joueurB2").property("value"),body:"M1"})
sendMessage({author:d3.selectAll("#joueurB2").property("value"),body:"M1"})
});
d3.selectAll("#G1_joueurB2").on("click", function () {
console.log({author:d3.selectAll("#joueurB2").property("value"),body:"G1"})
sendMessage({author:d3.selectAll("#joueurB2").property("value"),body:"G1"})
});
d3.selectAll("#D2_joueurB2").on("click", function () {
console.log({author:d3.selectAll("#joueurB2").property("value"),body:"D2"})
sendMessage({author:d3.selectAll("#joueurB2").property("value"),body:"D2"})
});
d3.selectAll("#M2_joueurB2").on("click", function () {
console.log({author:d3.selectAll("#joueurB2").property("value"),body:"M2"})
sendMessage({author:d3.selectAll("#joueurB2").property("value"),body:"M2"})
});
d3.selectAll("#G2_joueurB2").on("click", function () {
console.log({author:d3.selectAll("#joueurB2").property("value"),body:"G2"})
sendMessage({author:d3.selectAll("#joueurB2").property("value"),body:"G2"})
});
d3.selectAll("#D3_joueurB2").on("click", function () {
console.log({author:d3.selectAll("#joueurB2").property("value"),body:"D3"})
sendMessage({author:d3.selectAll("#joueurB2").property("value"),body:"D3"})
});
d3.selectAll("#M3_joueurB2").on("click", function () {
console.log({author:d3.selectAll("#joueurB2").property("value"),body:"M3"})
sendMessage({author:d3.selectAll("#joueurB2").property("value"),body:"M3"})
});
d3.selectAll("#G3_joueurB2").on("click", function () {
console.log({author:d3.selectAll("#joueurB2").property("value"),body:"G3"})
sendMessage({author:d3.selectAll("#joueurB2").property("value"),body:"G3"})
});

d3.selectAll("#filet_joueurA2").on("click", function () {
console.log({author:d3.selectAll("#joueurA2").property("value"),body:"filet"})
sendMessage({author:d3.selectAll("#joueurA2").property("value"),body:"filet"})
});
d3.selectAll("#filet_joueurB2").on("click", function () {
console.log({author:d3.selectAll("#joueurB2").property("value"),body:"filet"})
sendMessage({author:d3.selectAll("#joueurB2").property("value"),body:"filet"})
});
d3.selectAll("#dehors_joueurA2").on("click", function () {
console.log({author:d3.selectAll("#joueurA2").property("value"),body:"dehors"})
sendMessage({author:d3.selectAll("#joueurA2").property("value"),body:"dehors"})
});
d3.selectAll("#dehors_joueurB2").on("click", function () {
console.log({author:d3.selectAll("#joueurB2").property("value"),body:"dehors"})
sendMessage({author:d3.selectAll("#joueurB2").property("value"),body:"dehors"})
});

}
Insert cell
console.log(d3.selectAll("#point_joueurA2"))
Insert cell
joueurA_from_url = querystrings.get("joueurA") || "NONE"
Insert cell
joueurB_from_url = querystrings.get("joueurB") || "NONE"
Insert cell
import {querystrings} from "@liris/selecteur"
Insert cell

One platform to build and deploy the best data apps

Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.
Learn more