image1 = FileAttachment("image@1.png").image()
Inputs.table(data)
Inputs.table(data) ${textcolor('Inputs', d3.schemeTableau10[1])} 집어넣기.${textcolor('table', d3.schemeTableau10[2])}표 형식(${textcolor('data', d3.schemeTableau10[3])}미리 지정했던 데이터)
color = "#76B7B2"
fav = html`<p>텍스트에 <span style="font-weight:bold;color:${color}">${color}</span></p>`
Plot // 플롯은 기본적으로 Observable에서 사용할 수 있습니다.
viewof x = Inputs.select(data.columns)
// change the code to replace … by the field’s name, e.g. body_mass
Plot.dot(data,
{x: "flipper_length", y: "body_mass", //what do we call these? `x ` and `y` are data driven "channels"
fill:"blue", fillOpacity: 0.2}).plot() //꼭 이런건 색을 바꿔봐야 한 느낌이 든단 말이지.
Plot.dot(data, {x: "body_mass", y: "flipper_length", fill: "red", fillOpacity:0.2}).plot({width:width}) // replace … by the field names.
//plot()는 놓인 상태나 부가적인 기능 느낌인데.
char_data=data.filter(d=>d.sex !=="")
char_data
Type Table, then Shift-Enter. Ctrl-space for more options.
// type your code here
Plot.barX(data,
//Transform the options
Plot.groupY(//group the data
{x:"mean"}, //calculation: what is the output --the mean
{y:"species", x:"flipper_length"} //what I'm picking from the data
)
).plot({marginLeft:100,
y:{
label:"",
domain:species_order}}) //내림차순으로 지정하는 방법-함수모음 아래의 정렬 species_order 지정되어 있음
import {tidy, mean, arrange, desc, groupBy, summarize} from "@pbeshai/tidyjs"
species_order=tidy(
data,
groupBy("species",
summarize({mean_length: mean("flipper_length")})),
arrange(desc("mean_length"))
).map(d=>d.species)
Plot.barY(data,
Plot.groupX({
y: "count"}, {
x: "species", fill: "species"
}))
.plot()
// type your code here
Plot.barY(data, Plot.groupX({y: "count"}, {x: "species", fill:"species"}, )).plot({
facet: {
data,
x: "island"
},
marks: [
Plot.frame(),
]
})
Plot.dot(data, Plot.group({r: "count"}, {x: "island", y: "species", fill: "species",fillOpacity:0.8})).plot({
r: {
range: [0, 100] // adjusts the radius scale to make the marks more visible
},
marginLeft: 100,
height: 580,
marginBottom: 100, //marginBottom은 island(x축 제목)와 그래프 사이의 거리
width
})
function gentoobox(content, style ={}){
return {background: '#E15759', color: 'white'};
}
// type your code here
Plot.rectY(data,
Plot.binX({
y: "count"},
{x: "body_mass", fill: "lightgrey"
})).plot() //나누는게 좀 어색한데
Plot.rectY(data, Plot.binX({y: "count"}, {x: "flipper_length"})).plot() //flipper_length를 그룹별로 나눌 수는 없나?
// type your code here
Plot.rectY(data,
Plot.binX({y: "count"},
{x: "body_mass", fill: "species", thresholds: 20}))
.plot({
facet:{
data,
x: "sex",
y: "species",
marginRight: 80
},
marks: [
Plot.frame(),
]
})
Plot.rectY(data, Plot.binX({y: "count"}, {x: "body_mass",fill:"species",thresholds: 20
}))
.plot({
facet:{
data,
x:"sex",
y:"species",
marginRight:80
},
marks:[
Plot.frame()
]
}
)
// type your code here
Plot.plot({
facet: {
data,
x:"sex",
y:"species",
marginRight:80
},
marks: [
Plot.frame(), //그래프 외부의 선
Plot.rectY(data,Plot.binX({y: "count"}, {x: "body_mass",fill:"species",thresholds: 20})),
Plot.tickX(data, Plot.groupZ({x: "median"}, {x: "body_mass"}))
]
})
// type your question here
// type your code here
function answer({
title,
questions = [],
guides = [],
hints = [],
solutions = [],
open = !!showAll
}) {
const div = d3.create("div").classed("answer", true);
if (title) {
div.append("hr");
div.append("h2").html(title);
}
div.call(renderGroup, questions, "question", true, d => md`${d}`);
// div.call(renderGroup, guides, "guide", open, d => md`${d}`);
div.call(renderGuide, guides, "guide", open, d => md`${d}`);
div.call(renderGroup, hints, "hint", open, d => code(d, "hint"));
div.call(renderGroup, solutions, "solution", open, d => code(d, "solution", renderSnippet));
return div.node();
}
function Q(q) {
return Object.assign(answer({
...q,
guides: null,
hints: null,
solutions: null
}), {value: q})
}
function A(q) {
return answer({
...q,
title: null,
questions: null
})
}
function renderGroup(div, group, type, open, render) {
if (group?.length) {
const details = div.append(type==="question" ? "div" : "details");
if (open) details.attr("open", "open")
if (type !== "question") details.append("summary").append("strong").text(`${type}${group.length > 1 ? "s" : ""}`);
details.append("ul").selectAll().data(group).join("li").append(render);
}
}
function renderGuide(div, group, type, open, render) {
if (group?.length) {
const details = div.append("div");
if (open) details.attr("open", "open")
// details.append("span").append("strong").text(`${type}${group.length > 1 ? "s" : ""}`);
details.append("ul").selectAll().data(group).join("li").append(render);
}
}
function renderSnippet(str) {
try {
const func = new Function("data", "Plot", "d3", "width", `return ${str}`)
return func(data, Plot, d3, width);
}
catch(e) {}
}
function code(code, type, visual) {
return html`
<div class="copy">${Copier("Copy", {value: code})}</div>
<textarea class=${type} rows=${rows(code)}>${code}</textarea>
${visual ? visual(code) : ""}`;
}
function rows(code) {
const lines = code.trim().split("\n").length;
return Math.max(Math.min(lines, 15), 2);
}
styles = html`<style>
.answer {
font-family: system-ui, sans-serif;
font-size: 14px;
}
.answer summary strong {
text-transform: capitalize;
}
.answer li {
list-style: none;
position: relative;
}
.answer textarea {
font: var(--monospace-font);
font-size: 12px;
width: 100%;
padding: 5px;
border: 2px solid #3b5fc0;
background: #F6F9FF;
border-radius: 5px;
margin-bottom: 2em;
resize: none;
}
.answer .copy form {
position: absolute;
right: -4px;
top: 4px;
width: initial;
}
.answer summary {
display: inline-block;
padding: 2px 6px;
border: 2px solid #3b5fc0;
background: #F6F9FF;
border-radius: 5px;
margin: 2px 0;
outline-offset: -2px;
list-style: none;
cursor: pointer;
min-width: 62px;
text-align: center;
}
.answer details[open] > summary {
background: #3b5fc0;
color: white;
}
`
html = htl.html
import {Copier} from "@mbostock/pbcopy"
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.