Published
Edited
Nov 16, 2020
1 fork
Insert cell
md`# Histogram for exploratory data analysis`
Insert cell
zomato = FileAttachment("zomato_updated_currency.csv").csv()
Insert cell
zomato_final = aq
.from(zomato)
.select("Country", "AverageCostfortwoUSD", "Pricerange", "Aggregaterating")
.objects()
Insert cell
pricerange_data = zomato_final.filter(d => d['Country'] == c)
Insert cell
pricerange_count = d3
.nest()
.key(d => d.Pricerange)
.sortKeys(d3.ascending)
.rollup(v => v.length)
.entries(pricerange_data)
.sort(d => d.key)
Insert cell
uniq_range = _.uniqBy(pricerange_count, d => d.key).map(d => d.key)
Insert cell
maxCount = d3.max(pricerange_count, d => d.value)
Insert cell
xScale = d3.scaleBand()
.domain([1, 2, 3, 4])
.range([margin.left, width - margin.right])
Insert cell
yScale = d3.scaleLinear()
.domain([0, maxCount])
.range([height - margin.bottom, margin.top])
Insert cell
xAxis = g => g
.attr("transform", `translate(0,${height - margin.bottom})`)
.call(d3.axisBottom(xScale))
Insert cell
yAxis = g => g
.attr("transform", `translate(${margin.left},0)`)
.call(d3.axisLeft(yScale))
Insert cell
viewof c = select(_.uniqBy(zomato_final.map(d => d['Country'])))
Insert cell
chart = {
const svg = d3.create("svg")
.attr("width", width)
.attr("height", height)
.attr("viewBox", [-100, -100, width + 200, height + 200]);
svg.append("g").attr("transform", "translate(30, 0)")
.call(d3.axisLeft().scale(yScale))
svg.append("g").attr("transform", "translate(0, 480)")
.call(d3.axisBottom().scale(xScale))
svg.selectAll("rect")
.data(pricerange_count)
.join(enter => enter.append("rect"))
.attr("x", d => xScale(d.key))
.attr("y", d => yScale(d.value))
.attr("fill", "steelblue")
.attr("width", xScale.bandwidth())
.attr("height", d => yScale(0) - yScale(d.value))
const xlabel = svg
.append("text")
.attr("class", "chart_title")
.attr("x", width / 2)
.attr("y", height + 50)
.text(`Price Range Ranking`)
.style("text-anchor", "middle");
const ylabel = svg
.append("text")
.attr("y", margin.left / 2 - 50)
.attr("x", -250)
.text(`Frequency`)
.attr('transform', "rotate(-90)")
.style("text-anchor", "middle");
return svg.node()
}
Insert cell
Insert cell
d3 = require("d3@v5")
Insert cell
import { aq, op } from "@uwdata/arquero"
Insert cell
import { select } from "@jashkenas/inputs"
Insert cell
_ = require("lodash")
Insert cell
margin = ({top: 20, right: 30, bottom: 30, left: 40})
Insert cell
width = 954
Insert cell
height = 500
Insert cell

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.
Learn more