linlala

@Yannahhh·7 public vizzes

LALA ：Challenge 1

This visualization displays the monthly minimum and maximum temperatures for each year from 1997 to 2017, using a grid of colored rectangles where opacity encodes the coldest recorded temperature. The data is sourced from the temperature_daily_1.csv file, and the visualization is rendered as SVG using D3 v5. The code employs d3.scaleBand for the axes, d3.scaleLinear for color opacity mapping, and d3.axisTop/axisLeft to generate the chart structure. A legend with a linearGradient is also included.

Dec 11, 2019

Loading thumbnail…

LALA: Build a bar chart!

This visualization is a simple bar chart that displays the population for a set of countries. It uses D3 version 5 to map the data, with a linear scale for the x-axis and a band scale for the y-axis. The chart is rendered as an SVG, with bars drawn as rectangles and axes added using the `axisLeft` and `axisBottom` functions. The data is loaded from a CSV file.

Dec 11, 2019

Loading thumbnail…

Cars Scatter Plot

This scatter plot visualizes car data from the World (esa.un.org) by rendering each vehicle as a semi-transparent red circle. The visualization encodes the dataset’s two dimensions along linear x and y axes, with tick labels and an axis-label generated from the data’s extent. The code uses d3.csv for data loading, d3.scaleLinear for mapping, and d3.axisLeft and d3.axisBottom for the axes. A linear gradient is defined in the SVG defs, while circles are styled via CSS with fixed red fill and opacity, producing overlapping clusters.

Dec 11, 2019

Loading thumbnail…

Customizing axes

This example demonstrates how to customize axes in a bar chart showing the top 10 most populous countries, with population values formatted from raw numbers (like 200,000,000) into compact abbreviations (200M) using `d3.format`. The visualization removes default axis lines and tick marks, adds grid lines via negative tick sizes, and includes a title and axis labels styled according to a dataviz style guide. Data is loaded from a CSV file using `d3.csv`, and scales (`scaleLinear`, `scaleBand`) and axes (`axisBottom`, `axisLeft`) render the SVG output with custom styling in CSS.

Dec 10, 2019

Loading thumbnail…

LALA: et's make a big face!

A large yellow smiley face is drawn with D3.js, featuring two eyes, rectangular eyebrows, and a mouth created using the `d3.arc` API. The eyebrows animate vertically in a looping sequence using chained `transition` calls with a 2-second duration. The SVG scene is centered via a `g` element, with all shapes positioned relative to the viewport dimensions. The code demonstrates fundamental DOM manipulation through D3 selections and attribute updates.

Dec 10, 2019

Loading thumbnail…

BUILD A BAR CHART

This bar chart example visualizes population data loaded from a CSV file, rendering the values as SVG rectangles within a 960-by-500 pixel viewport. Built with D3 v5, the code uses the `select` and `csv` APIs to fetch and parse the dataset, then applies a `forEach` loop to convert population strings to numbers. The render function is a placeholder, so the chart currently displays no bars, leaving the layout empty. The SVG structure is defined directly in the HTML, with styling handled by an external CSS file.

Dec 9, 2019

Loading thumbnail…

Responding to Resize

This example demonstrates how a D3.js visualization can dynamically respond to browser window resizing. It fills the entire viewport with an SVG element, then draws two green diagonal lines forming an X, with the intersection point shifting as the dimensions change. The code uses a custom `redraw` function that reads the container’s `clientWidth` and `clientHeight` to update the SVG’s width and height attributes, binding new coordinate data to the lines via a data join. A `window` resize event listener triggers `redraw` each time the viewport size changes.

Dec 9, 2019