Skip to main content
Log in
M

myskotima130

@myskotima130·11 public vizzes

Loading thumbnail…

Melting Data for Multiple Lines

This chart shows regional population trends from 1950 to 2100, drawing on United Nations population estimates and medium-variant projections. A vertical line marks the year 2020, and a color legend identifies each region. The code uses d3.nest and d3.scaleOrdinal to group and color the data, d3.line with curveBasis for smooth paths, and SVG for rendering. Separate modules handle data melting, the line chart, and the color legend.

Feb 27, 2020
Loading thumbnail…

Line Chart with Multiple Lines

This line chart displays one week of temperature data in degrees Celsius for multiple cities worldwide, sourced from Data Canvas - Sense Your City. Each city is represented as a separate colored line, with a legend identifying the cities, and the chart includes labeled time and temperature axes. The visualization uses D3 v5 with SVG rendering, employing `scaleTime`, `scaleLinear`, and `scaleOrdinal` for scales, `line` with `curveBasis` for smooth paths, and `nest` to group data by city. Axes are generated with `axisBottom` and `axisLeft`, while a custom `colorLegend` function renders the color-coded legend.

Feb 26, 2020
Loading thumbnail…

Cars Scatter Plot

This scatter plot visualizes car data from the UCI Machine Learning Repository’s Auto MPG dataset, displaying horsepower versus weight. The visualization uses D3 v5 with SVG rendering, employing `scaleLinear` and `scaleTime` for axes, along with `axisLeft` and `axisBottom` to create labeled time and temperature scales. Data is loaded via D3’s `csv` method and mapped to circle elements with red fill and partial opacity. The chart includes a title, axis labels, and a grid generated through tick size settings.

Feb 25, 2020
Loading thumbnail…

Customizing Axes

This example presents a scatter plot of the auto-mpg dataset, showing the relationship between horsepower and miles per gallon. It highlights how D3 axes can be customized using `d3.axisBottom` and `d3.axisLeft` with custom tick formatting via `format('.3s')`, tick sizes that extend across the chart, and removed domain lines. The chart also includes a title and an axis label, with scales built using `d3.scaleLinear` and `d3.extent`. Data is loaded from a remote CSV file.

Feb 25, 2020
Loading thumbnail…

Cars Scatter Plot

This scatter plot visualizes the relationship between horsepower and weight for 398 cars from the UCI Machine Learning Repository’s Auto MPG dataset. Each red circle represents a car, positioned by its horsepower on the x-axis and weight on the y-axis, with axis labels and a title. Built with D3.js v5, the code uses `csv`, `scaleLinear`, `extent`, `axisBottom`, and `axisLeft` to load data, scale domains, and render axes. The SVG output is styled via CSS, with circles at 10px radius and semi-transparent opacity.

Feb 25, 2020
Loading thumbnail…

Customizing Axes

This bar chart displays the top 10 most populous countries using 2018 estimates from the United Nations World Population Prospects. It builds on a basic bar chart by customizing D3 axes. The chart employs `d3.scaleLinear` and `d3.scaleBand` for scales, then calls `d3.axisLeft` and `d3.axisBottom` to render y- and x-axes. Styling includes large tick labels, colored tick lines, and axis labels via CSS classes, with bars colored steelblue.

Feb 25, 2020
Loading thumbnail…

Responding to Resize

This example demonstrates how a D3.js visualization can respond to browser window resizing. It uses a CSS-styled container that fills the viewport, and a redraw function extracts the container’s current clientWidth and clientHeight to update the SVG dimensions. Two green, semi-transparent lines are drawn across the full width and height to form an X, visually confirming the resized area. The code relies on window.addEventListener("resize", redraw) and D3’s selection.merge pattern to update the existing line elements efficiently.

Feb 25, 2020
Loading thumbnail…

Responding to Resize

This example demonstrates how a D3.js visualization can adapt to browser window resizing by redrawing an SVG to match its container’s current dimensions. It uses a fixed-position div and extracts `clientWidth` and `clientHeight` on each resize event, then updates the SVG’s width and height attributes accordingly. The redraw function binds two line elements to render a green X that spans the full chart area, with the lines’ coordinates recalculated from the new size. The code relies on D3 v5’s selection, data join, and merge patterns, along with a standard `window` resize listener to trigger the update.

Feb 25, 2020
Loading thumbnail…

Cars Scatter Plot

This scatter plot displays car data from the UCI Machine Learning Repository’s Auto MPG dataset, plotting temperature against time for a week in San Francisco. The visualization uses D3 v5 to render an SVG with linear and time scales, axis generators from `d3.axisLeft` and `d3.axisBottom`, and a basis curve line generator. Data is loaded asynchronously from a CSV file using `d3.csv`, with a steely blue line path and labeled axes.

Feb 17, 2020
Loading thumbnail…

Temperature in San Francisco Line Chart

This line chart visualizes one week of temperature data in San Francisco, with time on the x-axis and temperature in degrees Celsius on the y-axis. The chart is rendered as an SVG using D3 v5, employing `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `line` with `curveBasis` for a smooth curve. The data is loaded from a CSV file hosted on VizHub, which originates from the Data Canvas - Sense Your City initiative. Custom styles define the title, axis labels, and maroon line with a steelblue hover state.

Feb 17, 2020
Loading thumbnail…

Temperature in San Francisco Line Chart

This line chart displays one week of temperature data in San Francisco, plotted over time using a smooth basis curve. The visualization uses D3 v5 APIs including `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `line` with `curveBasis` to render the SVG path. Data is loaded from a CSV file hosted on VizHub, with timestamps parsed as dates and temperatures converted to numeric values. The chart includes labeled axes, gridlines, and a title, with a maroon stroke highlighting the temperature trend.

Feb 17, 2020