BlackTecno

@BlackTecno·6 public vizzes

Temperature in San Francisco Line Chart

This line chart visualizes temperature readings in San Francisco over a week, with time on the x-axis and temperature on the y-axis. It renders as an SVG using D3 v5, employing `scaleTime`, `scaleLinear`, `d3.line`, and `axisBottom`/`axisLeft` to draw the path and axes. The data comes from a CSV file loaded via `d3.csv`, with timestamps parsed as dates and temperatures as numbers. Grid lines are created by setting negative tick sizes, and axis labels are styled via CSS classes.

Dec 31, 2019

Loading thumbnail…

Temperature in San Francisco Line Chart

A line chart displays weekly temperature variations in San Francisco, with time on the x-axis and temperature on the y-axis. The visualization uses D3.js v5 to load CSV data, create scales with `d3.scaleTime` and `d3.scaleLinear`, and render an SVG path via `d3.line`. Axes are generated with `d3.axisBottom` and `d3.axisLeft`, and the data is fetched using `d3.csv`. The chart includes labeled axes and a title, with temperature values plotted against timestamps.

Dec 31, 2019

Loading thumbnail…

Temperature in San Francisco Line Chart

This line chart visualizes daily temperature readings in San Francisco over time, with time on the x-axis and temperature on the y-axis. Using D3 v5, the code loads CSV data via `d3.csv`, parses timestamps with `new Date()`, and renders a smooth line through the data points with `d3.line`. The chart includes labeled axes (`d3.axisBottom` and `d3.axisLeft`), tick marks, and a title, all drawn as SVG elements within a fixed 960×500 viewport. Styling uses CSS classes for axis text, tick lines, and the steel-blue line path.

Dec 31, 2019

Loading thumbnail…

Customizing Axes

This horizontal bar chart displays the population of the top 10 most populous countries, using a linear scale for population and a band scale for country names. It customizes axis formatting with `d3.axisBottom` and `.tickFormat` to abbreviate numbers (e.g., "1.42B"), and removes default axis lines. The chart includes interactive checkboxes to toggle country visibility, though the filtering logic is not implemented. Data is loaded from `data.csv` via `d3.csv`, with population values multiplied by 1000. The SVG rendering uses `d3.scaleLinear`, `d3.scaleBand`, and `d3.axisLeft`.

Nov 11, 2019

Loading thumbnail…

Responding to Resize

The chart fills the entire browser viewport using CSS positioning, and an SVG drawing updates its dimensions to match the container’s computed width and height. The visualization draws a large green X spanning the full diagonal of the canvas, with its stroke width and opacity fixed. The code uses `d3.select` and `d3.append` from D3 v5 to create the SVG, and it redraws the X by reading `clientWidth` and `clientHeight` and re-appending line elements whenever the window resizes via the `resize` event listener.

Nov 11, 2019

Loading thumbnail…

Responding to Resize

This example demonstrates how a D3.js visualization can automatically adapt to changes in the browser window’s size. Using CSS to fill the page, the chart extracts its container’s client dimensions and redraws the SVG element accordingly. The code employs `d3.select` and attributes like `attr("width")` to resize the graphic, then draws two intersecting lines forming an X with `style("stroke", "green")`. A `window.addEventListener("resize", redraw)` callback triggers the redraw whenever the viewport changes, ensuring the visualization remains correctly scaled.

Nov 11, 2019