sale_databy@1.csv
Type Table, then Shift-Enter. Ctrl-space for more options.
csv_data = FileAttachment("sale_databy@1.csv").csv({typed: true})
style = html`<style>
html, body {
font-size: 1.0rem;
}
textarea:focus {
outline: none;
}
.section-header {
padding: 10px 0px 10px 14px;
border-left: 2px solid #60c252;
background-color: #dcffd7;
}
.red {
border-left: 2px solid #c25252;
background-color: #ffd7d7;
}
.blue {
border-left: 2px solid #528cc2;
background-color: #d7e1ff;
}
#chart {
display: flex;
justify-content: center;
align-items: center;
width: ${chartConfig.options.width + 64}px;
height: ${chartConfig.options.height + 64}px;
}
#chart svg {
background-color: #fff;
box-shadow: 0px 0px 8px #cdcdcd;
border-radius: 20px;
}
#chart svg text {
font-size: 1.0em;
}
#chart .axis text tspan {
font-size: 1.6em;
}
#download {
display: inline-block;
padding: 6px 10px 6px 10px;
box-shadow: 0px 0px 5px #cdcdcd;
border: none;
border-radius: 6px;
font-size: 1.0em;
cursor: pointer;
transition: 250ms;
}
#download:hover {
transition: 250ms;
transform: scale(1.025);
}
</style>`
d3.csv.parse(csv)
a=function(error,csvdata){
var str = d3.csv.format( csvdata );
console.log(str.length);
console.log(str);
}
b=d3.csv('sale_databy@1.csv',a)
chartConfig = ({
data: format(d3.csv.parse(csv)),
duration: 750,
options: {
areas: { sort: false },
circles: { labelFactor: 1.1 },
margins: { top: 100, right: 100, bottom: 100, left: 100 },
filter: 'glow',
width: 700,
height: 700,
color: d3.scale.category10()
}
})
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
